@adecore/ui 0.31.12 → 0.32.0

package/dist/file-tree/parts.js

@@ -1,5 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useRender } from '@base-ui/react/use-render';
 import { FileTree as PierreFileTree } from '@pierre/trees/react';
@@ -7,137 +7,428 @@ import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { mergeRefs } from '../merge-refs.js';
 import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargetsOf, rowPathOf, visibleRows } from './helpers.js';
-import { useFileTreeShift } from './use-file-tree-shift.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";
 function inSlot(event) {
-    return event.composedPath().some((node) => node instanceof HTMLElement && node.hasAttribute('data-tree-slot'));
+  return event.composedPath().some(node => node instanceof HTMLElement && node.hasAttribute('data-tree-slot'));
 }
-export function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus = true, onActivate, onFocusMove, onLoadChildren, onExpandedPathsChange, onRowContextMenu, onRowDragStart, renderControl, renderDecoration, treeProps, render, className, ref, children, onClick, onKeyDownCapture, ...props }) {
-    const { t } = useTranslation('ui');
-    const [frame, setFrame] = useState(null);
-    const { attach, bar } = useFileTreeShift(model, resetKey);
-    const frameRef = useCallback((node) => {
-        setFrame(node);
-        attach(node);
-        mergeRefs(ref)(node);
-    }, [ref, attach]);
-    const slots = useFileTreeSlots(model, frame, label ?? t('tree.label'));
-    const latestLoads = useRef({ onLoadChildren, onExpandedPathsChange });
-    useLayoutEffect(() => {
-        latestLoads.current = { onLoadChildren, onExpandedPathsChange };
-    }, [onLoadChildren, onExpandedPathsChange]);
-    const cancelFocus = useRef(undefined);
-    useEffect(() => () => cancelFocus.current?.(), [model]);
-    useEffect(() => {
-        let previous = new Set();
-        let disposed = false;
-        let pending = false;
-        const report = () => {
-            pending = false;
-            if (disposed) {
-                return;
-            }
-            const rows = visibleRows(model).filter((row) => row.kind === 'directory');
-            const known = new Set(rows.map((row) => row.path));
-            const expanded = new Set([...previous].filter((path) => !known.has(path)));
-            for (const row of rows) {
-                if (row.isExpanded) {
-                    expanded.add(row.path);
-                }
-            }
-            const opened = [...expanded].filter((path) => !previous.has(path));
-            const changed = opened.length > 0 || [...previous].some((path) => !expanded.has(path));
-            previous = expanded;
-            if (changed) {
-                latestLoads.current.onExpandedPathsChange?.([...expanded]);
-            }
-            for (const path of opened) {
-                latestLoads.current.onLoadChildren?.(path);
-            }
-        };
-        const schedule = () => {
-            if (!pending) {
-                pending = true;
-                queueMicrotask(report);
-            }
-        };
-        const unsubscribe = model.subscribe(schedule);
-        report();
-        return () => {
-            disposed = true;
-            unsubscribe();
-        };
-    }, [model]);
-    useEffect(() => {
-        if (frame === null) {
-            return;
+export function FileTreeRoot(t0) {
+  const $ = _c(79);
+  let children;
+  let className;
+  let label;
+  let model;
+  let onActivate;
+  let onClick;
+  let onExpandedPathsChange;
+  let onFocusMove;
+  let onKeyDownCapture;
+  let onLoadChildren;
+  let onRowContextMenu;
+  let onRowDragStart;
+  let props;
+  let ref;
+  let render;
+  let renderControl;
+  let renderDecoration;
+  let resetKey;
+  let t1;
+  let treeProps;
+  if ($[0] !== t0) {
+    ({
+      model,
+      label,
+      resetKey,
+      selectionFollowsFocus: t1,
+      onActivate,
+      onFocusMove,
+      onLoadChildren,
+      onExpandedPathsChange,
+      onRowContextMenu,
+      onRowDragStart,
+      renderControl,
+      renderDecoration,
+      treeProps,
+      render,
+      className,
+      ref,
+      children,
+      onClick,
+      onKeyDownCapture,
+      ...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;
+  } 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];
+  }
+  const selectionFollowsFocus = t1 === undefined ? true : t1;
+  const {
+    t
+  } = useTranslation("ui");
+  const [frame, setFrame] = useState(null);
+  const {
+    attach,
+    bar
+  } = useFileTreeShift(model, resetKey);
+  let t2;
+  if ($[21] !== attach || $[22] !== ref) {
+    t2 = node => {
+      setFrame(node);
+      attach(node);
+      mergeRefs(ref)(node);
+    };
+    $[21] = attach;
+    $[22] = ref;
+    $[23] = t2;
+  } else {
+    t2 = $[23];
+  }
+  const frameRef = t2;
+  let t3;
+  if ($[24] !== label || $[25] !== t) {
+    t3 = label ?? t("tree.label");
+    $[24] = label;
+    $[25] = t;
+    $[26] = t3;
+  } else {
+    t3 = $[26];
+  }
+  const slots = useFileTreeSlots(model, frame, t3);
+  let t4;
+  if ($[27] !== onExpandedPathsChange || $[28] !== onLoadChildren) {
+    t4 = {
+      onLoadChildren,
+      onExpandedPathsChange
+    };
+    $[27] = onExpandedPathsChange;
+    $[28] = onLoadChildren;
+    $[29] = t4;
+  } else {
+    t4 = $[29];
+  }
+  const latestLoads = useRef(t4);
+  let t5;
+  let t6;
+  if ($[30] !== onExpandedPathsChange || $[31] !== onLoadChildren) {
+    t5 = () => {
+      latestLoads.current = {
+        onLoadChildren,
+        onExpandedPathsChange
+      };
+    };
+    t6 = [onLoadChildren, onExpandedPathsChange];
+    $[30] = onExpandedPathsChange;
+    $[31] = onLoadChildren;
+    $[32] = t5;
+    $[33] = t6;
+  } else {
+    t5 = $[32];
+    t6 = $[33];
+  }
+  useLayoutEffect(t5, t6);
+  const cancelFocus = useRef(undefined);
+  let t7;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => () => cancelFocus.current?.();
+    $[34] = t7;
+  } else {
+    t7 = $[34];
+  }
+  let t8;
+  if ($[35] !== model) {
+    t8 = [model];
+    $[35] = model;
+    $[36] = t8;
+  } else {
+    t8 = $[36];
+  }
+  useEffect(t7, t8);
+  let t10;
+  let t9;
+  if ($[37] !== model) {
+    t9 = () => {
+      let previous = new Set();
+      let disposed = false;
+      let pending = false;
+      const report = () => {
+        pending = false;
+        if (disposed) {
+          return;
         }
-        const onClickRow = (event) => {
-            if (event.defaultPrevented || inSlot(event) || extendsSelection(event)) {
-                return;
-            }
-            const path = rowPathOf({ nativeEvent: event });
-            if (path !== null && directoryHandle(model, path) === null) {
-                onActivate?.(path);
-            }
-        };
-        const onKey = (event) => {
-            if (event.defaultPrevented || inSlot(event)) {
-                return;
-            }
-            if (movesFocus(event) && selectionFollowsFocus) {
-                cancelFocus.current?.();
-                // beta.6 stops the key in its own handler; selection must follow after that handler moves focus.
-                cancelFocus.current = followFocus(model, onFocusMove);
-            }
-            else if (event.key === 'Enter' && !event.altKey && !event.metaKey && !event.ctrlKey) {
-                const path = model.getFocusedPath();
-                if (path === null) {
-                    return;
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                const directory = directoryHandle(model, path);
-                if (directory) {
-                    directory.toggle();
-                }
-                else {
-                    onActivate?.(path);
-                }
-            }
-        };
-        const withTargets = (handle) => (event) => {
-            if (inSlot(event)) {
-                return;
+        const rows = visibleRows(model).filter(_temp);
+        const known = new Set(rows.map(_temp2));
+        const expanded = new Set([...previous].filter(path => !known.has(path)));
+        for (const row_1 of rows) {
+          if (row_1.isExpanded) {
+            expanded.add(row_1.path);
+          }
+        }
+        const opened = [...expanded].filter(path_0 => !previous.has(path_0));
+        const changed = opened.length > 0 || [...previous].some(path_1 => !expanded.has(path_1));
+        previous = expanded;
+        if (changed) {
+          latestLoads.current.onExpandedPathsChange?.([...expanded]);
+        }
+        for (const path_2 of opened) {
+          latestLoads.current.onLoadChildren?.(path_2);
+        }
+      };
+      const schedule = () => {
+        if (!pending) {
+          pending = true;
+          queueMicrotask(report);
+        }
+      };
+      const unsubscribe = model.subscribe(schedule);
+      report();
+      return () => {
+        disposed = true;
+        unsubscribe();
+      };
+    };
+    t10 = [model];
+    $[37] = model;
+    $[38] = t10;
+    $[39] = t9;
+  } else {
+    t10 = $[38];
+    t9 = $[39];
+  }
+  useEffect(t9, t10);
+  let t11;
+  let t12;
+  if ($[40] !== frame || $[41] !== model || $[42] !== onActivate || $[43] !== onFocusMove || $[44] !== onRowContextMenu || $[45] !== onRowDragStart || $[46] !== selectionFollowsFocus) {
+    t11 = () => {
+      if (frame === null) {
+        return;
+      }
+      const onClickRow = event => {
+        if (event.defaultPrevented || inSlot(event) || extendsSelection(event)) {
+          return;
+        }
+        const path_3 = rowPathOf({
+          nativeEvent: event
+        });
+        if (path_3 !== null && directoryHandle(model, path_3) === null) {
+          onActivate?.(path_3);
+        }
+      };
+      const onKey = event_0 => {
+        if (event_0.defaultPrevented || inSlot(event_0)) {
+          return;
+        }
+        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;
             }
-            const path = rowPathOf({ nativeEvent: event });
-            if (path !== null) {
-                handle?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
+            event_0.preventDefault();
+            event_0.stopPropagation();
+            const directory = directoryHandle(model, path_4);
+            if (directory) {
+              directory.toggle();
+            } else {
+              onActivate?.(path_4);
             }
-        };
-        const onContext = withTargets(onRowContextMenu);
-        const onDrag = withTargets(onRowDragStart);
-        frame.addEventListener('click', onClickRow);
-        frame.addEventListener('keydown', onKey, true);
-        frame.addEventListener('contextmenu', onContext);
-        frame.addEventListener('dragstart', onDrag);
-        return () => {
-            frame.removeEventListener('click', onClickRow);
-            frame.removeEventListener('keydown', onKey, true);
-            frame.removeEventListener('contextmenu', onContext);
-            frame.removeEventListener('dragstart', onDrag);
-        };
-    }, [frame, model, selectionFollowsFocus, onActivate, onFocusMove, onRowContextMenu, onRowDragStart]);
-    return useRender({
-        render,
-        ref: frameRef,
-        defaultTagName: 'div',
-        props: {
-            ...props,
-            className: clsx('adecore-tree adecore-file-tree', className),
-            onClick,
-            onKeyDownCapture,
-            children: (_jsxs(_Fragment, { children: [_jsx(PierreFileTree, { ...treeProps, model: model, className: clsx('adecore-file-tree-host', treeProps?.className) }), slots.map(({ row, control, decoration }) => (_jsxs("span", { style: { display: 'contents' }, children: [createPortal(renderControl?.(row), control), createPortal(renderDecoration?.(row), decoration)] }, control.slot))), children, bar] }))
+          }
+        }
+      };
+      const withTargets = handle => event_1 => {
+        if (inSlot(event_1)) {
+          return;
+        }
+        const path_5 = rowPathOf({
+          nativeEvent: event_1
+        });
+        if (path_5 !== null) {
+          handle?.(path_5, menuTargetsOf(path_5, model.getSelectedPaths()), event_1);
         }
+      };
+      const onContext = withTargets(onRowContextMenu);
+      const onDrag = withTargets(onRowDragStart);
+      frame.addEventListener("click", onClickRow);
+      frame.addEventListener("keydown", onKey, true);
+      frame.addEventListener("contextmenu", onContext);
+      frame.addEventListener("dragstart", onDrag);
+      return () => {
+        frame.removeEventListener("click", onClickRow);
+        frame.removeEventListener("keydown", onKey, true);
+        frame.removeEventListener("contextmenu", onContext);
+        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;
+  } else {
+    t11 = $[47];
+    t12 = $[48];
+  }
+  useEffect(t11, t12);
+  let t13;
+  if ($[49] !== className) {
+    t13 = clsx("adecore-tree adecore-file-tree", className);
+    $[49] = className;
+    $[50] = t13;
+  } else {
+    t13 = $[50];
+  }
+  const t14 = treeProps?.className;
+  let t15;
+  if ($[51] !== t14) {
+    t15 = clsx("adecore-file-tree-host", t14);
+    $[51] = t14;
+    $[52] = t15;
+  } else {
+    t15 = $[52];
+  }
+  let t16;
+  if ($[53] !== model || $[54] !== t15 || $[55] !== treeProps) {
+    t16 = /*#__PURE__*/_jsx(PierreFileTree, {
+      ...treeProps,
+      model: model,
+      className: t15
     });
+    $[53] = model;
+    $[54] = t15;
+    $[55] = treeProps;
+    $[56] = t16;
+  } else {
+    t16 = $[56];
+  }
+  let t17;
+  if ($[57] !== renderControl || $[58] !== renderDecoration || $[59] !== slots) {
+    let t18;
+    if ($[61] !== renderControl || $[62] !== renderDecoration) {
+      t18 = t19 => {
+        const {
+          row: row_2,
+          control,
+          decoration
+        } = t19;
+        return /*#__PURE__*/_jsxs("span", {
+          style: {
+            display: "contents"
+          },
+          children: [createPortal(renderControl?.(row_2), control), createPortal(renderDecoration?.(row_2), decoration)]
+        }, control.slot);
+      };
+      $[61] = renderControl;
+      $[62] = renderDecoration;
+      $[63] = t18;
+    } else {
+      t18 = $[63];
+    }
+    t17 = slots.map(t18);
+    $[57] = renderControl;
+    $[58] = renderDecoration;
+    $[59] = slots;
+    $[60] = t17;
+  } else {
+    t17 = $[60];
+  }
+  let t18;
+  if ($[64] !== bar || $[65] !== children || $[66] !== t16 || $[67] !== t17) {
+    t18 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t16, t17, children, bar]
+    });
+    $[64] = bar;
+    $[65] = children;
+    $[66] = t16;
+    $[67] = t17;
+    $[68] = t18;
+  } else {
+    t18 = $[68];
+  }
+  let t19;
+  if ($[69] !== onClick || $[70] !== onKeyDownCapture || $[71] !== props || $[72] !== t13 || $[73] !== t18) {
+    t19 = {
+      ...props,
+      className: t13,
+      onClick,
+      onKeyDownCapture,
+      children: t18
+    };
+    $[69] = onClick;
+    $[70] = onKeyDownCapture;
+    $[71] = props;
+    $[72] = t13;
+    $[73] = t18;
+    $[74] = t19;
+  } else {
+    t19 = $[74];
+  }
+  let t20;
+  if ($[75] !== frameRef || $[76] !== render || $[77] !== t19) {
+    t20 = {
+      render,
+      ref: frameRef,
+      defaultTagName: "div",
+      props: t19
+    };
+    $[75] = frameRef;
+    $[76] = render;
+    $[77] = t19;
+    $[78] = t20;
+  } else {
+    t20 = $[78];
+  }
+  return useRender(t20);
+}
+function _temp2(row_0) {
+  return row_0.path;
 }
+function _temp(row) {
+  return row.kind === "directory";
+}

package/dist/file-tree/style.js

@@ -21,4 +21,4 @@ export const FILE_TREE_CSS = `
     [data-item-section="content"] :where([data-truncate-content="overflow"], [data-truncate-marker-cell], [data-truncate-fill]) { display: none; }
     [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; }
-`;
+`;

package/dist/file-tree/use-file-tree-shift.js

@@ -1,43 +1,56 @@
-import { useMemo } from 'react';
-import { useTreeShift } from '../tree/use-tree-shift.js';
+import { c as _c } from "react/compiler-runtime";
+import 'react';
+import { useTreeShift } from "../tree/use-tree-shift.js";
 import { shiftNeed } from '../tree/shift.js';
 const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
 function boxesOf(element) {
-    return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap((child) => boxesOf(child));
+  return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap(child => boxesOf(child));
 }
 function limitOf(row, content, gap) {
-    const start = content.getBoundingClientRect().left;
-    const contentMargin = Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0;
-    let limit = Number.POSITIVE_INFINITY;
-    for (const part of [...row.children].filter((child) => child !== content).flatMap((child) => boxesOf(child))) {
-        const rect = part.getBoundingClientRect();
-        if (rect.width === 0 || rect.left < start) {
-            continue;
-        }
-        if (part.childNodes.length === 0 && Number.parseFloat(getComputedStyle(part).flexGrow) > 0) {
-            continue;
-        }
-        limit = Math.min(limit, rect.left - gap);
+  const start = content.getBoundingClientRect().left;
+  const contentMargin = Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0;
+  let limit = Number.POSITIVE_INFINITY;
+  for (const part of [...row.children].filter(child => child !== content).flatMap(child => boxesOf(child))) {
+    const rect = part.getBoundingClientRect();
+    if (rect.width === 0 || rect.left < start) {
+      continue;
     }
-    if (limit !== Number.POSITIVE_INFINITY) {
-        return limit - contentMargin;
+    if (part.childNodes.length === 0 && Number.parseFloat(getComputedStyle(part).flexGrow) > 0) {
+      continue;
     }
-    return row.getBoundingClientRect().right - Number.parseFloat(getComputedStyle(row).paddingInlineEnd) - contentMargin;
+    limit = Math.min(limit, rect.left - gap);
+  }
+  if (limit !== Number.POSITIVE_INFINITY) {
+    return limit - contentMargin;
+  }
+  return row.getBoundingClientRect().right - Number.parseFloat(getComputedStyle(row).paddingInlineEnd) - contentMargin;
 }
 function needOf(row, shift, gap, range) {
-    const content = row.querySelector(':scope > [data-item-section="content"]');
-    if (content === null || row.getBoundingClientRect().width === 0) {
-        return null;
-    }
-    range.selectNodeContents(content);
-    return shiftNeed(range.getBoundingClientRect().right, limitOf(row, content, gap), shift);
+  const content = row.querySelector(':scope > [data-item-section="content"]');
+  if (content === null || row.getBoundingClientRect().width === 0) {
+    return null;
+  }
+  range.selectNodeContents(content);
+  return shiftNeed(range.getBoundingClientRect().right, limitOf(row, content, gap), shift);
 }
 /* The file tree draws its rows in a shadow root, and only the name slides: its decorations sit over the row. */
 export function useFileTreeShift(model, resetKey) {
-    const source = useMemo(() => ({
-        root: () => model.getFileTreeContainer()?.shadowRoot ?? null,
-        rows: (root) => [...root.querySelectorAll(ROWS)],
-        need: needOf
-    }), [model]);
-    return useTreeShift(source, resetKey);
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== model) {
+    t0 = {
+      root: () => model.getFileTreeContainer()?.shadowRoot ?? null,
+      rows: _temp,
+      need: needOf
+    };
+    $[0] = model;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const source = t0;
+  return useTreeShift(source, resetKey);
 }
+function _temp(root) {
+  return [...root.querySelectorAll(ROWS)];
+}