@noya-app/noya-designsystem 0.1.47 → 0.1.49

package/src/components/GridView.tsx

@@ -4,6 +4,7 @@ import React, {
   createContext,
   CSSProperties,
   ForwardedRef,
+  forwardRef,
   memo,
   ReactNode,
   useCallback,
@@ -11,7 +12,7 @@ import React, {
   useMemo,
 } from "react";
 import { useHover } from "../hooks/useHover";
-import { cx } from "../utils/classNames";
+import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import withSeparatorElements from "../utils/withSeparatorElements";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { ContextMenu } from "./ContextMenu";
@@ -93,9 +94,10 @@ interface ItemProps<MenuItemType extends string = string> {
   onMenuOpenChange?: (open: boolean) => void;
   style?: CSSProperties;
   action?: ReactNode;
-  testHoveredId?: string;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   hovered?: boolean;
+  testShowInsideDropIndicator?: boolean;
+  role?: string;
 }
 
 const GridViewItem = forwardRefGeneric(function GridViewItem<
@@ -118,9 +120,10 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     onMenuOpenChange,
     style,
     action,
-    testHoveredId,
     onKeyDown,
     hovered = false,
+    testShowInsideDropIndicator: showInsideDropIndicator = false,
+    ...props
   }: ItemProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLDivElement>
 ) {
@@ -128,8 +131,6 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     onHoverChange,
   });
 
-  const isHovered = testHoveredId ? testHoveredId === id : hovered;
-
   const { textPosition, bordered, disabled } = useContext(GridViewContext);
 
   const handleClick = useCallback(
@@ -160,28 +161,31 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
 
   let element = (
     <div
+      {...props}
       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",
+        "flex flex-col relative rounded p-2 -m-2 text-text",
+        "cursor-pointer",
+        "active:opacity-70",
         selected && "bg-primary-pastel",
-        isHovered && "ring-1 ring-primary ring-inset"
+        hovered && "bg-list-view-hover-background",
+        disabled && "opacity-50",
+        showInsideDropIndicator && "ring-2 ring-primary ring-inset",
+        "focus:ring-2 focus:ring-primary focus:ring-inset focus:outline-none"
       )}
       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"
+          bordered ? "border border-divider" : "border border-transparent"
         )}
-        onClick={handleClick}
-        onDoubleClick={onDoubleClick}
-        onContextMenu={onContextMenu}
         style={style}
       >
         {children}
@@ -193,7 +197,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 +269,31 @@ 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>;
+  role?: string;
+  renderEmptyState?: () => ReactNode;
+  contentClassName?: string;
 }
 
-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,
+    contentClassName,
+    ...props
+  }: GridViewRootProps,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
   const handleClick = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation();
@@ -299,34 +315,42 @@ function GridViewRoot({
     [bordered, disabled, gap, minColumnWidth, textPosition]
   );
 
+  const mergedClassName = useMemo(() => {
+    const baseClassName = cx(
+      "flex flex-col -mx-3",
+      scrollable ? "basis-0 min-h-0" : "flex-none",
+      className
+    );
+
+    return mergeConflictingClassNames([baseClassName, className], {
+      categories: ["flex"],
+    });
+  }, [className, scrollable]);
+
+  const content = <div className={cx("p-3", contentClassName)}>{children}</div>;
+
   return (
     <GridViewContext.Provider value={contextValue}>
       <div
         onClick={handleClick}
-        className={cx(
-          "flex flex-col -mx-3 -mb-1",
-          scrollable ? "flex-1" : "flex-[0_0_auto]",
-          className
-        )}
+        className={mergedClassName}
+        {...props}
+        ref={forwardedRef}
       >
-        {scrollable ? (
-          <ScrollArea>
-            <div className="p-3">{children}</div>
-          </ScrollArea>
-        ) : (
-          <div className="p-3">{children}</div>
-        )}
+        {scrollable ? <ScrollArea>{content}</ScrollArea> : content}
       </div>
     </GridViewContext.Provider>
   );
-}
+});
 
 function GridViewSection({
   children,
   className,
+  renderEmptyState,
 }: {
   children?: ReactNode;
   className?: string;
+  renderEmptyState?: () => ReactNode;
 }) {
   const { minColumnWidth, gap } = useContext(GridViewContext);
 
@@ -335,8 +359,16 @@ function GridViewSection({
     gap: `${gap}px`,
   };
 
-  return (
-    <div className={cx("grid text-text", className)} style={styles}>
+  const isEmpty = React.Children.count(children) === 0;
+
+  return isEmpty && renderEmptyState ? (
+    renderEmptyState()
+  ) : (
+    <div
+      role="presentation"
+      className={cx("grid text-text", className)}
+      style={styles}
+    >
       {children}
     </div>
   );