@adecore/ui 0.31.11 → 0.32.0

package/dist/MiddleTruncate.js

@@ -1,59 +1,140 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useMemo, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useLayoutEffect, useState } from 'react';
 import clsx from 'clsx';
 import { fitMiddle } from './middle-truncate.js';
 import { mergeRefs } from './merge-refs.js';
-import { Tooltip } from './Tooltip.js';
+import { Tooltip } from "./Tooltip.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 let canvas = null;
 /* How wide a text is drawn in the face of `element`, or null where the page cannot tell (no canvas). */
 function textMeasure(element) {
-    const view = element.ownerDocument.defaultView;
-    canvas ??= element.ownerDocument.createElement('canvas');
-    const context = canvas.getContext('2d');
-    if (context === null || view === null) {
-        return null;
-    }
-    const style = view.getComputedStyle(element);
-    context.font = style.font || `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
-    if ('letterSpacing' in context) {
-        context.letterSpacing = style.letterSpacing === 'normal' ? '0px' : style.letterSpacing;
-    }
-    return (text) => context.measureText(text).width;
+  const view = element.ownerDocument.defaultView;
+  canvas ??= element.ownerDocument.createElement('canvas');
+  const context = canvas.getContext('2d');
+  if (context === null || view === null) {
+    return null;
+  }
+  const style = view.getComputedStyle(element);
+  context.font = style.font || `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+  if ('letterSpacing' in context) {
+    context.letterSpacing = style.letterSpacing === 'normal' ? '0px' : style.letterSpacing;
+  }
+  return text => context.measureText(text).width;
 }
 function sameCut(first, second) {
-    return first?.head === second?.head && first?.tail === second?.tail;
+  return first?.head === second?.head && first?.tail === second?.tail;
 }
 /*
  * A path or a branch name on one line that keeps its start and its end and cuts the middle. It asks
  * for the width of the whole text and measures what it gets. The part it cuts stays in the element
  * at no width, so selecting, copying and finding read the whole text.
  */
-export function MiddleTruncate({ text, tooltip = true, className, ref }) {
-    const [element, setElement] = useState(null);
-    const [cut, setCut] = useState(null);
-    const rootRef = useMemo(() => mergeRefs(setElement, ref), [ref]);
-    useLayoutEffect(() => {
-        if (element === null) {
-            return;
-        }
-        const update = () => {
-            const measure = textMeasure(element);
-            // Layout rounds what a canvas measures, so a text a fraction wider than its box still fits.
-            const next = measure === null ? null : fitMiddle(text, element.getBoundingClientRect().width + 0.5, measure);
-            setCut((current) => (sameCut(current, next) ? current : next));
-        };
-        update();
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const observer = new ResizeObserver(update);
-        observer.observe(element);
-        return () => observer.disconnect();
-    }, [element, text]);
-    const content = (_jsx("span", { ref: rootRef, className: clsx('middle-truncate', className), "data-text": text, children: cut === null ? (text) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "middle-truncate-head", children: cut.head }), _jsx("span", { className: "middle-truncate-middle", children: cut.middle }), cut.tail] })) }));
-    // Only a cut text has more to say, and a long list of whole ones keeps no hover handlers.
-    if (cut === null || !tooltip) {
-        return content;
-    }
-    return _jsx(Tooltip, { label: text, children: content });
-}
+export function MiddleTruncate(t0) {
+  const $ = _c(19);
+  const {
+    text,
+    tooltip: t1,
+    className,
+    ref
+  } = t0;
+  const tooltip = t1 === undefined ? true : t1;
+  const [element, setElement] = useState(null);
+  const [cut, setCut] = useState(null);
+  let t2;
+  if ($[0] !== ref) {
+    t2 = mergeRefs(setElement, ref);
+    $[0] = ref;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const rootRef = t2;
+  let t3;
+  let t4;
+  if ($[2] !== element || $[3] !== text) {
+    t3 = () => {
+      if (element === null) {
+        return;
+      }
+      const update = () => {
+        const measure = textMeasure(element);
+        const next = measure === null ? null : fitMiddle(text, element.getBoundingClientRect().width + 0.5, measure);
+        setCut(current => sameCut(current, next) ? current : next);
+      };
+      update();
+      if (typeof ResizeObserver === "undefined") {
+        return;
+      }
+      const observer = new ResizeObserver(update);
+      observer.observe(element);
+      return () => observer.disconnect();
+    };
+    t4 = [element, text];
+    $[2] = element;
+    $[3] = text;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t3 = $[4];
+    t4 = $[5];
+  }
+  useLayoutEffect(t3, t4);
+  let t5;
+  if ($[6] !== className) {
+    t5 = clsx("middle-truncate", className);
+    $[6] = className;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== cut || $[9] !== text) {
+    t6 = cut === null ? text : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "middle-truncate-head",
+        children: cut.head
+      }), /*#__PURE__*/_jsx("span", {
+        className: "middle-truncate-middle",
+        children: cut.middle
+      }), cut.tail]
+    });
+    $[8] = cut;
+    $[9] = text;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== rootRef || $[12] !== t5 || $[13] !== t6 || $[14] !== text) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      ref: rootRef,
+      className: t5,
+      "data-text": text,
+      children: t6
+    });
+    $[11] = rootRef;
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = text;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  const content = t7;
+  if (cut === null || !tooltip) {
+    return content;
+  }
+  let t8;
+  if ($[16] !== content || $[17] !== text) {
+    t8 = /*#__PURE__*/_jsx(Tooltip, {
+      label: text,
+      children: content
+    });
+    $[16] = content;
+    $[17] = text;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  return t8;
+}

package/dist/PanelEmpty.js

@@ -1,7 +1,66 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-import { EmptyState } from './EmptyState.js';
+import { EmptyState } from "./EmptyState.js";
 /* What a panel or a card shows while it holds nothing: a sentence, one icon, at most one button. */
-export function PanelEmpty({ header, icon, busy = false, action, sunken = false, fill = 'grow', children, className, ref }) {
-    return (_jsxs("div", { ref: ref, className: clsx('grid min-h-0 place-items-center', fill === 'full' ? 'h-full' : 'grow', sunken && 'bg-surface-sunken', className), children: [header, _jsx(EmptyState, { icon: icon, busy: busy, action: action, children: children })] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PanelEmpty(t0) {
+  const $ = _c(14);
+  const {
+    header,
+    icon,
+    busy: t1,
+    action,
+    sunken: t2,
+    fill: t3,
+    children,
+    className,
+    ref
+  } = t0;
+  const busy = t1 === undefined ? false : t1;
+  const sunken = t2 === undefined ? false : t2;
+  const fill = t3 === undefined ? "grow" : t3;
+  const t4 = fill === "full" ? "h-full" : "grow";
+  const t5 = sunken && "bg-surface-sunken";
+  let t6;
+  if ($[0] !== className || $[1] !== t4 || $[2] !== t5) {
+    t6 = clsx("grid min-h-0 place-items-center", t4, t5, className);
+    $[0] = className;
+    $[1] = t4;
+    $[2] = t5;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  let t7;
+  if ($[4] !== action || $[5] !== busy || $[6] !== children || $[7] !== icon) {
+    t7 = /*#__PURE__*/_jsx(EmptyState, {
+      icon: icon,
+      busy: busy,
+      action: action,
+      children: children
+    });
+    $[4] = action;
+    $[5] = busy;
+    $[6] = children;
+    $[7] = icon;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== header || $[10] !== ref || $[11] !== t6 || $[12] !== t7) {
+    t8 = /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      className: t6,
+      children: [header, t7]
+    });
+    $[9] = header;
+    $[10] = ref;
+    $[11] = t6;
+    $[12] = t7;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  return t8;
+}

package/dist/PanelHeader.js

@@ -1,20 +1,102 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
-import { SectionLabel } from './SectionLabel.js';
+import { SectionLabel } from "./SectionLabel.js";
 /*
  * The bar across the top of a side panel, as tall as a 48px toolbar beside it: the panel's name,
  * its own controls, and a close button last.
  */
-export function PanelHeader({ title, render, className, ref, children, ...props }) {
-    return useRender({
-        render,
-        ref,
-        defaultTagName: 'header',
-        props: {
-            ...props,
-            className: clsx('flex h-12 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3', className),
-            children: (_jsxs(_Fragment, { children: [title !== undefined && _jsx(SectionLabel, { className: "shrink-0", children: title }), children] }))
-        }
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function PanelHeader(t0) {
+  const $ = _c(22);
+  let children;
+  let className;
+  let props;
+  let ref;
+  let render;
+  let title;
+  if ($[0] !== t0) {
+    ({
+      title,
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+    $[6] = title;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+    title = $[6];
+  }
+  let t1;
+  if ($[7] !== className) {
+    t1 = clsx("flex h-12 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3", className);
+    $[7] = className;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  let t2;
+  if ($[9] !== title) {
+    t2 = title !== undefined && /*#__PURE__*/_jsx(SectionLabel, {
+      className: "shrink-0",
+      children: title
     });
-}
+    $[9] = title;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== children || $[12] !== t2) {
+    t3 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t2, children]
+    });
+    $[11] = children;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  let t4;
+  if ($[14] !== props || $[15] !== t1 || $[16] !== t3) {
+    t4 = {
+      ...props,
+      className: t1,
+      children: t3
+    };
+    $[14] = props;
+    $[15] = t1;
+    $[16] = t3;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  let t5;
+  if ($[18] !== ref || $[19] !== render || $[20] !== t4) {
+    t5 = {
+      render,
+      ref,
+      defaultTagName: "header",
+      props: t4
+    };
+    $[18] = ref;
+    $[19] = render;
+    $[20] = t4;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  return useRender(t5);
+}

package/dist/Pill.js

@@ -1,35 +1,130 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 /*
  * What the label says about the thing it names, drawn as its ground. Every ground is an alpha over
  * whatever the pill stands on, the way a border is: in the dark theme it lifts a shade off the row
  * under it, in the light theme it sinks one. A solid sunken ground read as a hole on a dark row.
  */
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const TONES = {
-    muted: 'bg-text/7 text-text-muted',
-    /* A step further off the ground, for a label that should stand out as a control. */
-    raised: 'bg-text/12 text-text-muted',
-    idle: 'bg-status-idle/15 text-status-idle',
-    needsYou: 'bg-status-needs-you/15 text-status-needs-you',
-    error: 'bg-status-error/15 text-status-error',
-    accent: 'bg-accent/16 text-accent'
+  muted: 'bg-text/7 text-text-muted',
+  /* A step further off the ground, for a label that should stand out as a control. */
+  raised: 'bg-text/12 text-text-muted',
+  idle: 'bg-status-idle/15 text-status-idle',
+  needsYou: 'bg-status-needs-you/15 text-status-needs-you',
+  error: 'bg-status-error/15 text-status-error',
+  accent: 'bg-accent/16 text-accent'
 };
 /* The corners of a button, so a pill reads as a small label of the same family and not as a badge. A tag, at the end of a line of prose, is tighter and heavier. */
 const SHAPES = {
-    pill: 'rounded-md',
-    tag: 'rounded-md font-medium'
+  pill: 'rounded-md',
+  tag: 'rounded-md font-medium'
 };
 /* The text stays at the theme's smallest size, so `sm` gives up padding: 20px tall instead of 24. */
 const PADDING = {
-    pill: { md: 'px-2 py-0.5', sm: 'px-1.5' },
-    tag: { md: 'px-1.5 py-0.5', sm: 'px-1' }
+  pill: {
+    md: 'px-2 py-0.5',
+    sm: 'px-1.5'
+  },
+  tag: {
+    md: 'px-1.5 py-0.5',
+    sm: 'px-1'
+  }
 };
 /* The small rounded label in a header, a sidebar row or a settings line: a count, a branch, a status. */
-export function Pill({ icon, children, tone = 'muted', shape = 'pill', size = 'md', mono = false, onClick, pressed, disabled, className, ref }) {
-    // Never broken inside itself: in a row that wraps, a pill that does not fit moves to the next line whole.
-    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], PADDING[shape][size], TONES[tone], mono && 'font-mono', className);
-    if (!onClick) {
-        return (_jsxs("span", { ref: ref, className: shared, children: [icon, children] }));
+export function Pill(t0) {
+  const $ = _c(26);
+  const {
+    icon,
+    children,
+    tone: t1,
+    shape: t2,
+    size: t3,
+    mono: t4,
+    onClick,
+    pressed,
+    disabled,
+    className,
+    ref
+  } = t0;
+  const tone = t1 === undefined ? "muted" : t1;
+  const shape = t2 === undefined ? "pill" : t2;
+  const size = t3 === undefined ? "md" : t3;
+  const mono = t4 === undefined ? false : t4;
+  let t10;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== children || $[1] !== className || $[2] !== disabled || $[3] !== icon || $[4] !== mono || $[5] !== onClick || $[6] !== pressed || $[7] !== ref || $[8] !== shape || $[9] !== size || $[10] !== tone) {
+    t10 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const shared = clsx("inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs", SHAPES[shape], PADDING[shape][size], TONES[tone], mono && "font-mono", className);
+      if (!onClick) {
+        t10 = /*#__PURE__*/_jsxs("span", {
+          ref: ref,
+          className: shared,
+          children: [icon, children]
+        });
+        break bb0;
+      }
+      t5 = ref;
+      t6 = "button";
+      t7 = pressed;
+      t8 = disabled;
+      t9 = clsx(shared, "enabled:hover:text-text disabled:opacity-50 aria-pressed:bg-text/14 aria-pressed:text-text");
     }
-    return (_jsxs("button", { ref: ref, type: "button", "aria-pressed": pressed, disabled: disabled, className: clsx(shared, 'enabled:hover:text-text disabled:opacity-50 aria-pressed:bg-text/14 aria-pressed:text-text'), onClick: onClick, children: [icon, children] }));
-}
+    $[0] = children;
+    $[1] = className;
+    $[2] = disabled;
+    $[3] = icon;
+    $[4] = mono;
+    $[5] = onClick;
+    $[6] = pressed;
+    $[7] = ref;
+    $[8] = shape;
+    $[9] = size;
+    $[10] = tone;
+    $[11] = t10;
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    t10 = $[11];
+    t5 = $[12];
+    t6 = $[13];
+    t7 = $[14];
+    t8 = $[15];
+    t9 = $[16];
+  }
+  if (t10 !== Symbol.for("react.early_return_sentinel")) {
+    return t10;
+  }
+  let t11;
+  if ($[17] !== children || $[18] !== icon || $[19] !== onClick || $[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+    t11 = /*#__PURE__*/_jsxs("button", {
+      ref: t5,
+      type: t6,
+      "aria-pressed": t7,
+      disabled: t8,
+      className: t9,
+      onClick: onClick,
+      children: [icon, children]
+    });
+    $[17] = children;
+    $[18] = icon;
+    $[19] = onClick;
+    $[20] = t5;
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  return t11;
+}