@synerise/ds-autocomplete 1.2.53 → 1.2.55

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.55](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@1.2.54...@synerise/ds-autocomplete@1.2.55) (2026-08-14)
+
+### Bug Fixes
+
+- **autocomplete:** show suggestions that arrive after the request empties the list ([dbffe88](https://github.com/Synerise/synerise-design/commit/dbffe886b12ac5c00270302171c0e06320b6d64a))
+
+## [1.2.54](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@1.2.53...@synerise/ds-autocomplete@1.2.54) (2026-08-13)
+
+**Note:** Version bump only for package @synerise/ds-autocomplete
+
 ## [1.2.53](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@1.2.52...@synerise/ds-autocomplete@1.2.53) (2026-08-11)
 
 **Note:** Version bump only for package @synerise/ds-autocomplete

package/CLAUDE.md

@@ -29,11 +29,12 @@ src/
 
 ## Architecture (native rewrite)
 
-- The trigger is a styled native `<input role="combobox">` (`S.NativeInput`), autosized via `useAutosizeWidth` from `@synerise/ds-input` (hidden `<span>` sizer; `stretchToFit` via `useStretchToFit`).
-- The dropdown is `@synerise/ds-dropdown` (`asChild`, `size="match-trigger"`), controlled via `open`/`onOpenChange`. **`trigger={[]}`** — Autocomplete owns the open state through the input's focus/click/change handlers, so ds-dropdown is used only for positioning + outside-dismiss and does **not** toggle on trigger click (delegating the toggle to ds-dropdown as well double-fired against the focus-open and flashed the panel open→closed on re-click). The overlay (`AutocompleteDropdown`) renders the options with `SearchItems` (react-window) → `@synerise/ds-list-item` `ListItem`s inside `@synerise/ds-scrollbar`.
-- The component does **not** filter options — it renders `options` (or the children-derived list) as given; the consumer filters via `onSearch`.
+- The trigger is a styled native `<input role="combobox">` (`S.NativeInput`), autosized via `useAutosizeWidth` from `@synerise/ds-input` (hidden `<span>` sizer).
+- The dropdown is `@synerise/ds-dropdown` (`asChild`, `size="match-trigger"`), controlled via `open`/`onOpenChange`. **`trigger={[]}`** — Autocomplete owns the open state through the input's focus/click/change handlers, so ds-dropdown is used only for positioning + outside-dismiss and does **not** toggle on trigger click (delegating the toggle to ds-dropdown as well double-fired against the focus-open and flashed the panel open→closed on re-click). The overlay (`AutocompleteDropdown`) renders `@synerise/ds-list-item` `ListItem`s inside `@synerise/ds-scrollbar`.
+- The dropdown is gated on having something to show (`hasDropdownContent`), but that gate must never feed back into the component's own open state — see the `dropdownOpen` note under Implementation notes.
+- The component does **not** filter options by default — it renders `options` (or the children-derived list) as given and the consumer filters via `onSearch`. Opt into client-side filtering with `filterOption`.
 - Keyboard navigation is delegated to `@synerise/ds-dropdown`'s built-in floating-ui list navigation (`useListNavigation`): ArrowDown/Up move focus through the `ListItem`s and the focused item selects on Enter/click (ds-list-item's own keydown handler). Autocomplete does **not** keep a second manual highlight — that produced a duplicate active row offset from the real focused one. As antd parity for `defaultActiveFirstOption` (default `true`), an input-level Enter handler selects the first enabled option when Enter is pressed *before* arrow-navigating into the list (once arrowed, focus is on the item so that handler no longer fires).
-- `Autocomplete.Option` is a marker that renders `null`; `getOptionsFromChildren` reads `value`/`children`(→`label`) off direct `Option` children when `options` is not provided.
+- `Autocomplete.Option` is a marker that renders `null`; `getOptionsFromChildren` reads `value`/`children`(→`label`) off `Option` children when `options` is not provided. Recognition does **not** rely on reference equality — see Implementation notes.
 
 ## Public exports
 
@@ -167,13 +168,14 @@ The dropdown overlay keeps class `ds-autocomplete-dropdown ps__child--consume` (
 ## Key dependencies
 
 - `@synerise/ds-dropdown` — floating dropdown wrapper (`open`/`onOpenChange`/`placement`/`overlay`/`asChild`/`trigger`/`getPopupContainer`/`size="match-trigger"`)
-- `@synerise/ds-search` — `SearchItems` (react-window virtualised list) renders the option rows
 - `@synerise/ds-list-item` — `ListItem` rows + `ListItemProps`
 - `@synerise/ds-scrollbar` — `Scrollbar` wrapping the option list
 - `@synerise/ds-form-field` — provides label, description, error, tooltip layout
-- `@synerise/ds-input` — provides `useAutosizeWidth`, `useStretchToFit`, `SIZER_STYLE`, `autoresizeConfObjToCss`
+- `@synerise/ds-input` — provides `useAutosizeWidth`, `SIZER_STYLE`, `autoresizeConfObjToCss`
 - `@synerise/ds-tooltip` — wraps `icon1`/`icon2` when tooltip props are provided
-- `@synerise/ds-utils` — used transitively (no direct import in the rewrite)
+
+> `@synerise/ds-search` and `@synerise/ds-utils` are still declared in `package.json` but no longer
+> imported — the rewrite dropped the `SearchItems`/react-window overlay in favour of plain `ListItem`s.
 
 > **No `antd` dependency** — antd was removed from `peerDependencies` and from all `src` imports/`.ant-*` selectors as part of the antd-removal effort.
 
@@ -183,7 +185,10 @@ The dropdown overlay keeps class `ds-autocomplete-dropdown ps__child--consume` (
 - **Icon count adjusts input padding** — When icons are present, `NativeInput` adds right-padding `getIconsWidth(iconCount)` so the value never overlaps the icons. Clicking the icons focuses the input (`handleIconsClick`).
 - **Controlled visibility** — `open` + `onDropdownVisibleChange` map directly to `ds-dropdown`'s `open`/`onOpenChange`. When `open` is omitted, internal state drives it; focus/typing/click **opens** (never toggles), select/Escape/outside-click closes. Opening is idempotent (each handler only calls `setOpen(true)` when closed), so no single interaction can open-then-close.
 - **Keyboard nav** — delegated to `@synerise/ds-dropdown`'s floating-ui list navigation (not a local `activeIndex`). ArrowDown/Up move DOM focus through the `ListItem`s; the focused item selects on Enter/click via ds-list-item's own keydown. `defaultActiveFirstOption` (default `true`) adds an input-level Enter handler that selects the first enabled option when Enter is pressed before arrow-navigating (once focus is on an item, that handler no longer fires — no double-select).
-- **Options precedence** — the `options` prop wins; only when it's empty/absent are `<Autocomplete.Option>` children parsed (`getOptionsFromChildren`).
+- **Options precedence** — the `options` prop wins; only when it's empty/absent are `<Autocomplete.Option>` children parsed (`getOptionsFromChildren`). Note that an explicit `options={[]}` therefore falls *through* to children; several internal callers (`ds-form` `EditableList`, `ds-factors` `FactorValue/Text`) spread an opaque props bag alongside children, so this precedence is deliberate.
+- **Option children are matched structurally, not by reference** — `getOptionsFromChildren` accepts a child whose type is `Option`, carries the static `isAutocompleteOption` flag, or has `displayName === 'Autocomplete.Option'`, and it descends into Fragments and nested arrays. Reference equality alone silently dropped every option whenever the consumer resolved a second copy of the package, mocked the module, or wrapped `Option` in `memo`. An option declared with only a `key` falls back to that key as its `value` (antd/rc-select parity).
+- **The overlay height is measured, never assumed** — `AutocompleteDropdown` caps the scroll area at the summed height of the first `visibleRows` *rendered* rows, and applies no cap at all when there are fewer options than that. A row is content-sized (`label` accepts any `ReactNode`, so an avatar or a second line makes it far taller than a plain text row), so the previous fixed `rowHeight * count` cap clipped any list whose options rendered taller than 32px — a single match showed as a sliced row.
+- **The content gate must not write back into `isOpen`** — the dropdown is opened with `dropdownOpen = isOpen && hasDropdownContent`, but `onOpenChange` goes to `handleDropdownOpenChange`, which drops any callback carrying the value we just passed down. `ds-dropdown`'s `useDropdownVisibility` echoes a controlled `open` change straight back through `onOpenChange`; honouring that echo latched the panel shut on server-side search (the request empties the options, the echo closes the component, and the arriving response can no longer reopen it). Only callbacks that *disagree* with `dropdownOpen` — i.e. genuine dismissals — reach `setOpen`.
 - **`handleInputRef` is native now** — receives `MutableRefObject<AutocompleteInputHandle | null>` where `AutocompleteInputHandle = { focus, blur, input }`, replacing the antd `RefSelectProps`.
 - **`autoResize`** — `useAutosizeWidth` writes the content-box width onto the `<input>`; `useStretchToFit` clamps `max-width` to the wrapper when `stretchToFit` is set (capturing/restoring `scrollLeft`). `AUTOSIZE_EXTRA_WIDTH = 27` (+ icon width) is the `extraWidth`.
 - **`getPopupContainer` defaults to parent node** — `getParentNode` mounts the dropdown as a sibling of the trigger (not `document.body`), avoiding z-index stacking issues.

package/dist/Autocomplete.d.ts

@@ -5,6 +5,7 @@ declare const Autocomplete: {
     Option: {
         (_props: import('./Option').OptionProps): null;
         displayName: string;
+        isAutocompleteOption: boolean;
     };
 };
 export default Autocomplete;

package/dist/Autocomplete.js

@@ -179,11 +179,18 @@ const Autocomplete = ({
   }, [handleIconsClick, icon1, icon2, icon1Tooltip, icon2Tooltip]);
   const showClear = !!allowClear && !isDisabled && currentValue !== "";
   const hasDropdownContent = displayedOptions.length > 0 || notFoundContent !== void 0 && notFoundContent !== null;
+  const dropdownOpen = isOpen && hasDropdownContent;
+  const handleDropdownOpenChange = useCallback((nextOpen) => {
+    if (nextOpen === dropdownOpen) {
+      return;
+    }
+    setOpen(nextOpen);
+  }, [dropdownOpen, setOpen]);
   return /* @__PURE__ */ jsx(AutocompleteWrapper, { autoResize, style, className: `ds-autocomplete ${className || ""}`, children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, description, errorText, id, children: /* @__PURE__ */ jsx(ComponentWrapper, { readOnly, error: !!errorText || error, iconCount, children: /* @__PURE__ */ jsx(
     Dropdown,
     {
-      open: isOpen && hasDropdownContent,
-      onOpenChange: setOpen,
+      open: dropdownOpen,
+      onOpenChange: handleDropdownOpenChange,
       disabled: isDisabled,
       placement,
       size: "match-trigger",

package/dist/AutocompleteDropdown/AutocompleteDropdown.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { AutocompleteDropdownProps } from './AutocompleteDropdown.types';
-declare const AutocompleteDropdown: ({ options, notFoundContent, visibleRows, rowHeight, onSelect, }: AutocompleteDropdownProps) => React.JSX.Element;
+declare const AutocompleteDropdown: ({ options, notFoundContent, visibleRows, onSelect, }: AutocompleteDropdownProps) => React.JSX.Element;
 export default AutocompleteDropdown;

package/dist/AutocompleteDropdown/AutocompleteDropdown.js

@@ -1,20 +1,25 @@
 import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useLayoutEffect } from "react";
 import Scrollbar from "@synerise/ds-scrollbar";
 import { DropdownWrapper, NotFound, ScrollList, Inner, ListItem } from "./AutocompleteDropdown.style.js";
-const DEFAULT_ROW_HEIGHT = 32;
 const DEFAULT_VISIBLE_ROWS = 10;
 const AutocompleteDropdown = ({
   options,
   notFoundContent,
   visibleRows = DEFAULT_VISIBLE_ROWS,
-  rowHeight = DEFAULT_ROW_HEIGHT,
   onSelect
 }) => {
+  const innerRef = useRef(null);
+  const [maxHeight, setMaxHeight] = useState(void 0);
+  useLayoutEffect(() => {
+    const rows = Array.from(innerRef.current?.children ?? []);
+    const next = rows.length > visibleRows ? rows.slice(0, visibleRows).reduce((total, row) => total + row.offsetHeight, 0) : void 0;
+    setMaxHeight((current) => current === next ? current : next);
+  }, [options, visibleRows]);
   if (options.length === 0) {
     return /* @__PURE__ */ jsx(DropdownWrapper, { children: /* @__PURE__ */ jsx(NotFound, { "data-testid": "autocomplete-not-found", children: notFoundContent }) });
   }
-  const maxHeight = Math.min(visibleRows, options.length) * rowHeight;
-  return /* @__PURE__ */ jsx(DropdownWrapper, { children: /* @__PURE__ */ jsx(ScrollList, { children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight, children: /* @__PURE__ */ jsx(Inner, { children: options.map((option) => /* @__PURE__ */ jsx(ListItem, { role: "option", "data-testid": "autocomplete-option", text: option.label ?? option.value, disabled: option.disabled, onClick: () => {
+  return /* @__PURE__ */ jsx(DropdownWrapper, { children: /* @__PURE__ */ jsx(ScrollList, { children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight, children: /* @__PURE__ */ jsx(Inner, { ref: innerRef, children: options.map((option) => /* @__PURE__ */ jsx(ListItem, { role: "option", "data-testid": "autocomplete-option", text: option.label ?? option.value, disabled: option.disabled, onClick: () => {
     if (!option.disabled) {
       onSelect(option.value);
     }

package/dist/AutocompleteDropdown/AutocompleteDropdown.types.d.ts

@@ -4,6 +4,5 @@ export type AutocompleteDropdownProps = {
     options: AutocompleteOption[];
     notFoundContent?: ReactNode;
     visibleRows?: number;
-    rowHeight?: number;
     onSelect: (value: string) => void;
 };

package/dist/Option.d.ts

@@ -12,4 +12,5 @@ export type OptionProps = {
 export declare const Option: {
     (_props: OptionProps): null;
     displayName: string;
+    isAutocompleteOption: boolean;
 };

package/dist/Option.js

@@ -1,5 +1,6 @@
 const Option = (_props) => null;
 Option.displayName = "Autocomplete.Option";
+Option.isAutocompleteOption = true;
 export {
   Option
 };

package/dist/utils/getOptionsFromChildren.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { AutocompleteOption } from '../Autocomplete.types';
 /**
- * Maps declarative `<Autocomplete.Option>` children to the internal option
- * shape. Only direct `Option` children are considered; anything else is ignored.
+ * Maps declarative `<Autocomplete.Option>` children to the internal option shape.
+ * Fragments and nested arrays are traversed; anything else is ignored.
  */
 export declare const getOptionsFromChildren: (children: ReactNode) => AutocompleteOption[];

package/dist/utils/getOptionsFromChildren.js

@@ -1,22 +1,42 @@
-import { Children, isValidElement } from "react";
+import { Children, isValidElement, Fragment } from "react";
 import { Option } from "../Option.js";
+const isOptionElement = (child) => {
+  if (child.type === Option) {
+    return true;
+  }
+  const marker = child.type;
+  return marker?.isAutocompleteOption === true || marker?.displayName === Option.displayName;
+};
 const getOptionsFromChildren = (children) => {
   const options = [];
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child) || child.type !== Option) {
-      return;
-    }
-    const {
-      value,
-      disabled,
-      children: label
-    } = child.props;
-    options.push({
-      value,
-      disabled,
-      label
+  const collect = (nodes) => {
+    Children.forEach(nodes, (child) => {
+      if (!isValidElement(child)) {
+        return;
+      }
+      if (child.type === Fragment) {
+        collect(child.props.children);
+        return;
+      }
+      if (!isOptionElement(child)) {
+        return;
+      }
+      const {
+        value,
+        disabled,
+        children: label
+      } = child.props;
+      if (value === void 0 && child.key === null) {
+        return;
+      }
+      options.push({
+        value: value !== void 0 ? value : String(child.key),
+        disabled,
+        label
+      });
     });
-  });
+  };
+  collect(children);
   return options;
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-autocomplete",
-  "version": "1.2.53",
+  "version": "1.2.55",
   "description": "Autocomplete UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -42,12 +42,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^1.3.22",
+    "@synerise/ds-dropdown": "^1.3.23",
     "@synerise/ds-form-field": "^1.3.25",
-    "@synerise/ds-input": "^1.8.0",
-    "@synerise/ds-list-item": "^1.6.3",
+    "@synerise/ds-input": "^1.8.1",
+    "@synerise/ds-list-item": "^1.6.4",
     "@synerise/ds-scrollbar": "^1.5.2",
-    "@synerise/ds-search": "^1.5.35",
+    "@synerise/ds-search": "^1.5.37",
     "@synerise/ds-tooltip": "^1.5.5",
     "@synerise/ds-utils": "^1.10.2"
   },
@@ -57,5 +57,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
+  "gitHead": "fbaec1b62812804ecab17db27553c2071c7bad49"
 }