@noya-app/noya-designsystem 0.1.48 → 0.1.50

package/src/components/List.tsx

@@ -3,16 +3,18 @@ import {
   memoGeneric,
   useFileDropTarget,
 } from "@noya-app/react-utils";
-import React, { useImperativeHandle, useRef, useState } from "react";
+import React, { memo, useImperativeHandle, useRef, useState } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
 import { ActionMenu } from "./ActionMenu";
 import { CollectionProps, CollectionRef } from "./Collection";
-import { ListView } from "./ListView";
+import { GridViewSize } from "./Grid";
+import { ListView, ListViewItemInfo } from "./ListView";
 import { TreeView } from "./TreeView";
+
 const cssVarOverrides = {
-  "--icon-selected": cssVars.colors.primary,
+  "--n-icon-selected": cssVars.colors.primary,
 };
 
 const emptyArray: string[] = [];
@@ -42,8 +44,10 @@ export const List = memoGeneric(
       itemRoleDescription = "clickable item",
       detailPosition = "end",
       size = "medium",
+      thumbnailSize = "auto",
       testHoveredId,
       testRenamingId,
+      testShowDropIndicatorId,
       scrollable = false,
       acceptsDrop,
       onMoveItem,
@@ -52,6 +56,11 @@ export const List = memoGeneric(
       renamable,
       selectedIds = emptyArray,
       renderEmptyState,
+      sortable,
+      getDropTargetParentIndex,
+      getPlaceholder,
+      onClickItem,
+      dragIndicatorStyle,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -116,19 +125,21 @@ export const List = memoGeneric(
         aria-orientation="vertical"
         aria-multiselectable={true}
         expandable={expandable}
-        sortable={expandable}
+        sortable={sortable}
         acceptsDrop={acceptsDrop}
         onMoveItem={onMoveItem}
         renderEmptyState={renderEmptyState}
+        getDropTargetParentIndex={getDropTargetParentIndex}
         {...dropTargetProps}
         renderItem={(
           item: T,
           _: number,
-          { isDragging }: { isDragging: boolean }
+          { isDragOverlay }: ListViewItemInfo
         ) => {
           const id = getId(item);
           const isDropdownOpen = dropdownOpenId === id;
-          const isHovered = (hoveredId === id || isDropdownOpen) && !isDragging;
+          const isHovered =
+            (hoveredId === id || isDropdownOpen) && !isDragOverlay;
           const expanded = getExpanded?.(item);
           const itemIsRenamable = getRenamable?.(item) ?? renamable;
           const isSelected = selectedIds.includes(id);
@@ -139,24 +150,25 @@ export const List = memoGeneric(
             item,
             selected: isSelected,
           });
+          const onOpenChange = (open: boolean) => {
+            setDropdownOpenId(open ? id : undefined);
+
+            if (open && !isSelected) {
+              handleSelect(id);
+            }
+          };
           const action =
             (isHovered || isSelected) &&
             !isRenaming &&
             (typeof renderAction === "function"
-              ? renderAction(item, isSelected)
+              ? renderAction({ item, selected: isSelected, onOpenChange })
               : renderAction === "menu" &&
                 menuItems && (
                   <ActionMenu
                     menuItems={menuItems}
                     onSelect={(action) => handleMenuAction(action, item)}
                     selected={isSelected}
-                    onOpenChange={(open) => {
-                      setDropdownOpenId(open ? id : undefined);
-
-                      if (open && !isSelected) {
-                        handleSelect(id);
-                      }
-                    }}
+                    onOpenChange={onOpenChange}
                   />
                 ));
 
@@ -171,14 +183,17 @@ export const List = memoGeneric(
               id={id}
               key={id}
               role="option"
-              sortable={expandable}
+              sortable={sortable}
               aria-roledescription={itemRoleDescription}
               aria-label={getName(item)}
               aria-selected={isSelected}
-              className={cx("cursor-pointer p-1 rounded")}
+              className={cx("cursor-pointer rounded px-1", pyMap[size])}
               backgroundColor={
                 isSelected ? cssVars.colors.primaryPastel : undefined
               }
+              testRelativeDropPosition={
+                testShowDropIndicatorId === id ? "inside" : undefined
+              }
               chevronClassName={cx(expandable && "relative left-2")}
               style={cssVarOverrides as React.CSSProperties}
               hovered={isHovered}
@@ -190,6 +205,7 @@ export const List = memoGeneric(
               }
               onPress={(e: ListView.ClickInfo) => {
                 handleSelect(id, e);
+                onClickItem?.(id);
               }}
               onDoubleClick={() => {
                 onDoubleClickItem?.(id);
@@ -214,45 +230,44 @@ export const List = memoGeneric(
                 if (!expandable) return;
                 setExpanded?.(item, !expanded);
               }}
+              dragIndicatorStyle={dragIndicatorStyle}
             >
-              <div className="flex flex-1 items-center px-2 gap-3">
+              <div
+                className={cx("flex flex-1 items-center px-2", rowGapMap[size])}
+              >
                 {thumbnail && (
                   <div
                     className={cx(
                       "rounded overflow-hidden flex-none flex items-center justify-center",
-                      size === "medium" ? "w-8 h-8" : "w-16 h-16",
+                      thumbnailSize === "auto" && thumbnailSizeMap[size],
                       isSelected && "text-primary"
                     )}
-                    style={{
-                      backgroundColor: isSelected
-                        ? cssVars.colors.primaryPastel
-                        : cssVars.colors.inputBackground,
-                    }}
                     tabIndex={-1}
                   >
                     {thumbnail}
                   </div>
                 )}
                 <div className="flex flex-col flex-1 w-0">
-                  <div className="flex items-center min-h-[27px] flex-1 gap-2">
+                  <div className="flex items-center min-h-input-height flex-1 gap-2">
                     <div className="flex-1 w-0 flex items-center" tabIndex={-1}>
                       {isRenaming ? (
                         <ViewComponent.EditableRowTitle
                           value={getName(item)}
-                          placeholder="Enter name"
-                          className="font-medium"
+                          placeholder={getPlaceholder?.(item) ?? "Enter name"}
+                          className={fontStyleMap[size]}
                           autoFocus={!isTestingRenaming}
                           onSubmitEditing={(value: string) => {
-                            if (value !== getName(item)) {
-                              onRename?.(item, value);
-                            }
+                            onRename?.(item, value);
                             setRenamingId(undefined);
                           }}
+                          onKeyDown={(e: React.KeyboardEvent) => {
+                            e.stopPropagation();
+                          }}
                         />
                       ) : (
                         <ViewComponent.RowTitle
                           className={cx(
-                            "font-medium",
+                            fontStyleMap[size],
                             isSelected && "text-primary"
                           )}
                         >
@@ -260,30 +275,21 @@ export const List = memoGeneric(
                         </ViewComponent.RowTitle>
                       )}
                     </div>
-                    {end && (
-                      <div
-                        className={cx(
-                          "flex items-center gap-2",
-                          isSelected && "text-primary"
-                        )}
-                        tabIndex={-1}
-                      >
+                    {end && detailPosition === "end" && (
+                      <DetailContainer selected={isSelected}>
                         {end}
-                      </div>
+                      </DetailContainer>
                     )}
                   </div>
                   {below && (
-                    <div
-                      className={cx(
-                        "flex items-center",
-                        isSelected && "text-primary"
-                      )}
-                      tabIndex={-1}
-                    >
+                    <DetailContainer selected={isSelected}>
                       {below}
-                    </div>
+                    </DetailContainer>
                   )}
                 </div>
+                {end && detailPosition === "below" && (
+                  <DetailContainer selected={isSelected}>{end}</DetailContainer>
+                )}
               </div>
             </ViewComponent.Row>
           );
@@ -292,3 +298,56 @@ export const List = memoGeneric(
     );
   })
 );
+
+const DetailContainer = memo(function DetailContainer({
+  children,
+  selected,
+}: {
+  children: React.ReactNode;
+  selected: boolean;
+}) {
+  return (
+    <div
+      className={cx("flex items-center gap-2", selected && "text-primary")}
+      tabIndex={-1}
+    >
+      {children}
+    </div>
+  );
+});
+
+const pyMap: Record<GridViewSize, string> = {
+  xxs: "py-1",
+  xs: "py-1",
+  small: "py-1",
+  medium: "py-1",
+  large: "py-2",
+  xl: "py-3",
+};
+
+const thumbnailSizeMap: Record<GridViewSize, string> = {
+  xxs: "w-4 h-4",
+  xs: "w-4 h-4",
+  small: "w-6 h-6",
+  medium: "w-8 h-8",
+  large: "w-16 h-16",
+  xl: "w-24 h-24",
+};
+
+const rowGapMap: Record<GridViewSize, string> = {
+  xxs: "gap-3",
+  xs: "gap-3",
+  small: "gap-3",
+  medium: "gap-3",
+  large: "gap-3",
+  xl: "gap-4",
+};
+
+const fontStyleMap: Record<GridViewSize, string> = {
+  xxs: "font-medium",
+  xs: "font-medium",
+  small: "font-medium",
+  medium: "font-medium",
+  large: "font-medium",
+  xl: "font-medium text-heading4 text-text",
+};

package/src/components/ListView.tsx

@@ -25,17 +25,18 @@ import { WindowScroller, WindowScrollerChildProps } from "react-virtualized";
 import { ListChildComponentProps, VariableSizeList } from "react-window";
 import { mergeEventHandlers } from "../hooks/mergeEventHandlers";
 import { useHover } from "../hooks/useHover";
-import { cssVars } from "../theme";
-import { cx } from "../utils/classNames";
+import { cssVars, INPUT_HEIGHT } from "../theme";
+import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import { ContextMenu } from "./ContextMenu";
 import { InputField } from "./InputField";
 import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
 import {
   DropValidator,
-  normalizeListDestinationIndex,
+  normalizeListTargetIndex,
   RelativeDropPosition,
   Sortable,
+  type SortableItemContextProps,
 } from "./Sortable";
 import { Spacer } from "./Spacer";
 
@@ -43,7 +44,7 @@ export type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
 export type ListRowPosition = "only" | "first" | "middle" | "last";
 
 const ROW_HEIGHT = 31;
-const SECTION_HEADER_LABEL_HEIGHT = 27;
+const SECTION_HEADER_LABEL_HEIGHT = INPUT_HEIGHT;
 
 type ListColorScheme = "primary" | "secondary";
 
@@ -71,7 +72,7 @@ type ListRowContextValue = {
 // and the dragged row doesn't have a ListRowContextValue.
 type ListViewDraggingContextValue = {
   indentation: number;
-  isDragging?: boolean;
+  isDragOverlay?: boolean;
 };
 
 const ListViewDraggingContext = createContext<ListViewDraggingContextValue>({
@@ -127,6 +128,7 @@ export interface EditableRowProps {
   autoFocus: boolean;
   placeholder?: string;
   className?: string;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
 }
 
 function ListViewEditableRowTitle({
@@ -135,6 +137,7 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder,
   className,
+  onKeyDown,
 }: EditableRowProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -161,6 +164,7 @@ function ListViewEditableRowTitle({
       onSubmit={onSubmitEditing}
       allowSubmittingWithSameValue
       className={cx("-mx-1.5 -my-1 bg-listview-editing-background", className)}
+      onKeyDown={onKeyDown}
     />
   );
 }
@@ -266,9 +270,10 @@ const RowContainer = forwardRef<
               borderBottomRightRadius: "0px",
               borderBottomLeftRadius: "0px",
             }),
-          ...($hovered && {
-            boxShadow: `0 0 0 1px ${cssVars.colors[$colorScheme]} inset`,
-          }),
+          ...($hovered &&
+            !$selected && {
+              background: cssVars.colors.listViewHoverBackground,
+            }),
           ...($showsActiveState && {
             "&:active": {
               backgroundColor: $selected
@@ -301,7 +306,7 @@ const RowContainer = forwardRef<
 const ListViewDragIndicatorElement = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & {
-    $relativeDropPosition: RelativeDropPosition;
+    $relativeDropPosition?: RelativeDropPosition;
     $gap: number;
     $offsetLeft: number;
     $colorScheme: ListColorScheme;
@@ -371,7 +376,7 @@ interface ListViewClickInfo {
   ctrlKey: boolean;
 }
 
-interface ListViewRowProps<MenuItemType extends string = string> {
+export interface ListViewRowProps<MenuItemType extends string = string> {
   id?: string;
   tabIndex?: number;
   role?: string;
@@ -398,13 +403,16 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   className?: string;
   dragIndicatorStyle?:
     | CSSProperties
-    | ((props: {
-        depth: number;
-        indentation: number;
-        position: RelativeDropPosition;
-      }) => CSSProperties);
+    | ((props: DragIndicatorStyleProps) => CSSProperties);
+  testRelativeDropPosition?: RelativeDropPosition;
 }
 
+export type DragIndicatorStyleProps = {
+  depth: number;
+  indentation: number;
+  position: RelativeDropPosition;
+};
+
 const ListViewRow = forwardRefGeneric(function ListViewRow<
   MenuItemType extends string,
 >(
@@ -432,6 +440,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
     style,
     dragIndicatorStyle,
     className,
+    testRelativeDropPosition,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -451,7 +460,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
   const { hoverProps } = useHover({
     onHoverChange,
   });
-  const { indentation, isDragging } = useContext(ListViewDraggingContext);
+  const { indentation, isDragOverlay } = useContext(ListViewDraggingContext);
 
   const handlePress = useCallback(
     (event: React.MouseEvent) => {
@@ -478,7 +487,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
   );
 
   const mergedStyle = useMemo(() => {
-    return isDragging
+    return isDragOverlay
       ? {
           // TODO: Where do these offsets actually come from?
           transform: `translate3d(-36px, -6px, 0)`,
@@ -486,11 +495,11 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
           ...style,
         }
       : style;
-  }, [isDragging, style]);
+  }, [isDragOverlay, style]);
 
   const renderContent = (
     {
-      relativeDropPosition,
+      relativeDropPosition: relativeDropPositionProp,
       ...renderProps
     }: React.ComponentProps<typeof RowContainer> & {
       relativeDropPosition?: RelativeDropPosition;
@@ -498,6 +507,8 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
     ref: Ref<HTMLElement>
   ) => {
     const Component = RowContainer;
+    const relativeDropPosition =
+      testRelativeDropPosition ?? relativeDropPositionProp;
 
     const element = (
       <Component
@@ -520,7 +531,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
         $selectedPosition={selectedPosition}
         $showsActiveState={pressEventName === "onClick"}
         aria-selected={selected}
-        $divider={!isDragging && divider}
+        $divider={!isDragOverlay && divider}
         onKeyDown={onKeyDown}
         style={mergedStyle}
         {...(renderProps as Partial<React.ComponentProps<typeof RowContainer>>)}
@@ -534,9 +545,10 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
       >
         {relativeDropPosition && (
           <ListViewDragIndicatorElement
+            key={relativeDropPosition}
             $colorScheme={colorScheme}
             $relativeDropPosition={relativeDropPosition}
-            $offsetLeft={33 + depth * indentation}
+            $offsetLeft={depth * indentation}
             $gap={listGap + (divider ? 1 : 0)}
             style={
               typeof dragIndicatorStyle === "function"
@@ -724,8 +736,9 @@ const VirtualizedList = memo(
  * Root
  * ------------------------------------------------------------------------- */
 
-type ListViewItemInfo = {
-  isDragging: boolean;
+export type ListViewItemInfo = {
+  isDragOverlay: boolean;
+  activeDragIndex?: number;
 };
 
 type ChildrenProps = {
@@ -762,7 +775,7 @@ export type ListViewRootProps = {
   expandable?: boolean;
   onMoveItem?: (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: RelativeDropPosition
   ) => void;
   indentation?: number;
@@ -779,6 +792,7 @@ export type ListViewRootProps = {
   onDragLeave?: React.DragEventHandler<HTMLDivElement>;
   onDrop?: React.DragEventHandler<HTMLDivElement>;
   renderEmptyState?: () => ReactNode;
+  getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
 };
 
 const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
@@ -813,6 +827,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     onDragLeave,
     onDrop,
     renderEmptyState,
+    getDropTargetParentIndex,
   }: RenderProps<T> & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -834,7 +849,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   );
 
   const renderChild = useCallback(
-    (index: number) => renderItem(data[index], index, { isDragging: false }),
+    (index: number) => renderItem(data[index], index, { isDragOverlay: false }),
     [data, renderItem]
   );
 
@@ -949,7 +964,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   );
 
   const draggingContextOverlayValue = useMemo(
-    () => ({ indentation, isDragging: true }),
+    (): ListViewDraggingContextValue => ({ indentation, isDragOverlay: true }),
     [indentation]
   );
 
@@ -957,7 +972,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     (index: number) => (
       <div style={{ opacity: 0.25 }}>
         <ListViewDraggingContext.Provider value={draggingContextOverlayValue}>
-          {renderItem(data[index], index, { isDragging: true })}
+          {renderItem(data[index], index, { isDragOverlay: true })}
         </ListViewDraggingContext.Provider>
       </div>
     ),
@@ -989,6 +1004,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         keys={ids}
         renderOverlay={renderOverlay}
         acceptsDrop={acceptsDrop}
+        getDropTargetParentIndex={getDropTargetParentIndex}
       >
         {children}
       </Sortable.Root>
@@ -1028,9 +1044,14 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         aria-labelledby={ariaLabelledby}
         aria-orientation={ariaOrientation}
         aria-multiselectable={ariaMultiselectable}
-        className={cx(
-          `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
-          className
+        className={mergeConflictingClassNames(
+          [
+            `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
+            className,
+          ],
+          {
+            categories: ["flex"],
+          }
         )}
         style={{ ...gapStyle, ...style }}
         {...{
@@ -1140,5 +1161,5 @@ export namespace ListView {
       menuItemsCount * rowHeight + sectionHeaderCount * sectionHeaderLabelHeight
     );
   };
-  export const normalizeDestinationIndex = normalizeListDestinationIndex;
+  export const normalizeTargetIndex = normalizeListTargetIndex;
 }

package/src/components/MediaThumbnail.tsx

@@ -4,7 +4,7 @@ import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { IconName, Icons } from "./Icons";
 
-type ColorScheme = "primary" | "icon" | "warning";
+type ColorScheme = "primary" | "secondary" | "icon" | "warning";
 
 type AssetType = "image" | "video" | "audio";
 
@@ -31,7 +31,10 @@ type MediaThumbnailProps = {
   iconName?: IconName;
 };
 
-const getColors = (colorScheme: ColorScheme, selected: boolean) => {
+export const getThumbnailColors = (
+  colorScheme: ColorScheme,
+  selected: boolean
+) => {
   if (selected) {
     return {
       icon: cssVars.colors.primary,
@@ -43,18 +46,23 @@ const getColors = (colorScheme: ColorScheme, selected: boolean) => {
     case "primary":
       return {
         icon: cssVars.colors.primary,
-        background: cssVars.colors.inputBackground,
+        background: cssVars.colors.listViewThumbnailBackground,
+      };
+    case "secondary":
+      return {
+        icon: cssVars.colors.secondary,
+        background: cssVars.colors.secondaryPastel,
       };
     case "warning":
       return {
         icon: cssVars.colors.warning,
-        background: cssVars.colors.inputBackground,
+        background: cssVars.colors.listViewThumbnailBackground,
       };
     case "icon":
     default:
       return {
         icon: cssVars.colors.icon,
-        background: cssVars.colors.inputBackground,
+        background: cssVars.colors.listViewThumbnailBackground,
       };
   }
 };
@@ -72,7 +80,7 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   url,
   iconName = "FileIcon",
 }: MediaThumbnailProps) {
-  const { icon: iconColor, background: backgroundColor } = getColors(
+  const { icon: iconColor, background: backgroundColor } = getThumbnailColors(
     colorScheme,
     selected
   );

package/src/components/Message.tsx

@@ -1,11 +1,11 @@
+import { MultiplayerUser } from "@noya-app/noya-multiplayer-react";
 import React, { forwardRef, memo, useMemo } from "react";
-import { Icons } from "./Icons";
-import { Avatar } from "./Avatar";
+import { cssVars, INPUT_HEIGHT } from "../theme";
 import { cx } from "../utils/classNames";
-import { Text } from "./Text";
-import { MultiplayerUser } from "@noya-app/noya-multiplayer-react";
 import { colorFromString } from "../utils/colorFromString";
-import { cssVars } from "../theme";
+import { Avatar } from "./Avatar";
+import { Logo } from "./NoyaLogo";
+import { Text } from "./Text";
 
 export type MessageProps = {
   role: "user" | "assistant" | "system" | "data";
@@ -17,7 +17,7 @@ export type MessageProps = {
 
 export const Message = memo(
   forwardRef(function Message(
-    { role, children, user, avatarSize = 27 }: MessageProps,
+    { role, children, user, avatarSize = INPUT_HEIGHT }: MessageProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) {
     const randomId = crypto.randomUUID();
@@ -42,9 +42,9 @@ export const Message = memo(
           <Avatar
             name="Assistant"
             size={avatarSize}
-            backgroundColor={cssVars.colors.inputBackground}
+            backgroundColor={cssVars.colors.primaryPastel}
           >
-            <Icons.PersonIcon fontSize={22} color={cssVars.colors.text} />
+            <Logo style={{ width: 15 }} fill={cssVars.colors.primary} />
           </Avatar>
         ) : (
           <Avatar