@noya-app/noya-designsystem 0.1.48 → 0.1.50

package/src/components/Grid.tsx

@@ -82,6 +82,7 @@ export const Grid = memoGeneric(
       size = "medium",
       testHoveredId,
       testRenamingId,
+      testShowDropIndicatorId,
       scrollable = false,
       //   acceptsDrop,
       //   onMoveItem,
@@ -90,6 +91,7 @@ export const Grid = memoGeneric(
       onClickItem,
       onDoubleClickItem,
       renderEmptyState,
+      // getDropTargetParentIndex,
     } = props;
 
     const [hoveredId, setHoveredId] = useState<string>();
@@ -143,130 +145,146 @@ export const Grid = memoGeneric(
 
     return (
       <GridView.Root
+        role="listbox"
+        aria-orientation="horizontal"
+        aria-multiselectable={true}
         minColumnWidth={minColumnWidth}
-        scrollable={scrollable}
+        scrollable={items.length > 0 && scrollable}
+        contentClassName={cx(items.length === 0 && "flex flex-1")}
         gap={gap}
         className={cx(isDropTargetActive && "bg-primary-pastel", className)}
         {...dropTargetProps}
         ref={fileDropTargetRef}
       >
-        <GridView.Section renderEmptyState={renderEmptyState}>
-          {items.map((item) => {
-            const id = getId(item);
-            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,
-              selected: isSelected,
-            });
-            const action =
-              (isHovered || isSelected) &&
-              !isRenaming &&
-              (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);
+        {items.length > 0 ? (
+          <GridView.Section>
+            {items.map((item) => {
+              const id = getId(item);
+              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,
+                selected: isSelected,
+              });
+              const onOpenChange = (open: boolean) => {
+                setDropdownOpenId(open ? id : undefined);
 
-                        if (open && !isSelected) {
-                          handleSelect(id);
-                        }
-                      }}
-                    />
-                  ));
+                if (open && !isSelected) {
+                  handleSelect(id);
+                }
+              };
+              const action =
+                (isHovered || isSelected) &&
+                !isRenaming &&
+                (typeof renderAction === "function"
+                  ? renderAction({ item, selected: isSelected, onOpenChange })
+                  : renderAction === "menu" &&
+                    menuItems && (
+                      <ActionMenu
+                        menuItems={menuItems}
+                        onSelect={(action) => handleMenuAction(action, item)}
+                        selected={isSelected}
+                        onOpenChange={onOpenChange}
+                      />
+                    ));
 
-            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)) {
+              return (
+                <GridView.Item<M>
+                  key={id}
+                  id={id}
+                  role="option"
+                  aria-selected={isSelected}
+                  aria-label={getName(item)}
+                  hovered={isHovered}
+                  testShowInsideDropIndicator={testShowDropIndicatorId === id}
+                  onHoverChange={(isHovering) => {
+                    setHoveredId(isHovering ? id : undefined);
+                  }}
+                  title={
+                    <EditableText
+                      tabIndex={isRenaming ? undefined : -1}
+                      value={getName(item)}
+                      focused={isRenaming}
+                      testFocused={isTestingRenaming}
+                      readOnly={!itemIsRenamable || !onRename}
+                      onSubmit={(value) => {
                         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}
-                onClick={() => {
-                  onClickItem?.(id);
-                }}
-                onSelect={(event) => {
-                  handleSelect(id, event);
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    setRenamingId(id);
+                        setRenamingId(undefined);
+                      }}
+                      onBlur={() => {
+                        setRenamingId(undefined);
+                      }}
+                      // max height ensures preview text and input are one line
+                      textClassName="bg-listview-editing-background max-h-input-height"
+                    >
+                      {(props) => (
+                        <span
+                          {...props}
+                          className={cx(
+                            isSelected && "text-primary",
+                            "truncate select-none"
+                          )}
+                        />
+                      )}
+                    </EditableText>
                   }
-                }}
-                onDoubleClick={() => {
-                  onDoubleClickItem?.(id);
-                }}
-                menuItems={menuItems}
-                onSelectMenuItem={(action) => handleMenuAction(action, item)}
-                action={action}
-                onMenuOpenChange={(open: boolean) => {
-                  if (open && !isSelected) {
-                    handleSelect(id);
+                  subtitle={
+                    <span className={cx(isSelected && "text-primary")}>
+                      {renderDetail?.(item, isSelected)}
+                    </span>
                   }
-                }}
-              >
-                {thumbnail && (
-                  <div
-                    className={cx(
-                      "rounded overflow-hidden flex-none flex w-full",
-                      isSelected && "text-primary"
-                    )}
-                    tabIndex={-1}
-                  >
-                    {thumbnail}
-                  </div>
-                )}
-              </GridView.Item>
-            );
-          })}
-        </GridView.Section>
+                  loading={false}
+                  selected={isSelected}
+                  onClick={() => {
+                    onClickItem?.(id);
+                  }}
+                  onSelect={(event) => {
+                    handleSelect(id, event);
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") {
+                      setRenamingId(id);
+                    }
+                  }}
+                  onDoubleClick={() => {
+                    onDoubleClickItem?.(id);
+                  }}
+                  menuItems={menuItems}
+                  onSelectMenuItem={(action) => handleMenuAction(action, item)}
+                  action={action}
+                  onMenuOpenChange={(open: boolean) => {
+                    if (open && !isSelected) {
+                      handleSelect(id);
+                    }
+                  }}
+                  // getDropTargetParentIndex={getDropTargetParentIndex}
+                >
+                  {thumbnail && (
+                    <div
+                      className={cx(
+                        "rounded overflow-hidden flex-none flex w-full",
+                        isSelected && "text-primary"
+                      )}
+                      tabIndex={-1}
+                    >
+                      {thumbnail}
+                    </div>
+                  )}
+                </GridView.Item>
+              );
+            })}
+          </GridView.Section>
+        ) : (
+          renderEmptyState?.()
+        )}
       </GridView.Root>
     );
   })

package/src/components/GridView.tsx

@@ -12,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";
@@ -96,6 +96,8 @@ interface ItemProps<MenuItemType extends string = string> {
   action?: ReactNode;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   hovered?: boolean;
+  testShowInsideDropIndicator?: boolean;
+  role?: string;
 }
 
 const GridViewItem = forwardRefGeneric(function GridViewItem<
@@ -120,6 +122,8 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     action,
     onKeyDown,
     hovered = false,
+    testShowInsideDropIndicator: showInsideDropIndicator = false,
+    ...props
   }: ItemProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLDivElement>
 ) {
@@ -157,13 +161,16 @@ 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",
+        hovered && "bg-list-view-hover-background",
         disabled && "opacity-50",
-        hovered && "ring-1 ring-primary ring-inset opacity-85"
+        showInsideDropIndicator && "ring-2 ring-primary ring-inset",
+        "focus:ring-2 focus:ring-primary focus:ring-inset focus:outline-none"
       )}
       id={id}
       ref={forwardedRef}
@@ -177,8 +184,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
       <div
         className={cx(
           "flex items-center justify-center rounded",
-          bordered ? "border border-divider" : "border border-transparent",
-          selected ? "bg-primary-pastel" : "bg-input-background text-text"
+          bordered ? "border border-divider" : "border border-transparent"
         )}
         style={style}
       >
@@ -267,6 +273,9 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
   onDragEnter?: React.DragEventHandler<HTMLDivElement>;
   onDragLeave?: React.DragEventHandler<HTMLDivElement>;
   onDrop?: React.DragEventHandler<HTMLDivElement>;
+  role?: string;
+  renderEmptyState?: () => ReactNode;
+  contentClassName?: string;
 }
 
 const GridViewRoot = forwardRef(function GridViewRoot(
@@ -280,6 +289,7 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     bordered = false,
     disabled = false,
     className,
+    contentClassName,
     ...props
   }: GridViewRootProps,
   forwardedRef: ForwardedRef<HTMLDivElement>
@@ -305,25 +315,29 @@ const GridViewRoot = forwardRef(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 ? "basis-0 min-h-0" : "flex-none",
-          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>
   );
@@ -350,7 +364,11 @@ function GridViewSection({
   return isEmpty && renderEmptyState ? (
     renderEmptyState()
   ) : (
-    <div className={cx("grid text-text", className)} style={styles}>
+    <div
+      role="presentation"
+      className={cx("grid text-text", className)}
+      style={styles}
+    >
       {children}
     </div>
   );