@synerise/ds-search 1.5.35 → 1.5.36

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.36](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.5.35...@synerise/ds-search@1.5.36) (2026-08-13)
+
+### Bug Fixes
+
+- **search:** render expanded when mounted with a value ([6d0fe1d](https://github.com/Synerise/synerise-design/commit/6d0fe1d3673934f1044a152faeab292fcb9501b3))
+
 ## [1.5.35](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.5.34...@synerise/ds-search@1.5.35) (2026-08-11)
 
 **Note:** Version bump only for package @synerise/ds-search

package/CLAUDE.md

@@ -11,10 +11,7 @@ src/
  Search.styles.tsx — styled-components for wrapper, dropdown, input, filter label, clear button
  const.ts — numeric constants (offsets, animation durations)
  index.ts — public exports
- modules.d.ts —less module declaration
- style/
- index.less — component base styles
- input.mixin.less — input mixin
+ modules.d.ts — testing-library/jest-dom ambient import
  Elements/
  index.ts — re-exports sub-components
  SearchInput/
@@ -247,7 +244,7 @@ import { SearchInput } from '@synerise/ds-search';
 ## Styling
 
 - `Search.styles.tsx` contains all styled-components; no CSS Modules.
-- `SearchWrapper` receives `$width` (px) and `inputOpen` to toggle `width: 32px` vs full width.
+- `SearchWrapper` receives `$width` (px) and `inputOpen` to toggle `width: 32px` vs `$width`. Note it emits no width rule at all when `$width` is falsy, so without `width`/`searchWidth` the component never collapses.
 - `SearchInputContent` transitions `width: 0 → 100%` over `ANIMATION_DURATION` (0.1s) using `direction: rtl` for right-to-left expansion animation.
 - `SearchInner` applies blue border (`palette['blue-600']`) and blue background (`palette['blue-050']`) when `hasValue` or `alwaysHighlight`.
 - `Filter` chip is capped at `MAX_FILTER_WIDTH = 120px` and uses `palette['blue-600']` color.
@@ -263,7 +260,7 @@ import { SearchInput } from '@synerise/ds-search';
 - `@synerise/ds-tooltip` — wraps the search input and provides section header tooltips
 - `@synerise/ds-menu` — wraps items when `renderInMenu=true` (deprecated path)
 - `@synerise/ds-list-item` (`ListContextProvider`) — wraps items when `renderInMenu=false`
-- `antd/lib/input` — base `Input` component inside `SearchInput`
+No antd — `SearchInput` renders a DS-native styled `input` (`S.SearchNativeInput`), which owns its own border/radius/background/focus chrome.
 
 ## Implementation notes
 
@@ -273,6 +270,7 @@ import { SearchInput } from '@synerise/ds-search';
 - **Arrow-key navigation**: `focusWithArrowKeys` from `ds-utils` moves focus across `.ds-search-item` elements; pressing Up when at the top returns focus to the input via `setFocusInputTrigger`.
 - **`toggleTrigger` / `focusTrigger`** on `SearchInput` are boolean flip-flops — the component reacts to a change in value (via `usePrevious`), not to the value itself.
 - **`width` prop is deprecated** — `searchWidth` is the current prop; both set the same `mergedWidth` internal variable.
+- **Two components own the expanded width, and their formulas must match.** `SearchWrapper` (in `Search`) sets the outer width from `isExpanded = isOpen || !!value || !!label || !!alwaysExpanded`; `SearchInputContent` (in `SearchInput`) sets the inner width from `renderInputOpened = isInputOpen || !!value || !!filterLabel`. When the two disagree the 32px wrapper clips a `width: 100%` input — which is exactly what happened while `Search` initialised `isOpen` to a bare `false`: mounting with a value (or `alwaysExpanded`, or a value arriving after mount) painted a 32px stub until the first click. Keep both as derived expressions; do not reintroduce a second piece of state for "is it open". Note also that `handleClearValue` in `Search` must `setIsOpen(true)` because the clear button is a *sibling* of the input content, so clearing never reaches `handleInputClick`, while `SearchInput.handleClearValue` deliberately stays open and refocuses.
 - **Gesture-aware outside-click collapse**: both `SearchInput` and `Search` keep the default `useOnClickOutside` events (`mousedown`/`touchstart`) so the "should I close?" decision still happens at gesture start — but the state change that triggers the CSS width animation is deferred to the matching `mouseup`/`touchend` via a document-level one-shot listener tracked in `pendingCloseCleanupRef` (cleaned up on unmount or on a repeat mousedown). Rationale: firing the collapse on `mousedown` would shift adjacent layout between mousedown and mouseup, causing the browser to miss the `click` on the neighbouring element. A `['click']`-only variant was tried and rejected because some host apps cancel/stop-propagation on click events before they reach `document`, which breaks the close entirely.
 - **`getParametersScrollTop` takes `hasRecentTitle`**: callers must pass `hasRecentTitle: !!recentDisplayProps.title` so the function only subtracts `LIST_HEADER_HEIGHT` when the recent section actually renders a header. Without this, the parameters list scrolls 42 px out of sync when the recent section has no title.
 - `AnyObject = Record<string, any>` is used throughout for item shapes; TypeScript generics at the `Search` level provide partial type safety but `itemRender` and internal utilities rely on `any`.

package/dist/Search.js

@@ -55,11 +55,13 @@ function Search({
   const [filteredSuggestions, setFilteredSuggestions] = useState(suggestions ?? null);
   const [isListVisible, setIsListVisible] = useState(false);
   const [isResultChosen, setIsResultChosen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const [toggleInputTrigger, setToggleInputTrigger] = useState(false);
   const [focusInputTrigger, setFocusInputTrigger] = useState(false);
   const [scrollbarScrollTop, setScrollbarScrollTop] = useState(0);
   const [moveCursorToEnd, setMoveCursorToEnd] = useState(true);
-  const [itemsListWidth, setItemsListWidth] = useState(width || searchWidth ? (width || searchWidth) - MENU_WIDTH_OFFSET : 0);
+  const mergedWidth = searchWidth !== void 0 ? searchWidth : width;
+  const [itemsListWidth, setItemsListWidth] = useState(mergedWidth ? Math.max(0, mergedWidth - MENU_WIDTH_OFFSET) : 0);
   useEffect(() => {
     if (parameterValue) {
       const found = parameters.find((param) => param[textLookupConfig.parameters] === parameterValue);
@@ -82,9 +84,8 @@ function Search({
     }
   }, [suggestions, value, textLookupConfig.suggestions]);
   useEffect(() => {
-    const newWidth = (width || searchWidth || 0) - MENU_WIDTH_OFFSET;
-    setItemsListWidth(Math.max(0, newWidth));
-  }, [width, searchWidth]);
+    setItemsListWidth(Math.max(0, (mergedWidth || 0) - MENU_WIDTH_OFFSET));
+  }, [mergedWidth]);
   useEffect(() => {
     if (hideLabel) {
       setLabel(null);
@@ -108,29 +109,28 @@ function Search({
   const handleDropdownClick = () => {
     setFocusInputTrigger((prev) => !prev);
   };
-  const mergedWidth = searchWidth !== void 0 ? searchWidth : width;
+  const isExpanded = isOpen || !!value || !!label || !!alwaysExpanded;
   const onKeyDown = (event) => {
-    if (event.key === "Backspace" && value === "" && isOpen) {
+    if (event.key === "Backspace" && value === "" && isExpanded) {
       setLabel(null);
       setFilteredRecent(recent);
       onParameterValueChange?.("", null);
       return;
     }
-    if (event.key === "Enter" && isOpen) {
+    if (event.key === "Enter" && isExpanded) {
       setIsResultChosen(!!value);
     }
     setMoveCursorToEnd(false);
   };
   const getSearchWrapperWidth = () => {
-    if (width) {
-      return width - MENU_WIDTH_OFFSET;
+    if (mergedWidth) {
+      return Math.max(0, mergedWidth - MENU_WIDTH_OFFSET);
     }
     if (wrapperRef.current && wrapperRef.current.clientWidth > MENU_WIDTH_OFFSET) {
       return wrapperRef.current.clientWidth - MENU_WIDTH_OFFSET;
     }
     return 0;
   };
-  const [isOpen, setIsOpen] = useState(false);
   const pendingCloseCleanupRef = useRef(null);
   useEffect(() => () => {
     pendingCloseCleanupRef.current?.();
@@ -159,6 +159,7 @@ function Search({
     setFilteredParameters(parameters);
     setFilteredSuggestions(suggestions ?? null);
     setIsResultChosen(false);
+    setIsOpen(true);
   };
   const handleChange = (currentValue) => {
     onValueChange?.(currentValue);
@@ -230,9 +231,9 @@ function Search({
     };
     return /* @__PURE__ */ jsx(SearchInput, { alwaysHighlight: true, clearTooltip, searchTooltipProps, filterLookupKey, textLookupKey: String(textLookupConfig.parameters), filterLabel: label, focusTrigger: focusInputTrigger, onButtonClick: handleButtonClick, onChange: handleChange, onClear: handleClearValue, onClick: handleInputClick, onKeyDown, onToggle: handleToggle, placeholder, toggleTrigger: toggleInputTrigger, value, moveCursorToEnd, disableInput, inputProps, alwaysExpanded, closeOnClickOutside: !alwaysExpanded && !isListVisible && !value && !label });
   };
-  return /* @__PURE__ */ jsxs(SearchWrapper, { ref: wrapperRef, className: "SearchWrapper", inputOpen: isOpen, $width: mergedWidth, onKeyDown: handleKeyDownWrapper, style, children: [
+  return /* @__PURE__ */ jsxs(SearchWrapper, { ref: wrapperRef, className: "SearchWrapper", inputOpen: isExpanded, $width: mergedWidth, onKeyDown: handleKeyDownWrapper, style, children: [
     renderInputWrapper(),
-    isListVisible && /* @__PURE__ */ jsx(SearchDropdownWrapper, { dropdownWidth, onClick: handleDropdownClick, children: /* @__PURE__ */ jsx(SearchDropdownContent, { maxHeight: dropdownMaxHeight, className: isOpen && !isResultChosen && isListItemRendered() ? "search-list-open" : "", children: /* @__PURE__ */ jsxs(Scrollbar, { absolute: true, maxHeight: dropdownMaxHeight - SCROLLBAR_HEIGHT_OFFSET, onScroll: handleScroll, children: [
+    isListVisible && /* @__PURE__ */ jsx(SearchDropdownWrapper, { dropdownWidth, onClick: handleDropdownClick, children: /* @__PURE__ */ jsx(SearchDropdownContent, { maxHeight: dropdownMaxHeight, className: isExpanded && !isResultChosen && isListItemRendered() ? "search-list-open" : "", children: /* @__PURE__ */ jsxs(Scrollbar, { absolute: true, maxHeight: dropdownMaxHeight - SCROLLBAR_HEIGHT_OFFSET, onScroll: handleScroll, children: [
       shouldRenderRecent && /* @__PURE__ */ jsx(SearchRenderer, { data: filteredRecent, highlight: value, width: widthDropdownSearch, onItemClick: (item) => selectResult(item, SelectResultDataKeys.RECENT), ...recentDisplayProps }),
       !!filteredParameters?.length && !!filteredRecent?.length && !label && divider,
       shouldRenderParameters && /* @__PURE__ */ jsx(SearchRenderer, { data: filteredParameters, highlight: value, width: widthDropdownSearch, height: dropdownMaxHeight, listProps: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search",
-  "version": "1.5.35",
+  "version": "1.5.36",
   "description": "Search UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -58,5 +58,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
+  "gitHead": "0a103024461277b2f410e19a88d437764017c1d1"
 }