@noya-app/noya-designsystem 0.1.45 → 0.1.47

package/src/components/SidebarList.tsx

@@ -1,252 +0,0 @@
-import { useFileDropTarget } from "@noya-app/react-utils";
-import React, { useRef, useState } from "react";
-import { cssVars } from "../theme";
-import { cx } from "../utils/classNames";
-import { updateSelection } from "../utils/selection";
-import { MenuItem } from "./internal/Menu";
-import type { ListViewRootProps } from "./ListView";
-import { ListView } from "./ListView";
-import { TreeView } from "./TreeView";
-
-interface SidebarListProps<T, M extends string = string> {
-  className?: string;
-  items: T[];
-  getId: (item: T) => string;
-  getName: (item: T) => string;
-  getExpanded?: (item: T) => boolean | undefined;
-  expandable?: boolean;
-  menuItems?: MenuItem<M>[];
-  onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
-  onRename?: (itemId: string, newName: string) => void;
-  renderThumbnail?: (item: T) => React.ReactNode;
-  renderHoverAction?: (item: T, selected: boolean) => React.ReactNode;
-  renderDetail?: (item: T) => React.ReactNode;
-  onSelectionChange?: (selectedItems: T[]) => void;
-  scrollable?: boolean;
-  itemRoleDescription?: string;
-  /** Position of the detail content. Defaults to 'end'. */
-  detailPosition?: "end" | "below";
-  /** Size of the list items. Defaults to 'medium'. */
-  size?: "medium" | "large";
-  /** For testing: Override the hover state with a specific item ID */
-  testHoveredId?: string;
-  /** For testing: Override the renaming state with a specific item ID */
-  testRenamingId?: string;
-  setExpanded?: (item: T, expanded: boolean) => void;
-  acceptsDrop?: ListViewRootProps["acceptsDrop"];
-  onMoveItem?: ListViewRootProps["onMoveItem"];
-  getDepth?: (item: T) => number;
-  onFilesDrop?: (event: React.DragEvent<Element>) => void;
-}
-
-export function SidebarList<T, M extends string = string>({
-  className,
-  items,
-  getId,
-  getName,
-  expandable,
-  getExpanded,
-  getDepth,
-  setExpanded,
-  menuItems,
-  onSelectMenuItem,
-  onRename,
-  renderThumbnail,
-  renderHoverAction,
-  renderDetail,
-  onSelectionChange,
-  itemRoleDescription = "clickable item",
-  detailPosition = "end",
-  size = "medium",
-  testHoveredId,
-  testRenamingId,
-  scrollable,
-  acceptsDrop,
-  onMoveItem,
-  onFilesDrop,
-}: SidebarListProps<T, M>) {
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
-  const [internalHoveredId, setHoveredId] = useState<string>();
-  const [internalRenamingId, setRenamingId] = useState<string>();
-
-  const hoveredId = internalHoveredId ?? testHoveredId;
-  const renamingId = testRenamingId ?? internalRenamingId;
-
-  const handleSelect = (itemId: string, event?: ListView.ClickInfo) => {
-    const newSelectedIds = updateSelection(
-      items.map(getId),
-      selectedIds,
-      itemId,
-      event
-    );
-    setSelectedIds(newSelectedIds);
-
-    if (onSelectionChange) {
-      const selectedItems = items.filter((item) =>
-        newSelectedIds.includes(getId(item))
-      );
-      onSelectionChange(selectedItems);
-    }
-  };
-
-  const handleMenuAction = (action: M) => {
-    if (!onSelectMenuItem) return;
-
-    const selectedItems = items.filter((item) =>
-      selectedIds.includes(getId(item))
-    );
-    onSelectMenuItem(action, selectedItems);
-  };
-
-  const ViewComponent = expandable ? TreeView : ListView;
-
-  const fileDropTargetRef = useRef<HTMLDivElement>(null);
-  const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
-    fileDropTargetRef,
-    onFilesDrop
-  );
-
-  return (
-    <ViewComponent.Root
-      variant="bare"
-      className={cx(className, isDropTargetActive && "bg-primary-pastel")}
-      containerRef={fileDropTargetRef}
-      scrollable={scrollable}
-      data={items}
-      keyExtractor={getId}
-      role="listbox"
-      aria-orientation="vertical"
-      aria-multiselectable={true}
-      expandable={expandable}
-      sortable={expandable}
-      acceptsDrop={acceptsDrop}
-      onMoveItem={onMoveItem}
-      {...dropTargetProps}
-      renderItem={(
-        item: T,
-        _: number,
-        { isDragging }: { isDragging: boolean }
-      ) => {
-        const id = getId(item);
-        const isHovered = hoveredId === id && !isDragging;
-        const expanded = getExpanded?.(item);
-        const isSelected = selectedIds.includes(id);
-        const isRenaming = renamingId === id;
-
-        const thumbnail = renderThumbnail?.(item);
-        const action =
-          isHovered && !isRenaming && renderHoverAction?.(item, isSelected);
-        const end =
-          action ?? (detailPosition === "end" && renderDetail?.(item));
-        const below = detailPosition === "below" && renderDetail?.(item);
-
-        return (
-          <ViewComponent.Row
-            id={id}
-            key={id}
-            role="option"
-            sortable={expandable}
-            aria-roledescription={itemRoleDescription}
-            aria-label={getName(item)}
-            aria-selected={isSelected}
-            className="cursor-pointer p-1"
-            chevronClassName={expandable ? "relative left-2" : undefined}
-            hovered={isHovered}
-            selected={isSelected}
-            expanded={expanded}
-            depth={getDepth?.(item)}
-            onHoverChange={(hovered: boolean) =>
-              setHoveredId(hovered ? id : undefined)
-            }
-            onPress={(e: ListView.ClickInfo) => handleSelect(id, e)}
-            onKeyDown={(e: React.KeyboardEvent) => {
-              if (e.key !== "Enter" && e.key !== " ") return;
-
-              e.preventDefault();
-              handleSelect(id, e);
-            }}
-            menuItems={menuItems}
-            onSelectMenuItem={handleMenuAction}
-            onMenuOpenChange={(open: boolean) => {
-              if (open && !isSelected) {
-                handleSelect(id, {
-                  shiftKey: false,
-                  altKey: false,
-                  metaKey: false,
-                  ctrlKey: false,
-                });
-              }
-            }}
-            tabIndex={0}
-            onClickChevron={() => {
-              if (expanded === undefined) return;
-              setExpanded?.(item, !expanded);
-            }}
-          >
-            <div className="flex flex-1 items-center px-2 gap-3">
-              {thumbnail && (
-                <div
-                  className={cx(
-                    "rounded overflow-hidden flex-none flex items-center justify-center",
-                    size === "medium" ? "w-8 h-8" : "w-16 h-16"
-                  )}
-                  style={{
-                    backgroundColor: 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-1 w-0 flex items-center" tabIndex={-1}>
-                    {isRenaming ? (
-                      <ViewComponent.EditableRowTitle
-                        value={getName(item)}
-                        placeholder="Enter name"
-                        className={cx(
-                          "font-medium",
-                          testRenamingId && "bg-primary-pastel"
-                        )}
-                        autoFocus
-                        onSubmitEditing={(value: string) => {
-                          if (value !== getName(item) && onRename) {
-                            onRename(id, value);
-                          }
-                          setRenamingId(undefined);
-                        }}
-                      />
-                    ) : (
-                      <ViewComponent.RowTitle
-                        className="font-medium"
-                        onDoubleClick={(e: React.MouseEvent) => {
-                          e.stopPropagation();
-                          if (onRename) {
-                            setRenamingId(id);
-                          }
-                        }}
-                      >
-                        {getName(item)}
-                      </ViewComponent.RowTitle>
-                    )}
-                  </div>
-                  {end && (
-                    <div className="flex items-center gap-2" tabIndex={-1}>
-                      {end}
-                    </div>
-                  )}
-                </div>
-                {below && (
-                  <div className="flex items-center" tabIndex={-1}>
-                    {below}
-                  </div>
-                )}
-              </div>
-            </div>
-          </ViewComponent.Row>
-        );
-      }}
-    />
-  );
-}