@djangocfg/ui-tools 2.1.316 → 2.1.318

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.316",
+  "version": "2.1.318",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -79,6 +79,11 @@
       "import": "./dist/tree/index.mjs",
       "require": "./dist/tree/index.cjs"
     },
+    "./file-icon": {
+      "types": "./dist/file-icon/index.d.ts",
+      "import": "./dist/file-icon/index.mjs",
+      "require": "./dist/file-icon/index.cjs"
+    },
     "./styles": "./src/styles/index.css",
     "./dist.css": "./dist/index.css"
   },
@@ -96,8 +101,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.316",
-    "@djangocfg/ui-core": "^2.1.316",
+    "@djangocfg/i18n": "^2.1.318",
+    "@djangocfg/ui-core": "^2.1.318",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -146,13 +151,14 @@
   },
   "optionalDependencies": {
     "@mapbox/mapbox-gl-draw": "^1.4.3",
-    "@maplibre/maplibre-gl-geocoder": "^1.7.0"
+    "@maplibre/maplibre-gl-geocoder": "^1.7.0",
+    "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.316",
+    "@djangocfg/i18n": "^2.1.318",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.316",
-    "@djangocfg/ui-core": "^2.1.316",
+    "@djangocfg/typescript-config": "^2.1.318",
+    "@djangocfg/ui-core": "^2.1.318",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/FileIcon/FileIcon.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { File as FileFallback } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { getMaterialIconsSync, loadMaterialIcons } from './loader';
+import { resolveFolderIcon, type FolderIconOverrides } from './specialFolders';
+
+export type FileIconSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 64;
+
+export interface FileIconProps {
+  /** File name (with extension) or folder name. */
+  name: string;
+  /** Render a folder icon instead of a file icon. */
+  isFolder?: boolean;
+  /** Folder open / closed state. Ignored when `isFolder` is false. */
+  isExpanded?: boolean;
+  /** Pixel size of the icon. */
+  size?: FileIconSize;
+  /**
+   * Override or extend the built-in special-folder mapping. Keys are
+   * matched case-insensitively. Only used when `isFolder` is true.
+   */
+  folderOverrides?: FolderIconOverrides;
+  className?: string;
+}
+
+/**
+ * VSCode-style file icon.
+ *
+ * - Folders render Lucide `Folder` / `FolderOpen` (amber tint).
+ * - Files use `material-file-icons` if it's installed in the consumer; otherwise
+ *   fall back to a neutral Lucide `File` icon.
+ *
+ * The optional dependency is loaded lazily on first render — there is zero
+ * bundle cost for consumers who never mount this component.
+ */
+export function FileIcon({
+  name,
+  isFolder = false,
+  isExpanded = false,
+  size = 16,
+  folderOverrides,
+  className,
+}: FileIconProps) {
+  const [svg, setSvg] = useState<string | null>(() => {
+    if (isFolder) return null;
+    const fn = getMaterialIconsSync();
+    return fn ? (fn(name)?.svg ?? null) : null;
+  });
+
+  useEffect(() => {
+    if (isFolder) {
+      setSvg(null);
+      return;
+    }
+    let cancelled = false;
+    void loadMaterialIcons().then((fn) => {
+      if (cancelled) return;
+      setSvg(fn ? (fn(name)?.svg ?? null) : null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isFolder, name]);
+
+  if (isFolder) {
+    const Icon = resolveFolderIcon({
+      name,
+      isExpanded,
+      overrides: folderOverrides,
+    });
+    return (
+      <Icon
+        className={cn('shrink-0 text-amber-500', className)}
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+
+  if (!svg) {
+    return (
+      <FileFallback
+        className={cn('shrink-0 text-muted-foreground/80', className)}
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+
+  return (
+    <span
+      role="img"
+      aria-hidden
+      className={cn('inline-block shrink-0', className)}
+      style={{ width: size, height: size }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}
+
+export default FileIcon;

package/src/tools/FileIcon/index.ts

@@ -0,0 +1,15 @@
+'use client';
+
+export { FileIcon } from './FileIcon';
+export type { FileIconProps, FileIconSize } from './FileIcon';
+
+export { createFileIconSlot } from './treeAdapter';
+export type { CreateFileIconSlotOptions } from './treeAdapter';
+
+export { resolveFolderIcon } from './specialFolders';
+export type {
+  ResolveFolderIconOptions,
+  FolderIconOverrides,
+} from './specialFolders';
+
+export { loadMaterialIcons, getMaterialIconsSync } from './loader';

package/src/tools/FileIcon/loader.ts

@@ -0,0 +1,47 @@
+'use client';
+
+/**
+ * Lazy loader for `material-file-icons`. The package is an optional dependency:
+ * if it's installed in the consumer's tree, we render its rich VSCode-style
+ * SVGs; if not, the loader resolves to `null` and `<FileIcon>` falls back to a
+ * Lucide icon. Either way, ui-tools never throws or warns about a missing
+ * package.
+ *
+ * Resolution is cached per-process so we don't re-import on every render.
+ */
+
+type GetIconFn = (name: string) => { svg: string } | undefined;
+
+let cached: GetIconFn | null | undefined;
+let inflight: Promise<GetIconFn | null> | null = null;
+
+export async function loadMaterialIcons(): Promise<GetIconFn | null> {
+  if (cached !== undefined) return cached;
+  if (inflight) return inflight;
+
+  inflight = (async () => {
+    try {
+      // Computed specifier so bundlers don't try to eagerly resolve it.
+      const specifier = 'material-file-icons';
+      const mod = (await import(/* @vite-ignore */ specifier)) as {
+        getIcon?: GetIconFn;
+        default?: { getIcon?: GetIconFn };
+      };
+      const fn = mod.getIcon ?? mod.default?.getIcon ?? null;
+      cached = fn;
+      return fn;
+    } catch {
+      cached = null;
+      return null;
+    } finally {
+      inflight = null;
+    }
+  })();
+
+  return inflight;
+}
+
+/** Synchronous accessor — returns null until `loadMaterialIcons` resolves. */
+export function getMaterialIconsSync(): GetIconFn | null {
+  return cached ?? null;
+}

package/src/tools/FileIcon/specialFolders.ts

@@ -0,0 +1,93 @@
+'use client';
+
+import {
+  BookOpen,
+  FlaskConical,
+  Folder,
+  FolderCode,
+  FolderGit2,
+  FolderInput,
+  FolderOpen,
+  FolderOutput,
+  Github,
+  Image as ImageIcon,
+  Package,
+  Settings,
+  Terminal,
+  type LucideIcon,
+} from 'lucide-react';
+
+/**
+ * Conventional folder names → Lucide icon. Lookup is case-insensitive and
+ * trimmed. Anything not in this map falls back to a generic folder icon.
+ *
+ * Designed to feel "right" across the common dev project layouts (Node,
+ * Python, Go, Rust, Django, Next, Vite). Not exhaustive on purpose —
+ * keeps the bundle light and the behaviour predictable.
+ */
+const SPECIAL_FOLDERS: Record<string, LucideIcon> = {
+  src: FolderCode,
+  source: FolderCode,
+  lib: FolderCode,
+  app: FolderCode,
+  packages: Package,
+  node_modules: Package,
+  vendor: Package,
+  public: FolderInput,
+  static: FolderInput,
+  assets: ImageIcon,
+  images: ImageIcon,
+  media: ImageIcon,
+  dist: FolderOutput,
+  build: FolderOutput,
+  out: FolderOutput,
+  '.next': FolderOutput,
+  '.nuxt': FolderOutput,
+  '.turbo': FolderOutput,
+  docs: BookOpen,
+  documentation: BookOpen,
+  tests: FlaskConical,
+  test: FlaskConical,
+  __tests__: FlaskConical,
+  __test__: FlaskConical,
+  scripts: Terminal,
+  bin: Terminal,
+  config: Settings,
+  configs: Settings,
+  '.config': Settings,
+  '.vscode': Settings,
+  '.idea': Settings,
+  '.git': FolderGit2,
+  '.github': Github,
+  '.gitlab': FolderGit2,
+};
+
+export interface ResolveFolderIconOptions {
+  /** Folder display name (no path). */
+  name: string;
+  /** Open / closed state — only used for the *generic* folder fallback. */
+  isExpanded?: boolean;
+  /**
+   * Optional override map. Wins over the built-in table. Keys are
+   * matched case-insensitively after `trim()`.
+   */
+  overrides?: Record<string, LucideIcon>;
+}
+
+/**
+ * Pick the right folder icon for `name`. Returns `Folder` / `FolderOpen`
+ * for unknown names so callers can render the generic open/closed pair.
+ */
+export function resolveFolderIcon({
+  name,
+  isExpanded = false,
+  overrides,
+}: ResolveFolderIconOptions): LucideIcon {
+  const key = name.trim().toLowerCase();
+  if (overrides?.[key]) return overrides[key];
+  const special = SPECIAL_FOLDERS[key];
+  if (special) return special;
+  return isExpanded ? FolderOpen : Folder;
+}
+
+export type FolderIconOverrides = Record<string, LucideIcon>;

package/src/tools/FileIcon/treeAdapter.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import type { TreeNode, TreeRowSlot } from '../Tree/types';
+import { FileIcon, type FileIconSize } from './FileIcon';
+import type { FolderIconOverrides } from './specialFolders';
+
+export interface CreateFileIconSlotOptions<T> {
+  /**
+   * How to read the displayed name (with extension) for a node. Use the same
+   * accessor you pass to `<TreeRoot getItemName={...} />`.
+   */
+  getName: (node: TreeNode<T>) => string;
+  /** Pixel size for both file and folder icons. Default: 16. */
+  size?: FileIconSize;
+  /**
+   * Override or extend the built-in special-folder mapping (e.g. give
+   * `tests` a custom icon). Keys are matched case-insensitively.
+   */
+  folderOverrides?: FolderIconOverrides;
+}
+
+/**
+ * Build a `renderIcon` slot for `<TreeRoot>` that uses `<FileIcon>` for both
+ * leaves and folders.
+ *
+ * @example
+ * ```tsx
+ * <TreeRoot
+ *   data={data}
+ *   getItemName={(n) => n.data.name}
+ *   renderIcon={createFileIconSlot({ getName: (n) => n.data.name })}
+ * />
+ * ```
+ */
+export function createFileIconSlot<T>({
+  getName,
+  size = 16,
+  folderOverrides,
+}: CreateFileIconSlotOptions<T>): TreeRowSlot<T> {
+  return ({ node, isFolder, isExpanded }) => (
+    <FileIcon
+      name={getName(node)}
+      isFolder={isFolder}
+      isExpanded={isExpanded}
+      size={size}
+      folderOverrides={folderOverrides}
+    />
+  );
+}

package/src/tools/Tree/README.md

@@ -182,6 +182,7 @@ Toggle the bar with `appearance.showActiveIndicator`. Intensity scales with `app
 | Option | Default |
 | --- | --- |
 | `selectionMode` | `'single'` |
+| `activationMode` | `'single-click'` |
 | `enableSearch` | `false` |
 | `enableTypeAhead` | `true` |
 | `showIndentGuides` | `false` |
@@ -198,6 +199,8 @@ Toggle the bar with `appearance.showActiveIndicator`. Intensity scales with `app
 | Story | Demonstrates |
 | --- | --- |
 | Default | sensible cozy defaults |
+| WithActivationModes | single-click / double-click / preview semantics |
+| WithHiddenFilter | `filterNode` toggle hides dot-files |
 | Densities | three density presets side-by-side |
 | WithIcons | file-type icons through `renderIcon` |
 | WithStatus | modified / error / disabled rows through `renderLabel` |
@@ -211,6 +214,103 @@ Toggle the bar with `appearance.showActiveIndicator`. Intensity scales with `app
 | LargeTree | ~500 nodes scalability check |
 | Playground | every knob exposed as a control |
 
+## Filtering nodes
+
+`filterNode` is a single predicate that decides which nodes appear at all.
+Nodes returning `false` (and their descendants) are excluded from rendering,
+keyboard navigation, and search.
+
+```tsx
+const [showHidden, setShowHidden] = useState(false);
+
+<TreeRoot
+  data={data}
+  getItemName={(n) => n.data.name}
+  filterNode={(n) => showHidden || !n.data.name.startsWith('.')}
+/>
+```
+
+This is intentionally minimal — Tree is generic over `T` and has no opinion
+on what "hidden" means in your domain. If your backend already provides
+flags like `entry.isHidden` / `entry.isSystem`, use them directly:
+
+```tsx
+filterNode={(n) => showHidden || (!n.data.isHidden && !n.data.isSystem)}
+```
+
+> **Frontend note.** From the browser you cannot read OS-level hidden
+> attributes (Windows `FILE_ATTRIBUTE_HIDDEN`, macOS `kIsInvisible`).
+> Either filter by name (Unix dot-prefix is the de-facto convention), or
+> let your backend determine those flags and forward them in `node.data`.
+
+## Activation modes
+
+How a leaf becomes "activated" (opened) on pointer interaction is controlled
+by `activationMode`. Folders ignore this setting — they always toggle on
+single click and never call `onActivate`.
+
+| Mode | Single click | Double click |
+| --- | --- | --- |
+| `'single-click'` *(default)* | activate `{ preview: false }` | activate `{ preview: false }` |
+| `'double-click'` | select + focus only | activate `{ preview: false }` |
+| `'single-click-preview'` *(VSCode / Cursor)* | activate `{ preview: true }` | activate `{ preview: false }` |
+
+Keyboard `Enter` / `Space` always activates with `{ preview: false }` —
+keyboard input is treated as an explicit user action.
+
+```tsx
+<TreeRoot<FsNode>
+  data={data}
+  getItemName={(n) => n.data.name}
+  activationMode="single-click-preview"
+  onActivate={(node, { preview }) =>
+    preview ? openPreviewTab(node) : openPinnedTab(node)
+  }
+/>
+```
+
+The active mode is also exposed on each row as
+`data-activation-mode="<mode>"` for CSS-level targeting.
+
+## VSCode-style file icons
+
+Tree is generic over `T` — it has no opinion on whether nodes are files. For a
+ready-made VSCode-style icon set, install the optional companion subpath:
+
+```bash
+pnpm add material-file-icons
+```
+
+```tsx
+import { TreeRoot } from '@djangocfg/ui-tools/tree';
+import { createFileIconSlot } from '@djangocfg/ui-tools/file-icon';
+
+<TreeRoot
+  data={data}
+  getItemName={(n) => n.data.name}
+  renderIcon={createFileIconSlot({ getName: (n) => n.data.name })}
+/>
+```
+
+`material-file-icons` is declared in `optionalDependencies`. If it's not
+installed, `<FileIcon>` falls back to a Lucide `File` icon — no warnings, no
+runtime errors.
+
+Folders use a small built-in mapping (`src` → `FolderCode`,
+`node_modules` → `Package`, `.git` → `FolderGit2`, `dist`/`build`/`.next`
+→ `FolderOutput`, `tests`/`__tests__` → `FlaskConical`, …). Anything not
+in the table renders the generic `Folder` / `FolderOpen` pair. Override
+or extend the table per-call:
+
+```tsx
+import { FolderHeart } from 'lucide-react';
+
+renderIcon={createFileIconSlot({
+  getName: (n) => n.data.name,
+  folderOverrides: { favorites: FolderHeart },
+})}
+```
+
 ## Out of scope (today)
 
 - Inline rename UX

package/src/tools/Tree/Tree.story.tsx

@@ -111,6 +111,90 @@ export const Default = () => (
   </div>
 );
 
+// ---------------------------------------------------------------------------
+// 1.5) WithActivationModes — VSCode-style click semantics
+// ---------------------------------------------------------------------------
+
+export const WithActivationModes = () => {
+  const [log, setLog] = useState<string[]>([]);
+  const append = (s: string) =>
+    setLog((prev) => [s, ...prev].slice(0, 8));
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-3 gap-3">
+        {(['single-click', 'double-click', 'single-click-preview'] as const).map(
+          (mode) => (
+            <div key={mode} className="flex flex-col gap-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                {mode}
+              </span>
+              <div className="h-72 w-64 rounded-md border border-border bg-card">
+                <TreeRoot<FsNode>
+                  data={fs}
+                  getItemName={getName}
+                  initialExpandedIds={['src']}
+                  activationMode={mode}
+                  onActivate={(node, { preview }) =>
+                    append(
+                      `[${mode}] ${node.data.name}${preview ? ' (preview)' : ''}`,
+                    )
+                  }
+                />
+              </div>
+            </div>
+          ),
+        )}
+      </div>
+      <div className="rounded-md border border-border bg-muted/30 p-3 font-mono text-xs">
+        {log.length === 0 ? (
+          <span className="text-muted-foreground">
+            click / double-click a file to log activations
+          </span>
+        ) : (
+          log.map((line, i) => <div key={i}>{line}</div>)
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// 1.7) WithHiddenFilter — filterNode prop hides dot-prefixed entries
+// ---------------------------------------------------------------------------
+
+const fsWithDotfiles: TreeNode<FsNode>[] = [
+  ...fs,
+  { id: '.env', data: { name: '.env' } },
+  { id: '.gitignore', data: { name: '.gitignore' } },
+  {
+    id: '.git',
+    data: { name: '.git' },
+    isFolder: true,
+    children: [
+      { id: '.git/HEAD', data: { name: 'HEAD' } },
+      { id: '.git/config', data: { name: 'config' } },
+    ],
+  },
+];
+
+export const WithHiddenFilter = () => {
+  const [showHidden] = useBoolean('showHidden', {
+    defaultValue: false,
+    label: 'Show hidden',
+  });
+  return (
+    <div className="h-96 w-80 rounded-md border border-border bg-card">
+      <TreeRoot<FsNode>
+        data={fsWithDotfiles}
+        getItemName={getName}
+        initialExpandedIds={['src']}
+        filterNode={(n) => showHidden || !n.data.name.startsWith('.')}
+      />
+    </div>
+  );
+};
+
 // ---------------------------------------------------------------------------
 // 2) Densities — three presets side-by-side for comparison
 // ---------------------------------------------------------------------------

package/src/tools/Tree/TreeRoot.tsx

@@ -23,6 +23,7 @@ function TreeRoot<T>(props: TreeRootProps<T>) {
     getItemName,
     loadChildren,
     selectionMode,
+    activationMode,
     initialExpandedIds,
     initialSelectedIds,
     indent,
@@ -30,6 +31,7 @@ function TreeRoot<T>(props: TreeRootProps<T>) {
     onSelectionChange,
     onExpansionChange,
     onActivate,
+    filterNode,
     enableSearch = false,
     enableTypeAhead = true,
     showIndentGuides = false,
@@ -51,6 +53,7 @@ function TreeRoot<T>(props: TreeRootProps<T>) {
       getItemName={getItemName}
       loadChildren={loadChildren}
       selectionMode={selectionMode}
+      activationMode={activationMode}
       initialExpandedIds={initialExpandedIds}
       initialSelectedIds={initialSelectedIds}
       indent={indent}
@@ -58,6 +61,7 @@ function TreeRoot<T>(props: TreeRootProps<T>) {
       onSelectionChange={onSelectionChange}
       onExpansionChange={onExpansionChange}
       onActivate={onActivate}
+      filterNode={filterNode}
       enableSearch={enableSearch}
       showIndentGuides={showIndentGuides}
       renderIcon={renderIcon}
@@ -104,8 +108,9 @@ function TreeRootShell<T>({
     onFocus: ctx.setFocus,
     onSelect: ctx.select,
     onActivate: (id) => {
+      // Keyboard Enter / Space is always an explicit action — pin (no preview).
       const row = ctx.flatRows.find((r) => r.node.id === id);
-      if (row) ctx.activate(row.node);
+      if (row) ctx.activate(row.node, { preview: false });
     },
     onExpand: ctx.expand,
     onCollapse: ctx.collapse,

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

@@ -4,6 +4,7 @@ import { Fragment, type ReactNode } from 'react';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { useTreeContext } from '../context/TreeContext';
+import { appearanceToStyle } from '../data/appearance';
 import type { FlatRow, TreeRowRenderProps, TreeRowSlot } from '../types';
 import { TreeRow } from './TreeRow';
 import { TreeEmpty } from './TreeEmpty';
@@ -17,7 +18,7 @@ export interface TreeContentProps<T> {
 }
 
 export function TreeContent<T>({ children, className, ariaLabel }: TreeContentProps<T>) {
-  const { flatRows, labels, selected, focused, matchingIds } = useTreeContext<T>();
+  const { flatRows, labels, selected, focused, matchingIds, appearance } = useTreeContext<T>();
 
   if (flatRows.length === 0) {
     return <TreeEmpty>{labels.empty}</TreeEmpty>;
@@ -28,6 +29,7 @@ export function TreeContent<T>({ children, className, ariaLabel }: TreeContentPr
       role="tree"
       aria-label={ariaLabel ?? labels.ariaLabel}
       className={cn('relative flex flex-col py-1', className)}
+      style={appearanceToStyle(appearance)}
     >
       {flatRows.map((row: FlatRow<T>) => {
         const slot: TreeRowRenderProps<T> = {

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

@@ -20,6 +20,7 @@ export function TreeRow<T>({ row, className }: TreeRowProps<T>) {
   const ctx = useTreeContext<T>();
   const {
     appearance,
+    activationMode,
     showIndentGuides,
     selected,
     focused,
@@ -51,22 +52,29 @@ export function TreeRow<T>({ row, className }: TreeRowProps<T>) {
     isMatchingSearch,
   };
 
-  const handleActivate = () => {
+  // Folders always toggle on single click regardless of `activationMode`.
+  // Leaves dispatch by mode:
+  //   single-click          → click activates {preview:false}
+  //   double-click          → click only selects; dblclick activates {preview:false}
+  //   single-click-preview  → click activates {preview:true}; dblclick activates {preview:false}
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     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();
+    if (isFolder) {
+      toggle(node.id);
+    } else if (activationMode === 'single-click') {
+      activate(node, { preview: false });
+    } else if (activationMode === 'single-click-preview') {
+      activate(node, { preview: true });
+    }
     e.currentTarget.scrollIntoView?.({ block: 'nearest' });
   };
 
   const handleDoubleClick = () => {
     if (node.disabled) return;
-    if (!isFolder) activate(node);
+    if (isFolder) return;
+    activate(node, { preview: false });
   };
 
   const trigger = (
@@ -79,6 +87,7 @@ export function TreeRow<T>({ row, className }: TreeRowProps<T>) {
       aria-disabled={node.disabled || undefined}
       data-tree-row=""
       data-id={node.id}
+      data-activation-mode={activationMode}
       data-selected={isSelected ? 'true' : undefined}
       data-focused={isFocused && !isSelected ? 'true' : undefined}
       data-folder={isFolder || undefined}