@noya-app/noya-designsystem 0.1.46 → 0.1.48

package/src/components/internal/SelectItem.tsx

@@ -3,8 +3,10 @@ import { renderIcon } from "../Icons";
 import { CheckIcon } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
 import React, { useCallback } from "react";
+import { cx } from "../../utils/classNames";
 import { Spacer } from "../Spacer";
 import {
+  CHECKBOX_INDENT_WIDTH,
   CHECKBOX_RIGHT_INSET,
   CHECKBOX_WIDTH,
   KeyboardShortcut,
@@ -24,6 +26,7 @@ export const SelectItem = React.forwardRef(
       onSelect,
       shortcut,
       indented,
+      testSelected,
       ...props
     }: Select.SelectItemProps & {
       icon?: React.ReactNode;
@@ -32,6 +35,7 @@ export const SelectItem = React.forwardRef(
       onSelect?: (value: any) => void;
       shortcut?: string;
       indented?: boolean;
+      testSelected?: boolean;
     },
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) => {
@@ -40,48 +44,68 @@ export const SelectItem = React.forwardRef(
       onSelect?.(value);
     }, [onSelect, value]);
 
+    // Prevent the click from propagating outside the menu
+    const cancelClickPropagation = useCallback(
+      (event: React.MouseEvent<HTMLDivElement>) => {
+        event.stopPropagation();
+      },
+      []
+    );
+
     if (checked && Components.CheckboxItem) {
       return (
-        <Components.CheckboxItem
-          checked={checked}
-          disabled={disabled}
-          onSelect={handleSelectItem}
-          className={styles.itemStyle({ disabled })}
-        >
-          {Components.ItemIndicator && (
-            <Components.ItemIndicator className={styles.itemIndicatorStyle}>
-              <CheckIcon />
-            </Components.ItemIndicator>
-          )}
-          {icon && (
-            <>
-              {renderIcon(icon)}
-              <Spacer.Horizontal size={8} />
-            </>
-          )}
-          {children}
-          {shortcut && (
-            <>
-              <Spacer.Horizontal />
-              <Spacer.Horizontal size={24} />
-              <KeyboardShortcut shortcut={shortcut} />
-            </>
-          )}
-        </Components.CheckboxItem>
+        <div className="px-1">
+          <Components.CheckboxItem
+            checked={checked}
+            disabled={disabled}
+            onSelect={handleSelectItem}
+            className={cx(
+              styles.itemStyle({ disabled }),
+              styles.selectedItemStyle,
+              testSelected && styles.testSelectedItemStyle
+            )}
+          >
+            {Components.ItemIndicator && (
+              <Components.ItemIndicator className={styles.itemIndicatorStyle}>
+                <CheckIcon />
+              </Components.ItemIndicator>
+            )}
+            {icon && (
+              <>
+                {renderIcon(icon)}
+                <Spacer.Horizontal size={8} />
+              </>
+            )}
+            {children}
+            {shortcut && (
+              <>
+                <Spacer.Horizontal />
+                <Spacer.Horizontal size={24} />
+                <KeyboardShortcut shortcut={shortcut} />
+              </>
+            )}
+          </Components.CheckboxItem>
+        </div>
       );
     }
 
     return (
       <div className="px-1">
         <Components.Item
-          className={styles.itemStyle({ disabled })}
+          className={cx(
+            styles.itemStyle({ disabled }),
+            styles.selectedItemStyle,
+            testSelected && styles.testSelectedItemStyle
+          )}
           disabled={disabled}
           value={value}
           ref={forwardedRef}
+          onClick={cancelClickPropagation}
           onSelect={handleSelectItem}
           {...props}
         >
           <div className="flex flex-1 items-center">
+            {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
             {checked ? (
               <div className={styles.itemIndicatorStyle}>
                 <CheckIcon />

package/src/components/internal/__tests__/Menu.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, test } from "bun:test";
+import { styles } from "../Menu";
+
+describe("Menu", () => {
+  test("styles.selectedItemStyle should have the same styles as styles.testSelectedItemStyle without the focus: prefix", () => {
+    const selectedWithoutFocus = styles.selectedItemStyle.replace(
+      /focus:/g,
+      ""
+    );
+    expect(selectedWithoutFocus).toEqual(styles.testSelectedItemStyle);
+  });
+});

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -0,0 +1,86 @@
+import React, { memo, useLayoutEffect, useRef, useState } from "react";
+import {
+  EDITOR_PANEL_GROUP_ID,
+  LEFT_SIDEBAR_ID,
+  RIGHT_SIDEBAR_ID,
+} from "../../hooks/usePreservePanelSize";
+import { Drawer } from "../Drawer";
+import { LayoutProps } from "./types";
+
+export const DrawerWorkspaceLayout = memo(function DrawerWorkspaceLayout({
+  leftPanel,
+  leftSidebarRef,
+  rightPanel,
+  rightSidebarRef,
+  centerPanel,
+  internalLayoutState,
+  handleChangeLayoutState,
+}: LayoutProps) {
+  const portalContainer = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useLayoutEffect(() => {
+    if (mounted) return;
+
+    setMounted(true);
+    handleChangeLayoutState({
+      leftSidebarCollapsed: true,
+      rightSidebarCollapsed: true,
+    });
+  }, [handleChangeLayoutState, mounted]);
+
+  const leftSidebarCollapsed =
+    internalLayoutState?.leftSidebarCollapsed ?? false;
+  const rightSidebarCollapsed =
+    internalLayoutState?.rightSidebarCollapsed ?? false;
+
+  return (
+    <div
+      ref={portalContainer}
+      id={EDITOR_PANEL_GROUP_ID}
+      className="flex flex-1 relative focus:outline-none"
+    >
+      {leftPanel && (
+        <Drawer
+          id={LEFT_SIDEBAR_ID}
+          ref={leftSidebarRef}
+          className="flex-1"
+          open={!leftSidebarCollapsed}
+          positioning="absolute"
+          side="left"
+          trigger={null}
+          portalContainer={portalContainer.current}
+          onOpenChange={(open) => {
+            handleChangeLayoutState({
+              rightSidebarCollapsed: rightSidebarCollapsed,
+              leftSidebarCollapsed: !open,
+            });
+          }}
+        >
+          {leftPanel}
+        </Drawer>
+      )}
+      {centerPanel}
+      {rightPanel && (
+        <Drawer
+          id={RIGHT_SIDEBAR_ID}
+          ref={rightSidebarRef}
+          className="flex-1"
+          open={!rightSidebarCollapsed}
+          positioning="absolute"
+          side="right"
+          trigger={null}
+          portalContainer={portalContainer.current}
+          onOpenChange={(open) => {
+            handleChangeLayoutState({
+              leftSidebarCollapsed: leftSidebarCollapsed,
+              rightSidebarCollapsed: !open,
+            });
+          }}
+        >
+          {rightPanel}
+        </Drawer>
+      )}
+    </div>
+  );
+});

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -0,0 +1,102 @@
+import React, { memo, useRef } from "react";
+import {
+  ImperativePanelGroupHandle,
+  ImperativePanelHandle,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from "react-resizable-panels";
+import {
+  CONTENT_AREA_ID,
+  EDITOR_PANEL_GROUP_ID,
+  LEFT_SIDEBAR_ID,
+  RIGHT_SIDEBAR_ID,
+  usePreservePanelSize,
+} from "../../hooks/usePreservePanelSize";
+import { LayoutProps } from "./types";
+
+export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
+  leftPanel,
+  rightPanel,
+  centerPanel,
+  leftSidebarOptions,
+  rightSidebarOptions,
+  centerPanelPercentage,
+  autoSavePrefix,
+  internalLayoutState,
+  leftSidebarRef,
+  rightSidebarRef,
+  handleChangeLayoutState,
+}: LayoutProps) {
+  const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
+
+  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
+
+  return (
+    <PanelGroup
+      ref={panelGroupRef}
+      id={EDITOR_PANEL_GROUP_ID}
+      className="flex-1"
+      direction="horizontal"
+      autoSaveId={
+        autoSavePrefix
+          ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}`
+          : undefined
+      }
+    >
+      {leftPanel && (
+        <>
+          <Panel
+            id={LEFT_SIDEBAR_ID}
+            className="relative"
+            order={1}
+            ref={leftSidebarRef as React.RefObject<ImperativePanelHandle>}
+            defaultSize={leftSidebarOptions.initialSize}
+            minSize={leftSidebarOptions.minSize}
+            maxSize={
+              leftSidebarOptions.maxSize ??
+              (!leftSidebarOptions.resizable
+                ? leftSidebarOptions.initialSize
+                : undefined)
+            }
+            collapsible
+          >
+            {internalLayoutState?.leftSidebarCollapsed ? null : leftPanel}
+          </Panel>
+          <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
+        </>
+      )}
+      <Panel
+        id={CONTENT_AREA_ID}
+        order={2}
+        defaultSize={centerPanelPercentage}
+        minSize={10}
+        className="flex relative"
+      >
+        {centerPanel}
+      </Panel>
+      {rightPanel && (
+        <>
+          <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
+          <Panel
+            id={RIGHT_SIDEBAR_ID}
+            className="relative"
+            order={3}
+            ref={rightSidebarRef as React.RefObject<ImperativePanelHandle>}
+            minSize={rightSidebarOptions.minSize}
+            defaultSize={rightSidebarOptions.initialSize}
+            maxSize={
+              rightSidebarOptions.maxSize ??
+              (!rightSidebarOptions.resizable
+                ? rightSidebarOptions.initialSize
+                : undefined)
+            }
+            collapsible
+          >
+            {internalLayoutState?.rightSidebarCollapsed ? null : rightPanel}
+          </Panel>
+        </>
+      )}
+    </PanelGroup>
+  );
+});

package/src/components/{WorkspaceLayout.tsx → workspace/WorkspaceLayout.tsx}

@@ -1,4 +1,5 @@
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
+import { useSize } from "@noya-app/react-utils";
 import React, {
   forwardRef,
   memo,
@@ -7,23 +8,19 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useWindowSize } from "../../hooks/useWindowSize";
+import { cx } from "../../utils/classNames";
+import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
+import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
 import {
-  ImperativePanelGroupHandle,
-  ImperativePanelHandle,
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-} from "react-resizable-panels";
-import {
-  CONTENT_AREA_ID,
-  EDITOR_PANEL_GROUP_ID,
-  LEFT_SIDEBAR_ID,
   PanelLayoutState,
-  RIGHT_SIDEBAR_ID,
-  usePreservePanelSize,
-} from "../hooks/usePreservePanelSize";
-import { useWindowSize } from "../hooks/useWindowSize";
-import { cx } from "../utils/classNames";
+  PercentageSidebarOptions,
+  SidebarRef,
+} from "./types";
+
+export type SideType = "auto" | "panel" | "drawer";
+
+export type DetectSizeType = "container" | "window";
 
 export interface WorkspaceLayoutProps {
   id?: string;
@@ -37,10 +34,13 @@ export interface WorkspaceLayoutProps {
   right?: React.ReactNode;
   rightOptions?: SideOptions;
   toolbar?: React.ReactNode;
+  sideType?: SideType;
+  sideTypeBreakpoint?: number;
+  detectSize?: DetectSizeType;
   onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
 }
 
-export type IWorkspaceLayout = {
+export type WorkspaceLayoutRef = {
   setLeftExpanded: (expanded: boolean) => void;
   setRightExpanded: (expanded: boolean) => void;
   toggleSides: () => void;
@@ -72,6 +72,9 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     toolbar,
     children,
     onChangeLayoutState,
+    sideType = "auto",
+    sideTypeBreakpoint = 800,
+    detectSize = "container",
     leftOptions: {
       minSize: leftMinSize = 200,
       maxSize: leftMaxSize = 500,
@@ -90,13 +93,25 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     } = {},
     theme,
   }: WorkspaceLayoutProps,
-  forwardedRef: React.ForwardedRef<IWorkspaceLayout>
+  forwardedRef: React.ForwardedRef<WorkspaceLayoutRef>
 ) {
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
+
+  // If we're in embedded (iframed) mode, use the window size.
+  // Otherwise, use the container size (if it's available).
+  const parentSize =
+    detectSize === "window"
+      ? windowSize
+      : containerSize && containerSize.width > 0
+        ? containerSize
+        : windowSize;
+
   function getPercentage(size: number | string) {
     return typeof size === "string"
       ? parseFloat(size)
-      : (size / windowSize.width) * 100;
+      : (size / parentSize.width) * 100;
   }
 
   function clampPercentage(
@@ -134,12 +149,12 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     rightSidebarMaxPercentage
   );
 
-  const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
-  const leftSidebarRef = useRef<ImperativePanelHandle>(null);
-  const rightSidebarRef = useRef<ImperativePanelHandle>(null);
+  const leftSidebarRef = useRef<SidebarRef>(null);
+  const rightSidebarRef = useRef<SidebarRef>(null);
 
   const [internalLayoutState, setInternalLayoutState] =
     useState<PanelLayoutState | null>(null);
+
   const handleChangeLayoutState = useCallback(
     (state: PanelLayoutState) => {
       setInternalLayoutState(state);
@@ -148,8 +163,6 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     [onChangeLayoutState]
   );
 
-  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
-
   useImperativeHandle(forwardedRef, () => ({
     setLeftExpanded: (expanded: boolean) => {
       if (expanded) {
@@ -217,96 +230,86 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     (left ? leftSidebarPercentage : 0) -
     (right ? rightSidebarPercentage : 0);
 
+  const leftPanel = left ? (
+    <PanelInner
+      style={leftStyle}
+      className={cx("bg-sidebar-background flex-col", leftClassName)}
+    >
+      {left}
+    </PanelInner>
+  ) : null;
+
+  const rightPanel = right ? (
+    <PanelInner
+      style={rightStyle}
+      className={cx("bg-sidebar-background flex-col", rightClassName)}
+    >
+      {right}
+    </PanelInner>
+  ) : null;
+
+  const centerPanel = (
+    <PanelInner className="bg-canvas-background">{children}</PanelInner>
+  );
+
+  const leftSidebarOptions: PercentageSidebarOptions = {
+    minSize: leftSidebarMinPercentage,
+    maxSize: leftSidebarMaxPercentage,
+    initialSize: leftSidebarPercentage,
+    resizable: leftResizable,
+  };
+
+  const rightSidebarOptions: PercentageSidebarOptions = {
+    minSize: rightSidebarMinPercentage,
+    maxSize: rightSidebarMaxPercentage,
+    initialSize: rightSidebarPercentage,
+    resizable: rightResizable,
+  };
+
+  const LayoutComponent =
+    sideType === "panel"
+      ? PanelWorkspaceLayout
+      : sideType === "drawer"
+        ? DrawerWorkspaceLayout
+        : parentSize.width > sideTypeBreakpoint
+          ? PanelWorkspaceLayout
+          : DrawerWorkspaceLayout;
+
+  // Wait until the container size is available to render the layout.
+  // This is to avoid flickering when the layout is initially rendered.
+  // If we're in embedded (iframed) mode, we don't need to wait for the container size,
+  // because the window size is guaranteed to be available.
+  //
+  // We could always wait for the container size, but this lets us render
+  // sooner in the embedded case.
+  const readyToRender =
+    detectSize === "window" || (containerSize && containerSize.width > 0);
+
   return (
     <div
+      ref={containerRef}
       id={id}
-      className={cx("flex flex-col bg-canvas-background", className)}
+      className={cx("flex flex-col bg-canvas-background relative", className)}
       style={style}
       data-theme={theme}
     >
       {toolbar}
-      <div className="flex flex-row flex-1">
-        <PanelGroup
-          ref={panelGroupRef}
-          id={EDITOR_PANEL_GROUP_ID}
-          className="flex-1"
-          direction="horizontal"
-          autoSaveId={
-            autoSavePrefix
-              ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}`
-              : undefined
-          }
-        >
-          {left && (
-            <>
-              <Panel
-                id={LEFT_SIDEBAR_ID}
-                className="relative"
-                order={1}
-                ref={leftSidebarRef}
-                defaultSize={leftSidebarPercentage}
-                minSize={leftSidebarMinPercentage ?? leftSidebarPercentage}
-                maxSize={
-                  leftSidebarMaxPercentage ??
-                  (!leftResizable ? leftSidebarPercentage : undefined)
-                }
-                collapsible
-              >
-                {internalLayoutState?.leftSidebarCollapsed ? null : (
-                  <PanelInner
-                    style={leftStyle}
-                    className={cx(
-                      "bg-sidebar-background flex-col",
-                      leftClassName
-                    )}
-                  >
-                    {left}
-                  </PanelInner>
-                )}
-              </Panel>
-              <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
-            </>
-          )}
-          <Panel
-            id={CONTENT_AREA_ID}
-            order={2}
-            defaultSize={centerPanelPercentage}
-            minSize={10}
-            className="flex relative"
-          >
-            <PanelInner className="bg-canvas-background">{children}</PanelInner>
-          </Panel>
-          {right && (
-            <>
-              <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
-              <Panel
-                id={RIGHT_SIDEBAR_ID}
-                className="relative"
-                order={3}
-                ref={rightSidebarRef}
-                minSize={rightSidebarMinPercentage ?? rightSidebarPercentage}
-                defaultSize={rightSidebarPercentage}
-                maxSize={
-                  rightSidebarMaxPercentage ??
-                  (!rightResizable ? rightSidebarPercentage : undefined)
-                }
-                collapsible
-              >
-                {internalLayoutState?.rightSidebarCollapsed ? null : (
-                  <PanelInner
-                    style={rightStyle}
-                    className={cx(
-                      "bg-sidebar-background flex-col",
-                      rightClassName
-                    )}
-                  >
-                    {right}
-                  </PanelInner>
-                )}
-              </Panel>
-            </>
-          )}
-        </PanelGroup>
+      <div className="flex flex-row flex-1 relative">
+        {readyToRender && (
+          <LayoutComponent
+            leftPanel={leftPanel}
+            rightPanel={rightPanel}
+            centerPanel={centerPanel}
+            leftSidebarOptions={leftSidebarOptions}
+            rightSidebarOptions={rightSidebarOptions}
+            centerPanelPercentage={centerPanelPercentage}
+            autoSavePrefix={autoSavePrefix}
+            internalLayoutState={internalLayoutState}
+            leftSidebarRef={leftSidebarRef}
+            rightSidebarRef={rightSidebarRef}
+            handleChangeLayoutState={handleChangeLayoutState}
+          />
+        )}
       </div>
     </div>
   );

package/src/components/workspace/types.ts

@@ -0,0 +1,31 @@
+export type SidebarRef = {
+  expand: () => void;
+  collapse: () => void;
+  isExpanded: () => boolean;
+};
+
+export type PercentageSidebarOptions = {
+  minSize?: number;
+  maxSize?: number;
+  initialSize?: number;
+  resizable?: boolean;
+};
+
+export type PanelLayoutState = {
+  leftSidebarCollapsed: boolean;
+  rightSidebarCollapsed: boolean;
+};
+
+export type LayoutProps = {
+  leftPanel: React.ReactNode;
+  rightPanel: React.ReactNode;
+  centerPanel: React.ReactNode;
+  leftSidebarOptions: PercentageSidebarOptions;
+  rightSidebarOptions: PercentageSidebarOptions;
+  centerPanelPercentage: number;
+  autoSavePrefix?: string;
+  internalLayoutState: PanelLayoutState | null;
+  leftSidebarRef: React.RefObject<SidebarRef>;
+  rightSidebarRef: React.RefObject<SidebarRef>;
+  handleChangeLayoutState: (state: PanelLayoutState) => void;
+};