@noya-app/noya-designsystem 0.1.46 → 0.1.48

package/src/components/Grid.tsx

@@ -1,10 +1,12 @@
-import React, { useImperativeHandle, useState } from "react";
+import { useFileDropTarget } from "@noya-app/react-utils";
+import React, { useImperativeHandle, useRef, useState } from "react";
 import {
   forwardRefGeneric,
   memoGeneric,
 } from "../../../noya-react-utils/src/utils/reactGenerics";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
+import { ActionMenu } from "./ActionMenu";
 import { CollectionProps, CollectionRef } from "./Collection";
 import { EditableText } from "./EditableText";
 import { GridView } from "./GridView";
@@ -35,15 +37,15 @@ export const getGridSize = (size: GridViewSize) => {
     },
     medium: {
       minColumnWidth: "220px",
-      gap: 20,
+      gap: 30,
     },
     large: {
       minColumnWidth: "280px",
-      gap: 24,
+      gap: 40,
     },
     xl: {
       minColumnWidth: "400px",
-      gap: 32,
+      gap: 48,
     },
   };
 
@@ -83,13 +85,16 @@ export const Grid = memoGeneric(
       scrollable = false,
       //   acceptsDrop,
       //   onMoveItem,
-      //   onFilesDrop,
+      onFilesDrop,
       renamable,
+      onClickItem,
       onDoubleClickItem,
+      renderEmptyState,
     } = props;
 
     const [hoveredId, setHoveredId] = useState<string>();
     const [internalRenamingId, setRenamingId] = useState<string>();
+    const [dropdownOpenId, setDropdownOpenId] = useState<string>();
 
     useImperativeHandle(ref, () => ({
       editName: (id: string) => {
@@ -104,29 +109,35 @@ export const Grid = memoGeneric(
       if (!onSelectionChange) return;
 
       setRenamingId(undefined);
+
       const newSelectedIds = updateSelection(
         items.map(getId),
         selectedIds,
         itemId,
         event
       );
+
       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 fileDropTargetRef = useRef<HTMLDivElement>(null);
-    //   const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
-    //     fileDropTargetRef,
-    //     onFilesDrop
-    //   );
+    const fileDropTargetRef = useRef<HTMLDivElement>(null);
+    const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
+      fileDropTargetRef,
+      onFilesDrop
+    );
 
     const { minColumnWidth, gap } = getGridSize(size);
 
@@ -134,23 +145,45 @@ export const Grid = memoGeneric(
       <GridView.Root
         minColumnWidth={minColumnWidth}
         scrollable={scrollable}
-        className={className}
         gap={gap}
+        className={cx(isDropTargetActive && "bg-primary-pastel", className)}
+        {...dropTargetProps}
+        ref={fileDropTargetRef}
       >
-        <GridView.Section>
+        <GridView.Section renderEmptyState={renderEmptyState}>
           {items.map((item) => {
             const id = getId(item);
-            const isHovered = currentHoveredId === id;
+            const isDropdownOpen = dropdownOpenId === id;
+            const isHovered =
+              testHoveredId === id || currentHoveredId === id || isDropdownOpen;
             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 action =
               (isHovered || isSelected) &&
               !isRenaming &&
-              renderAction?.(item, isSelected);
+              (typeof renderAction === "function"
+                ? renderAction(item, isSelected)
+                : renderAction === "menu" &&
+                  menuItems && (
+                    <ActionMenu
+                      menuItems={menuItems}
+                      onSelect={(action) => handleMenuAction(action, item)}
+                      selected={isSelected}
+                      onOpenChange={(open) => {
+                        setDropdownOpenId(open ? id : undefined);
+
+                        if (open && !isSelected) {
+                          handleSelect(id);
+                        }
+                      }}
+                    />
+                  ));
 
             return (
               <GridView.Item<M>
@@ -196,6 +229,9 @@ export const Grid = memoGeneric(
                 }
                 loading={false}
                 selected={isSelected}
+                onClick={() => {
+                  onClickItem?.(id);
+                }}
                 onSelect={(event) => {
                   handleSelect(id, event);
                 }}
@@ -208,24 +244,18 @@ export const Grid = memoGeneric(
                   onDoubleClickItem?.(id);
                 }}
                 menuItems={menuItems}
-                onSelectMenuItem={handleMenuAction}
+                onSelectMenuItem={(action) => handleMenuAction(action, item)}
                 action={action}
-                testHoveredId={testHoveredId}
                 onMenuOpenChange={(open: boolean) => {
                   if (open && !isSelected) {
-                    handleSelect(id, {
-                      shiftKey: false,
-                      altKey: false,
-                      metaKey: false,
-                      ctrlKey: false,
-                    });
+                    handleSelect(id);
                   }
                 }}
               >
                 {thumbnail && (
                   <div
                     className={cx(
-                      "rounded overflow-hidden flex-none flex items-center w-full justify-center aspect-square",
+                      "rounded overflow-hidden flex-none flex w-full",
                       isSelected && "text-primary"
                     )}
                     tabIndex={-1}

package/src/components/GridView.tsx

@@ -4,6 +4,7 @@ import React, {
   createContext,
   CSSProperties,
   ForwardedRef,
+  forwardRef,
   memo,
   ReactNode,
   useCallback,
@@ -93,7 +94,6 @@ interface ItemProps<MenuItemType extends string = string> {
   onMenuOpenChange?: (open: boolean) => void;
   style?: CSSProperties;
   action?: ReactNode;
-  testHoveredId?: string;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   hovered?: boolean;
 }
@@ -118,7 +118,6 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     onMenuOpenChange,
     style,
     action,
-    testHoveredId,
     onKeyDown,
     hovered = false,
   }: ItemProps<MenuItemType>,
@@ -128,8 +127,6 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     onHoverChange,
   });
 
-  const isHovered = testHoveredId ? testHoveredId === id : hovered;
-
   const { textPosition, bordered, disabled } = useContext(GridViewContext);
 
   const handleClick = useCallback(
@@ -162,26 +159,27 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     <div
       className={cx(
         "flex flex-col relative focus:shadow-[0px_0px_0px_1px_var(--sidebar-background),_0px_0px_0px_3px_var(--primary)] focus:outline-none rounded p-2 -m-2",
+        "cursor-pointer",
+        "active:opacity-70",
         selected && "bg-primary-pastel",
-        isHovered && "ring-1 ring-primary ring-inset"
+        disabled && "opacity-50",
+        hovered && "ring-1 ring-primary ring-inset opacity-85"
       )}
       id={id}
       ref={forwardedRef}
       {...hoverProps}
       tabIndex={disabled ? undefined : 0}
       onKeyDown={handleKeyDown}
+      onClick={handleClick}
+      onDoubleClick={onDoubleClick}
+      onContextMenu={onContextMenu}
     >
       <div
         className={cx(
           "flex items-center justify-center rounded",
-          "cursor-pointer",
           bordered ? "border border-divider" : "border border-transparent",
-          disabled ? "opacity-50" : "hover:opacity-85 active:opacity-70",
           selected ? "bg-primary-pastel" : "bg-input-background text-text"
         )}
-        onClick={handleClick}
-        onDoubleClick={onDoubleClick}
-        onContextMenu={onContextMenu}
         style={style}
       >
         {children}
@@ -193,7 +191,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
           <ItemDescription>{subtitle || " "}</ItemDescription>
         </>
       )}
-      {textPosition === "overlay" && isHovered && (title || subtitle) && (
+      {textPosition === "overlay" && hovered && (title || subtitle) && (
         <div className="absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate gap-0.5">
           {title && <ItemTitle showBackground>{title}</ItemTitle>}
           {subtitle && (
@@ -265,19 +263,27 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
   onClick?: () => void;
   scrollable?: boolean;
   className?: string;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragLeave?: React.DragEventHandler<HTMLDivElement>;
+  onDrop?: React.DragEventHandler<HTMLDivElement>;
 }
 
-function GridViewRoot({
-  minColumnWidth = "220px",
-  gap = 20,
-  children,
-  scrollable,
-  onClick,
-  textPosition = "below",
-  bordered = false,
-  disabled = false,
-  className,
-}: GridViewRootProps) {
+const GridViewRoot = forwardRef(function GridViewRoot(
+  {
+    minColumnWidth = "220px",
+    gap = 20,
+    children,
+    scrollable,
+    onClick,
+    textPosition = "below",
+    bordered = false,
+    disabled = false,
+    className,
+    ...props
+  }: GridViewRootProps,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
   const handleClick = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation();
@@ -305,9 +311,11 @@ function GridViewRoot({
         onClick={handleClick}
         className={cx(
           "flex flex-col -mx-3 -mb-1",
-          scrollable ? "flex-1" : "flex-[0_0_auto]",
+          scrollable ? "basis-0 min-h-0" : "flex-none",
           className
         )}
+        {...props}
+        ref={forwardedRef}
       >
         {scrollable ? (
           <ScrollArea>
@@ -319,14 +327,16 @@ function GridViewRoot({
       </div>
     </GridViewContext.Provider>
   );
-}
+});
 
 function GridViewSection({
   children,
   className,
+  renderEmptyState,
 }: {
   children?: ReactNode;
   className?: string;
+  renderEmptyState?: () => ReactNode;
 }) {
   const { minColumnWidth, gap } = useContext(GridViewContext);
 
@@ -335,7 +345,11 @@ function GridViewSection({
     gap: `${gap}px`,
   };
 
-  return (
+  const isEmpty = React.Children.count(children) === 0;
+
+  return isEmpty && renderEmptyState ? (
+    renderEmptyState()
+  ) : (
     <div className={cx("grid text-text", className)} style={styles}>
       {children}
     </div>