@noya-app/noya-designsystem 0.1.47 → 0.1.49

package/src/components/List.tsx

@@ -3,12 +3,14 @@ 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 = {
@@ -19,7 +21,7 @@ const emptyArray: string[] = [];
 
 export const List = memoGeneric(
   forwardRefGeneric(function List<T, M extends string = string>(
-    props: CollectionProps<T, M> & { ref?: React.ForwardedRef<CollectionRef> },
+    props: CollectionProps<T, M>,
     ref: React.ForwardedRef<CollectionRef>
   ) {
     const {
@@ -42,8 +44,10 @@ export const List = memoGeneric(
       itemRoleDescription = "clickable item",
       detailPosition = "end",
       size = "medium",
+      thumbnailSize = "auto",
       testHoveredId,
       testRenamingId,
+      testShowDropIndicatorId,
       scrollable = false,
       acceptsDrop,
       onMoveItem,
@@ -51,11 +55,16 @@ export const List = memoGeneric(
       onDoubleClickItem,
       renamable,
       selectedIds = emptyArray,
+      renderEmptyState,
+      sortable,
+      getDropTargetParentIndex,
+      getPlaceholder,
+      onClickItem,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
     const [internalRenamingId, setRenamingId] = useState<string>();
-
+    const [dropdownOpenId, setDropdownOpenId] = useState<string>();
     const hoveredId = internalHoveredId ?? testHoveredId;
     const renamingId = testRenamingId ?? internalRenamingId;
 
@@ -72,13 +81,17 @@ export const List = memoGeneric(
       onSelectionChange(newSelectedIds, event);
     };
 
-    const handleMenuAction = (action: M) => {
+    const handleMenuAction = (action: M, actionItem: T) => {
       if (!onSelectMenuItem) return;
 
       const selectedItems = items.filter((item) =>
         selectedIds.includes(getId(item))
       );
-      onSelectMenuItem(action, selectedItems);
+
+      onSelectMenuItem(
+        action,
+        selectedItems.length === 0 ? [actionItem] : selectedItems
+      );
     };
 
     const ViewComponent = expandable ? TreeView : ListView;
@@ -98,7 +111,11 @@ export const List = memoGeneric(
     return (
       <ViewComponent.Root
         variant="bare"
-        className={cx(className, isDropTargetActive && "bg-primary-pastel")}
+        className={cx(
+          className,
+          isDropTargetActive && "bg-primary-pastel",
+          scrollable && "basis-0 min-h-0"
+        )}
         containerRef={fileDropTargetRef}
         scrollable={scrollable}
         data={items}
@@ -107,28 +124,53 @@ 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 isHovered = hoveredId === id && !isDragging;
+          const isDropdownOpen = dropdownOpenId === id;
+          const isHovered =
+            (hoveredId === id || isDropdownOpen) && !isDragOverlay;
           const expanded = getExpanded?.(item);
           const itemIsRenamable = getRenamable?.(item) ?? renamable;
           const isSelected = selectedIds.includes(id);
           const isRenaming = itemIsRenamable && onRename && renamingId === id;
           const isTestingRenaming = testRenamingId === id;
 
-          const thumbnail = renderThumbnail?.(item, isSelected);
+          const thumbnail = renderThumbnail?.({
+            item,
+            selected: isSelected,
+          });
+          const onOpenChange = (open: boolean) => {
+            setDropdownOpenId(open ? id : undefined);
+
+            if (open && !isSelected) {
+              handleSelect(id);
+            }
+          };
           const action =
             (isHovered || isSelected) &&
             !isRenaming &&
-            renderAction?.(item, isSelected);
+            (typeof renderAction === "function"
+              ? renderAction({ item, selected: isSelected, onOpenChange })
+              : renderAction === "menu" &&
+                menuItems && (
+                  <ActionMenu
+                    menuItems={menuItems}
+                    onSelect={(action) => handleMenuAction(action, item)}
+                    selected={isSelected}
+                    onOpenChange={onOpenChange}
+                  />
+                ));
+
           const end =
             action ||
             (detailPosition === "end" && renderDetail?.(item, isSelected));
@@ -140,14 +182,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}
@@ -159,6 +204,7 @@ export const List = memoGeneric(
               }
               onPress={(e: ListView.ClickInfo) => {
                 handleSelect(id, e);
+                onClickItem?.(id);
               }}
               onDoubleClick={() => {
                 onDoubleClickItem?.(id);
@@ -172,15 +218,10 @@ export const List = memoGeneric(
                 }
               }}
               menuItems={menuItems}
-              onSelectMenuItem={handleMenuAction}
+              onSelectMenuItem={(action) => handleMenuAction(action, item)}
               onContextMenu={() => {
                 if (!isSelected) {
-                  handleSelect(id, {
-                    shiftKey: false,
-                    altKey: false,
-                    metaKey: false,
-                    ctrlKey: false,
-                  });
+                  handleSelect(id);
                 }
               }}
               tabIndex={0}
@@ -189,44 +230,44 @@ export const List = memoGeneric(
                 setExpanded?.(item, !expanded);
               }}
             >
-              <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)) {
+                            if (value !== getName(item) && value !== "") {
                               onRename?.(item, value);
                             }
                             setRenamingId(undefined);
                           }}
+                          onKeyDown={(e: React.KeyboardEvent) => {
+                            e.stopPropagation();
+                          }}
                         />
                       ) : (
                         <ViewComponent.RowTitle
                           className={cx(
-                            "font-medium",
+                            fontStyleMap[size],
                             isSelected && "text-primary"
                           )}
                         >
@@ -234,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>
           );
@@ -266,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,7 +25,7 @@ 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 { cssVars, INPUT_HEIGHT } from "../theme";
 import { cx } from "../utils/classNames";
 import { ContextMenu } from "./ContextMenu";
 import { InputField } from "./InputField";
@@ -33,9 +33,10 @@ 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;
@@ -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;
@@ -778,6 +791,8 @@ export type ListViewRootProps = {
   onDragEnter?: React.DragEventHandler<HTMLDivElement>;
   onDragLeave?: React.DragEventHandler<HTMLDivElement>;
   onDrop?: React.DragEventHandler<HTMLDivElement>;
+  renderEmptyState?: () => ReactNode;
+  getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
 };
 
 const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
@@ -811,6 +826,8 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     onDragEnter,
     onDragLeave,
     onDrop,
+    renderEmptyState,
+    getDropTargetParentIndex,
   }: RenderProps<T> & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -832,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]
   );
 
@@ -947,7 +964,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   );
 
   const draggingContextOverlayValue = useMemo(
-    () => ({ indentation, isDragging: true }),
+    (): ListViewDraggingContextValue => ({ indentation, isDragOverlay: true }),
     [indentation]
   );
 
@@ -955,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>
     ),
@@ -987,6 +1004,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         keys={ids}
         renderOverlay={renderOverlay}
         acceptsDrop={acceptsDrop}
+        getDropTargetParentIndex={getDropTargetParentIndex}
       >
         {children}
       </Sortable.Root>
@@ -1040,23 +1058,25 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         onDragLeave={onDragLeave}
         onDrop={onDrop}
       >
-        {withScrollable((scrollElementRef: HTMLDivElement | null) =>
-          withSortable(
-            virtualized ? (
-              <VirtualizedList<T>
-                ref={forwardedRef}
-                scrollElement={scrollElementRef!}
-                items={data}
-                size={virtualized}
-                getItemHeight={getItemHeight}
-                keyExtractor={getKey}
-                renderItem={renderWrappedChild}
-              />
-            ) : (
-              range(0, data.length).map(renderWrappedChild)
-            )
-          )
-        )}
+        {data.length === 0 && renderEmptyState
+          ? renderEmptyState()
+          : withScrollable((scrollElementRef: HTMLDivElement | null) =>
+              withSortable(
+                virtualized ? (
+                  <VirtualizedList<T>
+                    ref={forwardedRef}
+                    scrollElement={scrollElementRef!}
+                    items={data}
+                    size={virtualized}
+                    getItemHeight={getItemHeight}
+                    keyExtractor={getKey}
+                    renderItem={renderWrappedChild}
+                  />
+                ) : (
+                  range(0, data.length).map(renderWrappedChild)
+                )
+              )
+            )}
       </div>
     </ListViewDraggingContext.Provider>
   );
@@ -1136,5 +1156,5 @@ export namespace ListView {
       menuItemsCount * rowHeight + sectionHeaderCount * sectionHeaderLabelHeight
     );
   };
-  export const normalizeDestinationIndex = normalizeListDestinationIndex;
+  export const normalizeTargetIndex = normalizeListTargetIndex;
 }