@noya-app/noya-designsystem 0.1.85 → 0.1.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.85",
+  "version": "0.1.87",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/InputField.tsx

@@ -661,6 +661,7 @@ function InputFieldRoot({
         <Popover
           open={true}
           trigger={rootElement}
+          initialFocus={false}
           sideOffset={sideOffset}
           showArrow={false}
         >

package/src/components/Popover.tsx

@@ -31,6 +31,9 @@ interface Props {
   style?: React.CSSProperties;
   portalContainer?: HTMLElement | null;
   side?: "top" | "bottom" | "left" | "right";
+  initialFocus?: React.ComponentProps<
+    typeof PopoverPrimitive.Popup
+  >["initialFocus"];
   /**
    * Called when an interaction outside the popover occurs.
    * Return false to prevent the popover from closing.
@@ -58,6 +61,7 @@ export function Popover({
   className,
   portalContainer,
   style,
+  initialFocus,
   shouldCloseOnInteractOutside,
 }: Props) {
   const defaultId = useId();
@@ -126,6 +130,7 @@ export function Popover({
         >
           <PopoverPrimitive.Popup
             ref={popupRef}
+            initialFocus={initialFocus}
             style={style}
             className={cx(
               popoverStyle.base,

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

@@ -0,0 +1,36 @@
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "bun:test";
+import React, { useEffect, useRef } from "react";
+import { InputField } from "../InputField";
+
+afterEach(cleanup);
+
+describe("InputField", () => {
+  test("keeps focus on the input when its popover mounts", async () => {
+    let input: HTMLInputElement | null = null;
+
+    function InputWithPopover() {
+      const inputRef = useRef<HTMLInputElement>(null);
+
+      useEffect(() => {
+        requestAnimationFrame(() => inputRef.current?.focus());
+      }, []);
+
+      return (
+        <InputField
+          ref={(element) => {
+            inputRef.current = element;
+            input = element;
+          }}
+          width={240}
+          renderPopoverContent={() => <button>Result</button>}
+        />
+      );
+    }
+
+    render(<InputWithPopover />);
+    await act(() => new Promise((resolve) => setTimeout(resolve, 50)));
+
+    expect(document.activeElement === input).toBe(true);
+  });
+});

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -209,19 +209,9 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
         {isDrawerOpen && (
           <div className="n-absolute n-inset-0 n-z-20 n-flex n-flex-col">
             {/* Drawer content */}
-            <div className="n-flex-none n-max-h-[50vh] n-overflow-auto n-bg-sidebar-background n-border-b n-border-divider-strong n-shadow-lg">
+            <div className="n-relative n-flex-1 n-min-h-0 n-overflow-auto n-bg-sidebar-background n-border-b n-border-divider-strong n-shadow-lg">
               {activeDrawerPanel}
             </div>
-            {/* Backdrop - click to close */}
-            <div
-              className="n-flex-1 n-bg-black/30"
-              onClick={() =>
-                setLayoutState({
-                  leftSidebarCollapsed: true,
-                  rightSidebarCollapsed: true,
-                })
-              }
-            />
           </div>
         )}
 

package/src/components/workspace/__tests__/DrawerWorkspaceLayout.test.tsx

@@ -31,4 +31,66 @@ describe("DrawerWorkspaceLayout", () => {
 
     expect(getByText("Sidebar content")).toBeTruthy();
   });
+
+  test("contains absolutely positioned panel content in a full-height drawer", () => {
+    const leftSidebarRef = React.createRef<SidebarRef>();
+    const rightSidebarRef = React.createRef<SidebarRef>();
+    const { getByRole, getByText, queryByRole } = render(
+      <DrawerWorkspaceLayout
+        leftPanel={<div className="n-absolute n-inset-0">Sidebar content</div>}
+        leftTabItems={[{ title: "Navigation", value: "navigation" }]}
+        leftTabValue="navigation"
+        rightPanel={null}
+        centerPanel={<div>Center content</div>}
+        leftSidebarOptions={{}}
+        rightSidebarOptions={{}}
+        leftSidebarRef={leftSidebarRef}
+        rightSidebarRef={rightSidebarRef}
+        compactDrawerMenu
+      />
+    );
+
+    fireEvent.click(getByRole("button", { name: "Navigation" }));
+
+    const drawerContent = getByText("Sidebar content").parentElement;
+    expect(drawerContent).toBeTruthy();
+    expect(drawerContent?.classList.contains("n-relative")).toBe(true);
+    expect(drawerContent?.classList.contains("n-flex-1")).toBe(true);
+    expect(drawerContent?.classList.contains("n-min-h-0")).toBe(true);
+    expect(drawerContent?.classList.contains("n-h-[50vh]")).toBe(false);
+    expect(queryByRole("button", { name: "Close drawer" })).toBeNull();
+  });
+
+  test("keeps touch input on drawer content instead of an overlapping backdrop", () => {
+    const leftSidebarRef = React.createRef<SidebarRef>();
+    const rightSidebarRef = React.createRef<SidebarRef>();
+    let touchCount = 0;
+    const { getByRole, getByText, queryByRole } = render(
+      <DrawerWorkspaceLayout
+        leftPanel={<button onClick={() => touchCount++}>Drawer action</button>}
+        leftTabItems={[{ title: "Navigation", value: "navigation" }]}
+        leftTabValue="navigation"
+        rightPanel={null}
+        centerPanel={<div>Center content</div>}
+        leftSidebarOptions={{}}
+        rightSidebarOptions={{}}
+        leftSidebarRef={leftSidebarRef}
+        rightSidebarRef={rightSidebarRef}
+        compactDrawerMenu
+      />
+    );
+
+    fireEvent.click(getByRole("button", { name: "Navigation" }));
+    const action = getByRole("button", { name: "Drawer action" });
+    const drawer = getByText("Drawer action").parentElement?.parentElement;
+
+    fireEvent.pointerDown(action, { pointerType: "touch" });
+    fireEvent.pointerUp(action, { pointerType: "touch" });
+    fireEvent.click(action);
+
+    expect(drawer?.classList.contains("n-z-20")).toBe(true);
+    expect(queryByRole("button", { name: "Close drawer" })).toBeNull();
+    expect(touchCount).toBe(1);
+    expect(leftSidebarRef.current?.isExpanded()).toBe(true);
+  });
 });