@adecore/ui 0.31.12 → 0.32.0

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

@@ -1,3 +1,4 @@
+import { c as _c } from "react/compiler-runtime";
 import { useFileTree as usePierreFileTree } from '@pierre/trees/react';
 import { useLayoutEffect, useRef } from 'react';
 import { FILE_TREE_ICONS } from '../file-icon.js';
@@ -6,21 +7,62 @@ import { compareRows } from './helpers.js';
 import { FILE_TREE_CSS } from './style.js';
 // Model options are initial; paths and status can subsequently change through the model's mutation methods.
 export function useFileTree(options) {
-    const latest = useRef(options.onSelectionChange);
-    useLayoutEffect(() => {
-        latest.current = options.onSelectionChange;
-    }, [options.onSelectionChange]);
-    return usePierreFileTree({
-        composition: { contextMenu: { enabled: false } },
-        icons: FILE_TREE_ICONS,
-        initialExpansion: 'closed',
-        search: false,
-        stickyFolders: false,
-        sort: compareRows,
-        ...options,
-        density: 'compact',
-        itemHeight: TREE_ROW_HEIGHT,
-        onSelectionChange: (paths) => latest.current?.(paths),
-        unsafeCSS: `${FILE_TREE_CSS}\n${options.unsafeCSS ?? ''}`
-    });
-}
+  const $ = _c(8);
+  const latest = useRef(options.onSelectionChange);
+  let t0;
+  let t1;
+  if ($[0] !== options.onSelectionChange) {
+    t0 = () => {
+      latest.current = options.onSelectionChange;
+    };
+    t1 = [options.onSelectionChange];
+    $[0] = options.onSelectionChange;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useLayoutEffect(t0, t1);
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      contextMenu: {
+        enabled: false
+      }
+    };
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = paths => latest.current?.(paths);
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const t4 = `${FILE_TREE_CSS}\n${options.unsafeCSS ?? ""}`;
+  let t5;
+  if ($[5] !== options || $[6] !== t4) {
+    t5 = {
+      composition: t2,
+      icons: FILE_TREE_ICONS,
+      initialExpansion: "closed",
+      search: false,
+      stickyFolders: false,
+      sort: compareRows,
+      ...options,
+      density: "compact",
+      itemHeight: TREE_ROW_HEIGHT,
+      onSelectionChange: t3,
+      unsafeCSS: t4
+    };
+    $[5] = options;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return usePierreFileTree(t5);
+}

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

@@ -8,208 +8,236 @@ import { FILE_TREE_CSS } from './style.js';
  * the spacer is missing or the model already moved past what is mounted.
  */
 function mountedRows(model, shadow, elements) {
-    const spacer = shadow.querySelector('[data-file-tree-virtualized-sticky-offset]');
-    const offset = spacer === null ? Number.NaN : Number.parseFloat(spacer.style.height);
-    const itemHeight = model.getItemHeight();
-    if (!Number.isFinite(offset) || itemHeight <= 0) {
-        return visibleRows(model);
-    }
-    // A folder pinned to the top leaves the flow, but still takes its index in the window.
-    const pinned = shadow.querySelectorAll('[data-file-tree-sticky-row="true"]').length;
-    const rows = visibleRowsAround(model, Math.round(offset / itemHeight), elements.length + pinned);
-    const paths = new Set(rows.map((row) => row.path));
-    return elements.every((element) => element.dataset.itemPath === undefined || paths.has(element.dataset.itemPath)) ? rows : visibleRows(model);
+  const spacer = shadow.querySelector('[data-file-tree-virtualized-sticky-offset]');
+  const offset = spacer === null ? Number.NaN : Number.parseFloat(spacer.style.height);
+  const itemHeight = model.getItemHeight();
+  if (!Number.isFinite(offset) || itemHeight <= 0) {
+    return visibleRows(model);
+  }
+  // A folder pinned to the top leaves the flow, but still takes its index in the window.
+  const pinned = shadow.querySelectorAll('[data-file-tree-sticky-row="true"]').length;
+  const rows = visibleRowsAround(model, Math.round(offset / itemHeight), elements.length + pinned);
+  const paths = new Set(rows.map(row => row.path));
+  return elements.every(element => element.dataset.itemPath === undefined || paths.has(element.dataset.itemPath)) ? rows : visibleRows(model);
 }
 /*
  * Lines the ports up with their rows: every size first, then the spaces they reserve, then every offset,
  * then the ports, so a pass forces two layouts at most however many rows are mounted.
  */
 export function positionPorts(ports) {
-    const spaced = [...ports].map((port) => ({
-        port,
-        control: port.lightControl.childNodes.length > 0 ? Math.ceil(port.lightControl.getBoundingClientRect().width) + 6 : 0,
-        decoration: port.lightDecoration.childNodes.length > 0 ? Math.ceil(port.lightDecoration.getBoundingClientRect().width) + 6 : 0
-    }));
-    for (const { port, control, decoration } of spaced) {
-        setSpace(port.rowElement, '--adecore-tree-control-space', control);
-        setSpace(port.rowElement, '--adecore-tree-decoration-space', decoration);
-    }
-    const placed = spaced.map(({ port, control, decoration }) => {
-        const row = port.rowElement;
-        const content = row.querySelector('[data-item-section="content"]');
-        const icon = row.querySelector('[data-item-section="icon"]');
-        return {
-            port,
-            top: `${row.offsetTop}px`,
-            controlLeft: `${row.offsetLeft + (icon?.offsetLeft ?? 4) - control}px`,
-            decorationLeft: `${row.offsetLeft + (content === null ? row.offsetWidth - decoration - 2 : content.offsetLeft + content.offsetWidth + 6)}px`
-        };
-    });
-    for (const { port, top, controlLeft, decorationLeft } of placed) {
-        port.control.style.top = top;
-        port.control.style.left = controlLeft;
-        port.decoration.style.top = top;
-        port.decoration.style.left = decorationLeft;
-    }
+  const spaced = [...ports].map(port => ({
+    port,
+    control: port.lightControl.childNodes.length > 0 ? Math.ceil(port.lightControl.getBoundingClientRect().width) + 6 : 0,
+    decoration: port.lightDecoration.childNodes.length > 0 ? Math.ceil(port.lightDecoration.getBoundingClientRect().width) + 6 : 0
+  }));
+  for (const {
+    port,
+    control,
+    decoration
+  } of spaced) {
+    setSpace(port.rowElement, '--adecore-tree-control-space', control);
+    setSpace(port.rowElement, '--adecore-tree-decoration-space', decoration);
+  }
+  const placed = spaced.map(({
+    port,
+    control,
+    decoration
+  }) => {
+    const row = port.rowElement;
+    const content = row.querySelector('[data-item-section="content"]');
+    const icon = row.querySelector('[data-item-section="icon"]');
+    return {
+      port,
+      top: `${row.offsetTop}px`,
+      controlLeft: `${row.offsetLeft + (icon?.offsetLeft ?? 4) - control}px`,
+      decorationLeft: `${row.offsetLeft + (content === null ? row.offsetWidth - decoration - 2 : content.offsetLeft + content.offsetWidth + 6)}px`
+    };
+  });
+  for (const {
+    port,
+    top,
+    controlLeft,
+    decorationLeft
+  } of placed) {
+    port.control.style.top = top;
+    port.control.style.left = controlLeft;
+    port.decoration.style.top = top;
+    port.decoration.style.left = decorationLeft;
+  }
 }
 // An unchanged space is left alone, so a pass that only scrolled measures once.
 function setSpace(row, name, space) {
-    const value = `${space}px`;
-    if (row.style.getPropertyValue(name) !== value) {
-        row.style.setProperty(name, value);
-    }
+  const value = `${space}px`;
+  if (row.style.getPropertyValue(name) !== value) {
+    row.style.setProperty(name, value);
+  }
 }
 // beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
 export function useFileTreeSlots(model, frame, label) {
-    const prefix = useId().replaceAll(':', '');
-    const [slots, setSlots] = useState([]);
-    useEffect(() => {
-        if (frame === null) {
-            return;
+  const prefix = useId().replaceAll(':', '');
+  const [slots, setSlots] = useState([]);
+  useEffect(() => {
+    if (frame === null) {
+      return;
+    }
+    const ports = new Map();
+    let shadow = null;
+    let style = null;
+    let serial = 0;
+    let disposed = false;
+    let pending = false;
+    let snapshot = null;
+    const position = () => positionPorts(ports.values());
+    const resize = new ResizeObserver(position);
+    const dropPort = port => {
+      port.control.remove();
+      port.decoration.remove();
+      resize.unobserve(port.lightControl);
+      resize.unobserve(port.lightDecoration);
+      port.lightControl.remove();
+      port.lightDecoration.remove();
+    };
+    const makePort = (element, host, kind) => {
+      const container = document.createElement('span');
+      container.dataset.treePort = kind;
+      const slot = document.createElement('slot');
+      slot.name = `${prefix}-${kind}-${serial}`;
+      container.append(slot);
+      element.parentElement?.append(container);
+      const target = document.createElement('span');
+      target.slot = slot.name;
+      target.dataset.treeSlot = kind;
+      target.className = kind === 'control' ? 'adecore-tree-control' : 'adecore-tree-decoration';
+      // React delegates to this portal target before the event reaches the engine's shadow tree.
+      for (const type of ['click', 'dblclick', 'keydown', 'keyup', 'pointerdown', 'dragstart']) {
+        target.addEventListener(type, event => event.stopPropagation());
+      }
+      host.append(target);
+      resize.observe(target);
+      return {
+        container,
+        target
+      };
+    };
+    const scan = () => {
+      pending = false;
+      if (disposed) {
+        return;
+      }
+      const current = model.getFileTreeContainer();
+      if (!current?.shadowRoot) {
+        return;
+      }
+      if (shadow !== current.shadowRoot) {
+        shadow = current.shadowRoot;
+        style = document.createElement('style');
+        style.dataset.adecoreTreeStyle = 'true';
+        style.textContent = FILE_TREE_CSS;
+        shadow.append(style);
+        changes.observe(shadow, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ['data-item-path', 'aria-selected', 'aria-expanded']
+        });
+        changes.observe(current, {
+          childList: true,
+          subtree: true
+        });
+        resize.observe(current);
+      }
+      shadow.querySelector('[role="tree"]')?.setAttribute('aria-label', label);
+      const elements = [...shadow.querySelectorAll('[data-type="item"]:not([data-item-parked="true"]):not([data-file-tree-sticky-row="true"])')];
+      const rows = mountedRows(model, shadow, elements);
+      const byPath = new Map(rows.map(row => [pathOfRow(row), row]));
+      const byIndex = new Map(rows.map(row_0 => [row_0.index, row_0]));
+      const live = new Set(elements);
+      for (const [element_0, port_0] of ports) {
+        if (!live.has(element_0)) {
+          dropPort(port_0);
+          ports.delete(element_0);
         }
-        const ports = new Map();
-        let shadow = null;
-        let style = null;
-        let serial = 0;
-        let disposed = false;
-        let pending = false;
-        let snapshot = null;
-        const position = () => positionPorts(ports.values());
-        const resize = new ResizeObserver(position);
-        const dropPort = (port) => {
-            port.control.remove();
-            port.decoration.remove();
-            resize.unobserve(port.lightControl);
-            resize.unobserve(port.lightDecoration);
-            port.lightControl.remove();
-            port.lightDecoration.remove();
-        };
-        const makePort = (element, host, kind) => {
-            const container = document.createElement('span');
-            container.dataset.treePort = kind;
-            const slot = document.createElement('slot');
-            slot.name = `${prefix}-${kind}-${serial}`;
-            container.append(slot);
-            element.parentElement?.append(container);
-            const target = document.createElement('span');
-            target.slot = slot.name;
-            target.dataset.treeSlot = kind;
-            target.className = kind === 'control' ? 'adecore-tree-control' : 'adecore-tree-decoration';
-            // React delegates to this portal target before the event reaches the engine's shadow tree.
-            for (const type of ['click', 'dblclick', 'keydown', 'keyup', 'pointerdown', 'dragstart']) {
-                target.addEventListener(type, (event) => event.stopPropagation());
-            }
-            host.append(target);
-            resize.observe(target);
-            return { container, target };
-        };
-        const scan = () => {
-            pending = false;
-            if (disposed) {
-                return;
-            }
-            const current = model.getFileTreeContainer();
-            if (!current?.shadowRoot) {
-                return;
-            }
-            if (shadow !== current.shadowRoot) {
-                shadow = current.shadowRoot;
-                style = document.createElement('style');
-                style.dataset.adecoreTreeStyle = 'true';
-                style.textContent = FILE_TREE_CSS;
-                shadow.append(style);
-                changes.observe(shadow, {
-                    childList: true,
-                    subtree: true,
-                    attributes: true,
-                    attributeFilter: ['data-item-path', 'aria-selected', 'aria-expanded']
-                });
-                changes.observe(current, { childList: true, subtree: true });
-                resize.observe(current);
-            }
-            shadow.querySelector('[role="tree"]')?.setAttribute('aria-label', label);
-            const elements = [
-                ...shadow.querySelectorAll('[data-type="item"]:not([data-item-parked="true"]):not([data-file-tree-sticky-row="true"])')
-            ];
-            const rows = mountedRows(model, shadow, elements);
-            const byPath = new Map(rows.map((row) => [pathOfRow(row), row]));
-            const byIndex = new Map(rows.map((row) => [row.index, row]));
-            const live = new Set(elements);
-            for (const [element, port] of ports) {
-                if (!live.has(element)) {
-                    dropPort(port);
-                    ports.delete(element);
-                }
-            }
-            const next = [];
-            for (const element of elements) {
-                const path = element.dataset.itemPath;
-                const row = path === undefined ? undefined : byPath.get(path);
-                if (row === undefined) {
-                    continue;
-                }
-                element.dataset.interactive = 'true';
-                element.dataset.joinedStart = String(row.isSelected && byIndex.get(row.index - 1)?.isSelected === true);
-                element.dataset.joinedEnd = String(row.isSelected && byIndex.get(row.index + 1)?.isSelected === true);
-                let port = ports.get(element);
-                if (port === undefined) {
-                    serial++;
-                    const control = makePort(element, current, 'control');
-                    const decoration = makePort(element, current, 'decoration');
-                    port = {
-                        rowElement: element,
-                        control: control.container,
-                        decoration: decoration.container,
-                        lightControl: control.target,
-                        lightDecoration: decoration.target
-                    };
-                    ports.set(element, port);
-                }
-                if (port.control.dataset.itemPath !== row.path) {
-                    port.control.dataset.itemPath = row.path;
-                }
-                if (port.decoration.dataset.itemPath !== row.path) {
-                    port.decoration.dataset.itemPath = row.path;
-                }
-                port.lightControl.dataset.itemPath = row.path;
-                port.lightDecoration.dataset.itemPath = row.path;
-                next.push({ row, control: port.lightControl, decoration: port.lightDecoration });
-            }
-            const key = next
-                .map(({ row, control }) => `${control.slot}:${row.path}:${row.isSelected}:${row.isExpanded}:${row.isFocused}:${row.name}`)
-                .join('|');
-            if (snapshot !== key) {
-                snapshot = key;
-                // Recycled rows must paint with their new portal contents in the same frame.
-                flushSync(() => setSlots(next));
-            }
-            position();
-        };
-        const schedule = () => {
-            if (!pending && !disposed) {
-                pending = true;
-                queueMicrotask(scan);
-            }
-        };
-        const shifts = new MutationObserver(position);
-        shifts.observe(frame, { attributes: true, attributeFilter: ['style'] });
-        const changes = new MutationObserver(schedule);
-        changes.observe(frame, { childList: true, subtree: true });
-        const unsubscribe = model.subscribe(schedule);
-        schedule();
-        return () => {
-            disposed = true;
-            unsubscribe();
-            changes.disconnect();
-            shifts.disconnect();
-            resize.disconnect();
-            style?.remove();
-            for (const port of ports.values()) {
-                port.rowElement.style.removeProperty('--adecore-tree-control-space');
-                port.rowElement.style.removeProperty('--adecore-tree-decoration-space');
-                dropPort(port);
-            }
-        };
-    }, [frame, model, label, prefix]);
-    return slots;
-}
+      }
+      const next = [];
+      for (const element_1 of elements) {
+        const path = element_1.dataset.itemPath;
+        const row_1 = path === undefined ? undefined : byPath.get(path);
+        if (row_1 === undefined) {
+          continue;
+        }
+        element_1.dataset.interactive = 'true';
+        element_1.dataset.joinedStart = String(row_1.isSelected && byIndex.get(row_1.index - 1)?.isSelected === true);
+        element_1.dataset.joinedEnd = String(row_1.isSelected && byIndex.get(row_1.index + 1)?.isSelected === true);
+        let port_1 = ports.get(element_1);
+        if (port_1 === undefined) {
+          serial++;
+          const control = makePort(element_1, current, 'control');
+          const decoration = makePort(element_1, current, 'decoration');
+          port_1 = {
+            rowElement: element_1,
+            control: control.container,
+            decoration: decoration.container,
+            lightControl: control.target,
+            lightDecoration: decoration.target
+          };
+          ports.set(element_1, port_1);
+        }
+        if (port_1.control.dataset.itemPath !== row_1.path) {
+          port_1.control.dataset.itemPath = row_1.path;
+        }
+        if (port_1.decoration.dataset.itemPath !== row_1.path) {
+          port_1.decoration.dataset.itemPath = row_1.path;
+        }
+        port_1.lightControl.dataset.itemPath = row_1.path;
+        port_1.lightDecoration.dataset.itemPath = row_1.path;
+        next.push({
+          row: row_1,
+          control: port_1.lightControl,
+          decoration: port_1.lightDecoration
+        });
+      }
+      const key = next.map(({
+        row: row_2,
+        control: control_0
+      }) => `${control_0.slot}:${row_2.path}:${row_2.isSelected}:${row_2.isExpanded}:${row_2.isFocused}:${row_2.name}`).join('|');
+      if (snapshot !== key) {
+        snapshot = key;
+        // Recycled rows must paint with their new portal contents in the same frame.
+        flushSync(() => setSlots(next));
+      }
+      position();
+    };
+    const schedule = () => {
+      if (!pending && !disposed) {
+        pending = true;
+        queueMicrotask(scan);
+      }
+    };
+    const shifts = new MutationObserver(position);
+    shifts.observe(frame, {
+      attributes: true,
+      attributeFilter: ['style']
+    });
+    const changes = new MutationObserver(schedule);
+    changes.observe(frame, {
+      childList: true,
+      subtree: true
+    });
+    const unsubscribe = model.subscribe(schedule);
+    schedule();
+    return () => {
+      disposed = true;
+      unsubscribe();
+      changes.disconnect();
+      shifts.disconnect();
+      resize.disconnect();
+      style?.remove();
+      for (const port_2 of ports.values()) {
+        port_2.rowElement.style.removeProperty('--adecore-tree-control-space');
+        port_2.rowElement.style.removeProperty('--adecore-tree-decoration-space');
+        dropPort(port_2);
+      }
+    };
+  }, [frame, model, label, prefix]);
+  return slots;
+}

package/dist/floating.js

@@ -1,6 +1,6 @@
 // Every popup, menu, tooltip and dialog of the library is portaled; these are the layers it draws them on.
 const FLOATING_LAYERS = '[data-base-ui-portal], .tooltip-popup, .dialog-popup, .dialog-backdrop';
 /* Whether an event landed in a popup rather than on the surface under it, which a canvas-like surface must not take as a click of its own. */
-export const isInFloatingLayer = (target) => target instanceof Element && target.closest(FLOATING_LAYERS) !== null;
+export const isInFloatingLayer = target => target instanceof Element && target.closest(FLOATING_LAYERS) !== null;
 /* A popup is portaled out of its trigger's element but not out of React's tree, so its events still bubble to that trigger. */
-export const cameThroughPortal = (event) => !(event.target instanceof Node && event.currentTarget.contains(event.target));
+export const cameThroughPortal = event => !(event.target instanceof Node && event.currentTarget.contains(event.target));