@noya-app/noya-designsystem 0.1.45 → 0.1.46

package/src/components/Grid.tsx

@@ -0,0 +1,243 @@
+import React, { useImperativeHandle, useState } from "react";
+import {
+  forwardRefGeneric,
+  memoGeneric,
+} from "../../../noya-react-utils/src/utils/reactGenerics";
+import { cx } from "../utils/classNames";
+import { updateSelection } from "../utils/selection";
+import { CollectionProps, CollectionRef } from "./Collection";
+import { EditableText } from "./EditableText";
+import { GridView } from "./GridView";
+import { ListView } from "./ListView";
+
+export type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
+
+export const getGridSize = (size: GridViewSize) => {
+  // Define size ranges that allow items to grow/shrink within bounds
+  const sizes: Record<
+    Exclude<GridViewSize, number>,
+    {
+      minColumnWidth: string;
+      gap: number;
+    }
+  > = {
+    xxs: {
+      minColumnWidth: "36px",
+      gap: 5,
+    },
+    xs: {
+      minColumnWidth: "87px",
+      gap: 9,
+    },
+    small: {
+      minColumnWidth: "160px",
+      gap: 20,
+    },
+    medium: {
+      minColumnWidth: "220px",
+      gap: 20,
+    },
+    large: {
+      minColumnWidth: "280px",
+      gap: 24,
+    },
+    xl: {
+      minColumnWidth: "400px",
+      gap: 32,
+    },
+  };
+
+  return sizes[size];
+};
+
+const emptyArray: string[] = [];
+
+export const Grid = memoGeneric(
+  forwardRefGeneric(function Grid<T, M extends string = string>(
+    props: CollectionProps<T, M> & { ref?: React.ForwardedRef<CollectionRef> },
+    ref: React.ForwardedRef<CollectionRef>
+  ) {
+    const {
+      className,
+      items,
+      getId,
+      getName,
+      //   expandable,
+      //   getExpanded,
+      getRenamable,
+      //   getDepth,
+      //   setExpanded,
+      menuItems,
+      onSelectMenuItem,
+      onRename,
+      renderThumbnail,
+      renderAction,
+      renderDetail,
+      onSelectionChange,
+      selectedIds = emptyArray,
+      //   itemRoleDescription = "clickable item",
+      //   detailPosition = "end",
+      size = "medium",
+      testHoveredId,
+      testRenamingId,
+      scrollable = false,
+      //   acceptsDrop,
+      //   onMoveItem,
+      //   onFilesDrop,
+      renamable,
+      onDoubleClickItem,
+    } = props;
+
+    const [hoveredId, setHoveredId] = useState<string>();
+    const [internalRenamingId, setRenamingId] = useState<string>();
+
+    useImperativeHandle(ref, () => ({
+      editName: (id: string) => {
+        setRenamingId(id);
+      },
+    }));
+
+    const currentHoveredId = testHoveredId ?? hoveredId;
+    const renamingId = testRenamingId ?? internalRenamingId;
+
+    const handleSelect = (itemId: string, event?: ListView.ClickInfo) => {
+      if (!onSelectionChange) return;
+
+      setRenamingId(undefined);
+      const newSelectedIds = updateSelection(
+        items.map(getId),
+        selectedIds,
+        itemId,
+        event
+      );
+      onSelectionChange(newSelectedIds, event);
+    };
+
+    const handleMenuAction = (action: M) => {
+      if (!onSelectMenuItem) return;
+
+      const selectedItems = items.filter((item) =>
+        selectedIds.includes(getId(item))
+      );
+      onSelectMenuItem(action, selectedItems);
+    };
+
+    //   const fileDropTargetRef = useRef<HTMLDivElement>(null);
+    //   const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
+    //     fileDropTargetRef,
+    //     onFilesDrop
+    //   );
+
+    const { minColumnWidth, gap } = getGridSize(size);
+
+    return (
+      <GridView.Root
+        minColumnWidth={minColumnWidth}
+        scrollable={scrollable}
+        className={className}
+        gap={gap}
+      >
+        <GridView.Section>
+          {items.map((item) => {
+            const id = getId(item);
+            const isHovered = currentHoveredId === id;
+            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 action =
+              (isHovered || isSelected) &&
+              !isRenaming &&
+              renderAction?.(item, isSelected);
+
+            return (
+              <GridView.Item<M>
+                key={id}
+                id={id}
+                hovered={isHovered}
+                onHoverChange={(isHovering) => {
+                  setHoveredId(isHovering ? id : undefined);
+                }}
+                title={
+                  <EditableText
+                    value={getName(item)}
+                    focused={isRenaming}
+                    testFocused={isTestingRenaming}
+                    readOnly={!itemIsRenamable || !onRename}
+                    onSubmit={(value) => {
+                      if (value !== getName(item)) {
+                        onRename?.(item, value);
+                      }
+                      setRenamingId(undefined);
+                    }}
+                    onBlur={() => {
+                      setRenamingId(undefined);
+                    }}
+                    // max height ensures preview text and input are one line
+                    textClassName="bg-listview-editing-background max-h-[27px]"
+                  >
+                    {(props) => (
+                      <span
+                        {...props}
+                        className={cx(
+                          isSelected && "text-primary",
+                          "truncate select-none"
+                        )}
+                      />
+                    )}
+                  </EditableText>
+                }
+                subtitle={
+                  <span className={cx(isSelected && "text-primary")}>
+                    {renderDetail?.(item, isSelected)}
+                  </span>
+                }
+                loading={false}
+                selected={isSelected}
+                onSelect={(event) => {
+                  handleSelect(id, event);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    setRenamingId(id);
+                  }
+                }}
+                onDoubleClick={() => {
+                  onDoubleClickItem?.(id);
+                }}
+                menuItems={menuItems}
+                onSelectMenuItem={handleMenuAction}
+                action={action}
+                testHoveredId={testHoveredId}
+                onMenuOpenChange={(open: boolean) => {
+                  if (open && !isSelected) {
+                    handleSelect(id, {
+                      shiftKey: false,
+                      altKey: false,
+                      metaKey: false,
+                      ctrlKey: false,
+                    });
+                  }
+                }}
+              >
+                {thumbnail && (
+                  <div
+                    className={cx(
+                      "rounded overflow-hidden flex-none flex items-center w-full justify-center aspect-square",
+                      isSelected && "text-primary"
+                    )}
+                    tabIndex={-1}
+                  >
+                    {thumbnail}
+                  </div>
+                )}
+              </GridView.Item>
+            );
+          })}
+        </GridView.Section>
+      </GridView.Root>
+    );
+  })
+);

package/src/components/GridView.tsx

@@ -1,5 +1,5 @@
 import { KeyModifiers } from "@noya-app/noya-keymap";
-import { forwardRefGeneric } from "@noya-app/react-utils";
+import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, {
   createContext,
   CSSProperties,
@@ -20,48 +20,6 @@ import { ScrollArea } from "./ScrollArea";
 import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 
-export type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
-
-const sizes: Record<
-  GridViewSize,
-  {
-    itemWidth: number;
-    itemHeight: number;
-    gap: number;
-  }
-> = {
-  xxs: {
-    itemWidth: 36,
-    itemHeight: 36,
-    gap: 5,
-  },
-  xs: {
-    itemWidth: 87,
-    itemHeight: 87,
-    gap: 9,
-  },
-  small: {
-    itemWidth: 160,
-    itemHeight: 170,
-    gap: 20,
-  },
-  medium: {
-    itemWidth: 220,
-    itemHeight: 220,
-    gap: 16,
-  },
-  large: {
-    itemWidth: 280,
-    itemHeight: 280,
-    gap: 24,
-  },
-  xl: {
-    itemWidth: 400,
-    itemHeight: 400,
-    gap: 32,
-  },
-};
-
 const ItemTitle = ({
   showBackground,
   children,
@@ -71,10 +29,11 @@ const ItemTitle = ({
 }) => {
   return (
     <span
-      className={`font-sans text-heading5 leading-[1] text-text font-medium select-none whitespace-pre overflow-hidden text-ellipsis ${
+      className={cx(
+        "font-sans text-heading5 text-text-muted font-medium",
         showBackground &&
-        "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
-      }`}
+          "bg-sidebar-background border border-divider-subtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+      )}
     >
       {children}
     </span>
@@ -90,10 +49,11 @@ const ItemDescription = ({
 }) => {
   return (
     <span
-      className={`font-sans text-heading5 font-normal leading-[1] text-[0.7rem] text-text-muted select-none whitespace-pre overflow-hidden text-ellipsis ${
+      className={cx(
+        "font-sans text-sm text-text-muted select-none truncate",
         showBackground &&
-        "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
-      }`}
+          "bg-sidebar-background border border-divider-subtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+      )}
     >
       {children}
     </span>
@@ -109,7 +69,7 @@ const SectionTitle = ({
 }) => {
   return (
     <span
-      className={`font-sans text-heading3 font-medium user-select-none whitespace-pre overflow-hidden text-ellipsis ${last ? "text-text" : "text-text-muted"}`}
+      className={`font-sans text-heading3 font-medium user-select-none truncate ${last ? "text-text" : "text-text-muted"}`}
     >
       {children}
     </span>
@@ -123,14 +83,19 @@ interface ItemProps<MenuItemType extends string = string> {
   loading?: boolean;
   selected?: boolean;
   onClick?: (event: React.MouseEvent) => void;
-  onPress?: (options: KeyModifiers) => void;
+  onSelect?: (options: KeyModifiers) => void;
   onDoubleClick?: () => void;
   onHoverChange?: (isHovering: boolean) => void;
   children?: ReactNode;
   menuItems?: MenuItem<MenuItemType>[];
   onSelectMenuItem?: (value: MenuItemType) => void;
   onContextMenu?: () => void;
+  onMenuOpenChange?: (open: boolean) => void;
   style?: CSSProperties;
+  action?: ReactNode;
+  testHoveredId?: string;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  hovered?: boolean;
 }
 
 const GridViewItem = forwardRefGeneric(function GridViewItem<
@@ -143,26 +108,28 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     loading,
     selected,
     onClick,
-    onPress,
+    onSelect,
     onDoubleClick,
     onHoverChange,
     children,
     menuItems,
     onSelectMenuItem,
     onContextMenu,
+    onMenuOpenChange,
     style,
+    action,
+    testHoveredId,
+    onKeyDown,
+    hovered = false,
   }: ItemProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLDivElement>
 ) {
-  const [hovered, setHovered] = React.useState(false);
-
   const { hoverProps } = useHover({
-    onHoverChange: (isHovering) => {
-      onHoverChange?.(isHovering);
-      setHovered(isHovering);
-    },
+    onHoverChange,
   });
 
+  const isHovered = testHoveredId ? testHoveredId === id : hovered;
+
   const { textPosition, bordered, disabled } = useContext(GridViewContext);
 
   const handleClick = useCallback(
@@ -171,28 +138,33 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
       event.preventDefault();
 
       onClick?.(event);
-      onPress?.(event);
+      onSelect?.(event);
     },
-    [onClick, onPress]
+    [onClick, onSelect]
   );
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent) => {
+      onKeyDown?.(event);
       if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
         event.preventDefault();
 
-        onPress?.(event);
+        onSelect?.(event);
       } else {
         return;
       }
     },
-    [onPress]
+    [onSelect, onKeyDown]
   );
 
   let element = (
     <div
-      className="flex flex-col relative focus:shadow-[0px_0px_0px_1px_var(--sidebar-background),_0px_0px_0px_3px_var(--primary)] focus:outline-none"
+      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",
+        selected && "bg-primary-pastel",
+        isHovered && "ring-1 ring-primary ring-inset"
+      )}
       id={id}
       ref={forwardedRef}
       {...hoverProps}
@@ -200,18 +172,13 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
       onKeyDown={handleKeyDown}
     >
       <div
-        className={`flex flex-1 items-center justify-center
-          bg-sidebar-background rounded-[2px] overflow-hidden
-          cursor-pointer
-          ${
-            selected
-              ? "border border-primary"
-              : bordered
-                ? "border border-divider"
-                : "border border-transparent"
-          }
-          ${disabled ? "opacity-50" : "hover:opacity-85 active:opacity-70"}
-        `}
+        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}
@@ -226,14 +193,19 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
           <ItemDescription>{subtitle || " "}</ItemDescription>
         </>
       )}
-      {textPosition === "overlay" && hovered && (title || subtitle) && (
-        <div className="absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate g-0.5">
+      {textPosition === "overlay" && isHovered && (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 && (
             <ItemDescription showBackground>{subtitle}</ItemDescription>
           )}
         </div>
       )}
+      {action && (
+        <div className="absolute top-[7px] right-[7px] flex flex-col justify-end items-start p-1 truncate gap-0.5">
+          {action}
+        </div>
+      )}
       {loading && (
         <div className="flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]">
           <ActivityIndicator opacity={0.5} size={13} />
@@ -244,7 +216,11 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
 
   if (menuItems && onSelectMenuItem) {
     element = (
-      <ContextMenu<MenuItemType> items={menuItems} onSelect={onSelectMenuItem}>
+      <ContextMenu<MenuItemType>
+        items={menuItems}
+        onSelect={onSelectMenuItem}
+        onOpenChange={onMenuOpenChange}
+      >
         {element}
       </ContextMenu>
     );
@@ -269,33 +245,38 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
 });
 
 type GridViewContextValue = {
-  size: GridViewSize;
+  minColumnWidth: string;
   textPosition: "overlay" | "below" | "toolip";
   bordered: boolean;
   disabled: boolean;
+  gap: number;
 };
 
 const GridViewContext = createContext<GridViewContextValue>({
-  size: "small",
+  minColumnWidth: "220px",
   textPosition: "below",
   bordered: false,
   disabled: false,
+  gap: 0,
 });
 
 interface GridViewRootProps extends Partial<GridViewContextValue> {
   children: ReactNode;
   onClick?: () => void;
   scrollable?: boolean;
+  className?: string;
 }
 
 function GridViewRoot({
-  size = "small",
+  minColumnWidth = "220px",
+  gap = 20,
   children,
-  scrollable = true,
+  scrollable,
   onClick,
   textPosition = "below",
   bordered = false,
   disabled = false,
+  className,
 }: GridViewRootProps) {
   const handleClick = useCallback(
     (event: React.MouseEvent) => {
@@ -309,21 +290,32 @@ function GridViewRoot({
 
   const contextValue = useMemo(
     () => ({
-      size,
+      minColumnWidth,
       textPosition,
       bordered,
       disabled,
+      gap,
     }),
-    [bordered, disabled, size, textPosition]
+    [bordered, disabled, gap, minColumnWidth, textPosition]
   );
 
   return (
     <GridViewContext.Provider value={contextValue}>
       <div
         onClick={handleClick}
-        className={`flex flex-col ${scrollable ? "flex-1" : "flex-[0_0_auto]"}`}
+        className={cx(
+          "flex flex-col -mx-3 -mb-1",
+          scrollable ? "flex-1" : "flex-[0_0_auto]",
+          className
+        )}
       >
-        {scrollable ? <ScrollArea>{children}</ScrollArea> : children}
+        {scrollable ? (
+          <ScrollArea>
+            <div className="p-3">{children}</div>
+          </ScrollArea>
+        ) : (
+          <div className="p-3">{children}</div>
+        )}
       </div>
     </GridViewContext.Provider>
   );
@@ -336,17 +328,15 @@ function GridViewSection({
   children?: ReactNode;
   className?: string;
 }) {
-  const { size } = useContext(GridViewContext);
-  const gapStyle = { gap: `${sizes[size].gap}px` };
+  const { minColumnWidth, gap } = useContext(GridViewContext);
+
+  const styles: React.CSSProperties = {
+    gridTemplateColumns: `repeat(auto-fill, minmax(${minColumnWidth}, 1fr))`,
+    gap: `${gap}px`,
+  };
 
   return (
-    <div
-      className={cx(
-        `grid-cols-[auto-fill,_minmax(${sizes[size].itemWidth}px,_1fr)] text-text grid `,
-        className
-      )}
-      style={gapStyle}
-    >
+    <div className={cx("grid text-text", className)} style={styles}>
       {children}
     </div>
   );
@@ -372,7 +362,7 @@ function GridViewSectionHeader({ title }: { title: string }) {
 
 export namespace GridView {
   export const Root = memo(GridViewRoot);
-  export const Item = memo(GridViewItem);
+  export const Item = memoGeneric(GridViewItem);
   export const Section = memo(GridViewSection);
   export const SectionHeader = memo(GridViewSectionHeader);
 }