@noya-app/noya-designsystem 0.1.54 → 0.1.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "@noya-app/noya-colorpicker": "0.1.21",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-geometry": "0.1.11",
-    "@noya-app/noya-icons": "0.1.8",
+    "@noya-app/noya-icons": "0.1.10",
     "@noya-app/noya-keymap": "0.1.3",
     "@noya-app/noya-tailwind-config": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",

package/src/__tests__/validateDropIndicator.test.ts

@@ -2,46 +2,46 @@ import { describe, expect, it } from "bun:test";
 import {
   defaultAcceptsDrop,
   validateDropIndicator,
-} from "../components/Sortable";
+} from "../components/sorting/sorting";
 
 describe("defaultAcceptsDrop", () => {
   it("should return false if the active item is the same as the over item", () => {
-    const result = defaultAcceptsDrop(0, 0, "inside");
+    const result = defaultAcceptsDrop(0, 0, "inside", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false for 'inside' position", () => {
-    const result = defaultAcceptsDrop(0, 1, "inside");
+    const result = defaultAcceptsDrop(0, 1, "inside", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false when dropping above the same item", () => {
-    const result = defaultAcceptsDrop(0, 0, "above");
+    const result = defaultAcceptsDrop(0, 0, "above", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false when dropping below the same item", () => {
-    const result = defaultAcceptsDrop(0, 0, "below");
+    const result = defaultAcceptsDrop(0, 0, "below", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false when dropping above the item below the source", () => {
-    const result = defaultAcceptsDrop(0, 1, "above");
+    const result = defaultAcceptsDrop(0, 1, "above", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false when dropping below the item above the source", () => {
-    const result = defaultAcceptsDrop(1, 0, "below");
+    const result = defaultAcceptsDrop(1, 0, "below", "", "");
     expect(result).toBe(false);
   });
 
   it("should return true when dropping above a valid target", () => {
-    const result = defaultAcceptsDrop(0, 2, "above");
+    const result = defaultAcceptsDrop(0, 2, "above", "", "");
     expect(result).toBe(true);
   });
 
   it("should return true when dropping below a valid target", () => {
-    const result = defaultAcceptsDrop(2, 0, "below");
+    const result = defaultAcceptsDrop(2, 0, "below", "", "");
     expect(result).toBe(true);
   });
 });
@@ -97,6 +97,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 50, // offsetStart in middle third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("inside");
     });
@@ -110,6 +112,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 20, // offsetStart in top third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("above");
     });
@@ -123,6 +127,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 80, // offsetStart in bottom third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("inside");
     });
@@ -138,6 +144,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 50, // offsetStart in middle third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("inside");
     });
@@ -151,6 +159,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 20, // offsetStart in top third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("above");
     });
@@ -164,6 +174,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 80, // offsetStart in bottom third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("below");
     });
@@ -177,6 +189,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 120, // offsetStart in middle third relative to elementStart
         elementStart: 100, // elementStart
         elementSize: 60, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("inside");
     });
@@ -191,6 +205,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 50, // offsetStart in middle third
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBe("inside");
   });
@@ -204,6 +220,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 20, // offsetStart in top half
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBe("above");
   });
@@ -217,6 +235,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 70, // offsetStart in bottom half
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBe("below");
   });
@@ -230,6 +250,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 20, // offsetStart in top half
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBe("inside");
   });
@@ -244,6 +266,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 50,
       elementStart: 0,
       elementSize: 100,
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBeUndefined();
   });
@@ -257,6 +281,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 50,
       elementStart: 0,
       elementSize: 100,
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBeUndefined();
   });

package/src/components/Button.tsx

@@ -7,7 +7,10 @@ import React, {
   useMemo,
 } from "react";
 import { cx, mergeConflictingClassNames } from "../utils/classNames";
+import { renderIcon } from "./Icons";
+import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
+import type { MenuItemIcon } from "./internal/Menu";
 
 type ButtonVariant =
   | "normal"
@@ -48,6 +51,8 @@ export interface ButtonRootProps {
   className?: string;
   style?: CSSProperties;
   tabIndex?: number;
+  icon?: MenuItemIcon;
+  iconRight?: MenuItemIcon;
   children: ReactNode;
   active?: boolean;
   disabled?: boolean;
@@ -71,6 +76,8 @@ export const Button = forwardRef(function Button(
     className,
     style,
     tabIndex,
+    icon,
+    iconRight,
     tooltip,
     active = false,
     disabled = false,
@@ -128,7 +135,13 @@ export const Button = forwardRef(function Button(
         className="min-h-[19px] flex items-center flex-1 justify-center leading-[15px]"
         style={contentStyle}
       >
+        {icon && renderIcon(icon)}
+        {icon && children && <Spacer.Horizontal inline size={6} />}
         {children}
+        {iconRight && (icon || children) && (
+          <Spacer.Horizontal inline size={6} />
+        )}
+        {iconRight && renderIcon(iconRight)}
       </span>
     </Component>
   );

package/src/components/Dialog.tsx

@@ -30,9 +30,8 @@ const StyledContent = forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cx(
-        `
-      fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-      w-[90vw] max-w-[450px] max-h-[85vh] p-dialog-padding rounded-[2px] 
+        `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
+      w-[90vw] max-w-[550px] max-h-[85vh] p-dialog-padding rounded-[2px] 
       font-sans text-heading5 font-normal leading-[19px] text-text-muted 
       bg-popover-background pointer-events-all z-[1000] focus:outline-none 
       shadow-dialog-shadow
@@ -54,7 +53,7 @@ const StyledTitle = forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cx(
-      `m-0 font-sans text-base font-normal leading-[1.4] text-text `,
+      `m-0 font-sans text-heading3 font-medium leading-[1.4] text-text `,
       className
     )}
     {...props}
@@ -152,7 +151,6 @@ export const Dialog = forwardRef(function Dialog(
         )}
         {description && (
           <>
-            <Spacer.Vertical size={10} />
             <StyledDescription>{description}</StyledDescription>
             <Spacer.Vertical size={20} />
           </>

package/src/components/Grid.tsx

@@ -235,7 +235,9 @@ export const Grid = memoGeneric(
                         <span
                           {...props}
                           className={cx(
-                            isSelected && "text-selected-list-item-text",
+                            isSelected
+                              ? "text-selected-list-item-text"
+                              : "text-text",
                             "truncate select-none"
                           )}
                         />

package/src/components/GridView.tsx

@@ -194,6 +194,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         <>
           <Spacer.Vertical size={8} />
           <ItemTitle>{title || " "}</ItemTitle>
+          <Spacer.Vertical size={2} />
           <ItemDescription>{subtitle || " "}</ItemDescription>
         </>
       )}

package/src/components/InputField.tsx

@@ -239,7 +239,7 @@ const InputElement = forwardRef(
         : size === "large"
           ? "py-2.5 text-heading5"
           : size === "medium"
-            ? "py-1  text-heading5"
+            ? "py-1 text-heading5"
             : $variant === "bare" && "py-1 -m-1",
       className
     );
@@ -488,7 +488,9 @@ interface InputFieldRootProps {
   id?: string;
   children?: ReactNode;
   start?: ReactNode;
+  startClassName?: string;
   end?: ReactNode;
+  endClassName?: string;
   label?: ReactNode;
   width?: number;
   startWidth?: number;
@@ -520,6 +522,8 @@ function InputFieldRoot({
   className,
   start,
   end,
+  startClassName,
+  endClassName,
   label: labelProp,
 }: InputFieldRootProps) {
   const randomId = useId();
@@ -577,12 +581,15 @@ function InputFieldRoot({
     <RootContainer $width={width} style={style} className={className}>
       {children}
       {start && (
-        <span ref={startRef} className={startBaseStyles}>
+        <span ref={startRef} className={cx(startBaseStyles, startClassName)}>
           {start}
         </span>
       )}
       {(end || label) && (
-        <span ref={endRef} className={cx(endStyles, label && end && "gap-1.5")}>
+        <span
+          ref={endRef}
+          className={cx(endStyles, label && end && "gap-1.5", endClassName)}
+        >
           {labelProp
             ? insetLabel
             : label && labelPosition === "inset" && insetLabel}

package/src/components/ListView.tsx

@@ -31,13 +31,14 @@ import { ContextMenu } from "./ContextMenu";
 import { InputField } from "./InputField";
 import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
+import { Sortable } from "./sorting/Sortable";
 import {
   DropValidator,
+  MoveDragItemHandler,
   normalizeListTargetIndex,
   RelativeDropPosition,
-  Sortable,
-  type SortableItemContextProps,
-} from "./Sortable";
+  SortableItemContextProps,
+} from "./sorting/sorting";
 import { Spacer } from "./Spacer";
 
 export type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
@@ -776,11 +777,7 @@ export type ListViewRootProps = {
   onPress?: () => void;
   scrollable?: boolean;
   expandable?: boolean;
-  onMoveItem?: (
-    sourceIndex: number,
-    targetIndex: number,
-    position: RelativeDropPosition
-  ) => void;
+  onMoveItem?: MoveDragItemHandler;
   indentation?: number;
   acceptsDrop?: DropValidator;
   pressEventName?: PressEventName;

package/src/components/Popover.tsx

@@ -1,5 +1,7 @@
+import { useControlledOrUncontrolled } from "@noya-app/react-utils";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, useEffect, useId, useRef } from "react";
+import { useOpenPortalsControls } from "../contexts/OpenPortalsContext";
 import {
   portalScopeProps,
   usePortalScopeId,
@@ -34,6 +36,7 @@ interface Props
   onClickClose?: () => void;
   showArrow?: boolean;
   className?: string;
+  portalContainer?: HTMLElement | null;
 }
 
 export const popoverStyle = {
@@ -59,15 +62,36 @@ export function Popover({
   onFocusOutside,
   onClickClose,
   className,
+  portalContainer,
 }: Props) {
+  const defaultId = useId();
   const portalScopeId = usePortalScopeId();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useControlledOrUncontrolled({
+    value: open,
+    onChange: onOpenChange,
+    defaultValue: false,
+  });
+
+  const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    addOpenPortal(portalScopeId || defaultId);
+
+    return () => {
+      removeOpenPortal(portalScopeId || defaultId);
+    };
+  }, [addOpenPortal, isOpen, portalScopeId, removeOpenPortal, defaultId]);
 
   return (
-    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
       <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portalContainer}>
         <PopoverPrimitive.Content
           {...portalScopeProps(portalScopeId)}
+          ref={contentRef}
           className={cx(
             popoverStyle.base,
             variant === "large" && popoverStyle.large,
@@ -81,7 +105,18 @@ export function Popover({
           onCloseAutoFocus={onCloseAutoFocus}
           onInteractOutside={onInteractOutside}
           onFocusOutside={onFocusOutside}
-          onPointerDownOutside={onPointerDownOutside}
+          onPointerDownOutside={(event) => {
+            if (
+              isEventInsideElement(
+                event.detail.originalEvent,
+                contentRef.current
+              )
+            ) {
+              event.preventDefault();
+            }
+
+            onPointerDownOutside?.(event);
+          }}
           collisionPadding={8}
           arrowPadding={2}
           // Don't propagate pointer down events to the canvas
@@ -109,3 +144,32 @@ export function Popover({
     </PopoverPrimitive.Root>
   );
 }
+
+/**
+ * Radix ignores pointer-events on the body when a popover is open.
+ * This function checks if an event is inside an element by temporarily
+ * setting pointer-events to auto and then restoring it afterward.
+ */
+function isEventInsideElement(
+  event: PointerEvent,
+  element: HTMLElement | null
+) {
+  if (!element) return false;
+
+  const body = document.body;
+  const originalPointerEvents = body.style.pointerEvents;
+  body.style.pointerEvents = "auto";
+
+  // Get all elements at the point
+  const elementsAtPoint = document.elementsFromPoint(
+    event.clientX,
+    event.clientY
+  );
+
+  // Restore original pointer-events
+  body.style.pointerEvents = originalPointerEvents;
+
+  const target = elementsAtPoint.at(0);
+
+  return target && element.contains(target);
+}

package/src/components/SegmentedControl.tsx

@@ -15,6 +15,7 @@ import { SelectableMenuItem } from "./internal/Menu";
 import { Tooltip } from "./Tooltip";
 
 type SegmentedControlColorScheme = "primary" | "secondary";
+type SegmentedControlVariant = "default" | "tabs";
 
 type SegmentedControlContextValue = {
   /** @default primary */
@@ -35,6 +36,7 @@ export interface SegmentedControlProps<T extends string> {
   items: SegmentedControlItemProps<T>[];
   className?: string;
   style?: React.CSSProperties;
+  variant?: SegmentedControlVariant;
 }
 
 export type SegmentedControlItemProps<T extends string> = {
@@ -42,6 +44,7 @@ export type SegmentedControlItemProps<T extends string> = {
   className?: string;
   style?: React.CSSProperties;
   tooltip?: ReactNode;
+  variant?: SegmentedControlVariant;
 } & Pick<
   SelectableMenuItem<T>,
   "value" | "disabled" | "icon" | "role" | "title"
@@ -57,6 +60,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
     disabled = false,
     icon,
     className,
+    variant = "default",
     ...props
   }: SegmentedControlItemProps<T>,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>
@@ -69,27 +73,42 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
       value={(value ?? "").toString()}
       disabled={disabled}
       className={cx(
-        "font-sans text-button font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
-        colorScheme === "secondary"
-          ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
-          : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
-        colorScheme === "secondary"
-          ? "aria-checked:bg-secondary aria-checked:text-white"
-          : colorScheme === "primary"
-            ? "aria-checked:bg-primary aria-checked:text-white"
-            : "aria-checked:bg-background aria-checked:text-text",
+        "group",
+        "flex items-center justify-center",
+        "font-sans text-button relative flex-1 appearance-none text-segmented-control-item focus:outline-none transition-colors",
+        variant === "tabs" ? "font-semibold" : "font-normal",
+        variant === "tabs"
+          ? ""
+          : colorScheme === "secondary"
+            ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
+            : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
+        variant === "tabs"
+          ? "aria-checked:text-primary"
+          : colorScheme === "secondary"
+            ? "aria-checked:bg-secondary aria-checked:text-white"
+            : colorScheme === "primary"
+              ? "aria-checked:bg-primary aria-checked:text-white"
+              : "aria-checked:bg-background aria-checked:text-text",
         "focus:z-interactable",
-        "aria-checked:shadow-segment",
-        "whitespace-pre px-1",
-        "border-r border-divider last:border-r-0",
-        "aria-checked:border-r-transparent",
-        "[&:has(+[aria-checked=true])]:border-r-transparent",
+        variant === "default"
+          ? "px-1 rounded aria-checked:shadow-segment"
+          : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+        variant === "default" &&
+          "border-r border-divider last:border-r-0 aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent",
         className
       )}
       {...props}
     >
-      {icon && renderIcon(icon)}
-      {title}
+      <span
+        className={cx(
+          "inline-flex whitespace-pre flex-nowrap gap-1.5 items-center justify-center align-middle text-center",
+          variant === "tabs" &&
+            "group-focus:ring-2 group-focus:ring-primary-pastel group-focus:ring-offset-2"
+        )}
+      >
+        {icon && renderIcon(icon)}
+        {title}
+      </span>
     </ToggleGroupPrimitive.Item>
   );
 
@@ -109,6 +128,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
   colorScheme,
   allowEmpty,
   items,
+  variant = "default",
   className,
   style,
 }: SegmentedControlProps<T>) {
@@ -131,7 +151,10 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         value={value}
         onValueChange={handleValueChange}
         className={cx(
-          `grid appearance-none relative outline-none min-h-input-height rounded bg-input-background py-0.5 px-0.5`,
+          `appearance-none relative outline-none`,
+          variant === "default" &&
+            "grid min-h-input-height bg-input-background rounded py-0.5 px-0.5",
+          variant === "tabs" && "flex gap-1.5 min-h-[33px]",
           className
         )}
         style={{
@@ -140,7 +163,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         }}
       >
         {items.map((item, index) => (
-          <SegmentedControlItem key={index} {...item} />
+          <SegmentedControlItem key={index} {...item} variant={variant} />
         ))}
       </ToggleGroupPrimitive.Root>
     </SegmentedControlContext.Provider>

package/src/components/SelectionToolbar.tsx

@@ -7,6 +7,7 @@ import { useSize } from "@noya-app/react-utils";
 import * as PopperPrimitive from "@radix-ui/react-popper";
 import type { MeasurableElement } from "@radix-ui/utils";
 import React, { CSSProperties, memo, useMemo } from "react";
+import { createPortal } from "react-dom";
 
 // Create a Measurable from a Rect
 const createVirtualElement = (rect: Rect): MeasurableElement => ({
@@ -26,12 +27,14 @@ const createVirtualElement = (rect: Rect): MeasurableElement => ({
 type SelectionToolbarContainerProps = {
   rect: Rect;
   children: React.ReactNode;
+  portalContainer?: HTMLElement | null;
 };
 
 export const SelectionToolbarContainer = memo(
   function SelectionToolbarContainer({
     rect,
     children,
+    portalContainer,
   }: SelectionToolbarContainerProps) {
     const portalScopeId = usePortalScopeId();
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -45,31 +48,41 @@ export const SelectionToolbarContainer = memo(
       [rect]
     );
 
+    const popperContent = (
+      <PopperPrimitive.Content
+        {...portalScopeProps(portalScopeId)}
+        side="top"
+        sideOffset={10}
+        align="center"
+        avoidCollisions
+        collisionPadding={10}
+        contentEditable={false}
+        style={{
+          zIndex: 1000,
+          opacity: size ? 1 : 0,
+          transition: "opacity 0.2s ease-in-out",
+          ["--n-input-background" as keyof CSSProperties]: "transparent",
+        }}
+      >
+        <div
+          ref={containerRef}
+          className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
+          onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+          onWheel={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
+      </PopperPrimitive.Content>
+    );
+
     return (
       <PopperPrimitive.Root>
         <PopperPrimitive.Anchor virtualRef={virtualRef} />
-        <PopperPrimitive.Content
-          {...portalScopeProps(portalScopeId)}
-          side="top"
-          sideOffset={10}
-          align="center"
-          avoidCollisions
-          collisionPadding={10}
-          contentEditable={false}
-          style={{
-            zIndex: 1000,
-            opacity: size ? 1 : 0,
-            transition: "opacity 0.2s ease-in-out",
-            ["--n-input-background" as keyof CSSProperties]: "transparent",
-          }}
-        >
-          <div
-            ref={containerRef}
-            className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
-          >
-            {children}
-          </div>
-        </PopperPrimitive.Content>
+        {portalContainer
+          ? createPortal(popperContent, portalContainer)
+          : popperContent}
       </PopperPrimitive.Root>
     );
   }