@noya-app/noya-designsystem 0.1.74 → 0.1.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,7 +23,7 @@
     "@base-ui-components/react": "1.0.0-beta.4",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.31",
+    "@noya-app/noya-colorpicker": "0.1.32",
     "@noya-app/noya-utils": "0.1.9",
     "@noya-app/noya-geometry": "0.1.16",
     "@noya-app/noya-icons": "0.1.16",

package/src/__tests__/combobox.test.ts

@@ -156,6 +156,24 @@ test("resets state", () => {
   expect(snapshot.selectedIndex).toBe(0);
 });
 
+test("reset keeps selection aligned to provided title", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+  state.moveSelection("down");
+  state.selectCurrentItem();
+
+  state.reset("", { selectedItemTitle: "font-italic" });
+  const snapshot = state.getSnapshot();
+
+  const matchedIndex = snapshot.filteredItems.findIndex(
+    (item) =>
+      isSelectableMenuItem(item) &&
+      item.title?.toString() === "font-italic"
+  );
+
+  expect(snapshot.selectedIndex).toBe(matchedIndex);
+});
+
 test("handles empty query", () => {
   const state = new ComboboxState(testItems, "", true);
   state.setFilter("");

package/src/components/Combobox.tsx

@@ -154,6 +154,17 @@ export const Combobox = memoGeneric(
 
     const initialValueString = getInitialValueString();
 
+    const resetSelectionOptions = useMemo(
+      () =>
+        props.mode === "string"
+          ? { selectedItemTitle: initialValueString }
+          : {
+              selectedItemTitle: initialValueString,
+              selectedItemValue: props.value?.value?.toString(),
+            },
+      [initialValueString, props.mode, props.value]
+    );
+
     const [comboboxState] = useState(
       () =>
         new ComboboxState(
@@ -165,6 +176,7 @@ export const Combobox = memoGeneric(
     const state = useComboboxState(comboboxState);
     const [isFocused, setIsFocused] = useState(false);
     const listRef = useRef<ListView.VirtualizedList>(null);
+    const menuOpenedRef = useRef(false);
     const [shouldBlur, setShouldBlur] = useState(false);
     const { fieldId: id } = useLabel({
       fieldId: rest.id,
@@ -190,9 +202,24 @@ export const Combobox = memoGeneric(
       }
     }, [selectedIndex]);
 
+    useEffect(() => {
+      if (!shouldShowMenu) {
+        menuOpenedRef.current = false;
+        return;
+      }
+
+      if (menuOpenedRef.current) return;
+
+      menuOpenedRef.current = true;
+
+      if (listRef.current) {
+        listRef.current.scrollToIndex(selectedIndex);
+      }
+    }, [shouldShowMenu, selectedIndex]);
+
     const handleBlur = useCallback(() => {
       ref.current?.blur();
-      comboboxState.reset(initialValueString);
+      comboboxState.reset(initialValueString, resetSelectionOptions);
       if (props.mode === "string") {
         props.onBlur?.(
           state.filter === state.lastSubmittedValue.filter,
@@ -208,13 +235,21 @@ export const Combobox = memoGeneric(
         }
       }
       setIsFocused(false);
-    }, [filter, initialValueString, props, state, comboboxState]);
+    }, [
+      filter,
+      initialValueString,
+      props,
+      resetSelectionOptions,
+      state,
+      comboboxState,
+    ]);
 
     const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValueString
+          openMenuBehavior === "showAllItems" ? "" : initialValueString,
+          resetSelectionOptions
         );
         if (ref.current) {
           const length = ref.current.value.length;
@@ -222,7 +257,13 @@ export const Combobox = memoGeneric(
         }
         onFocus?.(event);
       },
-      [initialValueString, onFocus, openMenuBehavior, comboboxState]
+      [
+        initialValueString,
+        onFocus,
+        openMenuBehavior,
+        resetSelectionOptions,
+        comboboxState,
+      ]
     );
 
     const handleUpdateSelection = useCallback(
@@ -415,7 +456,8 @@ export const Combobox = memoGeneric(
 
         // Use openMenuBehavior consistently for both focus and chevron click
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValueString
+          openMenuBehavior === "showAllItems" ? "" : initialValueString,
+          resetSelectionOptions
         );
         ref.current?.focus();
       },
@@ -424,6 +466,7 @@ export const Combobox = memoGeneric(
         openMenuBehavior,
         initialValueString,
         handleBlur,
+        resetSelectionOptions,
         comboboxState,
       ]
     );

package/src/utils/combobox.ts

@@ -203,9 +203,48 @@ export class ComboboxState<T extends string> {
     this.notifyChange();
   }
 
-  reset(newFilter = "") {
+  reset(
+    newFilter = "",
+    options?: {
+      selectedItemTitle?: string;
+      selectedItemValue?: string | number;
+    }
+  ) {
     this.filter = newFilter;
-    this.selectedIndex = 0;
+
+    const filteredItems = this.getFilteredItems();
+    const normalizedTitle = options?.selectedItemTitle
+      ? options.selectedItemTitle.toString().toLowerCase()
+      : undefined;
+    const normalizedValue = options?.selectedItemValue
+      ? options.selectedItemValue.toString().toLowerCase()
+      : undefined;
+
+    const matchedIndex =
+      normalizedTitle || normalizedValue
+        ? filteredItems.findIndex((item) => {
+            if (!isSelectableMenuItem(item)) return false;
+
+            const title = item.title?.toString().toLowerCase();
+            const value = item.value?.toString().toLowerCase();
+
+            if (normalizedValue && value === normalizedValue) return true;
+            if (normalizedTitle && title === normalizedTitle) return true;
+            return false;
+          })
+        : -1;
+
+    if (matchedIndex !== -1) {
+      this.selectedIndex = matchedIndex;
+      this.notifyChange();
+      return;
+    }
+
+    const firstSelectableIndex = filteredItems.findIndex((item): boolean =>
+      isSelectableMenuItem(item)
+    );
+
+    this.selectedIndex = firstSelectableIndex === -1 ? 0 : firstSelectableIndex;
     this.notifyChange();
   }