@adecore/ui 0.31.12 → 0.32.0

package/dist/tree/shift.js

@@ -2,33 +2,39 @@ export const SHIFT_PROPERTY = '--adecore-tree-shift';
 const LINE_WIDTH = 16;
 const MIN_THUMB = 24;
 export function clampShift(value, max) {
-    return Math.min(Math.max(value, 0), Math.max(max, 0));
+  return Math.min(Math.max(value, 0), Math.max(max, 0));
 }
 export function shiftNeed(textRight, limit, shift) {
-    return Math.max(0, Math.ceil(textRight + shift - limit));
+  return Math.max(0, Math.ceil(textRight + shift - limit));
 }
 export function maxShift(needs) {
-    return needs.reduce((max, need) => Math.max(max, need), 0);
+  return needs.reduce((max, need) => Math.max(max, need), 0);
 }
 export function sidewaysDelta(step, pageWidth) {
-    const swapped = step.shiftKey && step.deltaX === 0;
-    const sideways = swapped ? step.deltaY : step.deltaX;
-    const across = swapped ? 0 : step.deltaY;
-    if (sideways === 0 || Math.abs(sideways) <= Math.abs(across)) {
-        return 0;
-    }
-    if (step.deltaMode === 1) {
-        return sideways * LINE_WIDTH;
-    }
-    if (step.deltaMode === 2) {
-        return sideways * pageWidth;
-    }
-    return sideways;
+  const swapped = step.shiftKey && step.deltaX === 0;
+  const sideways = swapped ? step.deltaY : step.deltaX;
+  const across = swapped ? 0 : step.deltaY;
+  if (sideways === 0 || Math.abs(sideways) <= Math.abs(across)) {
+    return 0;
+  }
+  if (step.deltaMode === 1) {
+    return sideways * LINE_WIDTH;
+  }
+  if (step.deltaMode === 2) {
+    return sideways * pageWidth;
+  }
+  return sideways;
 }
 export function shiftThumb(shift, max, track, view) {
-    if (max <= 0 || track <= 0) {
-        return { left: 0, width: Math.max(track, 0) };
-    }
-    const width = Math.min(track, Math.max(MIN_THUMB, Math.round((track * view) / (view + max))));
-    return { left: Math.round(((track - width) * clampShift(shift, max)) / max), width };
-}
+  if (max <= 0 || track <= 0) {
+    return {
+      left: 0,
+      width: Math.max(track, 0)
+    };
+  }
+  const width = Math.min(track, Math.max(MIN_THUMB, Math.round(track * view / (view + max))));
+  return {
+    left: Math.round((track - width) * clampShift(shift, max) / max),
+    width
+  };
+}

package/dist/tree/style.js

@@ -1,6 +1,6 @@
 export const TREE_ROW_HEIGHT = 25;
 export function treeRowStyle(selector, selected = 'data-selected') {
-    return `
+  return `
         ${selector} {
             box-sizing: border-box;
             display: flex;
@@ -26,4 +26,4 @@ export function treeRowStyle(selector, selected = 'data-selected') {
         ${selector}[data-joined-end="true"] { border-end-start-radius: 0; border-end-end-radius: 0; }
         ${selector}:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
     `;
-}
+}

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

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useState } from 'react';
 import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from './shift.js';
+import { jsx as _jsx } from "react/jsx-runtime";
 const HIDE_AFTER = 900;
 const NEAR_BOTTOM = 16;
 /*
@@ -9,125 +10,185 @@ const NEAR_BOTTOM = 16;
  * shift instead of a scroll keeps every row's background and the vertical scroll where they are.
  */
 export function useTreeShift(source, resetKey) {
-    const [frame, setFrame] = useState(null);
-    const [track, setTrack] = useState(null);
-    const [thumb, setThumb] = useState(null);
-    useEffect(() => {
-        if (frame === null || track === null || thumb === null) {
+  const $ = _c(12);
+  const [frame, setFrame] = useState(null);
+  const [track, setTrack] = useState(null);
+  const [thumb, setThumb] = useState(null);
+  let t0;
+  if ($[0] !== frame || $[1] !== source || $[2] !== thumb || $[3] !== track) {
+    t0 = () => {
+      if (frame === null || track === null || thumb === null) {
+        return;
+      }
+      const range = document.createRange();
+      let root = null;
+      let exact = 0;
+      let drawn = 0;
+      let max = 0;
+      let pending = 0;
+      let hideTimer = 0;
+      let scrolling = false;
+      let near = false;
+      const draw = () => {
+        const shift = Math.round(exact);
+        if (shift !== drawn) {
+          drawn = shift;
+          frame.style.setProperty(SHIFT_PROPERTY, `${shift}px`);
+        }
+        const {
+          left,
+          width
+        } = shiftThumb(shift, max, track.clientWidth, frame.clientWidth);
+        thumb.style.left = `${left}px`;
+        thumb.style.width = `${width}px`;
+        track.toggleAttribute("data-visible", max > 0 && (scrolling || near));
+      };
+      const measure = () => {
+        pending = 0;
+        if (root === null) {
+          root = source.root(frame);
+          if (root === null) {
             return;
+          }
+          rows.observe(root, {
+            childList: true,
+            subtree: true,
+            characterData: true
+          });
+        }
+        const drawnRows = source.rows(root);
+        const gap = drawnRows.length === 0 ? 0 : Number.parseFloat(getComputedStyle(drawnRows[0]).columnGap) || 0;
+        max = maxShift(drawnRows.map(row => source.need(row, drawn, gap, range)).filter(_temp));
+        exact = clampShift(exact, max);
+        draw();
+      };
+      const schedule = () => {
+        if (pending === 0) {
+          pending = requestAnimationFrame(measure);
+        }
+      };
+      const rows = new MutationObserver(schedule);
+      const mounts = new MutationObserver(schedule);
+      mounts.observe(frame, {
+        childList: true,
+        subtree: true
+      });
+      const sizes = new ResizeObserver(schedule);
+      sizes.observe(frame);
+      const onWheel = event => {
+        const delta = sidewaysDelta(event, frame.clientWidth);
+        if (delta === 0 || max === 0) {
+          return;
+        }
+        scrolling = true;
+        window.clearTimeout(hideTimer);
+        hideTimer = window.setTimeout(() => {
+          scrolling = false;
+          draw();
+        }, HIDE_AFTER);
+        const next = clampShift(exact + delta, max);
+        if (next !== exact) {
+          event.preventDefault();
+          exact = next;
         }
-        const range = document.createRange();
-        let root = null;
-        let exact = 0;
-        let drawn = 0;
-        let max = 0;
-        let pending = 0;
-        let hideTimer = 0;
-        let scrolling = false;
-        let near = false;
-        const draw = () => {
-            const shift = Math.round(exact);
-            if (shift !== drawn) {
-                drawn = shift;
-                frame.style.setProperty(SHIFT_PROPERTY, `${shift}px`);
-            }
-            const { left, width } = shiftThumb(shift, max, track.clientWidth, frame.clientWidth);
-            thumb.style.left = `${left}px`;
-            thumb.style.width = `${width}px`;
-            track.toggleAttribute('data-visible', max > 0 && (scrolling || near));
-        };
-        const measure = () => {
-            pending = 0;
-            if (root === null) {
-                root = source.root(frame);
-                if (root === null) {
-                    return;
-                }
-                rows.observe(root, { childList: true, subtree: true, characterData: true });
-            }
-            const drawnRows = source.rows(root);
-            const gap = drawnRows.length === 0 ? 0 : Number.parseFloat(getComputedStyle(drawnRows[0]).columnGap) || 0;
-            max = maxShift(drawnRows.map((row) => source.need(row, drawn, gap, range)).filter((need) => need !== null));
-            exact = clampShift(exact, max);
-            draw();
-        };
-        const schedule = () => {
-            if (pending === 0) {
-                pending = requestAnimationFrame(measure);
-            }
-        };
-        const rows = new MutationObserver(schedule);
-        const mounts = new MutationObserver(schedule);
-        mounts.observe(frame, { childList: true, subtree: true });
-        const sizes = new ResizeObserver(schedule);
-        sizes.observe(frame);
-        const onWheel = (event) => {
-            const delta = sidewaysDelta(event, frame.clientWidth);
-            if (delta === 0 || max === 0) {
-                return;
-            }
-            scrolling = true;
-            window.clearTimeout(hideTimer);
-            hideTimer = window.setTimeout(() => {
-                scrolling = false;
-                draw();
-            }, HIDE_AFTER);
-            const next = clampShift(exact + delta, max);
-            if (next !== exact) {
-                event.preventDefault();
-                exact = next;
-            }
-            draw();
-        };
-        const onPointerMove = (event) => {
-            const bottom = track.getBoundingClientRect().bottom;
-            const isNear = event.clientY >= bottom - NEAR_BOTTOM;
-            if (isNear !== near) {
-                near = isNear;
-                draw();
-            }
-        };
-        const onPointerLeave = () => {
-            if (near) {
-                near = false;
-                draw();
-            }
-        };
-        frame.addEventListener('wheel', onWheel, { passive: false });
-        frame.addEventListener('pointermove', onPointerMove);
-        frame.addEventListener('pointerleave', onPointerLeave);
-        schedule();
-        return () => {
-            frame.removeEventListener('wheel', onWheel);
-            frame.removeEventListener('pointermove', onPointerMove);
-            frame.removeEventListener('pointerleave', onPointerLeave);
-            rows.disconnect();
-            mounts.disconnect();
-            sizes.disconnect();
-            cancelAnimationFrame(pending);
-            window.clearTimeout(hideTimer);
-            frame.style.removeProperty(SHIFT_PROPERTY);
-            track.removeAttribute('data-visible');
-        };
-    }, [frame, track, thumb, source, resetKey]);
-    const bar = (_jsx("div", { "aria-hidden": true, className: "adecore-tree-shift", children: _jsx("div", { ref: setTrack, className: "adecore-tree-shift-track", children: _jsx("div", { ref: setThumb, className: "adecore-tree-shift-thumb" }) }) }));
-    return { attach: setFrame, bar };
+        draw();
+      };
+      const onPointerMove = event_0 => {
+        const bottom = track.getBoundingClientRect().bottom;
+        const isNear = event_0.clientY >= bottom - NEAR_BOTTOM;
+        if (isNear !== near) {
+          near = isNear;
+          draw();
+        }
+      };
+      const onPointerLeave = () => {
+        if (near) {
+          near = false;
+          draw();
+        }
+      };
+      frame.addEventListener("wheel", onWheel, {
+        passive: false
+      });
+      frame.addEventListener("pointermove", onPointerMove);
+      frame.addEventListener("pointerleave", onPointerLeave);
+      schedule();
+      return () => {
+        frame.removeEventListener("wheel", onWheel);
+        frame.removeEventListener("pointermove", onPointerMove);
+        frame.removeEventListener("pointerleave", onPointerLeave);
+        rows.disconnect();
+        mounts.disconnect();
+        sizes.disconnect();
+        cancelAnimationFrame(pending);
+        window.clearTimeout(hideTimer);
+        frame.style.removeProperty(SHIFT_PROPERTY);
+        track.removeAttribute("data-visible");
+      };
+    };
+    $[0] = frame;
+    $[1] = source;
+    $[2] = thumb;
+    $[3] = track;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  let t1;
+  if ($[5] !== frame || $[6] !== resetKey || $[7] !== source || $[8] !== thumb || $[9] !== track) {
+    t1 = [frame, track, thumb, source, resetKey];
+    $[5] = frame;
+    $[6] = resetKey;
+    $[7] = source;
+    $[8] = thumb;
+    $[9] = track;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    const bar = /*#__PURE__*/_jsx("div", {
+      "aria-hidden": true,
+      className: "adecore-tree-shift",
+      children: /*#__PURE__*/_jsx("div", {
+        ref: setTrack,
+        className: "adecore-tree-shift-track",
+        children: /*#__PURE__*/_jsx("div", {
+          ref: setThumb,
+          className: "adecore-tree-shift-thumb"
+        })
+      })
+    });
+    t2 = {
+      attach: setFrame,
+      bar
+    };
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  return t2;
 }
 /* The rows of `Tree.Root`: everything a row holds slides, so a row reaches as far as its last part. */
+function _temp(need) {
+  return need !== null;
+}
 export const TREE_ROWS = {
-    root: (frame) => frame,
-    rows: (root) => [...root.querySelectorAll('.adecore-tree-row')],
-    need: (row, shift) => {
-        const box = row.getBoundingClientRect();
-        if (box.width === 0) {
-            return null;
-        }
-        const parts = [...row.children].filter((child) => !child.classList.contains('adecore-tree-guide'));
-        if (parts.length === 0) {
-            return null;
-        }
-        const reach = Math.max(...parts.map((part) => part.getBoundingClientRect().right));
-        const limit = box.right - (Number.parseFloat(getComputedStyle(row).paddingInlineEnd) || 0);
-        return shiftNeed(reach, limit, shift);
+  root: frame => frame,
+  rows: root => [...root.querySelectorAll('.adecore-tree-row')],
+  need: (row, shift) => {
+    const box = row.getBoundingClientRect();
+    if (box.width === 0) {
+      return null;
+    }
+    const parts = [...row.children].filter(child => !child.classList.contains('adecore-tree-guide'));
+    if (parts.length === 0) {
+      return null;
     }
-};
+    const reach = Math.max(...parts.map(part => part.getBoundingClientRect().right));
+    const limit = box.right - (Number.parseFloat(getComputedStyle(row).paddingInlineEnd) || 0);
+    return shiftNeed(reach, limit, shift);
+  }
+};

package/dist/useAsyncAction.js

@@ -2,22 +2,26 @@ import { useState } from 'react';
 import { messageOf } from './error-message.js';
 /* One step a surface waits on: the button goes quiet while it runs and the reason stays on screen when it does not. */
 export function useAsyncAction(fallback) {
-    const [busy, setBusy] = useState(false);
-    const [failure, setFailure] = useState(null);
-    const run = async (work) => {
-        setBusy(true);
-        setFailure(null);
-        try {
-            await work();
-            return true;
-        }
-        catch (e) {
-            setFailure(messageOf(e, fallback));
-            return false;
-        }
-        finally {
-            setBusy(false);
-        }
-    };
-    return { busy, failure, run, fail: setFailure, clear: () => setFailure(null) };
-}
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState(null);
+  const run = async work => {
+    setBusy(true);
+    setFailure(null);
+    try {
+      await work();
+      return true;
+    } catch (e) {
+      setFailure(messageOf(e, fallback));
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+  return {
+    busy,
+    failure,
+    run,
+    fail: setFailure,
+    clear: () => setFailure(null)
+  };
+}

package/dist/useColumnResize.js

@@ -1,44 +1,46 @@
 export const clampColumnSize = (options, size) => {
-    const max = Math.max(options.min, options.max?.() ?? Number.MAX_SAFE_INTEGER);
-    return Math.max(options.min, Math.min(Math.round(size), max));
+  const max = Math.max(options.min, options.max?.() ?? Number.MAX_SAFE_INTEGER);
+  return Math.max(options.min, Math.min(Math.round(size), max));
 };
 /* Where the pointer sits on the axis this edge belongs to. */
-const along = (from, event) => (from === 'left' || from === 'right' ? event.clientX : event.clientY);
+const along = (from, event) => from === 'left' || from === 'right' ? event.clientX : event.clientY;
 /*
  * One resizable column or row: a handle that drags the size its owner keeps. The handle takes the
  * pointer capture, so the drag survives leaving the few pixels it is wide, and `[data-resizing]` on
  * the column turns off any transition on that size for as long as it lasts.
  */
 export const useColumnResize = (ref, options) => {
-    const startResize = (event) => {
-        event.preventDefault();
-        const handle = event.currentTarget;
-        const column = ref.current;
-        const rect = column?.getBoundingClientRect();
-        const size = (options.from === 'left' || options.from === 'right' ? rect?.width : rect?.height) ?? options.size;
-        const start = along(options.from, event);
-        /* The far edge grows as the pointer comes towards it; the near edge grows as it goes away. */
-        const growsTowardsAnchor = options.from === 'right' || options.from === 'bottom';
-        column?.setAttribute('data-resizing', 'true');
-        const onMove = (move) => {
-            const delta = along(options.from, move) - start;
-            options.onSize(clampColumnSize(options, size + (growsTowardsAnchor ? -delta : delta)));
-        };
-        const onUp = () => {
-            handle.removeEventListener('pointermove', onMove);
-            handle.removeEventListener('pointerup', onUp);
-            handle.removeEventListener('pointercancel', onUp);
-            handle.removeEventListener('lostpointercapture', onUp);
-            if (handle.hasPointerCapture(event.pointerId)) {
-                handle.releasePointerCapture(event.pointerId);
-            }
-            column?.removeAttribute('data-resizing');
-        };
-        handle.setPointerCapture(event.pointerId);
-        handle.addEventListener('pointermove', onMove);
-        handle.addEventListener('pointerup', onUp);
-        handle.addEventListener('pointercancel', onUp);
-        handle.addEventListener('lostpointercapture', onUp);
+  const startResize = event => {
+    event.preventDefault();
+    const handle = event.currentTarget;
+    const column = ref.current;
+    const rect = column?.getBoundingClientRect();
+    const size = (options.from === 'left' || options.from === 'right' ? rect?.width : rect?.height) ?? options.size;
+    const start = along(options.from, event);
+    /* The far edge grows as the pointer comes towards it; the near edge grows as it goes away. */
+    const growsTowardsAnchor = options.from === 'right' || options.from === 'bottom';
+    column?.setAttribute('data-resizing', 'true');
+    const onMove = move => {
+      const delta = along(options.from, move) - start;
+      options.onSize(clampColumnSize(options, size + (growsTowardsAnchor ? -delta : delta)));
     };
-    return { startResize };
-};
+    const onUp = () => {
+      handle.removeEventListener('pointermove', onMove);
+      handle.removeEventListener('pointerup', onUp);
+      handle.removeEventListener('pointercancel', onUp);
+      handle.removeEventListener('lostpointercapture', onUp);
+      if (handle.hasPointerCapture(event.pointerId)) {
+        handle.releasePointerCapture(event.pointerId);
+      }
+      column?.removeAttribute('data-resizing');
+    };
+    handle.setPointerCapture(event.pointerId);
+    handle.addEventListener('pointermove', onMove);
+    handle.addEventListener('pointerup', onUp);
+    handle.addEventListener('pointercancel', onUp);
+    handle.addEventListener('lostpointercapture', onUp);
+  };
+  return {
+    startResize
+  };
+};

package/dist/useContentSize.js

@@ -1,21 +1,65 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from 'react';
 /* Whole pixels, so a frame fitted into the space lands on them too. */
 export function useContentSize() {
-    const [size, setSize] = useState({ width: 0, height: 0 });
-    const observer = useRef(null);
-    useEffect(() => () => observer.current?.disconnect(), []);
-    const measure = useCallback((node) => {
-        observer.current?.disconnect();
-        if (node === null) {
-            return;
-        }
-        const update = (width, height) => {
-            const next = { width: Math.round(width), height: Math.round(height) };
-            setSize((current) => (current.width === next.width && current.height === next.height ? current : next));
+  const $ = _c(6);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      width: 0,
+      height: 0
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const [size, setSize] = useState(t0);
+  const observer = useRef(null);
+  let t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => () => observer.current?.disconnect();
+    t2 = [];
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = node => {
+      observer.current?.disconnect();
+      if (node === null) {
+        return;
+      }
+      const update = (width, height) => {
+        const next = {
+          width: Math.round(width),
+          height: Math.round(height)
         };
-        update(node.clientWidth, node.clientHeight);
-        observer.current = new ResizeObserver(([entry]) => update(entry.contentRect.width, entry.contentRect.height));
-        observer.current.observe(node);
-    }, []);
-    return [measure, size];
-}
+        setSize(current => current.width === next.width && current.height === next.height ? current : next);
+      };
+      update(node.clientWidth, node.clientHeight);
+      observer.current = new ResizeObserver(t4 => {
+        const [entry] = t4;
+        return update(entry.contentRect.width, entry.contentRect.height);
+      });
+      observer.current.observe(node);
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const measure = t3;
+  let t4;
+  if ($[4] !== size) {
+    t4 = [measure, size];
+    $[4] = size;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}

package/dist/useMeasuredWidth.js

@@ -1,6 +1,17 @@
+import { c as _c } from "react/compiler-runtime";
 import { useContentSize } from './useContentSize.js';
 /* A plot draws in real pixels rather than a stretched view box, so what it draws lands on whole ones. */
 export function useMeasuredWidth() {
-    const [measure, size] = useContentSize();
-    return [measure, size.width];
-}
+  const $ = _c(3);
+  const [measure, size] = useContentSize();
+  let t0;
+  if ($[0] !== measure || $[1] !== size.width) {
+    t0 = [measure, size.width];
+    $[0] = measure;
+    $[1] = size.width;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}