@noya-app/noya-designsystem 0.1.88 → 0.1.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.88",
+  "version": "0.1.89",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -32,7 +32,7 @@
     "@noya-app/noya-colorpicker": "0.1.35",
     "@noya-app/noya-utils": "0.1.9",
     "@noya-app/noya-geometry": "0.1.18",
-    "@noya-app/noya-icons": "0.1.19",
+    "@noya-app/noya-icons": "0.1.20",
     "@noya-app/noya-keymap": "0.1.4",
     "@noya-app/noya-tailwind-config": "0.1.10",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/InputField.tsx

@@ -434,23 +434,25 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
   );
 
   const handleChange = useCallback(
-    (value: string) => {
-      if (value === "" || value === "-" || value === ".") {
-        setInternalValue(value);
+    (inputValue: string) => {
+      if (inputValue === "" || inputValue === "-" || inputValue === ".") {
+        setInternalValue(inputValue);
         if (triggersOnEmpty) {
           onChange?.(0, { isEmpty: true });
         }
         return;
       }
 
-      if (value.endsWith(".")) {
-        setInternalValue(value);
+      if (inputValue.endsWith(".")) {
+        setInternalValue(inputValue);
         return;
       }
 
-      setInternalValue(undefined);
+      // Keep the text being edited stable if the parent rejects or normalizes
+      // an intermediate numeric value. The accepted prop value takes over on blur.
+      setInternalValue(inputValue);
 
-      const newValue = parseNumber(value);
+      const newValue = parseNumber(inputValue);
 
       if (!isNaN(newValue)) {
         onChange?.(newValue, { isEmpty: false });

package/src/components/__tests__/InputField.test.tsx

@@ -1,6 +1,6 @@
-import { act, cleanup, render } from "@testing-library/react";
-import { afterEach, describe, expect, test } from "bun:test";
-import React, { useEffect, useRef } from "react";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import React, { useEffect, useRef, useState } from "react";
 import { InputField } from "../InputField";
 
 afterEach(cleanup);
@@ -33,4 +33,228 @@ describe("InputField", () => {
 
     expect(document.activeElement === input).toBe(true);
   });
+
+  test("keeps a bounded number edit buffered until it becomes valid", () => {
+    const attemptedValues: number[] = [];
+
+    function BoundedNumberInput() {
+      const [value, setValue] = useState(400);
+      const [, setRevision] = useState(0);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={value}
+            onChange={(nextValue) => {
+              attemptedValues.push(nextValue);
+              if (nextValue >= 100 && nextValue <= 900) {
+                setValue(nextValue);
+              }
+              setRevision((revision) => revision + 1);
+            }}
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<BoundedNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "7" } });
+    expect(input.value).toBe("7");
+
+    fireEvent.change(input, { target: { value: `${input.value}0` } });
+    expect(input.value).toBe("70");
+
+    fireEvent.change(input, { target: { value: `${input.value}0` } });
+    expect(input.value).toBe("700");
+    expect(attemptedValues).toEqual([7, 70, 700]);
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("700");
+  });
+
+  test("restores the accepted number when a buffered edit remains invalid", () => {
+    function BoundedNumberInput() {
+      const [, setRevision] = useState(0);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={400}
+            onChange={() => setRevision((value) => value + 1)}
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<BoundedNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "70" } });
+    expect(input.value).toBe("70");
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("400");
+  });
+
+  test("shows a parent-normalized number after blur", () => {
+    function RoundedNumberInput() {
+      const [value, setValue] = useState(12);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={value}
+            onChange={(nextValue) =>
+              setValue(Math.round(nextValue * 100) / 100)
+            }
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<RoundedNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "12.345" } });
+    expect(input.value).toBe("12.345");
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("12.35");
+  });
+
+  test("buffers incomplete and invalid numeric text without notifying", () => {
+    const onChange = mock(() => {});
+    const { container } = render(
+      <InputField.Root>
+        <InputField.NumberInput value={12} onChange={onChange} />
+      </InputField.Root>
+    );
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "12." } });
+    expect(input.value).toBe("12.");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.change(input, { target: { value: "not-a-number" } });
+    expect(input.value).toBe("not-a-number");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("12");
+  });
+
+  test("clears a buffered edit when nudging", () => {
+    function NudgeableNumberInput() {
+      const [value, setValue] = useState(400);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={value}
+            onChange={(nextValue) => {
+              if (nextValue >= 100) setValue(nextValue);
+            }}
+            onNudge={(amount) => setValue((current) => current + amount)}
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<NudgeableNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "70" } });
+    expect(input.value).toBe("70");
+
+    fireEvent.keyDown(input, { key: "ArrowUp", code: "ArrowUp" });
+    expect(input.value).toBe("401");
+  });
+
+  test("supports clearing and re-entering optional numbers", () => {
+    const changes: Array<{ value: number; isEmpty: boolean }> = [];
+
+    function OptionalNumberInput() {
+      const [value, setValue] = useState<number>(42);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={value}
+            triggersOnEmpty
+            onChange={(nextValue, options) => {
+              changes.push({ value: nextValue, isEmpty: options.isEmpty });
+              setValue(options.isEmpty ? undefined : nextValue);
+            }}
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<OptionalNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "" } });
+    expect(input.value).toBe("");
+
+    fireEvent.change(input, { target: { value: "1" } });
+    fireEvent.change(input, { target: { value: "10" } });
+    expect(input.value).toBe("10");
+    expect(changes).toEqual([
+      { value: 0, isEmpty: true },
+      { value: 1, isEmpty: false },
+      { value: 10, isEmpty: false },
+    ]);
+  });
+
+  test("defers external prop updates until a focused edit blurs", () => {
+    let setExternalValue: (value: number) => void = () => {};
+
+    function ExternallyUpdatedNumberInput() {
+      const [value, setValue] = useState(400);
+      setExternalValue = setValue;
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput value={value} onChange={() => {}} />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<ExternallyUpdatedNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "70" } });
+    act(() => setExternalValue(500));
+    expect(input.value).toBe("70");
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("500");
+  });
+
+  test("keeps number submission mode separate from change buffering", () => {
+    const onSubmit = mock(() => {});
+    const { container } = render(
+      <InputField.Root>
+        <InputField.NumberInput value={400} onSubmit={onSubmit} />
+      </InputField.Root>
+    );
+    const input = container.querySelector("input")!;
+
+    fireEvent.change(input, { target: { value: "invalid" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    fireEvent.change(input, { target: { value: "700" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+    expect(onSubmit).toHaveBeenCalledWith(700);
+  });
 });

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -3,7 +3,6 @@
 import React from "react";
 import { INPUT_HEIGHT } from "../../theme";
 import { Avatar, AvatarProps, AvatarStack } from "../Avatar";
-import { Button } from "../Button";
 import { Small } from "../Text";
 import { Tooltip } from "../Tooltip";
 
@@ -22,29 +21,14 @@ export const UserAvatar = ({ userId, name, image }: AvatarProps) => (
 
 type ConnectedUsersMenuLayoutProps = {
   renderUsers: () => React.ReactNode;
-  launchAIAssistant?: () => void;
-  isAssistantOpen?: boolean;
 };
 
 export const ConnectedUsersMenuLayout = ({
   renderUsers,
-  launchAIAssistant,
-  isAssistantOpen,
 }: ConnectedUsersMenuLayoutProps) => {
   return (
     <div className="n-flex n-gap-1.5">
       <AvatarStack size={INPUT_HEIGHT}>{renderUsers()}</AvatarStack>
-      {launchAIAssistant && (
-        <Tooltip content="AI Assistant">
-          <Button
-            active={isAssistantOpen}
-            onClick={launchAIAssistant}
-            icon="ChatBubbleWithDotsIcon"
-          >
-            AI
-          </Button>
-        </Tooltip>
-      )}
     </div>
   );
 };