@djangocfg/ui-tools 2.1.314 → 2.1.315

package/src/tools/Tree/components/TreeChevron.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useTreeContext } from '../context/TreeContext';
+
+export interface TreeChevronProps {
+  isExpanded: boolean;
+  isFolder: boolean;
+  className?: string;
+}
+
+export function TreeChevron({ isExpanded, isFolder, className }: TreeChevronProps) {
+  const { appearance } = useTreeContext();
+  const size = { width: 'var(--tree-icon-size)', height: 'var(--tree-icon-size)' };
+
+  if (!isFolder) {
+    return (
+      <span
+        aria-hidden
+        style={size}
+        className={cn('inline-block shrink-0', className)}
+      />
+    );
+  }
+  const Icon = isExpanded ? ChevronDown : ChevronRight;
+  return (
+    <Icon
+      aria-hidden
+      strokeWidth={appearance.iconStrokeWidth}
+      style={size}
+      className={cn(
+        'shrink-0 text-muted-foreground/70 transition-transform',
+        className,
+      )}
+    />
+  );
+}

package/src/tools/Tree/components/TreeContent.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { Fragment, type ReactNode } from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useTreeContext } from '../context/TreeContext';
+import type { FlatRow, TreeRowRenderProps, TreeRowSlot } from '../types';
+import { TreeRow } from './TreeRow';
+import { TreeEmpty } from './TreeEmpty';
+
+export interface TreeContentProps<T> {
+  /** Custom row renderer; falls back to <TreeRow />. */
+  children?: TreeRowSlot<T>;
+  className?: string;
+  /** Override aria-label for the container. */
+  ariaLabel?: string;
+}
+
+export function TreeContent<T>({ children, className, ariaLabel }: TreeContentProps<T>) {
+  const { flatRows, labels, selected, focused, matchingIds } = useTreeContext<T>();
+
+  if (flatRows.length === 0) {
+    return <TreeEmpty>{labels.empty}</TreeEmpty>;
+  }
+
+  return (
+    <div
+      role="tree"
+      aria-label={ariaLabel ?? labels.ariaLabel}
+      className={cn('relative flex flex-col py-1', className)}
+    >
+      {flatRows.map((row: FlatRow<T>) => {
+        const slot: TreeRowRenderProps<T> = {
+          node: row.node,
+          level: row.level,
+          isSelected: selected.has(row.node.id),
+          isExpanded: row.isExpanded,
+          isFocused: focused === row.node.id,
+          isFolder: row.isFolder,
+          isLoading: row.isLoading,
+          isMatchingSearch: matchingIds.has(row.node.id),
+        };
+        const node: ReactNode = children ? children(slot) : <TreeRow row={row} />;
+        return <Fragment key={row.node.id}>{node}</Fragment>;
+      })}
+    </div>
+  );
+}

package/src/tools/Tree/components/TreeEmpty.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+export interface TreeEmptyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function TreeEmpty({ children, className }: TreeEmptyProps) {
+  return (
+    <div
+      className={cn(
+        'flex h-full min-h-32 items-center justify-center px-4 py-6 text-sm text-muted-foreground',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/tools/Tree/components/TreeError.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { AlertCircle } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+export interface TreeErrorProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function TreeError({ children, className }: TreeErrorProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive',
+        className,
+      )}
+      role="alert"
+    >
+      <AlertCircle aria-hidden className="mt-0.5 size-4 shrink-0" />
+      <span>{children}</span>
+    </div>
+  );
+}

package/src/tools/Tree/components/TreeIcon.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { File, Folder, FolderOpen } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useTreeContext } from '../context/TreeContext';
+
+export interface TreeIconProps {
+  isFolder: boolean;
+  isExpanded: boolean;
+  className?: string;
+}
+
+export function TreeIcon({ isFolder, isExpanded, className }: TreeIconProps) {
+  const { appearance } = useTreeContext();
+  const Icon = isFolder ? (isExpanded ? FolderOpen : Folder) : File;
+  return (
+    <Icon
+      aria-hidden
+      strokeWidth={appearance.iconStrokeWidth}
+      style={{ width: 'var(--tree-icon-size)', height: 'var(--tree-icon-size)' }}
+      className={cn(
+        'shrink-0',
+        isFolder ? 'text-foreground/70' : 'text-muted-foreground/80',
+        className,
+      )}
+    />
+  );
+}

package/src/tools/Tree/components/TreeIndentGuides.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useTreeContext } from '../context/TreeContext';
+
+export interface TreeIndentGuidesProps {
+  level: number;
+  indent: number;
+}
+
+/**
+ * Vertical guide lines under nested rows. Renders one absolute-positioned
+ * 1px column per ancestor level. Decorative — `aria-hidden` and
+ * pointer-events disabled. Opacity comes from the tree appearance.
+ */
+export function TreeIndentGuides({ level, indent }: TreeIndentGuidesProps) {
+  const { appearance } = useTreeContext();
+  if (level <= 0) return null;
+  return (
+    <span
+      aria-hidden
+      className="pointer-events-none absolute inset-y-0 left-0"
+      style={{ width: 8 + level * indent, opacity: appearance.indentGuideOpacity }}
+    >
+      {Array.from({ length: level }).map((_, i) => (
+        <span
+          key={i}
+          className="absolute inset-y-0 w-px bg-border"
+          style={{ left: 8 + i * indent + indent / 2 - 0.5 }}
+        />
+      ))}
+    </span>
+  );
+}

package/src/tools/Tree/components/TreeLabel.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+export interface TreeLabelProps {
+  children: React.ReactNode;
+  isMatchingSearch?: boolean;
+  className?: string;
+}
+
+export function TreeLabel({ children, isMatchingSearch, className }: TreeLabelProps) {
+  return (
+    <span
+      style={{ fontSize: 'var(--tree-font-size)' }}
+      className={cn(
+        'truncate leading-tight tracking-[-0.005em]',
+        isMatchingSearch && 'font-medium text-foreground',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/src/tools/Tree/components/TreeRow.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useTreeContext } from '../context/TreeContext';
+import { radiusClass, rowStateClasses } from '../data/appearance';
+import type { FlatRow, TreeRowRenderProps } from '../types';
+import { TreeChevron } from './TreeChevron';
+import { TreeIcon } from './TreeIcon';
+import { TreeIndentGuides } from './TreeIndentGuides';
+import { TreeLabel } from './TreeLabel';
+
+export interface TreeRowProps<T> {
+  row: FlatRow<T>;
+  className?: string;
+}
+
+export function TreeRow<T>({ row, className }: TreeRowProps<T>) {
+  const ctx = useTreeContext<T>();
+  const {
+    appearance,
+    showIndentGuides,
+    selected,
+    focused,
+    matchingIds,
+    select,
+    toggle,
+    setFocus,
+    activate,
+    getItemName,
+    renderIcon,
+    renderLabel,
+    renderActions,
+    renderContextMenu,
+  } = ctx;
+
+  const { node, level, isFolder, isExpanded, isLoading } = row;
+  const isSelected = selected.has(node.id);
+  const isFocused = focused === node.id;
+  const isMatchingSearch = matchingIds.has(node.id);
+
+  const slot: TreeRowRenderProps<T> = {
+    node,
+    level,
+    isSelected,
+    isExpanded,
+    isFocused,
+    isFolder,
+    isLoading,
+    isMatchingSearch,
+  };
+
+  const handleActivate = () => {
+    if (node.disabled) return;
+    setFocus(node.id);
+    select(node.id);
+    if (isFolder) toggle(node.id);
+    else activate(node);
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    handleActivate();
+    e.currentTarget.scrollIntoView?.({ block: 'nearest' });
+  };
+
+  const handleDoubleClick = () => {
+    if (node.disabled) return;
+    if (!isFolder) activate(node);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    // Match native button keyboard semantics on the row itself.
+    if (node.disabled) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleActivate();
+    }
+  };
+
+  const trigger = (
+    <div
+      role="treeitem"
+      aria-level={level + 1}
+      aria-expanded={isFolder ? isExpanded : undefined}
+      aria-selected={isSelected || undefined}
+      aria-current={isSelected ? 'true' : undefined}
+      aria-disabled={node.disabled || undefined}
+      data-tree-row=""
+      data-id={node.id}
+      data-selected={isSelected ? 'true' : undefined}
+      data-focused={isFocused && !isSelected ? 'true' : undefined}
+      data-folder={isFolder || undefined}
+      data-expanded={isExpanded || undefined}
+      tabIndex={isFocused ? 0 : -1}
+      style={{
+        paddingLeft: 6 + level * appearance.indent,
+        height: 'var(--tree-row-height)',
+        gap: 'var(--tree-gap)',
+      }}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onKeyDown={handleKeyDown}
+      onFocus={() => setFocus(node.id)}
+      className={cn(
+        'group/row relative flex w-full select-none items-center pr-2 text-left',
+        'transition-colors outline-none',
+        node.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+        radiusClass(appearance),
+        rowStateClasses(appearance),
+        'focus-visible:ring-1 focus-visible:ring-ring/50',
+        isMatchingSearch && 'ring-1 ring-primary/30',
+        node.disabled && 'opacity-50',
+        className,
+      )}
+    >
+      {/* Active-row left indicator (VSCode style) */}
+      {appearance.showActiveIndicator && isSelected ? (
+        <span
+          aria-hidden
+          className={cn(
+            'absolute left-0 top-1 bottom-1 w-0.5 rounded-r-full',
+            'bg-foreground/30 group-focus-within/tree:bg-primary',
+          )}
+        />
+      ) : null}
+
+      {showIndentGuides && level > 0 ? (
+        <TreeIndentGuides level={level} indent={appearance.indent} />
+      ) : null}
+
+      <TreeChevron isExpanded={isExpanded} isFolder={isFolder} />
+
+      {isLoading ? (
+        <Loader2
+          aria-hidden
+          strokeWidth={appearance.iconStrokeWidth}
+          style={{ width: 'var(--tree-icon-size)', height: 'var(--tree-icon-size)' }}
+          className="shrink-0 animate-spin text-muted-foreground/70"
+        />
+      ) : renderIcon ? (
+        renderIcon(slot)
+      ) : (
+        <TreeIcon isFolder={isFolder} isExpanded={isExpanded} />
+      )}
+
+      <span
+        className="flex min-w-0 flex-1 items-center"
+        style={{ gap: 'var(--tree-gap)' }}
+      >
+        {renderLabel ? (
+          renderLabel(slot)
+        ) : (
+          <TreeLabel isMatchingSearch={isMatchingSearch}>{getItemName(node)}</TreeLabel>
+        )}
+      </span>
+
+      {renderActions ? (
+        <span
+          className="ml-auto flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-within/row:opacity-100"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {renderActions(slot)}
+        </span>
+      ) : null}
+    </div>
+  );
+
+  if (renderContextMenu) {
+    return <>{renderContextMenu(slot, trigger)}</>;
+  }
+  return trigger;
+}

package/src/tools/Tree/components/TreeSearchInput.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { Search, X } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useTreeContext } from '../context/TreeContext';
+import { useTreeSearch } from '../context/hooks';
+
+export interface TreeSearchInputProps {
+  className?: string;
+  showMatches?: boolean;
+}
+
+export function TreeSearchInput({ className, showMatches = true }: TreeSearchInputProps) {
+  const { labels } = useTreeContext();
+  const { query, setQuery, matchCount } = useTreeSearch();
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 rounded-md border border-border bg-background px-2',
+        className,
+      )}
+    >
+      <Search aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
+      <input
+        type="search"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder={labels.searchPlaceholder}
+        className="h-7 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+      />
+      {showMatches && query.trim().length > 0 ? (
+        <span className="shrink-0 text-xs text-muted-foreground">
+          {labels.searchMatches(matchCount)}
+        </span>
+      ) : null}
+      {query.length > 0 ? (
+        <button
+          type="button"
+          onClick={() => setQuery('')}
+          aria-label="Clear search"
+          className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          <X aria-hidden className="size-3.5" />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/tools/Tree/components/TreeSkeleton.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+export interface TreeSkeletonProps {
+  rows?: number;
+  className?: string;
+}
+
+export function TreeSkeleton({ rows = 6, className }: TreeSkeletonProps) {
+  return (
+    <div className={cn('flex flex-col gap-1 p-2', className)} aria-hidden>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex items-center gap-2" style={{ paddingLeft: (i % 3) * 16 }}>
+          <span className="size-4 shrink-0 animate-pulse rounded bg-muted" />
+          <span className="size-4 shrink-0 animate-pulse rounded bg-muted" />
+          <span className="h-3 flex-1 animate-pulse rounded bg-muted" />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/tools/Tree/components/index.ts

@@ -0,0 +1,22 @@
+'use client';
+
+export { TreeChevron } from './TreeChevron';
+export type { TreeChevronProps } from './TreeChevron';
+export { TreeIcon } from './TreeIcon';
+export type { TreeIconProps } from './TreeIcon';
+export { TreeLabel } from './TreeLabel';
+export type { TreeLabelProps } from './TreeLabel';
+export { TreeRow } from './TreeRow';
+export type { TreeRowProps } from './TreeRow';
+export { TreeContent } from './TreeContent';
+export type { TreeContentProps } from './TreeContent';
+export { TreeSearchInput } from './TreeSearchInput';
+export type { TreeSearchInputProps } from './TreeSearchInput';
+export { TreeEmpty } from './TreeEmpty';
+export type { TreeEmptyProps } from './TreeEmpty';
+export { TreeSkeleton } from './TreeSkeleton';
+export type { TreeSkeletonProps } from './TreeSkeleton';
+export { TreeError } from './TreeError';
+export type { TreeErrorProps } from './TreeError';
+export { TreeIndentGuides } from './TreeIndentGuides';
+export type { TreeIndentGuidesProps } from './TreeIndentGuides';