@noya-app/noya-designsystem 0.1.86 → 0.1.88

package/package.json

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

package/src/__tests__/SharedDragProvider.test.ts

@@ -0,0 +1,39 @@
+import type { PointerSensorProps } from "@dnd-kit/core";
+import { describe, expect, test } from "bun:test";
+import { ContinuousPointerSensor } from "../components/sorting/SharedDragProvider";
+
+describe("ContinuousPointerSensor", () => {
+  test("forwards the movement that activates a distance-constrained drag", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const pointerDown = new PointerEvent("pointerdown", {
+      clientX: 10,
+      clientY: 20,
+    });
+    target.dispatchEvent(pointerDown);
+
+    const events: string[] = [];
+    const props = {
+      active: "item",
+      activeNode: {},
+      context: { current: {} },
+      event: pointerDown,
+      options: { activationConstraint: { distance: 4 } },
+      onAbort: () => {},
+      onPending: () => {},
+      onStart: () => events.push("start"),
+      onMove: ({ x, y }) => events.push(`move:${x},${y}`),
+      onEnd: () => events.push("end"),
+      onCancel: () => {},
+    } as PointerSensorProps;
+
+    new ContinuousPointerSensor(props);
+    document.dispatchEvent(
+      new PointerEvent("pointermove", { clientX: 30, clientY: 40 })
+    );
+    document.dispatchEvent(new PointerEvent("pointerup"));
+
+    expect(events).toEqual(["start", "move:30,40", "end"]);
+    target.remove();
+  });
+});

package/src/components/AppToolbar.tsx

@@ -0,0 +1,464 @@
+"use client";
+
+import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
+import React, {
+  ComponentProps,
+  createContext,
+  ReactNode,
+  useContext,
+} from "react";
+
+import { memoGeneric } from "@noya-app/react-utils";
+import { BaseToolbar } from "./BaseToolbar";
+import { Button } from "./Button";
+import { DividerVertical } from "./Divider";
+import { DropdownMenu } from "./DropdownMenu";
+import {
+  getKeyboardShortcutsForMenuItems,
+  isSelectableMenuItem,
+  KeyboardShortcut,
+  MenuItem,
+  PopoverMenuItem,
+  SelectableMenuItem,
+  SubMenuItem,
+} from "./internal/Menu";
+import { Popover } from "./Popover";
+import { Spacer } from "./Spacer";
+import { ToolbarDrawer } from "./ToolbarDrawer";
+import { Tooltip } from "./Tooltip";
+
+const SIDE_OFFSET = 6;
+
+export const ToolbarMenuContext = createContext<{
+  dividerOverflow?: number;
+  /** When true, PopoverMenuItem items show as dialogs on small screens */
+  useDialogOnSmallScreen?: boolean;
+  /** Function to detect if screen is small. Required when useDialogOnSmallScreen is true */
+  isSmallScreen?: boolean;
+  /** Function to open a dialog. Required when useDialogOnSmallScreen is true */
+  openDialog?: (options: {
+    title: ReactNode;
+    className?: string;
+    children: ReactNode | ((props: { close: () => void }) => ReactNode);
+  }) => Promise<void> & { close: () => void };
+}>({});
+
+export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
+  T extends string,
+>({
+  item,
+  onSelectMenuItem,
+  onPopoverOpenChange,
+}: {
+  item: SubMenuItem<T>;
+  onSelectMenuItem?: (value: T) => void;
+  onPopoverOpenChange?: (open: boolean) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      onPopoverOpenChange?.(newOpen);
+    },
+    [onPopoverOpenChange]
+  );
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={handleOpenChange}
+      items={item.items}
+      modal={false}
+      onSelect={(value) => {
+        if (onSelectMenuItem && value) {
+          onSelectMenuItem(value);
+        }
+      }}
+    >
+      <Button
+        disabled={item.disabled}
+        active={item.checked || open}
+        icon={item.icon}
+        iconRight={
+          item.icon === "DotsVerticalIcon" || item.icon === "DotsHorizontalIcon"
+            ? undefined
+            : "DropdownChevronIcon"
+        }
+      >
+        {item.title}
+      </Button>
+    </DropdownMenu>
+  );
+});
+
+export const ToolbarShortcut = ({
+  shortcut,
+  label,
+}: {
+  shortcut: string;
+  label?: ReactNode;
+}) => {
+  return (
+    <div className="n-flex n-items-center">
+      {label}
+      <Spacer.Horizontal size={6} />
+      <KeyboardShortcut shortcut={shortcut} />
+    </div>
+  );
+};
+
+export const ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover({
+  item,
+  portalContainer,
+  onPopoverOpenChange,
+}: {
+  item: PopoverMenuItem;
+  portalContainer?: HTMLElement | null;
+  onPopoverOpenChange?: (open: boolean) => void;
+}) {
+  const {
+    disabled,
+    icon,
+    title,
+    tooltip,
+    content: itemContent,
+    checked,
+    popoverClassName,
+    triggerProps: buttonProps,
+  } = item;
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      onPopoverOpenChange?.(newOpen);
+    },
+    [onPopoverOpenChange]
+  );
+
+  const { useDialogOnSmallScreen, isSmallScreen, openDialog } =
+    useContext(ToolbarMenuContext);
+
+  const shouldUseDialog = useDialogOnSmallScreen && isSmallScreen && openDialog;
+
+  const handleOpenDialog = React.useCallback(() => {
+    if (!openDialog) return;
+
+    handleOpenChange(true);
+    const dialogContent =
+      typeof itemContent === "function" ? (
+        (props: { close: () => void }) => (
+          <div className="-n-m-3">{itemContent(props)}</div>
+        )
+      ) : (
+        <div className="-n-m-3">{itemContent}</div>
+      );
+
+    const dialog = openDialog({
+      title,
+      children: dialogContent,
+    });
+    dialog.then(() => handleOpenChange(false));
+  }, [openDialog, itemContent, title, handleOpenChange]);
+
+  const trigger = (
+    <Button
+      disabled={disabled}
+      active={checked || open}
+      icon={icon}
+      iconRight="DropdownChevronIcon"
+      onClick={shouldUseDialog ? handleOpenDialog : undefined}
+      {...buttonProps}
+    >
+      {title}
+    </Button>
+  );
+
+  // On small screens with dialog mode enabled, just render the trigger button
+  if (shouldUseDialog) {
+    return tooltip && !open ? (
+      <Tooltip
+        sideOffset={SIDE_OFFSET}
+        side="top"
+        content={tooltip}
+        portalContainer={portalContainer}
+      >
+        {trigger}
+      </Tooltip>
+    ) : (
+      trigger
+    );
+  }
+
+  const content = (
+    <span>
+      <Popover
+        open={open}
+        onOpenChange={handleOpenChange}
+        side="top"
+        showArrow={false}
+        sideOffset={SIDE_OFFSET}
+        portalContainer={portalContainer}
+        trigger={trigger}
+        className={popoverClassName}
+      >
+        {typeof itemContent === "function"
+          ? itemContent({ close: () => handleOpenChange(false) })
+          : itemContent}
+      </Popover>
+    </span>
+  );
+
+  return tooltip && !open ? (
+    <Tooltip
+      sideOffset={SIDE_OFFSET}
+      side="top"
+      content={tooltip}
+      portalContainer={portalContainer}
+    >
+      {content}
+    </Tooltip>
+  ) : (
+    content
+  );
+});
+
+export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
+  T extends string,
+>({
+  item,
+  onSelectMenuItem,
+  as,
+  activeValue,
+  tooltipSide,
+  displayFilter,
+}: {
+  item: SelectableMenuItem<T>;
+  onSelectMenuItem?: (value: T) => void;
+  as?: ComponentProps<typeof Button>["as"];
+  activeValue?: T;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+  displayFilter?: DisplayFilter;
+}) {
+  const isActive = item.checked || activeValue === item.value;
+
+  const content = (
+    <Button
+      as={as}
+      disabled={item.disabled}
+      active={isActive}
+      icon={displayFilter === "textOnly" ? undefined : item.icon}
+      {...(as === "a" && { href: item.value })}
+      onClick={() => {
+        if (onSelectMenuItem && item.value) {
+          onSelectMenuItem(item.value);
+        }
+      }}
+    >
+      {displayFilter === "iconOnly" ? undefined : item.title}
+    </Button>
+  );
+
+  const tooltip =
+    item.tooltip ??
+    (displayFilter === "iconOnly" && item.title ? item.title : undefined);
+
+  return item.drawer && isActive ? (
+    <ToolbarDrawer trigger={content}>{item.drawer}</ToolbarDrawer>
+  ) : tooltip ? (
+    <Tooltip sideOffset={SIDE_OFFSET} content={tooltip} side={tooltipSide}>
+      {content}
+    </Tooltip>
+  ) : (
+    content
+  );
+});
+
+export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
+  T extends string,
+>({
+  item,
+  onSelectMenuItem,
+  buttonAs,
+  activeValue,
+  tooltipSide,
+  portalContainer,
+  displayFilter,
+  dividerOverflow: dividerOverflowProp,
+  onPopoverOpenChange,
+}: {
+  item: MenuItem<T>;
+  onSelectMenuItem?: (value: T) => void;
+  buttonAs?: ComponentProps<typeof Button>["as"];
+  activeValue?: T;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+  portalContainer?: HTMLElement | null;
+  displayFilter?: DisplayFilter;
+  dividerOverflow?: number;
+  onPopoverOpenChange?: (open: boolean) => void;
+}) {
+  const { dividerOverflow: contextDividerOverflow } =
+    useContext(ToolbarMenuContext);
+
+  const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
+
+  if (item.type === "sectionHeader") return null;
+
+  if (item.type === "separator") {
+    return <DividerVertical overflow={dividerOverflow} />;
+  }
+
+  if (item.type === "popover") {
+    return (
+      <ToolbarMenuPopover
+        item={item}
+        portalContainer={portalContainer}
+        onPopoverOpenChange={onPopoverOpenChange}
+      />
+    );
+  }
+
+  if (isSelectableMenuItem(item)) {
+    return (
+      <ToolbarMenuButton
+        item={item}
+        onSelectMenuItem={onSelectMenuItem}
+        as={buttonAs}
+        activeValue={activeValue}
+        tooltipSide={tooltipSide}
+        displayFilter={displayFilter}
+      />
+    );
+  }
+
+  return (
+    <ToolbarMenuDropdown
+      item={item}
+      onSelectMenuItem={onSelectMenuItem}
+      onPopoverOpenChange={onPopoverOpenChange}
+    />
+  );
+});
+
+type DisplayFilter = "iconOnly" | "iconAndText" | "textOnly";
+
+export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
+  items,
+  onSelectMenuItem,
+  buttonAs,
+  activeValue,
+  tooltipSide,
+  portalContainer,
+  displayFilter = "iconAndText",
+  dividerOverflow,
+  onPopoverOpenChange,
+}: {
+  items: MenuItem<T>[];
+  onSelectMenuItem?: (value: T) => void;
+  buttonAs?: ComponentProps<typeof Button>["as"];
+  activeValue?: T;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+  portalContainer?: HTMLElement | null;
+  displayFilter?: DisplayFilter;
+  dividerOverflow?: number;
+  onPopoverOpenChange?: (open: boolean) => void;
+}) {
+  return (
+    <>
+      {items.map((item, i) => {
+        return (
+          <ToolbarMenuItem
+            key={i}
+            item={item}
+            onSelectMenuItem={onSelectMenuItem}
+            buttonAs={buttonAs}
+            activeValue={activeValue}
+            tooltipSide={tooltipSide}
+            portalContainer={portalContainer}
+            displayFilter={displayFilter}
+            dividerOverflow={dividerOverflow}
+            onPopoverOpenChange={onPopoverOpenChange}
+          />
+        );
+      })}
+    </>
+  );
+});
+
+export interface AppToolbarProps<T extends string = string> {
+  children?: React.ReactNode;
+  logo?: React.ReactNode;
+  leftMenuItems?: MenuItem<T>[];
+  rightMenuItems?: MenuItem<T>[];
+  onSelectMenuItem?: (value: T) => void;
+  /** Whether to bind keyboard shortcuts for menu items. @default true */
+  shouldBindKeyboardShortcuts?: boolean;
+  dividerOverflow?: number;
+}
+
+export function useBindKeyboardShortcutsForMenuItems<T extends string>(
+  items: MenuItem<T>[],
+  onSelectMenuItem?: (value: T) => void
+) {
+  return useKeyboardShortcuts(
+    React.useMemo(
+      () =>
+        onSelectMenuItem
+          ? getKeyboardShortcutsForMenuItems(items, onSelectMenuItem)
+          : {},
+      [items, onSelectMenuItem]
+    )
+  );
+}
+
+export function AppToolbar<T extends string = string>({
+  children,
+  logo,
+  leftMenuItems = [],
+  rightMenuItems = [],
+  onSelectMenuItem,
+  shouldBindKeyboardShortcuts = true,
+  dividerOverflow,
+}: AppToolbarProps<T>) {
+  // Register keyboard shortcuts for all menu items
+  const allMenuItems = React.useMemo(
+    () => [...leftMenuItems, ...rightMenuItems],
+    [leftMenuItems, rightMenuItems]
+  );
+
+  useBindKeyboardShortcutsForMenuItems(
+    allMenuItems,
+    shouldBindKeyboardShortcuts ? onSelectMenuItem : undefined
+  );
+
+  return (
+    <BaseToolbar
+      logo={logo}
+      left={
+        leftMenuItems.length > 0 && (
+          <div className="n-flex n-gap-2">
+            <ToolbarMenu
+              items={leftMenuItems}
+              onSelectMenuItem={onSelectMenuItem}
+              dividerOverflow={dividerOverflow}
+            />
+          </div>
+        )
+      }
+      right={
+        rightMenuItems.length > 0 && (
+          <div className="n-flex n-gap-2">
+            <ToolbarMenu
+              items={rightMenuItems}
+              onSelectMenuItem={onSelectMenuItem}
+              dividerOverflow={dividerOverflow}
+            />
+          </div>
+        )
+      }
+    >
+      {children}
+    </BaseToolbar>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from "react";
+import { cx } from "../utils/classNames";
+
+export type CardProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { className, ...props },
+  forwardedRef
+) {
+  return (
+    <div
+      ref={forwardedRef}
+      className={cx(
+        "n-box-border n-rounded-lg n-border n-border-divider-subtle n-bg-canvas-background n-p-4",
+        className
+      )}
+      {...props}
+    />
+  );
+});

package/src/components/Dialog.tsx

@@ -32,7 +32,7 @@ const StyledPopup = forwardRef<
     <DialogPrimitive.Popup
       ref={ref}
       className={cx(
-        `n-fixed n-top-1/2 n-left-1/2 -n-translate-x-1/2 -n-translate-y-1/2 n-w-[90vw] n-max-w-[550px] n-max-h-[85vh] n-p-dialog-padding n-rounded-[2px] n-font-sans n-text-heading5 n-font-normal n-leading-[19px] n-text-text-muted n-bg-popover-background n-pointer-events-all n-z-[1000] focus:n-outline-none n-shadow-dialog-shadow n-flex n-flex-col`,
+        `n-fixed n-top-1/2 n-left-1/2 -n-translate-x-1/2 -n-translate-y-1/2 n-w-[calc(100vw-16px)] sm:n-w-[90vw] n-max-w-[550px] n-max-h-[85vh] n-p-dialog-padding n-rounded-[2px] n-font-sans n-text-heading5 n-font-normal n-leading-[19px] n-text-text-muted n-bg-popover-background n-pointer-events-all n-z-[1000] focus:n-outline-none n-shadow-dialog-shadow n-flex n-flex-col`,
         className
       )}
       {...props}
@@ -74,8 +74,9 @@ export interface IDialog {
   containsElement: (element: HTMLElement) => boolean;
 }
 
-interface Props {
+export interface DialogProps {
   title?: ReactNode;
+  titleVisibility?: "visible" | "hidden";
   description?: ReactNode;
   children?: ReactNode;
   style?: React.CSSProperties;
@@ -90,6 +91,7 @@ export const Dialog = forwardRef(function Dialog(
   {
     children,
     title,
+    titleVisibility = "visible",
     description,
     open,
     style,
@@ -97,7 +99,7 @@ export const Dialog = forwardRef(function Dialog(
     closeOnInteractOutside: _closeOnInteractOutside = true,
     className,
     showCloseButton = true,
-  }: Props,
+  }: DialogProps,
   forwardedRef: ForwardedRef<IDialog>
 ) {
   const contentRef = useRef<HTMLDivElement>(null);
@@ -142,12 +144,17 @@ export const Dialog = forwardRef(function Dialog(
               }
             />
           )}
-          {title && (
+          {title && titleVisibility === "visible" && (
             <>
               <StyledTitle>{title}</StyledTitle>
               <Spacer.Vertical size={description ? 10 : 20} />
             </>
           )}
+          {title && titleVisibility === "hidden" && (
+            <VisuallyHidden>
+              <StyledTitle>{title}</StyledTitle>
+            </VisuallyHidden>
+          )}
           {!title && (
             <VisuallyHidden>
               <StyledTitle>Dialog</StyledTitle>
@@ -167,7 +174,7 @@ export const Dialog = forwardRef(function Dialog(
 });
 
 export const FullscreenDialog = forwardRef(function FullscreenDialog(
-  { style, ...rest }: Props,
+  { style, ...rest }: DialogProps,
   forwardedRef: ForwardedRef<IDialog>
 ) {
   return (