@adecore/ui 0.35.5 → 0.36.0

package/dist/file-tree/parts.js

@@ -1,12 +1,14 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { useRender } from '@base-ui/react/use-render';
 import { FileTree as PierreFileTree } from '@pierre/trees/react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
+import { Icon } from "../Icon.js";
 import { mergeRefs } from '../merge-refs.js';
 import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargetsOf, rowPathOf, visibleRows } from './helpers.js';
+import { useEmptyLines } from './use-empty-lines.js';
 import { useFileTreeShift } from "./use-file-tree-shift.js";
 import { useFileTreeSlots } from './use-slots.js';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -14,9 +16,10 @@ function inSlot(event) {
   return event.composedPath().some(node => node instanceof HTMLElement && node.hasAttribute('data-tree-slot'));
 }
 export function FileTreeRoot(t0) {
-  const $ = _c(79);
+  const $ = _c(104);
   let children;
   let className;
+  let emptyLabel;
   let label;
   let model;
   let onActivate;
@@ -33,7 +36,12 @@ export function FileTreeRoot(t0) {
   let renderControl;
   let renderDecoration;
   let resetKey;
+  let rowIcon;
+  let style;
   let t1;
+  let t2;
+  let t3;
+  let t4;
   let treeProps;
   if ($[0] !== t0) {
     ({
@@ -49,6 +57,11 @@ export function FileTreeRoot(t0) {
       onRowDragStart,
       renderControl,
       renderDecoration,
+      decorationOrder: t2,
+      rowIcon,
+      fitContent: t3,
+      highlight: t4,
+      emptyLabel,
       treeProps,
       render,
       className,
@@ -56,52 +69,68 @@ export function FileTreeRoot(t0) {
       children,
       onClick,
       onKeyDownCapture,
+      style,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
-    $[3] = label;
-    $[4] = model;
-    $[5] = onActivate;
-    $[6] = onClick;
-    $[7] = onExpandedPathsChange;
-    $[8] = onFocusMove;
-    $[9] = onKeyDownCapture;
-    $[10] = onLoadChildren;
-    $[11] = onRowContextMenu;
-    $[12] = onRowDragStart;
-    $[13] = props;
-    $[14] = ref;
-    $[15] = render;
-    $[16] = renderControl;
-    $[17] = renderDecoration;
-    $[18] = resetKey;
-    $[19] = t1;
-    $[20] = treeProps;
+    $[3] = emptyLabel;
+    $[4] = label;
+    $[5] = model;
+    $[6] = onActivate;
+    $[7] = onClick;
+    $[8] = onExpandedPathsChange;
+    $[9] = onFocusMove;
+    $[10] = onKeyDownCapture;
+    $[11] = onLoadChildren;
+    $[12] = onRowContextMenu;
+    $[13] = onRowDragStart;
+    $[14] = props;
+    $[15] = ref;
+    $[16] = render;
+    $[17] = renderControl;
+    $[18] = renderDecoration;
+    $[19] = resetKey;
+    $[20] = rowIcon;
+    $[21] = style;
+    $[22] = t1;
+    $[23] = t2;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = treeProps;
   } else {
     children = $[1];
     className = $[2];
-    label = $[3];
-    model = $[4];
-    onActivate = $[5];
-    onClick = $[6];
-    onExpandedPathsChange = $[7];
-    onFocusMove = $[8];
-    onKeyDownCapture = $[9];
-    onLoadChildren = $[10];
-    onRowContextMenu = $[11];
-    onRowDragStart = $[12];
-    props = $[13];
-    ref = $[14];
-    render = $[15];
-    renderControl = $[16];
-    renderDecoration = $[17];
-    resetKey = $[18];
-    t1 = $[19];
-    treeProps = $[20];
+    emptyLabel = $[3];
+    label = $[4];
+    model = $[5];
+    onActivate = $[6];
+    onClick = $[7];
+    onExpandedPathsChange = $[8];
+    onFocusMove = $[9];
+    onKeyDownCapture = $[10];
+    onLoadChildren = $[11];
+    onRowContextMenu = $[12];
+    onRowDragStart = $[13];
+    props = $[14];
+    ref = $[15];
+    render = $[16];
+    renderControl = $[17];
+    renderDecoration = $[18];
+    resetKey = $[19];
+    rowIcon = $[20];
+    style = $[21];
+    t1 = $[22];
+    t2 = $[23];
+    t3 = $[24];
+    t4 = $[25];
+    treeProps = $[26];
   }
   const selectionFollowsFocus = t1 === undefined ? true : t1;
+  const decorationOrder = t2 === undefined ? "before-status" : t2;
+  const fitContent = t3 === undefined ? false : t3;
+  const highlight = t4 === undefined ? "" : t4;
   const {
     t
   } = useTranslation("ui");
@@ -110,83 +139,120 @@ export function FileTreeRoot(t0) {
     attach,
     bar
   } = useFileTreeShift(model, resetKey);
-  let t2;
-  if ($[21] !== attach || $[22] !== ref) {
-    t2 = node => {
+  let t5;
+  if ($[27] !== attach || $[28] !== ref) {
+    t5 = node => {
       setFrame(node);
       attach(node);
       mergeRefs(ref)(node);
     };
-    $[21] = attach;
-    $[22] = ref;
-    $[23] = t2;
+    $[27] = attach;
+    $[28] = ref;
+    $[29] = t5;
   } else {
-    t2 = $[23];
+    t5 = $[29];
   }
-  const frameRef = t2;
-  let t3;
-  if ($[24] !== label || $[25] !== t) {
-    t3 = label ?? t("tree.label");
-    $[24] = label;
-    $[25] = t;
-    $[26] = t3;
+  const frameRef = t5;
+  let t6;
+  if ($[30] !== fitContent || $[31] !== model) {
+    t6 = listener => fitContent ? model.subscribe(listener) : _temp;
+    $[30] = fitContent;
+    $[31] = model;
+    $[32] = t6;
   } else {
-    t3 = $[26];
+    t6 = $[32];
   }
-  const slots = useFileTreeSlots(model, frame, t3);
-  let t4;
-  if ($[27] !== onExpandedPathsChange || $[28] !== onLoadChildren) {
-    t4 = {
+  const subscribeToRows = t6;
+  let t7;
+  if ($[33] !== model) {
+    t7 = () => model.getVisibleCount();
+    $[33] = model;
+    $[34] = t7;
+  } else {
+    t7 = $[34];
+  }
+  const countRows = t7;
+  const rowCount = useSyncExternalStore(subscribeToRows, countRows, countRows);
+  let t8;
+  if ($[35] !== label || $[36] !== t) {
+    t8 = label ?? t("tree.label");
+    $[35] = label;
+    $[36] = t;
+    $[37] = t8;
+  } else {
+    t8 = $[37];
+  }
+  let t9;
+  if ($[38] !== decorationOrder || $[39] !== emptyLabel || $[40] !== highlight || $[41] !== rowIcon) {
+    t9 = {
+      order: decorationOrder,
+      rowIcon,
+      highlight,
+      emptyLabel
+    };
+    $[38] = decorationOrder;
+    $[39] = emptyLabel;
+    $[40] = highlight;
+    $[41] = rowIcon;
+    $[42] = t9;
+  } else {
+    t9 = $[42];
+  }
+  const slots = useFileTreeSlots(model, frame, t8, t9);
+  const passEmptyLine = useEmptyLines(model, frame, emptyLabel);
+  let t10;
+  if ($[43] !== onExpandedPathsChange || $[44] !== onLoadChildren) {
+    t10 = {
       onLoadChildren,
       onExpandedPathsChange
     };
-    $[27] = onExpandedPathsChange;
-    $[28] = onLoadChildren;
-    $[29] = t4;
+    $[43] = onExpandedPathsChange;
+    $[44] = onLoadChildren;
+    $[45] = t10;
   } else {
-    t4 = $[29];
+    t10 = $[45];
   }
-  const latestLoads = useRef(t4);
-  let t5;
-  let t6;
-  if ($[30] !== onExpandedPathsChange || $[31] !== onLoadChildren) {
-    t5 = () => {
+  const latestLoads = useRef(t10);
+  let t11;
+  let t12;
+  if ($[46] !== onExpandedPathsChange || $[47] !== onLoadChildren) {
+    t11 = () => {
       latestLoads.current = {
         onLoadChildren,
         onExpandedPathsChange
       };
     };
-    t6 = [onLoadChildren, onExpandedPathsChange];
-    $[30] = onExpandedPathsChange;
-    $[31] = onLoadChildren;
-    $[32] = t5;
-    $[33] = t6;
+    t12 = [onLoadChildren, onExpandedPathsChange];
+    $[46] = onExpandedPathsChange;
+    $[47] = onLoadChildren;
+    $[48] = t11;
+    $[49] = t12;
   } else {
-    t5 = $[32];
-    t6 = $[33];
+    t11 = $[48];
+    t12 = $[49];
   }
-  useLayoutEffect(t5, t6);
+  useLayoutEffect(t11, t12);
   const cancelFocus = useRef(undefined);
-  let t7;
-  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = () => () => cancelFocus.current?.();
-    $[34] = t7;
+  let t13;
+  if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = () => () => cancelFocus.current?.();
+    $[50] = t13;
   } else {
-    t7 = $[34];
+    t13 = $[50];
   }
-  let t8;
-  if ($[35] !== model) {
-    t8 = [model];
-    $[35] = model;
-    $[36] = t8;
+  let t14;
+  if ($[51] !== model) {
+    t14 = [model];
+    $[51] = model;
+    $[52] = t14;
   } else {
-    t8 = $[36];
+    t14 = $[52];
   }
-  useEffect(t7, t8);
-  let t10;
-  let t9;
-  if ($[37] !== model) {
-    t9 = () => {
+  useEffect(t13, t14);
+  let t15;
+  let t16;
+  if ($[53] !== model) {
+    t15 = () => {
       let previous = new Set();
       let disposed = false;
       let pending = false;
@@ -195,8 +261,8 @@ export function FileTreeRoot(t0) {
         if (disposed) {
           return;
         }
-        const rows = visibleRows(model).filter(_temp);
-        const known = new Set(rows.map(_temp2));
+        const rows = visibleRows(model).filter(_temp2);
+        const known = new Set(rows.map(_temp3));
         const expanded = new Set([...previous].filter(path => !known.has(path)));
         for (const row_1 of rows) {
           if (row_1.isExpanded) {
@@ -226,19 +292,19 @@ export function FileTreeRoot(t0) {
         unsubscribe();
       };
     };
-    t10 = [model];
-    $[37] = model;
-    $[38] = t10;
-    $[39] = t9;
+    t16 = [model];
+    $[53] = model;
+    $[54] = t15;
+    $[55] = t16;
   } else {
-    t10 = $[38];
-    t9 = $[39];
+    t15 = $[54];
+    t16 = $[55];
   }
-  useEffect(t9, t10);
-  let t11;
-  let t12;
-  if ($[40] !== frame || $[41] !== model || $[42] !== onActivate || $[43] !== onFocusMove || $[44] !== onRowContextMenu || $[45] !== onRowDragStart || $[46] !== selectionFollowsFocus) {
-    t11 = () => {
+  useEffect(t15, t16);
+  let t17;
+  let t18;
+  if ($[56] !== frame || $[57] !== model || $[58] !== onActivate || $[59] !== onFocusMove || $[60] !== onRowContextMenu || $[61] !== onRowDragStart || $[62] !== passEmptyLine || $[63] !== selectionFollowsFocus) {
+    t17 = () => {
       if (frame === null) {
         return;
       }
@@ -260,20 +326,20 @@ export function FileTreeRoot(t0) {
         if (movesFocus(event_0) && selectionFollowsFocus) {
           cancelFocus.current?.();
           cancelFocus.current = followFocus(model, onFocusMove);
-        } else {
-          if (event_0.key === "Enter" && !event_0.altKey && !event_0.metaKey && !event_0.ctrlKey) {
-            const path_4 = model.getFocusedPath();
-            if (path_4 === null) {
-              return;
-            }
-            event_0.preventDefault();
-            event_0.stopPropagation();
-            const directory = directoryHandle(model, path_4);
-            if (directory) {
-              directory.toggle();
-            } else {
-              onActivate?.(path_4);
-            }
+        }
+        passEmptyLine(event_0);
+        if (event_0.key === "Enter" && !event_0.altKey && !event_0.metaKey && !event_0.ctrlKey) {
+          const path_4 = model.getFocusedPath();
+          if (path_4 === null) {
+            return;
+          }
+          event_0.preventDefault();
+          event_0.stopPropagation();
+          const directory = directoryHandle(model, path_4);
+          if (directory) {
+            directory.toggle();
+          } else {
+            onActivate?.(path_4);
           }
         }
       };
@@ -301,134 +367,160 @@ export function FileTreeRoot(t0) {
         frame.removeEventListener("dragstart", onDrag);
       };
     };
-    t12 = [frame, model, selectionFollowsFocus, onActivate, onFocusMove, onRowContextMenu, onRowDragStart];
-    $[40] = frame;
-    $[41] = model;
-    $[42] = onActivate;
-    $[43] = onFocusMove;
-    $[44] = onRowContextMenu;
-    $[45] = onRowDragStart;
-    $[46] = selectionFollowsFocus;
-    $[47] = t11;
-    $[48] = t12;
+    t18 = [frame, model, selectionFollowsFocus, passEmptyLine, onActivate, onFocusMove, onRowContextMenu, onRowDragStart];
+    $[56] = frame;
+    $[57] = model;
+    $[58] = onActivate;
+    $[59] = onFocusMove;
+    $[60] = onRowContextMenu;
+    $[61] = onRowDragStart;
+    $[62] = passEmptyLine;
+    $[63] = selectionFollowsFocus;
+    $[64] = t17;
+    $[65] = t18;
   } else {
-    t11 = $[47];
-    t12 = $[48];
+    t17 = $[64];
+    t18 = $[65];
   }
-  useEffect(t11, t12);
-  let t13;
-  if ($[49] !== className) {
-    t13 = clsx("adecore-tree adecore-file-tree", className);
-    $[49] = className;
-    $[50] = t13;
+  useEffect(t17, t18);
+  let t19;
+  if ($[66] !== className) {
+    t19 = clsx("adecore-tree adecore-file-tree", className);
+    $[66] = className;
+    $[67] = t19;
   } else {
-    t13 = $[50];
+    t19 = $[67];
   }
-  const t14 = treeProps?.className;
-  let t15;
-  if ($[51] !== t14) {
-    t15 = clsx("adecore-file-tree-host", t14);
-    $[51] = t14;
-    $[52] = t15;
+  let t20;
+  if ($[68] !== fitContent || $[69] !== model || $[70] !== rowCount || $[71] !== style) {
+    t20 = fitContent ? {
+      ...style,
+      height: rowCount * model.getItemHeight(),
+      maxHeight: "100%"
+    } : style;
+    $[68] = fitContent;
+    $[69] = model;
+    $[70] = rowCount;
+    $[71] = style;
+    $[72] = t20;
   } else {
-    t15 = $[52];
+    t20 = $[72];
   }
-  let t16;
-  if ($[53] !== model || $[54] !== t15 || $[55] !== treeProps) {
-    t16 = /*#__PURE__*/_jsx(PierreFileTree, {
+  const t21 = treeProps?.className;
+  let t22;
+  if ($[73] !== t21) {
+    t22 = clsx("adecore-file-tree-host", t21);
+    $[73] = t21;
+    $[74] = t22;
+  } else {
+    t22 = $[74];
+  }
+  let t23;
+  if ($[75] !== model || $[76] !== t22 || $[77] !== treeProps) {
+    t23 = /*#__PURE__*/_jsx(PierreFileTree, {
       ...treeProps,
       model: model,
-      className: t15
+      className: t22
     });
-    $[53] = model;
-    $[54] = t15;
-    $[55] = treeProps;
-    $[56] = t16;
+    $[75] = model;
+    $[76] = t22;
+    $[77] = treeProps;
+    $[78] = t23;
   } else {
-    t16 = $[56];
+    t23 = $[78];
   }
-  let t17;
-  if ($[57] !== renderControl || $[58] !== renderDecoration || $[59] !== slots) {
-    let t18;
-    if ($[61] !== renderControl || $[62] !== renderDecoration) {
-      t18 = t19 => {
+  let t24;
+  if ($[79] !== renderControl || $[80] !== renderDecoration || $[81] !== rowIcon || $[82] !== slots) {
+    let t25;
+    if ($[84] !== renderControl || $[85] !== renderDecoration || $[86] !== rowIcon) {
+      t25 = t26 => {
         const {
           row: row_2,
           control,
-          decoration
-        } = t19;
+          decoration,
+          icon
+        } = t26;
+        const ownIcon = icon === null ? undefined : rowIcon?.(row_2);
         return /*#__PURE__*/_jsxs("span", {
           style: {
             display: "contents"
           },
-          children: [createPortal(renderControl?.(row_2), control), createPortal(renderDecoration?.(row_2), decoration)]
+          children: [createPortal(renderControl?.(row_2), control), createPortal(renderDecoration?.(row_2), decoration), icon !== null && ownIcon !== undefined && createPortal(/*#__PURE__*/_jsx(Icon, {
+            icon: ownIcon,
+            size: 14
+          }), icon)]
         }, control.slot);
       };
-      $[61] = renderControl;
-      $[62] = renderDecoration;
-      $[63] = t18;
+      $[84] = renderControl;
+      $[85] = renderDecoration;
+      $[86] = rowIcon;
+      $[87] = t25;
     } else {
-      t18 = $[63];
+      t25 = $[87];
     }
-    t17 = slots.map(t18);
-    $[57] = renderControl;
-    $[58] = renderDecoration;
-    $[59] = slots;
-    $[60] = t17;
+    t24 = slots.map(t25);
+    $[79] = renderControl;
+    $[80] = renderDecoration;
+    $[81] = rowIcon;
+    $[82] = slots;
+    $[83] = t24;
   } else {
-    t17 = $[60];
+    t24 = $[83];
   }
-  let t18;
-  if ($[64] !== bar || $[65] !== children || $[66] !== t16 || $[67] !== t17) {
-    t18 = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t16, t17, children, bar]
+  let t25;
+  if ($[88] !== bar || $[89] !== children || $[90] !== t23 || $[91] !== t24) {
+    t25 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t23, t24, children, bar]
     });
-    $[64] = bar;
-    $[65] = children;
-    $[66] = t16;
-    $[67] = t17;
-    $[68] = t18;
+    $[88] = bar;
+    $[89] = children;
+    $[90] = t23;
+    $[91] = t24;
+    $[92] = t25;
   } else {
-    t18 = $[68];
+    t25 = $[92];
   }
-  let t19;
-  if ($[69] !== onClick || $[70] !== onKeyDownCapture || $[71] !== props || $[72] !== t13 || $[73] !== t18) {
-    t19 = {
+  let t26;
+  if ($[93] !== onClick || $[94] !== onKeyDownCapture || $[95] !== props || $[96] !== t19 || $[97] !== t20 || $[98] !== t25) {
+    t26 = {
       ...props,
-      className: t13,
+      className: t19,
+      style: t20,
       onClick,
       onKeyDownCapture,
-      children: t18
+      children: t25
     };
-    $[69] = onClick;
-    $[70] = onKeyDownCapture;
-    $[71] = props;
-    $[72] = t13;
-    $[73] = t18;
-    $[74] = t19;
+    $[93] = onClick;
+    $[94] = onKeyDownCapture;
+    $[95] = props;
+    $[96] = t19;
+    $[97] = t20;
+    $[98] = t25;
+    $[99] = t26;
   } else {
-    t19 = $[74];
+    t26 = $[99];
   }
-  let t20;
-  if ($[75] !== frameRef || $[76] !== render || $[77] !== t19) {
-    t20 = {
+  let t27;
+  if ($[100] !== frameRef || $[101] !== render || $[102] !== t26) {
+    t27 = {
       render,
       ref: frameRef,
       defaultTagName: "div",
-      props: t19
+      props: t26
     };
-    $[75] = frameRef;
-    $[76] = render;
-    $[77] = t19;
-    $[78] = t20;
+    $[100] = frameRef;
+    $[101] = render;
+    $[102] = t26;
+    $[103] = t27;
   } else {
-    t20 = $[78];
+    t27 = $[103];
   }
-  return useRender(t20);
+  return useRender(t27);
 }
-function _temp2(row_0) {
+function _temp3(row_0) {
   return row_0.path;
 }
-function _temp(row) {
+function _temp2(row) {
   return row.kind === "directory";
-}
+}
+function _temp() {}

package/dist/file-tree/style.js

@@ -1,4 +1,5 @@
 import { treeRowStyle } from '../tree/style.js';
+import { MATCH_HIGHLIGHT } from './highlight.js';
 // beta.6 splits the extension into nested grids; flatten them to truncate the end of the entire name.
 export const FILE_TREE_CSS = `
     ${treeRowStyle('[data-type="item"]', 'data-item-selected')}
@@ -19,6 +20,18 @@ export const FILE_TREE_CSS = `
     [data-item-section="content"] :where([data-truncate-group-container], [data-truncate-group-container] div, [data-truncate-container], [data-truncate-container] div) { display: inline; }
     [data-item-section="content"] [data-truncate-content] { direction: ltr; }
     [data-item-section="content"] :where([data-truncate-content="overflow"], [data-truncate-marker-cell], [data-truncate-fill]) { display: none; }
+    [data-item-section="git"] { margin-inline-end: var(--adecore-tree-status-space, 0px); }
+    ::highlight(${MATCH_HIGHLIGHT}) { background-color: var(--match); color: inherit; }
     [data-tree-port] { position: absolute; z-index: 4; display: flex; align-items: center; height: 25px; pointer-events: none; }
     [data-tree-port] > slot { pointer-events: auto; }
+    [data-tree-port="icon"] { width: 16px; justify-content: center; }
+    [data-tree-port="icon"] > slot { pointer-events: none; }
+    [data-own-icon="true"] [data-item-section="icon"] > * { visibility: hidden; }
+    [data-own-icon="true"][data-item-type="folder"]:hover [data-item-section="icon"] > * { visibility: visible; }
+    [data-tree-port="icon"][data-hover="true"] { visibility: hidden; }
+    [data-empty-line="true"] { cursor: default; }
+    [data-empty-line="true"] :is([data-item-section="icon"], [data-item-section="git"]) { display: none; }
+    [data-empty-line="true"] [data-item-section="content"] { overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
+    [data-empty-line="true"] [data-item-section="content"] > * { display: none; }
+    [data-empty-line="true"] [data-item-section="content"]::before { content: attr(data-empty-label); }
 `;