@noya-app/noya-designsystem 0.1.82 → 0.1.84

package/src/components/workspace/WorkspaceLayout.tsx

@@ -25,6 +25,7 @@ import {
   RenderPanel,
   SidebarOptions,
   SidebarRef,
+  SidebarState,
 } from "./types";
 import { WorkspaceSideProvider } from "./WorkspaceSideContext";
 
@@ -79,10 +80,19 @@ export interface WorkspaceLayoutProps<
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
   /**
-   * Use a compact top-row menu in Drawer (mobile) layout instead of a
-   * full-height left menu. Useful when there is only a single icon.
+   * Callback when left sidebar state changes (width or collapsed).
    */
-  compactDrawerMenu?: boolean;
+  onLeftSidebarStateChange?: (state: SidebarState) => void;
+  /**
+   * Callback when right sidebar state changes (width or collapsed).
+   */
+  onRightSidebarStateChange?: (state: SidebarState) => void;
+  /**
+   * Whether to persist panel sizes to localStorage.
+   * Set to false when using external storage (e.g., cookies) for sidebar state.
+   * @default true
+   */
+  shouldAutoSave?: boolean;
 }
 
 export type WorkspaceLayoutRef = {
@@ -177,7 +187,9 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       showTabs: rightShowTabs = true,
     } = {},
     theme,
-    compactDrawerMenu,
+    onLeftSidebarStateChange,
+    onRightSidebarStateChange,
+    shouldAutoSave,
   }: WorkspaceLayoutProps<LeftTab, RightTab>,
   forwardedRef: React.ForwardedRef<WorkspaceLayoutRef>
 ) {
@@ -450,7 +462,9 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
               autoSavePrefix={autoSavePrefix}
               leftSidebarRef={leftSidebarRef}
               rightSidebarRef={rightSidebarRef}
-              compactDrawerMenu={compactDrawerMenu}
+              onLeftSidebarStateChange={onLeftSidebarStateChange}
+              onRightSidebarStateChange={onRightSidebarStateChange}
+              shouldAutoSave={shouldAutoSave}
             />
             {isOverlay && (
               <OverlayToolbar

package/src/components/workspace/types.ts

@@ -24,6 +24,11 @@ export type PanelLayoutState = {
   rightSidebarCollapsed: boolean;
 };
 
+export type SidebarState = {
+  width: number;
+  collapsed: boolean;
+};
+
 export type RenderPanel<TabValue extends string> =
   | ReactNode
   | ((props: {
@@ -54,12 +59,19 @@ export type LayoutProps<
   leftSidebarRef: React.RefObject<SidebarRef | null>;
   rightSidebarRef: React.RefObject<SidebarRef | null>;
   /**
-   * When using the Drawer (mobile) layout, render the vertical tab menu
-   * in a compact top row whose height equals the toolbar height.
-   * Intended for scenarios with a single icon to avoid reserving
-   * full-height left-side space.
+   * Callback when left sidebar state changes (width or collapsed).
+   */
+  onLeftSidebarStateChange?: (state: SidebarState) => void;
+  /**
+   * Callback when right sidebar state changes (width or collapsed).
+   */
+  onRightSidebarStateChange?: (state: SidebarState) => void;
+  /**
+   * Whether to persist panel sizes to localStorage.
+   * Set to false when using external storage (e.g., cookies) for sidebar state.
+   * @default true
    */
-  compactDrawerMenu?: boolean;
+  shouldAutoSave?: boolean;
 };
 
 export type WorkspaceLayoutGroup = {

package/src/contexts/DialogContext.tsx

@@ -231,20 +231,27 @@ export const DialogProvider = function DialogProvider({
   const confirmButtonRef = useRef<HTMLButtonElement>(null);
   const dialogRef = useRef<IDialog>(null);
 
-  // Handle auto-focus when dialog opens
+  // Handle auto-focus when dialog opens. The `resolve` function is created
+  // once per dialog instance and preserved across state updates (e.g. typing
+  // in the input replaces `contents` but keeps the same `resolve`), so keying
+  // the effect on it ensures focus is only set when a dialog opens, not on
+  // every keystroke.
+  const contentsType = contents?.type;
+  const contentsInstance = contents?.resolve;
+
   React.useEffect(() => {
-    if (!contents) return;
+    if (!contentsType || !contentsInstance) return;
 
     // Use requestAnimationFrame to ensure the dialog is rendered
     requestAnimationFrame(() => {
-      if (contents.type === "input") {
+      if (contentsType === "input") {
         inputRef.current?.focus();
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
-      } else if (contents.type === "confirmation") {
+      } else if (contentsType === "confirmation") {
         confirmButtonRef.current?.focus();
       }
     });
-  }, [contents]);
+  }, [contentsType, contentsInstance]);
 
   const containsElement = useCallback((element: HTMLElement) => {
     if (!dialogRef.current) return false;

package/src/contexts/__tests__/DialogContext.test.tsx

@@ -0,0 +1,142 @@
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import React from "react";
+
+// `@radix-ui/react-icons` has a nested React 18 copy in node_modules, which
+// creates legacy React elements that React 19 refuses to render under
+// `bun test` (app bundlers alias react, so this only affects tests). Mock the
+// icon used by the Dialog close button so everything renders with one 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 { cleanup, fireEvent, render, waitFor } = await import(
+  "@testing-library/react"
+);
+const { DialogProvider, useOpenInputDialog } = await import(
+  "../DialogContext"
+);
+
+const focusListeners: ((event: Event) => void)[] = [];
+
+afterEach(() => {
+  cleanup();
+
+  for (const listener of focusListeners) {
+    document.removeEventListener("focus", listener, true);
+  }
+  focusListeners.length = 0;
+});
+
+function flushAnimationFrames() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+function OpenDialogButton({
+  onResult,
+}: {
+  onResult: (value: string | undefined) => void;
+}) {
+  const openInputDialog = useOpenInputDialog();
+
+  return (
+    <button
+      onClick={async () => {
+        const result = await openInputDialog({
+          title: "Rename",
+          initialValue: "hello",
+        });
+        onResult(result);
+      }}
+    >
+      Open
+    </button>
+  );
+}
+
+async function openInputDialogForTest(
+  onResult: (value: string | undefined) => void = () => {}
+) {
+  const utils = render(
+    <DialogProvider>
+      <OpenDialogButton onResult={onResult} />
+    </DialogProvider>
+  );
+
+  // Count focus events on the dialog's input, attached before the dialog
+  // opens so the initial auto-focus is captured
+  let focusCount = 0;
+  const handleFocus = (event: Event) => {
+    if ((event.target as HTMLElement).tagName === "INPUT") {
+      focusCount++;
+    }
+  };
+  document.addEventListener("focus", handleFocus, true);
+  focusListeners.push(handleFocus);
+
+  fireEvent.click(utils.getByText("Open"));
+
+  const input = await waitFor(() => {
+    const element = document.querySelector<HTMLInputElement>(
+      'input[type="text"], input:not([type])'
+    );
+    if (!element) throw new Error("Input not found");
+    return element;
+  });
+
+  await flushAnimationFrames();
+
+  return { ...utils, input, getFocusCount: () => focusCount };
+}
+
+describe("DialogProvider input dialog", () => {
+  test("focuses and selects the initial value when opened", async () => {
+    const { input, getFocusCount } = await openInputDialogForTest();
+
+    expect(getFocusCount()).toBeGreaterThanOrEqual(1);
+    expect(input.selectionStart).toEqual(0);
+    expect(input.selectionEnd).toEqual("hello".length);
+  });
+
+  test("does not re-focus or re-select on keystrokes", async () => {
+    const { input, getFocusCount } = await openInputDialogForTest();
+
+    const focusCountAfterOpen = getFocusCount();
+
+    fireEvent.change(input, { target: { value: "hello w" } });
+
+    // Simulate the caret position after typing (collapsed at the end)
+    input.setSelectionRange(input.value.length, input.value.length);
+
+    await flushAnimationFrames();
+
+    expect(input.value).toEqual("hello w");
+    // The focus side effect must not run again on a keystroke
+    expect(getFocusCount()).toEqual(focusCountAfterOpen);
+    // Selection must not be reset to cover the whole value
+    expect(input.selectionStart).toEqual(input.value.length);
+    expect(input.selectionEnd).toEqual(input.value.length);
+  });
+
+  test("submits the typed value on Enter", async () => {
+    let result: string | undefined;
+    const { input } = await openInputDialogForTest((value) => {
+      result = value;
+    });
+
+    fireEvent.change(input, { target: { value: "world" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    await waitFor(() => {
+      expect(result).toEqual("world");
+    });
+  });
+});

package/src/index.css

@@ -73,7 +73,7 @@
   --n-toolbar-drawer-shadow: rgba(153, 153, 153, 0.25);
   --n-canvas-background: var(--n-indigo-25);
   --n-canvas-grid: rgba(0, 0, 0, 0.05);
-  --n-sidebar-background: rgb(255, 255, 255);
+  --n-sidebar-background: #fdfcff;
   --n-popover-background: rgb(252, 252, 252);
   --n-popover-divider: transparent;
   --n-listview-raised-background: rgba(0, 0, 0, 0.03);
@@ -103,7 +103,7 @@
   --n-text-link-focused: var(--n-primary-400);
   --n-inset-top: 46px;
   --n-sidebar-width: 260px;
-  --n-toolbar-height: 46px;
+  --n-toolbar-height: 52px;
   --n-toolbar-separator: 8px;
   --n-inspector-h-separator: 8px;
   --n-inspector-v-separator: 10px;
@@ -267,6 +267,16 @@
   --n-cm-info: #3390ff;
 }
 
+.n-workspace-sidebar {
+  --n-input-background: rgb(242, 240, 247);
+  --n-button-background: rgb(242, 240, 247);
+}
+
+[data-theme="dark"] .n-workspace-sidebar {
+  --n-input-background: rgb(55, 53, 65);
+  --n-button-background: rgb(55, 53, 65);
+}
+
 .markdown-editor-line-placeholder::after {
   content: var(--n-markdown-editor-line-placeholder-content);
   color: var(--n-text-disabled);

package/dist/chunk-D57E6H3M.mjs

@@ -1,36 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-export {
-  __commonJS,
-  __export,
-  __toESM
-};
-//# sourceMappingURL=chunk-D57E6H3M.mjs.map

package/dist/chunk-D57E6H3M.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-FJ6ZGZIA.mjs

@@ -1,43 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __commonJS = (cb, mod) => function __require2() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-export {
-  __require,
-  __commonJS,
-  __export,
-  __toESM
-};
-//# sourceMappingURL=chunk-FJ6ZGZIA.mjs.map

package/dist/chunk-FJ6ZGZIA.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-QDV7OQMJ.mjs

@@ -1,37 +0,0 @@
-import * as __noya_react__ from "react";const require=(m)=>{if(m==="react")return __noya_react__;throw new Error("Dynamic require not supported: "+m)};
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-export {
-  __commonJS,
-  __export,
-  __toESM
-};
-//# sourceMappingURL=chunk-QDV7OQMJ.mjs.map

package/dist/chunk-QDV7OQMJ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}