@noya-app/noya-designsystem 0.1.92 → 0.1.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.92",
+  "version": "0.1.94",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@base-ui/react": "1.0.0",
+    "@base-ui/react": "1.7.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@floating-ui/react": "^0.27.0",

package/src/components/DropdownMenu.tsx

@@ -236,12 +236,16 @@ function MenuViewport<T extends string>({
             }
             return null;
 
-          default:
+          default: {
+            const accessibilityProps = getCheckedMenuItemAccessibilityProps(
+              item.checked
+            );
             return (
               <div key={item.value} className="n-px-1">
                 <Menu.Item
                   disabled={item.disabled}
                   className={itemStyle}
+                  {...accessibilityProps}
                   onClick={() => {
                     if (onSelect && item.value) {
                       // Delay onSelect to allow menu to close and focus to settle
@@ -262,12 +266,21 @@ function MenuViewport<T extends string>({
                 </Menu.Item>
               </div>
             );
+          }
         }
       })}
     </>
   );
 }
 
+export function getCheckedMenuItemAccessibilityProps(
+  checked: boolean | undefined
+) {
+  return checked === undefined
+    ? {}
+    : ({ role: "menuitemcheckbox", "aria-checked": checked } as const);
+}
+
 const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
   T extends string,
 >(props: DropdownMenuProps<T>, forwardedRef: ForwardedRef<HTMLElement>) {

package/src/components/Toast.tsx

@@ -39,7 +39,7 @@ function ToastContent({ toast }: { toast: ToastObject }) {
   return (
     <ToastPrimitive.Root
       toast={toast}
-      className="n-relative n-flex n-items-start n-gap-2 n-rounded n-text-sm n-bg-popover-background n-shadow-popover n-text-text-muted n-px-3 n-py-2.5 n-pr-10"
+      className="n-pointer-events-auto n-relative n-flex n-items-start n-gap-2 n-rounded n-text-sm n-bg-popover-background n-shadow-popover n-text-text-muted n-px-3 n-py-2.5 n-pr-10"
     >
       <div className="n-flex n-flex-col n-gap-0.5 n-min-w-0">
         {toast.data?.title && (
@@ -87,7 +87,7 @@ function ToastProviderInner({ children }: { children: React.ReactNode }) {
   return (
     <ToastContext.Provider value={{ showToast }}>
       {children}
-      <ToastPrimitive.Viewport className="n-fixed n-bottom-0 n-right-0 n-flex n-flex-col n-p-5 n-gap-2.5 n-min-w-[200px] n-max-w-[100vw] n-m-0 n-list-none n-z-[2147483647] n-outline-none">
+      <ToastPrimitive.Viewport className="n-pointer-events-none n-fixed n-bottom-0 n-right-0 n-flex n-flex-col n-p-5 n-gap-2.5 n-min-w-[200px] n-max-w-[100vw] n-m-0 n-list-none n-z-[2147483647] n-outline-none">
         {toastManager.toasts.map((toast) => (
           <ToastContent key={toast.id} toast={toast} />
         ))}

package/src/components/__tests__/DropdownMenu.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from "bun:test";
+import { getCheckedMenuItemAccessibilityProps } from "../DropdownMenu";
+
+describe("DropdownMenu checked items", () => {
+  test("uses checkbox menu semantics when checked state is provided", () => {
+    expect(getCheckedMenuItemAccessibilityProps(false)).toEqual({
+      role: "menuitemcheckbox",
+      "aria-checked": false,
+    });
+    expect(getCheckedMenuItemAccessibilityProps(true)).toEqual({
+      role: "menuitemcheckbox",
+      "aria-checked": true,
+    });
+  });
+
+  test("leaves ordinary menu items unchanged", () => {
+    expect(getCheckedMenuItemAccessibilityProps(undefined)).toEqual({});
+  });
+});

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

@@ -0,0 +1,138 @@
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import React from "react";
+
+const actualIcons = await import("@radix-ui/react-icons");
+
+mock.module("@radix-ui/react-icons", () => ({
+  ...actualIcons,
+  Cross1Icon: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} data-testid="cross-icon" />
+  ),
+}));
+
+const { act, cleanup, fireEvent, render, waitFor } = await import(
+  "@testing-library/react"
+);
+const { ToastProvider, useToast } = await import("../Toast");
+
+afterEach(cleanup);
+
+function ToastFixture({ onAction }: { onAction?: () => void }) {
+  const { showToast } = useToast();
+
+  return (
+    <button
+      onClick={() =>
+        showToast({
+          title: "Saved",
+          content: "Your changes were saved.",
+          action: onAction ? (
+            <button onClick={onAction}>Undo</button>
+          ) : undefined,
+          timeout: 60_000,
+        })
+      }
+    >
+      Show toast
+    </button>
+  );
+}
+
+function renderToast(onAction?: () => void) {
+  const view = render(
+    <ToastProvider>
+      <ToastFixture onAction={onAction} />
+    </ToastProvider>
+  );
+
+  fireEvent.click(view.getByRole("button", { name: "Show toast" }));
+
+  return view;
+}
+
+describe("ToastProvider pointer events", () => {
+  test("keeps the viewport pointer-transparent when no toast exists", () => {
+    const view = render(
+      <ToastProvider>
+        <button>Underlying control</button>
+      </ToastProvider>
+    );
+    const viewport = view.getByRole("region", { name: "Notifications" });
+
+    expect(viewport.classList.contains("n-pointer-events-none")).toBe(true);
+    expect(view.queryByRole("dialog")).toBeNull();
+  });
+
+  test("makes toast roots interactive inside the transparent viewport", () => {
+    const view = renderToast();
+    const viewport = view.getByRole("region", { name: "Notifications" });
+    const toast = view.getByRole("dialog");
+
+    expect(viewport.classList.contains("n-pointer-events-none")).toBe(true);
+    expect(toast.classList.contains("n-pointer-events-auto")).toBe(true);
+  });
+});
+
+describe("ToastProvider interactions", () => {
+  test("preserves action and close button interactions", async () => {
+    const onAction = mock(() => {});
+    const view = renderToast(onAction);
+
+    fireEvent.click(view.getByRole("button", { name: "Undo" }));
+    expect(onAction).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(view.getByLabelText("Close"));
+    await waitFor(() => {
+      expect(view.queryByText("Your changes were saved.")).toBeNull();
+    });
+  });
+
+  test("preserves keyboard dismissal", async () => {
+    const view = renderToast();
+    const toast = view.getByRole("dialog");
+
+    act(() => toast.focus());
+    fireEvent.keyDown(toast, { key: "Escape" });
+
+    await waitFor(() => {
+      expect(view.queryByText("Your changes were saved.")).toBeNull();
+    });
+  });
+
+  test("preserves swipe dismissal", async () => {
+    const view = renderToast();
+    const toast = view.getByRole("dialog");
+
+    fireEvent.pointerDown(toast, {
+      button: 0,
+      clientX: 0,
+      clientY: 0,
+      pointerId: 1,
+      pointerType: "touch",
+    });
+    fireEvent.pointerMove(toast, {
+      clientX: 1,
+      clientY: 0,
+      pointerId: 1,
+      pointerType: "touch",
+    });
+    fireEvent.pointerMove(toast, {
+      clientX: 60,
+      clientY: 0,
+      movementX: 59,
+      movementY: 0,
+      pointerId: 1,
+      pointerType: "touch",
+    });
+    fireEvent.pointerUp(toast, {
+      clientX: 60,
+      clientY: 0,
+      pointerId: 1,
+      pointerType: "touch",
+    });
+
+    await waitFor(() => {
+      expect(view.queryByText("Your changes were saved.")).toBeNull();
+    });
+  });
+});

package/src/index.css

@@ -291,7 +291,8 @@
 
 /* Direct child pre blocks */
 .n-prose pre {
-  background-color: var(--n-indigo-25);
+  color: var(--n-text);
+  background-color: var(--n-code-background);
   border-width: 1px;
   border-style: solid;
   border-color: var(--n-divider);