torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/Tooltip.tsx

@@ -1,116 +0,0 @@
-import { cva, VariantProps } from "class-variance-authority";
-import { ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import React from "react";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const ToolTipRoot = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-const TooltipArrow = TooltipPrimitive.Arrow;
-export type ToolTipSide = "top" | "right" | "bottom" | "left";
-
-export enum ContentAlign {
-  START = "start",
-  CENTER = "center",
-  END = "end",
-}
-
-const tooltipStyles = cva("typography-body-medium-regular rounded-[4px] p-1", {
-  variants: {
-    variant: {
-      primary: "bg-background-system-body-tertiary text-content-system-global-primary",
-      highlight: "bg-gradient-to-r from-wavy-navy-900 to-wavy-navy-800 text-white",
-    },
-  },
-  defaultVariants: {
-    variant: "primary",
-  },
-});
-
-interface TooltipProps
-  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tooltipStyles> {
-  onOpenChange?: (open: boolean) => void;
-  open?: boolean;
-  toolTipSide?: ToolTipSide;
-  contentAlign?: ContentAlign;
-  avoidCollisions?: boolean;
-  tip?: boolean;
-  delay?: number;
-  disabled?: boolean;
-  text: ReactNode;
-  theme?: Themes;
-}
-
-const Tooltip: React.FC<TooltipProps> = ({
-  children,
-  open,
-  text,
-  theme = "dark",
-  onOpenChange,
-  toolTipSide,
-  contentAlign = ContentAlign.CENTER,
-  avoidCollisions = true,
-  delay = 400,
-  tip = true,
-  variant,
-  className,
-  ...props
-}) => {
-  return (
-    <TooltipProvider>
-      <ToolTipRoot
-        delayDuration={delay}
-        {...(typeof open !== "undefined" && { open })}
-        {...(onOpenChange && { onOpenChange })}
-      >
-        <TooltipTrigger aria-label="Open tooltip" asChild>
-          {children}
-        </TooltipTrigger>
-
-        <TooltipContent
-          data-theme={theme}
-          sideOffset={2}
-          side={toolTipSide}
-          align={contentAlign}
-          avoidCollisions={avoidCollisions}
-          className={cn(tooltipStyles({ variant, className }))}
-          {...props}
-        >
-          {text}
-          {tip && (
-            <TooltipArrow
-              className={cn("fill-background-system-body-tertiary", {
-                "fill-wavy-navy-900": variant === "highlight",
-              })}
-            />
-          )}
-        </TooltipContent>
-      </ToolTipRoot>
-    </TooltipProvider>
-  );
-};
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow, ToolTipRoot };

package/apps/lib/components/TransparentLabel.tsx

@@ -1,71 +0,0 @@
-import { cn } from "../utils/cn";
-import { cva, type VariantProps } from "class-variance-authority";
-import { HTMLAttributes } from "react";
-
-export const TransparentLabelStyles = cva(
-  "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_85%,transparent_100%)] rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_85%,transparent_100%)]",
-  {
-    variants: {
-      size: {
-        "display-large-bold": "typography-display-large-bold",
-        "display-large-semibold": "typography-display-large-semibold",
-        "display-large-medium": "typography-display-large-medium",
-        "display-large-regular": "typography-display-large-regular",
-        "display-medium-bold": "typography-display-medium-bold",
-        "display-medium-semibold": "typography-display-medium-semibold",
-        "display-medium-medium": "typography-display-medium-medium",
-        "display-medium-regular": "typography-display-medium-regular",
-        "display-small-bold": "typography-display-small-bold",
-        "display-small-semibold": "typography-display-small-semibold",
-        "display-small-medium": "typography-display-small-medium",
-        "display-small-regular": "typography-display-small-regular",
-        "headers-large-bold": "typography-headers-large-bold",
-        "headers-large-semibold": "typography-headers-large-semibold",
-        "headers-large-medium": "typography-headers-large-medium",
-        "headers-large-regular": "typography-headers-large-regular",
-        "headers-medium-bold": "typography-headers-medium-bold",
-        "headers-medium-semibold": "typography-headers-medium-semibold",
-        "headers-medium-medium": "typography-headers-medium-medium",
-        "headers-medium-regular": "typography-headers-medium-regular",
-        "headers-small-bold": "typography-headers-small-bold",
-        "headers-small-semibold": "typography-headers-small-semibold",
-        "headers-small-medium": "typography-headers-small-medium",
-        "headers-small-regular": "typography-headers-small-regular",
-        "body-large-bold": "typography-body-large-bold",
-        "body-large-semibold": "typography-body-large-semibold",
-        "body-large-medium": "typography-body-large-medium",
-        "body-large-regular": "typography-body-large-regular",
-        "body-medium-bold": "typography-body-medium-bold",
-        "body-medium-semibold": "typography-body-medium-semibold",
-        "body-medium-medium": "typography-body-medium-medium",
-        "body-medium-regular": "typography-body-medium-regular",
-        "body-small-bold": "typography-body-small-bold",
-        "body-small-semibold": "typography-body-small-semibold",
-        "body-small-medium": "typography-body-small-medium",
-        "body-small-regular": "typography-body-small-regular",
-        "labels-large-bold": "typography-labels-large-bold",
-        "labels-large-semibold": "typography-labels-large-semibold",
-        "labels-large-medium": "typography-labels-large-medium",
-        "labels-large-regular": "typography-labels-large-regular",
-        "labels-medium-bold": "typography-labels-medium-bold",
-        "labels-medium-semibold": "typography-labels-medium-semibold",
-        "labels-medium-medium": "typography-labels-medium-medium",
-        "labels-medium-regular": "typography-labels-medium-regular",
-        "labels-small-bold": "typography-labels-small-bold",
-        "labels-small-semibold": "typography-labels-small-semibold",
-        "labels-small-medium": "typography-labels-small-medium",
-        "labels-small-regular": "typography-labels-small-regular",
-      },
-    },
-    defaultVariants: {
-      size: "body-medium-regular",
-    },
-  },
-);
-
-interface Props
-  extends HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof TransparentLabelStyles> {}
-
-export const TransparentLabel = ({ size, className, ...props }: Props) => {
-  return <p {...props} className={cn(TransparentLabelStyles({ size }), className)}></p>;
-};

package/apps/lib/components/TreeDropDown.tsx

@@ -1,115 +0,0 @@
-"use client";
-import { cn } from "../utils/cn";
-import { cva, VariantProps } from "class-variance-authority";
-import { HTMLAttributes, ReactNode, useEffect, useState } from "react";
-
-const TreeDropDownVariants = cva(
-  [
-    "cursor-pointer flex px-[6px] h-[40px] gap-2 justify-start items-center w-full",
-    "text-content-system-global-primary border-s-[2px] border-transparent outline-none",
-    "hover:bg-white-alpha-075 hover:border-black-300 hover:text-content-system-action-primary-hover hover:gap-[14px]",
-    "rounded-e-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
-  ],
-  {
-    variants: {
-      variant: {
-        secondary: "",
-        default: "",
-      },
-      active: {
-        true: "hover:gap-[8px]",
-      },
-    },
-    // The active row is a fixed dark slab, so its colours are pinned locally rather than taken from
-    // the theme. Previously the fill was theme-invariant while the text was not: on a light-themed
-    // page the row rendered near-black with near-black text, and the label was unreadable. The
-    // values below are exactly what the dark sidebar already rendered, so its look is unchanged.
-    compoundVariants: [
-      {
-        active: true,
-        variant: "default",
-        className: [
-          "bg-purple-1000 border-purple-600 [&_button]:bg-purple-alpha-15",
-          "hover:bg-purple-1000 hover:border-purple-600",
-          // Descendants carry their own theme-driven text colours (headings, badges), so the
-          // foreground has to be forced here or it follows the page instead of the slab.
-          "text-content-presentation-global-primary-light",
-          "[&_*]:!text-content-presentation-global-primary-light",
-        ],
-      },
-      {
-        active: true,
-        variant: "secondary",
-        className: [
-          "bg-wavy-navy-1000 border-blue-sparkle-600 [&_button]:bg-blue-sparkle-alpha-15",
-          "hover:bg-wavy-navy-1000 hover:border-blue-sparkle-600",
-          "text-content-presentation-global-primary-light",
-          "[&_*]:!text-content-presentation-global-primary-light",
-        ],
-      },
-    ],
-    defaultVariants: {}, //
-  },
-);
-
-interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof TreeDropDownVariants> {
-  theme?: "dark" | "light" | "default";
-  treeLabel: ReactNode;
-  open?: boolean;
-  variant?: "secondary" | "default";
-  childrenContainerClassName?: string;
-}
-
-export const TreeDropDown = ({
-  childrenContainerClassName,
-  className,
-  variant = "secondary",
-  treeLabel,
-  open,
-  theme,
-  ...props
-}: Props) => {
-  const [isActive, setIsActive] = useState(open);
-  useEffect(() => {
-    setIsActive(open);
-  }, [open]);
-  return (
-    <div {...props} className={cn("flex h-fit flex-col transition-all ease-in-out duration-500")}>
-      <div
-        onClick={() => setIsActive(!isActive)}
-        data-theme={theme}
-        className={cn(TreeDropDownVariants({ variant, active: isActive }), className)}
-      >
-        <button
-          className={cn(
-            "cursor-pointer outline-none border-none flex-0 leading-0 transition-transform ease-in-out flex justify-center items-center bg-background-system-body-tertiary h-[28px] w-[28px] rounded-full text-[20px] text-content-system-global-primary",
-            { "rotate-180": isActive },
-          )}
-        >
-          <i className={cn("leading-none ri-arrow-down-s-line ")}></i>
-        </button>
-        <div
-          className={cn(
-            "text-content-system-global-primary typography-body-medium-medium transition-all ease-in-out duration-100 flex-1 cursor-pointer",
-          )}
-        >
-          {treeLabel}
-        </div>
-      </div>
-      <div
-        className={cn(
-          "mt-0 ps-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out",
-          {
-            "max-h-[20000px] mt-1": isActive,
-            "max-h-0": !isActive,
-          },
-        )}
-      >
-        <span className="h-full w-[1px] bg-border-system-global-primary absolute start-[21px] top-0 rounded-sm z-10" />
-        <div className={cn("h-full flex flex-col gap-1 w-full", childrenContainerClassName)}>
-          {props.children}
-        </div>
-      </div>
-    </div>
-  );
-};

package/apps/lib/components/TreeFolder/TreeFolder.tsx

@@ -1,380 +0,0 @@
-"use client";
-
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
-import { cn } from "../../utils/cn";
-import type { Themes } from "../../utils/types";
-import { TreeFolderBreadcrumb } from "./TreeFolderBreadcrumb";
-import { TreeFolderRow } from "./TreeFolderRow";
-import { TreeFolderStyles } from "./TreeFolderStyles";
-import { applyMove, descendantIds, findNode, findPath, toBreadcrumb } from "./treeFolderUtils";
-import type {
-  TreeFolderIconResolver,
-  TreeFolderMoveArgs,
-  TreeFolderNode,
-  TreeFolderVisibleRow,
-} from "./types";
-import { useTreeFolderDnD } from "./useTreeFolderDnD";
-import { DndContext, DragList } from "../../hooks/useDragDrop";
-
-export type TreeFolderProps = {
-  data: TreeFolderNode[];
-  selectedId?: string | null;
-  defaultSelectedId?: string | null;
-  onSelectionChange?: (id: string | null) => void;
-
-  expandedIds?: string[];
-  defaultExpanded?: "all" | "roots" | "none" | string[];
-  onExpandedChange?: (ids: string[]) => void;
-
-  dndEnabled?: boolean;
-  onMove?: (args: TreeFolderMoveArgs) => void;
-  onDataChange?: (next: TreeFolderNode[]) => void;
-
-  iconFor?: TreeFolderIconResolver;
-
-  title?: string;
-  showBreadcrumb?: boolean;
-  showHeader?: boolean;
-  highlightAncestors?: boolean;
-  highlightSubtree?: boolean;
-  headerAccessory?: ReactNode;
-  emptyState?: ReactNode;
-
-  rowHeight?: number;
-  indent?: number;
-  /** Optional. If set, the row strip will be at least this wide (in px) — useful
-   *  when you want the band to extend across a wider canvas regardless of content. */
-  contentMinWidth?: number;
-
-  className?: string;
-  theme?: Themes;
-};
-
-export type TreeFolderHandle = {
-  selectId: (id: string | null) => void;
-  expandAll: () => void;
-  collapseAll: () => void;
-  scrollToId: (id: string) => void;
-};
-
-const ROW_HEIGHT_DEFAULT = 28;
-const INDENT_DEFAULT = 14;
-
-function collectIds(nodes: TreeFolderNode[], out: string[] = []): string[] {
-  for (const n of nodes) {
-    out.push(n.id);
-    if (n.children) collectIds(n.children, out);
-  }
-  return out;
-}
-
-function rootIds(nodes: TreeFolderNode[]): string[] {
-  return nodes.map((n) => n.id);
-}
-
-function flattenVisible(data: TreeFolderNode[], expanded: Set<string>): TreeFolderVisibleRow[] {
-  const out: TreeFolderVisibleRow[] = [];
-  // `ancestorHasMore` tracks, for each open ancestor depth on the descent
-  // path, whether that ancestor still has more siblings to render. We push
-  // before descending and pop on the way back up; each row snapshots the
-  // current state so its connector gutters know which verticals to draw.
-  const ancestorHasMore: boolean[] = [];
-  const walk = (nodes: TreeFolderNode[], level: number, parentId: string | null) => {
-    nodes.forEach((node, idx) => {
-      const isInternal = !!(node.children && node.children.length > 0);
-      const isOpen = isInternal && expanded.has(node.id);
-      const isLastChild = idx === nodes.length - 1;
-      out.push({
-        node,
-        level,
-        parentId,
-        childIndex: idx,
-        isOpen,
-        isInternal,
-        isLastChild,
-        ancestorHasMoreSiblings: ancestorHasMore.slice(),
-      });
-      if (isOpen && node.children) {
-        ancestorHasMore.push(!isLastChild);
-        walk(node.children, level + 1, node.id);
-        ancestorHasMore.pop();
-      }
-    });
-  };
-  walk(data, 0, null);
-  return out;
-}
-
-export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
-  function TreeFolder(props, ref) {
-    const {
-      data,
-      selectedId: controlledSelected,
-      defaultSelectedId = null,
-      onSelectionChange,
-      expandedIds: controlledExpanded,
-      defaultExpanded = "roots",
-      onExpandedChange,
-      dndEnabled = true,
-      onMove,
-      onDataChange,
-      iconFor,
-      title = "Layers",
-      showBreadcrumb = true,
-      showHeader = true,
-      highlightAncestors = false,
-      highlightSubtree = true,
-      headerAccessory,
-      emptyState,
-      rowHeight = ROW_HEIGHT_DEFAULT,
-      indent = INDENT_DEFAULT,
-      contentMinWidth,
-      className,
-      theme,
-    } = props;
-
-    const scrollRef = useRef<HTMLDivElement | null>(null);
-
-    // ---- Selection state ----
-    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);
-    const selectedId = controlledSelected !== undefined ? controlledSelected : internalSelected;
-    const isSelectionControlled = controlledSelected !== undefined;
-
-    // ---- Expansion state ----
-    const [internalExpanded, setInternalExpanded] = useState<string[]>(() => {
-      if (Array.isArray(defaultExpanded)) return defaultExpanded;
-      if (defaultExpanded === "all") return collectIds(data);
-      if (defaultExpanded === "none") return [];
-      return rootIds(data);
-    });
-    const expandedIds = controlledExpanded ?? internalExpanded;
-    const isExpansionControlled = controlledExpanded !== undefined;
-    const expandedSet = useMemo(() => new Set(expandedIds), [expandedIds]);
-
-    // ---- Visible rows ----
-    const visibleRows = useMemo(() => flattenVisible(data, expandedSet), [data, expandedSet]);
-    const rowsById = useMemo(() => {
-      const m = new Map<string, TreeFolderVisibleRow>();
-      for (const r of visibleRows) m.set(r.node.id, r);
-      return m;
-    }, [visibleRows]);
-
-    // ---- Ancestor + subtree highlight ----
-    const ancestorPath = useMemo(
-      () => (selectedId ? findPath(data, selectedId) : null),
-      [data, selectedId],
-    );
-    const ancestorIdSet = useMemo(
-      () => new Set((ancestorPath ?? []).slice(0, -1).map((n) => n.id)),
-      [ancestorPath],
-    );
-    const isAncestorFn = useCallback(
-      (id: string) => highlightAncestors && ancestorIdSet.has(id),
-      [highlightAncestors, ancestorIdSet],
-    );
-
-    const descendantIdSet = useMemo(() => {
-      if (!highlightSubtree || !selectedId) return new Set<string>();
-      const node = findNode(data, selectedId);
-      if (!node) return new Set<string>();
-      return descendantIds(node, false);
-    }, [data, selectedId, highlightSubtree]);
-    const isDescendantOfSelected = useCallback(
-      (id: string) => descendantIdSet.has(id),
-      [descendantIdSet],
-    );
-
-    const breadcrumbItems = useMemo(
-      () => (ancestorPath ? toBreadcrumb(ancestorPath) : []),
-      [ancestorPath],
-    );
-
-    // ---- Handlers ----
-    const handleSelect = useCallback(
-      (id: string | null) => {
-        if (!isSelectionControlled) setInternalSelected(id);
-        onSelectionChange?.(id);
-      },
-      [isSelectionControlled, onSelectionChange],
-    );
-
-    const handleToggle = useCallback(
-      (id: string) => {
-        const next = expandedIds.includes(id)
-          ? expandedIds.filter((x) => x !== id)
-          : [...expandedIds, id];
-        if (!isExpansionControlled) setInternalExpanded(next);
-        onExpandedChange?.(next);
-      },
-      [expandedIds, isExpansionControlled, onExpandedChange],
-    );
-
-    const handleMoveInternal = useCallback(
-      (args: TreeFolderMoveArgs) => {
-        onMove?.(args);
-        if (onDataChange) onDataChange(applyMove(data, args));
-      },
-      [data, onMove, onDataChange],
-    );
-
-    const scrollToId = useCallback((id: string) => {
-      const el = scrollRef.current?.querySelector<HTMLElement>(`[data-row-id="${CSS.escape(id)}"]`);
-      el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    }, []);
-
-    // ---- DnD ----
-    const { dragIds, dropTarget, contextProps, ids } = useTreeFolderDnD({
-      data,
-      rowsById,
-      enabled: dndEnabled,
-      onMove: handleMoveInternal,
-      canDrop: ({ parentId }) => {
-        // Honor per-node `droppable: false` on the resolved parent.
-        if (parentId == null) return true;
-        const target = findNode(data, parentId);
-        if (!target) return false;
-        if (target.disabled || target.droppable === false) return false;
-        return true;
-      },
-    });
-    const dragIdSet = useMemo(() => new Set(dragIds), [dragIds]);
-
-    // ---- Imperative handle ----
-    useImperativeHandle(
-      ref,
-      () => ({
-        selectId: (id: string | null) => {
-          if (!isSelectionControlled) setInternalSelected(id);
-          onSelectionChange?.(id);
-          if (id) scrollToId(id);
-        },
-        expandAll: () => {
-          const all = collectIds(data);
-          if (!isExpansionControlled) setInternalExpanded(all);
-          onExpandedChange?.(all);
-        },
-        collapseAll: () => {
-          if (!isExpansionControlled) setInternalExpanded([]);
-          onExpandedChange?.([]);
-        },
-        scrollToId,
-      }),
-      [
-        data,
-        isSelectionControlled,
-        isExpansionControlled,
-        onSelectionChange,
-        onExpandedChange,
-        scrollToId,
-      ],
-    );
-
-    const isEmpty = data.length === 0;
-    const stripStyle = contentMinWidth ? { minWidth: contentMinWidth } : undefined;
-
-    return (
-      <div
-        data-theme={theme}
-        className={cn(
-          "flex h-full w-full flex-col bg-background-presentation-body-overlay-primary text-content-presentation-global-primary",
-          className,
-        )}
-      >
-        {showHeader && (
-          <div className="px-3 py-2 border-b border-border-presentation-global-primary flex items-center justify-between gap-2 shrink-0">
-            <span className="text-xs font-semibold text-content-presentation-global-secondary uppercase tracking-wide truncate">
-              {title}
-            </span>
-            {headerAccessory}
-          </div>
-        )}
-
-        {showBreadcrumb && (
-          <div className="border-b border-border-presentation-global-primary shrink-0">
-            <TreeFolderBreadcrumb
-              items={breadcrumbItems}
-              onSelect={(id) => {
-                handleSelect(id);
-                scrollToId(id);
-              }}
-            />
-          </div>
-        )}
-
-        <TreeFolderStyles />
-        <DndContext {...contextProps}>
-          <div ref={scrollRef} role="tree" className="tf-scroll flex-1 min-h-0 overflow-auto pt-[6px]">
-            {isEmpty ? (
-              (emptyState ?? (
-                <div className="text-xs text-content-presentation-global-tertiary p-3">
-                  Nothing here yet.
-                </div>
-              ))
-            ) : (
-              <div className="min-w-max" style={stripStyle}>
-                <DragList ids={ids} makeRoom={false}>
-                  {visibleRows.map((row, idx) => {
-                    const prevRow = visibleRows[idx - 1];
-                    const nextRow = visibleRows[idx + 1];
-                    const isSelected = selectedId === row.node.id;
-                    const isDescendant = isDescendantOfSelected(row.node.id) && !isSelected;
-                    const inBand = isSelected || isDescendant;
-
-                    // Neighbour-aware band rounding: a row is "in-band" if it's the selected
-                    // node itself or one of its descendants. The Set lookup handles deep nesting.
-                    const prevInBand =
-                      inBand &&
-                      !!prevRow &&
-                      (prevRow.node.id === selectedId || descendantIdSet.has(prevRow.node.id));
-                    const nextInBand =
-                      inBand &&
-                      !!nextRow &&
-                      (nextRow.node.id === selectedId || descendantIdSet.has(nextRow.node.id));
-
-                    const isDragging = dragIdSet.has(row.node.id);
-                    const isDropTargetInside =
-                      dropTarget?.rowId === row.node.id && dropTarget.position === "inside";
-                    const isDropBefore =
-                      dropTarget?.rowId === row.node.id && dropTarget.position === "before";
-                    const isDropAfter =
-                      dropTarget?.rowId === row.node.id && dropTarget.position === "after";
-
-                    return (
-                      <TreeFolderRow
-                        key={row.node.id}
-                        row={row}
-                        rowHeight={rowHeight}
-                        indent={indent}
-                        iconFor={iconFor}
-                        isSelected={isSelected}
-                        isAncestor={isAncestorFn(row.node.id) && !isSelected}
-                        isDescendantOfSelected={isDescendant}
-                        isPrevInBand={prevInBand}
-                        isNextInBand={nextInBand}
-                        isDragging={isDragging}
-                        isDropTargetInside={isDropTargetInside}
-                        isDropBefore={isDropBefore}
-                        isDropAfter={isDropAfter}
-                        dndEnabled={dndEnabled}
-                        onSelect={handleSelect}
-                        onToggle={handleToggle}
-                      />
-                    );
-                  })}
-                </DragList>
-              </div>
-            )}
-          </div>
-        </DndContext>
-      </div>
-    );
-  },
-);