@noya-app/noya-designsystem 0.1.73 → 0.1.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.73",
+  "version": "0.1.75",
   "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.30",
+    "@noya-app/noya-colorpicker": "0.1.31",
     "@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/BaseToolbar.tsx

@@ -62,6 +62,23 @@ export function BaseToolbar({
   innerClassName,
   enableAbsoluteBreakpoint = true,
 }: BaseToolbarProps) {
+  const childrenContainerClassName = cx(
+    "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none n-inset-0 n-pl-1 n-pr-1 n-min-w-0",
+    "@xl/toolbar:!n-absolute @xl/toolbar:!n-pl-0 @xl/toolbar:!n-pr-0"
+  );
+
+  const childrenElement = children && (
+    <div className={childrenContainerClassName}>
+      <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
+        {children}
+      </div>
+    </div>
+  );
+
+  const leftElement = left && (
+    <div className="n-flex n-gap-toolbar-separator">{left}</div>
+  );
+
   return (
     <BaseToolbarContainer
       showDivider={showDivider}
@@ -76,23 +93,20 @@ export function BaseToolbar({
         </>
       )}
       <Spacer.Horizontal size={10} />
-      {left && (
+      {childrenElement}
+      {leftElement && (
         <>
-          <div className="n-flex n-gap-toolbar-separator">{left}</div>
+          {childrenElement && (
+            <>
+              <Spacer.Horizontal size={10} className="@xl/toolbar:!n-hidden" />
+              <DividerVertical className="@xl/toolbar:!n-hidden" />
+            </>
+          )}
+          <Spacer.Horizontal size={10} className="@xl/toolbar:!n-hidden" />
+          {leftElement}
           <Spacer.Horizontal size={10} />
         </>
       )}
-      {children && (
-        <div
-          className={
-            "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @xl/toolbar:!n-absolute n-inset-0"
-          }
-        >
-          <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
-            {children}
-          </div>
-        </div>
-      )}
       <Spacer.Horizontal />
       <Spacer.Horizontal size={10} />
       <div className="n-flex n-gap-toolbar-separator">{right}</div>

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/components/InputField.tsx

@@ -198,6 +198,11 @@ type InputElementProps = {
   value?: string;
   onSubmit?: (value: string) => void;
   as?: "input" | "span";
+  /**
+   * If false, don't attach the shared inputRef to this element.
+   * Useful for decorative elements like the typeahead overlay.
+   */
+  attachInputRef?: boolean;
 };
 
 const InputElement = forwardRef(
@@ -213,13 +218,17 @@ const InputElement = forwardRef(
       onSubmit,
       as = "input",
       style,
+      attachInputRef = true,
       ...props
     }: InputElementProps,
     forwardedRef: ForwardedRef<any>
   ) => {
     const { endWidth, inputRef, size, id, startWidth } = useInputFieldContext();
 
-    const ref = useMergeRefs(inputRef, forwardedRef);
+    const ref = useMergeRefs(
+      attachInputRef ? inputRef : null,
+      forwardedRef
+    );
 
     const spacingStyles = getFieldSpacing({
       endWidth,
@@ -322,6 +331,7 @@ const InputFieldTypeahead = (props: {
   return (
     <InputElement
       as="span"
+      attachInputRef={false}
       style={useMemo(
         () => ({
           position: "absolute",
@@ -551,8 +561,10 @@ function InputFieldRoot({
   const startRef = React.useRef<HTMLSpanElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
   const endRef = React.useRef<HTMLSpanElement>(null);
+  const rootRef = React.useRef<HTMLDivElement>(null);
 
   const measuredInputSize = useSize(inputRef, "width");
+  const measuredRootSize = useSize(rootRef, "width");
   const measuredStartSize = useSize(startRef, "width");
   const measuredEndSize = useSize(endRef, "width");
   const labelType = useLabelType();
@@ -596,7 +608,12 @@ function InputFieldRoot({
   );
 
   const rootElement = (
-    <RootContainer $width={width} style={style} className={className}>
+    <RootContainer
+      ref={rootRef}
+      $width={width}
+      style={style}
+      className={className}
+    >
       {children}
       {start && (
         <span ref={startRef} className={cx(startBaseStyles, startClassName)}>
@@ -617,10 +634,25 @@ function InputFieldRoot({
     </RootContainer>
   );
 
+  const measuredWidth = useMemo(() => {
+    const inputWidth =
+      measuredInputSize && measuredInputSize.width > 0
+        ? measuredInputSize.width
+        : undefined;
+    const rootWidth =
+      measuredRootSize && measuredRootSize.width > 0
+        ? measuredRootSize.width
+        : undefined;
+
+    return inputWidth ?? rootWidth ?? width;
+  }, [measuredInputSize, measuredRootSize, width]);
+
   const measuredWidthObject = useMemo(
     () =>
-      measuredInputSize ? { width: measuredInputSize.width + 4 } : undefined,
-    [measuredInputSize]
+      measuredWidth && measuredWidth > 0
+        ? { width: measuredWidth + 4 }
+        : undefined,
+    [measuredWidth]
   );
 
   return (

package/src/components/Spacer.tsx

@@ -1,9 +1,11 @@
 import type { ForwardedRef } from "react";
 import * as React from "react";
+import { cx } from "../utils/classNames";
 
 interface Props {
   size?: number | string;
   inline?: boolean;
+  className?: string;
 }
 
 /* ----------------------------------------------------------------------------
@@ -11,10 +13,16 @@ interface Props {
  * ------------------------------------------------------------------------- */
 
 const SpacerVertical = React.forwardRef<HTMLSpanElement, Props>(
-  ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
+  (
+    { size, inline, className, ...props },
+    ref: ForwardedRef<HTMLSpanElement>
+  ) => {
     return (
       <span
-        className={`${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`}
+        className={cx(
+          `${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`,
+          className
+        )}
         style={
           size
             ? {
@@ -34,10 +42,16 @@ const SpacerVertical = React.forwardRef<HTMLSpanElement, Props>(
  * ------------------------------------------------------------------------- */
 
 const SpacerHorizontal = React.forwardRef<HTMLSpanElement, Props>(
-  ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
+  (
+    { size, inline, className, ...props },
+    ref: ForwardedRef<HTMLSpanElement>
+  ) => {
     return (
       <span
-        className={`${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`}
+        className={cx(
+          `${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`,
+          className
+        )}
         style={
           size
             ? {

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();
   }