@noya-app/noya-designsystem 0.1.86 → 0.1.88

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

@@ -0,0 +1,56 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { cssVarNames } from "../../theme";
+import { AppToolbar } from "../AppToolbar";
+import { Toolbar } from "../Toolbar";
+
+afterEach(cleanup);
+
+describe("Toolbar", () => {
+  test("renders the floating toolbar surface with transparent controls", () => {
+    const { getByRole } = render(
+      <Toolbar aria-label="Canvas tools">Controls</Toolbar>
+    );
+    const toolbar = getByRole("toolbar", { name: "Canvas tools" });
+
+    expect(toolbar.classList.contains("n-bg-popover-background")).toBe(true);
+    expect(toolbar.classList.contains("n-shadow-popover")).toBe(true);
+    expect(toolbar.classList.contains("n-gap-toolbar-separator")).toBe(true);
+    expect(toolbar.classList.contains("n-p-2")).toBe(true);
+    expect(
+      toolbar.style.getPropertyValue(cssVarNames.colors.buttonBackground)
+    ).toBe("transparent");
+    expect(
+      toolbar.style.getPropertyValue(cssVarNames.colors.inputBackground)
+    ).toBe("transparent");
+  });
+
+  test("supports compact spacing and consumer style overrides", () => {
+    const { getByRole } = render(
+      <Toolbar
+        aria-label="Selection tools"
+        size="small"
+        style={{ backgroundColor: "transparent" }}
+      />
+    );
+    const toolbar = getByRole("toolbar", { name: "Selection tools" });
+
+    expect(toolbar.classList.contains("n-gap-1")).toBe(true);
+    expect(toolbar.classList.contains("n-p-1")).toBe(true);
+    expect(toolbar.style.backgroundColor).toBe("transparent");
+  });
+});
+
+describe("AppToolbar", () => {
+  test("renders menu-driven application actions", () => {
+    const { getByRole } = render(
+      <AppToolbar
+        leftMenuItems={[{ title: "Undo", value: "undo" }]}
+        shouldBindKeyboardShortcuts={false}
+      />
+    );
+
+    expect(getByRole("button", { name: "Undo" })).toBeTruthy();
+  });
+});

package/src/components/sorting/SharedDragProvider.tsx

@@ -12,6 +12,7 @@ import {
   DragStartEvent,
   Over,
   PointerSensor,
+  PointerSensorProps,
   pointerWithin,
   useSensor,
   useSensors,
@@ -54,6 +55,41 @@ export type SharedDragProviderProps = {
   itemHitSlop?: Insets;
 };
 
+export class ContinuousPointerSensor extends PointerSensor {
+  constructor(props: PointerSensorProps) {
+    const ownerDocument =
+      props.event.target instanceof Node
+        ? (props.event.target.ownerDocument ?? document)
+        : document;
+    let latestCoordinates: Point | null = null;
+
+    const trackPointer = (event: PointerEvent) => {
+      latestCoordinates = { x: event.clientX, y: event.clientY };
+    };
+    const cleanup = () => {
+      ownerDocument.removeEventListener("pointermove", trackPointer, true);
+      ownerDocument.removeEventListener("pointerup", cleanup, true);
+      ownerDocument.removeEventListener("pointercancel", cleanup, true);
+    };
+
+    ownerDocument.addEventListener("pointermove", trackPointer, true);
+    ownerDocument.addEventListener("pointerup", cleanup, true);
+    ownerDocument.addEventListener("pointercancel", cleanup, true);
+
+    super({
+      ...props,
+      onStart(coordinates) {
+        cleanup();
+        props.onStart(coordinates);
+
+        if (latestCoordinates) {
+          props.onMove(latestCoordinates);
+        }
+      },
+    });
+  }
+}
+
 export function SharedDragProvider({
   children,
   acceptsDrop,
@@ -65,7 +101,7 @@ export function SharedDragProvider({
   itemHitSlop,
 }: SharedDragProviderProps) {
   const sensors = useSensors(
-    useSensor(PointerSensor, {
+    useSensor(ContinuousPointerSensor, {
       activationConstraint: {
         distance: 4,
       },

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -6,7 +6,7 @@ import { cssVarNames } from "../../theme";
 import { Button } from "../Button";
 import { Divider } from "../Divider";
 import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
-import { ToolbarMenu } from "../Toolbar";
+import { ToolbarMenu } from "../AppToolbar";
 import { EDITOR_PANEL_GROUP_ID } from "./constants";
 import { LayoutProps, PanelLayoutState } from "./types";
 
@@ -209,24 +209,14 @@ 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>
         )}
 
         {/* Center content */}
-        <div className="n-flex-1 n-flex n-relative n-min-h-0">
+        <div className="n-z-0 n-flex-1 n-flex n-relative n-min-h-0">
           {centerPanel}
         </div>
       </div>

package/src/components/workspace/VerticalTabMenu.tsx

@@ -2,7 +2,7 @@ import { memoGeneric } from "@noya-app/react-utils";
 import React, { ComponentProps, useMemo } from "react";
 import { cssVarNames } from "../../theme";
 import { MenuItem } from "../internal/Menu";
-import { ToolbarMenu } from "../Toolbar";
+import { ToolbarMenu } from "../AppToolbar";
 import { Tooltip } from "../Tooltip";
 
 type VerticalTabMenuProps<TabValue extends string> = {

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

@@ -31,4 +31,68 @@ 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;
+    const center = getByText("Center content").parentElement;
+
+    fireEvent.pointerDown(action, { pointerType: "touch" });
+    fireEvent.pointerUp(action, { pointerType: "touch" });
+    fireEvent.click(action);
+
+    expect(drawer?.classList.contains("n-z-20")).toBe(true);
+    expect(center?.classList.contains("n-z-0")).toBe(true);
+    expect(queryByRole("button", { name: "Close drawer" })).toBeNull();
+    expect(touchCount).toBe(1);
+    expect(leftSidebarRef.current?.isExpanded()).toBe(true);
+  });
 });

package/src/index.css

@@ -185,6 +185,12 @@
   }
 }
 
+@media (max-width: 639px) {
+  :root {
+    --n-dialog-padding: 16px;
+  }
+}
+
 [data-theme="dark"] {
   --n-background: #111111;
   --n-input-background: rgb(45 43 54);

package/src/index.tsx

@@ -10,6 +10,7 @@ export * from "./components/Banner";
 export * from "./components/blocks/ImageBlockComponent";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
+export * from "./components/Card";
 export * from "./components/Checkbox";
 export * from "./components/Chip";
 export * from "./components/Collection";
@@ -21,6 +22,7 @@ export * from "./components/CommandPalette";
 export * from "./components/connected-users-menu/ConnectedUsersMenuLayout";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
+export * from "./components/DialogNavigator";
 export * from "./components/Divider";
 export * from "./components/DraggableMenuButton";
 export * from "./components/Drawer";
@@ -75,6 +77,7 @@ export * from "./components/sorting/Sortable";
 export * from "./components/sorting/sorting";
 export * from "./components/Spacer";
 export * from "./components/StackNavigator";
+export * from "./components/StatCard";
 export * from "./components/Stepper";
 export * from "./components/Switch";
 export * from "./components/Tabs";
@@ -128,6 +131,7 @@ export * from "./components/DimensionInput";
 export * as InspectorPrimitives from "./components/InspectorPrimitives";
 
 export * from "./components/BaseToolbar";
+export * from "./components/AppToolbar";
 export * from "./components/OverlayToolbar";
 export * from "./components/Toolbar";
 export * from "./components/ToolbarDrawer";