@noya-app/noya-designsystem 0.1.66 → 0.1.68

package/src/components/List.tsx

@@ -15,6 +15,10 @@ import React, {
 import { useLinkComponent } from "../contexts/LinkComponentContext";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
+import {
+  DETAIL_LINE_CLAMP_CLASSES,
+  normalizeDetailLineClamp,
+} from "../utils/detailLineClamp";
 import { updateSelection } from "../utils/selection";
 import { ActionMenu } from "./ActionMenu";
 import {
@@ -55,6 +59,7 @@ export const List = memoGeneric(
       renderAction,
       renderDetail,
       renderRight,
+      detailLineClamp,
       onSelectionChange,
       itemStyle: itemStyleProp,
       itemClassName: itemClassNameProp,
@@ -82,6 +87,7 @@ export const List = memoGeneric(
       sortableId,
       sharedDragProps,
       virtualized,
+      renameSelectsBeforeDot,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -100,6 +106,8 @@ export const List = memoGeneric(
       [itemStyleProp]
     );
 
+    const normalizedDetailLineClamp = normalizeDetailLineClamp(detailLineClamp);
+
     const handleSelect = (itemId: string, event?: ListView.ClickInfo) => {
       if (!onSelectionChange) return;
 
@@ -220,12 +228,27 @@ export const List = memoGeneric(
                   />
                 ));
 
-          const end =
-            action ||
-            (detailPosition === "end" && renderDetail?.(item, isSelected));
+          const detailContent = renderDetail?.(item, isSelected);
+
+          const end = action || (detailPosition === "end" && detailContent);
           const right = renderRight?.(item, isSelected);
-          const below =
-            detailPosition === "below" && renderDetail?.(item, isSelected);
+          let below = detailPosition === "below" ? detailContent : undefined;
+
+          if (below && normalizedDetailLineClamp) {
+            const clampClassName =
+              DETAIL_LINE_CLAMP_CLASSES[normalizedDetailLineClamp];
+
+            below = (
+              <div
+                className={cx(
+                  "n-overflow-hidden n-w-full n-max-w-full",
+                  clampClassName
+                )}
+              >
+                {below}
+              </div>
+            );
+          }
           return (
             <ViewComponent.Row
               as={typeof href === "string" ? LinkComponent : undefined}
@@ -242,6 +265,7 @@ export const List = memoGeneric(
                 testShowDropIndicatorId === id ? "inside" : undefined
               }
               chevronClassName={cx(expandable && "n-relative n-left-2")}
+              chevronAs={href ? "div" : undefined}
               style={itemStyle}
               hovered={isHovered}
               selected={isSelected}
@@ -281,7 +305,10 @@ export const List = memoGeneric(
               dragIndicatorStyle={dragIndicatorStyle}
             >
               <div
-                className={cx("n-flex n-flex-1 n-items-center n-px-2", rowGapMap[size])}
+                className={cx(
+                  "n-flex n-flex-1 n-items-center n-px-2",
+                  rowGapMap[size]
+                )}
               >
                 {thumbnail && (
                   <div
@@ -298,13 +325,17 @@ export const List = memoGeneric(
                 )}
                 <div className="n-flex n-flex-col n-flex-1 n-w-0">
                   <div className="n-flex n-items-center n-min-h-input-height n-flex-1 n-gap-2">
-                    <div className="n-flex-1 n-w-0 n-flex n-items-center" tabIndex={-1}>
+                    <div
+                      className="n-flex-1 n-w-0 n-flex n-items-center"
+                      tabIndex={-1}
+                    >
                       {isRenaming ? (
                         <ViewComponent.EditableRowTitle
                           value={getName(item)}
                           placeholder={getPlaceholder?.(item) ?? "Enter name"}
                           className={fontStyleMap[size]}
                           autoFocus={!isTestingRenaming}
+                          selectBeforeDot={renameSelectsBeforeDot}
                           onSubmitEditing={(value: string) => {
                             onRename?.(item, value);
                             setRenamingId(undefined);
@@ -337,7 +368,15 @@ export const List = memoGeneric(
                     )}
                   </div>
                   {below && (
-                    <DetailContainer selected={isSelected}>
+                    <DetailContainer
+                      selected={isSelected}
+                      align={
+                        normalizedDetailLineClamp &&
+                        normalizedDetailLineClamp > 1
+                          ? "start"
+                          : "center"
+                      }
+                    >
                       {below}
                     </DetailContainer>
                   )}
@@ -363,13 +402,19 @@ export const List = memoGeneric(
 const DetailContainer = memo(function DetailContainer({
   children,
   selected,
+  align = "center",
 }: {
   children: React.ReactNode;
   selected: boolean;
+  align?: "center" | "start";
 }) {
   return (
     <div
-      className={cx("n-flex n-items-center n-gap-2", selected && "n-text-primary")}
+      className={cx(
+        "n-flex n-gap-2",
+        align === "center" ? "n-items-center" : "n-items-start",
+        selected && "n-text-primary"
+      )}
       tabIndex={-1}
     >
       {children}

package/src/components/ListView.tsx

@@ -1,6 +1,12 @@
 "use client";
 
 import { IVirtualizedList } from "./IVirtualizedList";
+import {
+  isMenuItemSectionHeader,
+  isSelectableMenuItem,
+  MenuItem,
+  ScoredMenuItem,
+} from "./internal/Menu";
 import { ListRowContext } from "./listView/ListViewContexts";
 import { ListViewEditableRowTitle } from "./listView/ListViewEditableRowTitle";
 import {
@@ -8,6 +14,7 @@ import {
   ListViewRoot,
   ROW_HEIGHT,
   SECTION_HEADER_LABEL_HEIGHT,
+  TALL_ROW_HEIGHT,
 } from "./listView/ListViewRoot";
 import {
   ListViewClickInfo,
@@ -32,6 +39,7 @@ export namespace ListView {
   export const DragIndicator = ListViewDragIndicatorElement;
   export const rowHeight = ROW_HEIGHT;
   export const sectionHeaderLabelHeight = SECTION_HEADER_LABEL_HEIGHT;
+  export const tallRowHeight = TALL_ROW_HEIGHT;
   export const calculateHeight = ({
     menuItemsCount,
     sectionHeaderCount,
@@ -43,5 +51,41 @@ export namespace ListView {
       menuItemsCount * rowHeight + sectionHeaderCount * sectionHeaderLabelHeight
     );
   };
+
+  export const calculateHeightWithTallRows = ({
+    menuItemsCount,
+    sectionHeaderCount,
+    tallMenuItemsCount,
+    maxBaseRows,
+  }: {
+    menuItemsCount: number;
+    sectionHeaderCount: number;
+    tallMenuItemsCount: number;
+    /** Maximum number of base-height rows to show before capping */
+    maxBaseRows: number;
+  }) => {
+    const normalRows = menuItemsCount - tallMenuItemsCount;
+    const totalHeight =
+      normalRows * rowHeight +
+      tallMenuItemsCount * tallRowHeight +
+      sectionHeaderCount * sectionHeaderLabelHeight;
+    const maxHeight = rowHeight * maxBaseRows;
+    return Math.min(totalHeight, maxHeight);
+  };
+  export const getMenuMetrics = <T extends string>(
+    items: Array<MenuItem<T> | ScoredMenuItem<T>>
+  ) => {
+    const sectionHeaderCount = items.filter((item) =>
+      isMenuItemSectionHeader(item)
+    ).length;
+    const menuItemsCount = items.filter((item) =>
+      isSelectableMenuItem(item)
+    ).length;
+    const tallMenuItemsCount = items.filter((item) => {
+      return isSelectableMenuItem(item) && item.tooltip !== undefined;
+    }).length;
+
+    return { sectionHeaderCount, menuItemsCount, tallMenuItemsCount };
+  };
   export const normalizeTargetIndex = normalizeListTargetIndex;
 }

package/src/components/ScrollArea2.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ScrollArea } from "@base-ui-components/react/scroll-area";
+import * as React from "react";
+import { cx } from "../utils/classNames";
+
+const SCROLLBAR_STATE_CLASSES =
+  "scroll-component n-opacity-0 n-transition-opacity n-delay-300 n-pointer-events-none data-[hovering]:n-opacity-100 data-[hovering]:n-delay-0 data-[hovering]:n-duration-75 data-[hovering]:n-pointer-events-auto data-[scrolling]:n-opacity-100 data-[scrolling]:n-delay-0 data-[scrolling]:n-duration-75 data-[scrolling]:n-pointer-events-auto";
+
+const SCROLLBAR_TRACK_VERTICAL =
+  "n-m-1 n-w-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
+const SCROLLBAR_TRACK_HORIZONTAL =
+  "n-m-1 n-h-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
+
+const SCROLLBAR_THUMB_VERTICAL =
+  "scroll-component n-w-full n-rounded n-bg-scrollbar";
+const SCROLLBAR_THUMB_HORIZONTAL =
+  "scroll-component n-h-full n-rounded n-bg-scrollbar";
+
+export function ScrollArea2({
+  children,
+  className,
+  viewportClassName,
+  orientation = "vertical",
+}: {
+  children: React.ReactNode;
+  className?: string;
+  viewportClassName?: string;
+  orientation?: "vertical" | "horizontal" | "both";
+}) {
+  return (
+    <ScrollArea.Root className={cx("n-relative", className)}>
+      <ScrollArea.Viewport
+        className={cx("n-h-full n-overscroll-contain", viewportClassName)}
+      >
+        {children}
+      </ScrollArea.Viewport>
+      {(orientation === "vertical" || orientation === "both") && (
+        <ScrollArea.Scrollbar
+          className={cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_VERTICAL)}
+        >
+          <ScrollArea.Thumb className={SCROLLBAR_THUMB_VERTICAL} />
+        </ScrollArea.Scrollbar>
+      )}
+      {(orientation === "horizontal" || orientation === "both") && (
+        <ScrollArea.Scrollbar
+          orientation="horizontal"
+          className={cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_HORIZONTAL)}
+        >
+          <ScrollArea.Thumb className={SCROLLBAR_THUMB_HORIZONTAL} />
+        </ScrollArea.Scrollbar>
+      )}
+      {orientation === "both" && <ScrollArea.Corner />}
+    </ScrollArea.Root>
+  );
+}

package/src/components/SearchCompletionMenu.tsx

@@ -91,13 +91,17 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
     onHover?.(results[index]!);
   }, [index, onHover, results]);
 
-  const searchHeight = 31;
+  const baseRowHeight = ListView.rowHeight;
+  const searchHeight = baseRowHeight;
 
   const listSize =
     results.length > 0
       ? {
           width,
-          height: Math.min(results.length * 31, 31 * 6.5),
+          height: Math.min(
+            results.length * baseRowHeight,
+            baseRowHeight * 6.5
+          ),
         }
       : {
           width,

package/src/components/TreeView.tsx

@@ -20,6 +20,7 @@ type TreeRowBaseProps = {
   icon?: Exclude<ReactNode, string> | IconName;
   expanded?: boolean;
   chevronClassName?: string;
+  chevronAs?: React.ElementType;
   onClickChevron?: ({ altKey }: { altKey: boolean }) => void;
   onDoubleClick?: () => void;
 };
@@ -33,6 +34,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
     expanded,
     onClickChevron,
     chevronClassName,
+    chevronAs,
     children,
     ...rest
   }: TreeViewRowProps<MenuItemType>,
@@ -45,6 +47,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
   const handleClickChevron = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation();
+      event.preventDefault();
       stableOnClickChevron?.({ altKey: event.altKey });
     },
     [stableOnClickChevron]
@@ -58,6 +61,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
             <Spacer.Horizontal size={19} />
           ) : (
             <IconButton
+              as={chevronAs}
               className={chevronClassName}
               iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}
               onClick={handleClickChevron}

package/src/components/UserPointer.tsx

@@ -42,16 +42,25 @@ const UserNameTag = memo(function UserNameTag({
   className,
   style,
   children,
+  variant = "rounded",
+  size = "medium",
+  bordered = true,
 }: {
   backgroundColor: string;
   className?: string;
   style?: React.CSSProperties;
   children: React.ReactNode;
+  variant?: "rounded" | "rectangle";
+  size?: "small" | "medium";
+  bordered?: boolean;
 }) {
   return (
     <span
       className={cx(
-        "n-relative n-inline-block n-rounded-full n-text-xs n-font-medium n-leading-none n-text-white n-shadow-sm n-px-2 n-py-1.5 n-border n-border-background",
+        "n-relative n-inline-block n-text-xs n-font-medium n-leading-none n-text-white n-shadow-sm",
+        bordered && "n-border n-border-background",
+        size === "small" ? "n-p-1" : "n-px-2 n-py-1.5",
+        variant === "rounded" ? "n-rounded-full" : "n-rounded-none",
         className
       )}
       style={{
@@ -113,6 +122,15 @@ export type UserPointerProps = {
   backgroundColor?: string;
   style?: React.CSSProperties;
   className?: string;
+  /**
+   * Whether to render the pointer icon. Useful for contexts that only need the
+   * name tag styling/positioning without the icon.
+   */
+  showPointerIcon?: boolean;
+  /** Controls the shape of the name tag */
+  labelVariant?: "rounded" | "rectangle";
+  labelSize?: "small" | "medium";
+  bordered?: boolean;
 };
 
 const POINTER_SIZE = 12;
@@ -126,6 +144,10 @@ export const UserPointer = memo(function UserPointer({
   backgroundColor,
   style,
   className,
+  showPointerIcon = true,
+  labelVariant = "rounded",
+  labelSize = "medium",
+  bordered = true,
 }: UserPointerProps) {
   const userBackgroundColor = useMemo(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
@@ -154,14 +176,19 @@ export const UserPointer = memo(function UserPointer({
     >
       {name && (
         <div className="n-relative">
-          <UserPointerIcon
-            size={POINTER_SIZE}
-            color={userBackgroundColor}
-            style={pointerOverlapStyle}
-          />
+          {showPointerIcon && (
+            <UserPointerIcon
+              size={POINTER_SIZE}
+              color={userBackgroundColor}
+              style={pointerOverlapStyle}
+            />
+          )}
           <UserNameTag
             backgroundColor={userBackgroundColor}
-            style={nameTagOverlapStyle}
+            style={showPointerIcon ? nameTagOverlapStyle : undefined}
+            variant={labelVariant}
+            size={labelSize}
+            bordered={bordered}
           >
             {name}
           </UserNameTag>

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -33,9 +33,7 @@ export const ConnectedUsersMenuLayout = ({
 }: ConnectedUsersMenuLayoutProps) => {
   return (
     <div className="n-flex n-gap-1.5">
-      <AvatarStack size={INPUT_HEIGHT} className="n-mr-1">
-        {renderUsers()}
-      </AvatarStack>
+      <AvatarStack size={INPUT_HEIGHT}>{renderUsers()}</AvatarStack>
       {launchAIAssistant && (
         <Tooltip content="AI Assistant">
           <Button

package/src/components/listView/ListViewEditableRowTitle.tsx

@@ -11,6 +11,12 @@ export interface EditableRowTitleProps {
   placeholder?: string;
   className?: string;
   onKeyDown?: (e: React.KeyboardEvent) => void;
+  /**
+   * When true, selects only the portion of the value
+   * before the last '.' on autofocus (useful for renaming files
+   * without selecting the extension). Defaults to false.
+   */
+  selectBeforeDot?: boolean;
 }
 
 export const ListViewEditableRowTitle = memo(function ListViewEditableRowTitle({
@@ -20,6 +26,7 @@ export const ListViewEditableRowTitle = memo(function ListViewEditableRowTitle({
   placeholder,
   className,
   onKeyDown,
+  selectBeforeDot = false,
 }: EditableRowTitleProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -34,9 +41,24 @@ export const ListViewEditableRowTitle = memo(function ListViewEditableRowTitle({
 
     // must be a delay of 1ms or more to ensure any radix ui components have finished any focus behaviors
     setTimeout(() => {
+      if (selectBeforeDot) {
+        const index = value.lastIndexOf(".");
+        if (index > 0) {
+          // Some browsers require calling select() before setSelectionRange
+          // to ensure the selection is applied on first focus.
+          element.select();
+          try {
+            element.setSelectionRange(0, index, "forward");
+          } catch {
+            // Fallback in case setSelectionRange throws (e.g., unsupported type)
+            element.select();
+          }
+          return;
+        }
+      }
       element.select();
     }, 1);
-  }, [autoFocus]);
+  }, [autoFocus, selectBeforeDot, value]);
 
   return (
     <InputField.Input

package/src/components/listView/ListViewRoot.tsx

@@ -19,7 +19,6 @@ import React, {
 } from "react";
 import { WindowScroller, WindowScrollerChildProps } from "react-virtualized";
 import { ListChildComponentProps, VariableSizeList } from "react-window";
-import { INPUT_HEIGHT } from "../../theme";
 import { mergeConflictingClassNames } from "../../utils/classNames";
 import { IVirtualizedList } from "../IVirtualizedList";
 import { ScrollArea } from "../ScrollArea";
@@ -49,7 +48,13 @@ import {
 } from "./types";
 
 export const ROW_HEIGHT = 31;
-export const SECTION_HEADER_LABEL_HEIGHT = INPUT_HEIGHT;
+// Section headers with variant "label" render as 12px line-height with 6px
+// padding above and below, totaling 24px. Keep this constant in sync with
+// ListViewRow styles (n-leading-3 with 6px vertical padding).
+export const SECTION_HEADER_LABEL_HEIGHT = 24;
+// Some list rows render an extra line (e.g., tooltip/description). Those rows
+// use a taller height.
+export const TALL_ROW_HEIGHT = 50;
 
 const VirtualizedListRow = memo(function VirtualizedListRow({
   index,
@@ -99,9 +104,10 @@ const VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner<T>(
   useLayoutEffect(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
-    // When items change, we need to re-render the virtualized list,
-    // since it doesn't currently support row height changes
+    // When items or the height resolver change, re-render the virtualized list
+    // since VariableSizeList caches sizes per index.
     items,
+    getItemHeight,
   ]);
 
   // Internally, react-virtualized updates these properties. We always want
@@ -223,6 +229,7 @@ export type ListViewRootProps<T> = {
   sharedDragProps?: SharedDragProps;
   sortableId?: string;
   itemHeight?: number;
+  getItemHeightForItem?: (item: T, index: number) => number;
 };
 
 export const ListViewRoot = memoGeneric(
@@ -262,6 +269,7 @@ export const ListViewRoot = memoGeneric(
       sharedDragProps,
       sortableId,
       itemHeight,
+      getItemHeightForItem,
     }: ListViewRootProps<T>,
     forwardedRef: ForwardedRef<IVirtualizedList>
   ) {
@@ -299,8 +307,19 @@ export const ListViewRoot = memoGeneric(
 
     const getItemContextValue = useCallback(
       (i: number): ListRowContextValue | undefined => {
-        if (variant === "bare" || variant === "normal")
-          return defaultContextValue;
+        // Always detect section headers for height calculations.
+        // For "bare" and "normal" variants we keep default margins/selection
+        // but still set isSectionHeader based on the rendered child.
+        if (variant === "bare" || variant === "normal") {
+          const current = renderChild(i);
+
+          if (!isValidElement(current)) return defaultContextValue;
+
+          return {
+            ...defaultContextValue,
+            isSectionHeader: !!(current as any).props.isSectionHeader,
+          };
+        }
 
         const current = renderChild(i);
 
@@ -419,16 +438,29 @@ export const ListViewRoot = memoGeneric(
 
     const getItemHeight = useCallback(
       (index: number) => {
+        // Section header height takes precedence
+        const child = getItemContextValue(index);
+        if (child?.isSectionHeader && sectionHeaderVariant === "label") {
+          return SECTION_HEADER_LABEL_HEIGHT;
+        }
+
+        // Fixed height for all items if provided
         if (itemHeight) return itemHeight;
 
-        const child = getItemContextValue(index);
-        const height =
-          child?.isSectionHeader && sectionHeaderVariant === "label"
-            ? SECTION_HEADER_LABEL_HEIGHT
-            : ROW_HEIGHT;
-        return height;
+        // Per-item height callback
+        if (getItemHeightForItem) {
+          return getItemHeightForItem(data[index], index);
+        }
+
+        return ROW_HEIGHT;
       },
-      [getItemContextValue, itemHeight, sectionHeaderVariant]
+      [
+        getItemContextValue,
+        itemHeight,
+        sectionHeaderVariant,
+        getItemHeightForItem,
+        data,
+      ]
     );
 
     const getKey = useCallback(

package/src/components/sorting/Sortable.tsx

@@ -9,6 +9,7 @@ import {
 } from "@dnd-kit/sortable";
 import { Insets } from "@noya-app/noya-geometry";
 import * as React from "react";
+import { useMemo } from "react";
 import {
   ActiveDragContext,
   ActiveDragContextType,
@@ -145,7 +146,7 @@ function SortableItem<TElement extends HTMLElement>({
   disabled?: boolean;
   children: (
     props: ItemChildrenProps<TElement>,
-    extraProps: Omit<ItemChildrenExtraProps, "isOverlay">
+    extraProps: ItemChildrenExtraProps
   ) => React.ReactNode;
 }) {
   const { acceptsDrop, listId, getDropTargetParentIndex } =
@@ -180,21 +181,35 @@ function SortableItem<TElement extends HTMLElement>({
     getDropTargetParentIndex,
   });
 
-  return children(
-    {
+  const props = useMemo(
+    () => ({
       ref,
       ...attributes,
       ...listeners,
       style: { opacity: isDragging ? 0.5 : 1 },
-    },
-    {
+    }),
+    [ref, attributes, listeners, isDragging]
+  );
+
+  const extraProps = useMemo(
+    () => ({
       isDragging,
+      isOverlay: false,
       setActivatorNodeRef,
       setDraggableNodeRef,
       setDroppableNodeRef,
       relativeDropPosition,
-    }
+    }),
+    [
+      isDragging,
+      setActivatorNodeRef,
+      setDraggableNodeRef,
+      setDroppableNodeRef,
+      relativeDropPosition,
+    ]
   );
+
+  return children(props, extraProps);
 }
 
 function SortableRoot_({
@@ -396,10 +411,7 @@ const Sortable_ = function Sortable_<TItem, TElement extends HTMLElement>({
       {keys.map((key, index) => (
         <SortableItem<TElement> key={key} id={key}>
           {(props, extraProps) => {
-            return renderItem(items[index], props, {
-              isOverlay: false,
-              ...extraProps,
-            });
+            return renderItem(items[index], props, extraProps);
           }}
         </SortableItem>
       ))}