@adecore/ui 0.31.11 → 0.32.0

package/dist/DockShell.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { Surface } from './Surface.js';
+import { Surface } from "./Surface.js";
 /* How close to the bottom of the window the pointer has to come before a hidden dock slides back. */
+import { jsx as _jsx } from "react/jsx-runtime";
 const REVEAL_ZONE = 120;
 /*
  * The floating bar at the bottom of a canvas-like view, and the one place that knows how to get out
@@ -11,39 +12,145 @@ const REVEAL_ZONE = 120;
  * buttons stay in the tab order while it is out of sight, so focus brings it back. Something that
  * moves with the dock marks itself `data-holds-dock`, so reaching for it does not hide the dock.
  */
-export function DockShell({ children, autoHide = false, className, barClassName, onHiddenChange, ref, ...rest }) {
-    const barRef = useRef(null);
-    const [revealed, setRevealed] = useState(false);
-    useEffect(() => {
-        if (!autoHide) {
-            return;
+export function DockShell(t0) {
+  const $ = _c(28);
+  let barClassName;
+  let children;
+  let className;
+  let onHiddenChange;
+  let ref;
+  let rest;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      children,
+      autoHide: t1,
+      className,
+      barClassName,
+      onHiddenChange,
+      ref,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = barClassName;
+    $[2] = children;
+    $[3] = className;
+    $[4] = onHiddenChange;
+    $[5] = ref;
+    $[6] = rest;
+    $[7] = t1;
+  } else {
+    barClassName = $[1];
+    children = $[2];
+    className = $[3];
+    onHiddenChange = $[4];
+    ref = $[5];
+    rest = $[6];
+    t1 = $[7];
+  }
+  const autoHide = t1 === undefined ? false : t1;
+  const barRef = useRef(null);
+  const [revealed, setRevealed] = useState(false);
+  let t2;
+  let t3;
+  if ($[8] !== autoHide) {
+    t2 = () => {
+      if (!autoHide) {
+        return;
+      }
+      let pointerNear = false;
+      const evaluate = () => {
+        const bar = barRef.current;
+        const holds = bar !== null && (bar.querySelector("[data-popup-open]") !== null || bar.querySelector(":focus-visible") !== null);
+        setRevealed(pointerNear || holds);
+      };
+      const onMove = event => {
+        if (event.target instanceof Element && event.target.closest("[data-holds-dock]") !== null) {
+          return;
         }
-        let pointerNear = false;
-        const evaluate = () => {
-            const bar = barRef.current;
-            const holds = bar !== null && (bar.querySelector('[data-popup-open]') !== null || bar.querySelector(':focus-visible') !== null);
-            setRevealed(pointerNear || holds);
-        };
-        const onMove = (event) => {
-            /* Something that moves with the dock would slide away under the pointer reaching for it,
-               so over one the dock stays as it is. */
-            if (event.target instanceof Element && event.target.closest('[data-holds-dock]') !== null) {
-                return;
-            }
-            pointerNear = window.innerHeight - event.clientY <= REVEAL_ZONE;
-            evaluate();
-        };
-        window.addEventListener('pointermove', onMove);
-        window.addEventListener('focusin', evaluate);
-        return () => {
-            window.removeEventListener('pointermove', onMove);
-            window.removeEventListener('focusin', evaluate);
-            setRevealed(false);
-        };
-    }, [autoHide]);
-    const hidden = autoHide && !revealed;
-    useEffect(() => {
-        onHiddenChange?.(hidden);
-    }, [hidden, onHiddenChange]);
-    return (_jsx("div", { ref: ref, ...rest, className: clsx('pointer-events-none absolute inset-x-0 bottom-4 flex justify-center', className), children: _jsx(Surface, { ref: barRef, className: clsx('flex items-center gap-2 rounded-xl p-1 transition-[opacity,translate] duration-200', barClassName, hidden ? 'pointer-events-none translate-y-6 opacity-0' : 'pointer-events-auto'), children: children }) }));
-}
+        pointerNear = window.innerHeight - event.clientY <= REVEAL_ZONE;
+        evaluate();
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("focusin", evaluate);
+      return () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("focusin", evaluate);
+        setRevealed(false);
+      };
+    };
+    t3 = [autoHide];
+    $[8] = autoHide;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t2 = $[9];
+    t3 = $[10];
+  }
+  useEffect(t2, t3);
+  const hidden = autoHide && !revealed;
+  let t4;
+  let t5;
+  if ($[11] !== hidden || $[12] !== onHiddenChange) {
+    t4 = () => {
+      onHiddenChange?.(hidden);
+    };
+    t5 = [hidden, onHiddenChange];
+    $[11] = hidden;
+    $[12] = onHiddenChange;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t4 = $[13];
+    t5 = $[14];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[15] !== className) {
+    t6 = clsx("pointer-events-none absolute inset-x-0 bottom-4 flex justify-center", className);
+    $[15] = className;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  const t7 = hidden ? "pointer-events-none translate-y-6 opacity-0" : "pointer-events-auto";
+  let t8;
+  if ($[17] !== barClassName || $[18] !== t7) {
+    t8 = clsx("flex items-center gap-2 rounded-xl p-1 transition-[opacity,translate] duration-200", barClassName, t7);
+    $[17] = barClassName;
+    $[18] = t7;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== children || $[21] !== t8) {
+    t9 = /*#__PURE__*/_jsx(Surface, {
+      ref: barRef,
+      className: t8,
+      children: children
+    });
+    $[20] = children;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  let t10;
+  if ($[23] !== ref || $[24] !== rest || $[25] !== t6 || $[26] !== t9) {
+    t10 = /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      ...rest,
+      className: t6,
+      children: t9
+    });
+    $[23] = ref;
+    $[24] = rest;
+    $[25] = t6;
+    $[26] = t9;
+    $[27] = t10;
+  } else {
+    t10 = $[27];
+  }
+  return t10;
+}

package/dist/EmptyState.js

@@ -1,11 +1,100 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cloneElement, isValidElement } from 'react';
 import clsx from 'clsx';
-import { Icon } from './Icon.js';
-import { Spinner } from './Spinner.js';
+import { Icon } from "./Icon.js";
+import { Spinner } from "./Spinner.js";
 // One size in a panel, a card and a dialog alike, so no caller picks its own.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_SIZE = 20;
 /* What a list, a canvas or a thread shows before it holds anything. */
-export function EmptyState({ icon, busy = false, title, children, action, className, ref }) {
-    return (_jsxs("div", { ref: ref, className: clsx('flex flex-col items-center justify-center gap-2 px-6 py-8 text-center', className), children: [(busy || icon) && (_jsx("span", { className: "text-text-faint", children: busy ? (_jsx(Spinner, { size: ICON_SIZE })) : isValidElement(icon) ? (cloneElement(icon, { size: ICON_SIZE })) : (icon && _jsx(Icon, { icon: icon, size: ICON_SIZE })) })), title && _jsx("p", { className: "text-sm font-medium text-text", children: title }), _jsx("p", { className: "max-w-[280px] text-xs leading-snug text-text-muted", children: children }), action && _jsx("div", { className: "mt-2", children: action })] }));
-}
+export function EmptyState(t0) {
+  const $ = _c(18);
+  const {
+    icon,
+    busy: t1,
+    title,
+    children,
+    action,
+    className,
+    ref
+  } = t0;
+  const busy = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== className) {
+    t2 = clsx("flex flex-col items-center justify-center gap-2 px-6 py-8 text-center", className);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== busy || $[3] !== icon) {
+    t3 = (busy || icon) && /*#__PURE__*/_jsx("span", {
+      className: "text-text-faint",
+      children: busy ? /*#__PURE__*/_jsx(Spinner, {
+        size: ICON_SIZE
+      }) : isValidElement(icon) ? cloneElement(icon, {
+        size: ICON_SIZE
+      }) : icon && /*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        size: ICON_SIZE
+      })
+    });
+    $[2] = busy;
+    $[3] = icon;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== title) {
+    t4 = title && /*#__PURE__*/_jsx("p", {
+      className: "text-sm font-medium text-text",
+      children: title
+    });
+    $[5] = title;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== children) {
+    t5 = /*#__PURE__*/_jsx("p", {
+      className: "max-w-[280px] text-xs leading-snug text-text-muted",
+      children: children
+    });
+    $[7] = children;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== action) {
+    t6 = action && /*#__PURE__*/_jsx("div", {
+      className: "mt-2",
+      children: action
+    });
+    $[9] = action;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== ref || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      className: t2,
+      children: [t3, t4, t5, t6]
+    });
+    $[11] = ref;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  return t7;
+}

package/dist/ErrorBoundary.js

@@ -1,47 +1,270 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Component } from 'react';
 import clsx from 'clsx';
 import { Copy, RotateCw, TriangleAlert } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from './Button.js';
-import { ButtonGroup } from './ButtonGroup.js';
+import { Button } from "./Button.js";
+import { ButtonGroup } from "./ButtonGroup.js";
 import { copyText } from './clipboard.js';
 import { errorMessageOf, errorReport, shouldReset } from './error-boundary.js';
-import { Icon } from './Icon.js';
-import { IconButton } from './IconButton.js';
-const CLEAR = { error: null, failed: false, componentStack: null };
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CLEAR = {
+  error: null,
+  failed: false,
+  componentStack: null
+};
 /* A function component, so the words come from the i18next instance the app renders with. */
-function ErrorFallback({ label, error, componentStack, compact, reload, className, onRetry }) {
-    const { t } = useTranslation('ui');
-    return (_jsx("div", { role: "alert", className: clsx('grid place-items-center overflow-auto bg-surface', compact ? 'p-3' : 'p-6', className), children: _jsxs("div", { className: clsx('flex max-w-[360px] flex-col items-center text-center', compact ? 'gap-1' : 'gap-2'), children: [!compact && _jsx(Icon, { icon: TriangleAlert, size: 20, className: "text-status-error" }), _jsx("p", { className: "text-sm font-medium text-text", children: label }), _jsx("p", { className: "line-clamp-4 text-xs break-words text-text-muted", children: errorMessageOf(error) }), _jsxs("div", { className: clsx('flex items-center gap-2', compact ? 'mt-1' : 'mt-2'), children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: onRetry, children: t('action.retry') }), reload && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: () => window.location.reload(), children: [_jsx(Icon, { icon: RotateCw, size: 14 }), t('action.reload')] })), _jsx(ButtonGroup, { children: _jsx(IconButton, { icon: Copy, size: "sm", label: t('action.copyError'), onClick: () => copyText(errorReport(label, error, componentStack)) }) })] })] }) }));
+function ErrorFallback(t0) {
+  const $ = _c(46);
+  const {
+    label,
+    error,
+    componentStack,
+    compact,
+    reload,
+    className,
+    onRetry
+  } = t0;
+  const {
+    t
+  } = useTranslation("ui");
+  const t1 = compact ? "p-3" : "p-6";
+  let t2;
+  if ($[0] !== className || $[1] !== t1) {
+    t2 = clsx("grid place-items-center overflow-auto bg-surface", t1, className);
+    $[0] = className;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const t3 = compact ? "gap-1" : "gap-2";
+  let t4;
+  if ($[3] !== t3) {
+    t4 = clsx("flex max-w-[360px] flex-col items-center text-center", t3);
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== compact) {
+    t5 = !compact && /*#__PURE__*/_jsx(Icon, {
+      icon: TriangleAlert,
+      size: 20,
+      className: "text-status-error"
+    });
+    $[5] = compact;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== label) {
+    t6 = /*#__PURE__*/_jsx("p", {
+      className: "text-sm font-medium text-text",
+      children: label
+    });
+    $[7] = label;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== error) {
+    t7 = errorMessageOf(error);
+    $[9] = error;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== t7) {
+    t8 = /*#__PURE__*/_jsx("p", {
+      className: "line-clamp-4 text-xs break-words text-text-muted",
+      children: t7
+    });
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  const t9 = compact ? "mt-1" : "mt-2";
+  let t10;
+  if ($[13] !== t9) {
+    t10 = clsx("flex items-center gap-2", t9);
+    $[13] = t9;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  let t11;
+  if ($[15] !== t) {
+    t11 = t("action.retry");
+    $[15] = t;
+    $[16] = t11;
+  } else {
+    t11 = $[16];
+  }
+  let t12;
+  if ($[17] !== onRetry || $[18] !== t11) {
+    t12 = /*#__PURE__*/_jsx(Button, {
+      variant: "secondary",
+      size: "sm",
+      onClick: onRetry,
+      children: t11
+    });
+    $[17] = onRetry;
+    $[18] = t11;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== reload || $[21] !== t) {
+    t13 = reload && /*#__PURE__*/_jsxs(Button, {
+      variant: "secondary",
+      size: "sm",
+      onClick: _temp,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: RotateCw,
+        size: 14
+      }), t("action.reload")]
+    });
+    $[20] = reload;
+    $[21] = t;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  let t14;
+  if ($[23] !== t) {
+    t14 = t("action.copyError");
+    $[23] = t;
+    $[24] = t14;
+  } else {
+    t14 = $[24];
+  }
+  let t15;
+  if ($[25] !== componentStack || $[26] !== error || $[27] !== label) {
+    t15 = () => copyText(errorReport(label, error, componentStack));
+    $[25] = componentStack;
+    $[26] = error;
+    $[27] = label;
+    $[28] = t15;
+  } else {
+    t15 = $[28];
+  }
+  let t16;
+  if ($[29] !== t14 || $[30] !== t15) {
+    t16 = /*#__PURE__*/_jsx(ButtonGroup, {
+      children: /*#__PURE__*/_jsx(IconButton, {
+        icon: Copy,
+        size: "sm",
+        label: t14,
+        onClick: t15
+      })
+    });
+    $[29] = t14;
+    $[30] = t15;
+    $[31] = t16;
+  } else {
+    t16 = $[31];
+  }
+  let t17;
+  if ($[32] !== t10 || $[33] !== t12 || $[34] !== t13 || $[35] !== t16) {
+    t17 = /*#__PURE__*/_jsxs("div", {
+      className: t10,
+      children: [t12, t13, t16]
+    });
+    $[32] = t10;
+    $[33] = t12;
+    $[34] = t13;
+    $[35] = t16;
+    $[36] = t17;
+  } else {
+    t17 = $[36];
+  }
+  let t18;
+  if ($[37] !== t17 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t8) {
+    t18 = /*#__PURE__*/_jsxs("div", {
+      className: t4,
+      children: [t5, t6, t8, t17]
+    });
+    $[37] = t17;
+    $[38] = t4;
+    $[39] = t5;
+    $[40] = t6;
+    $[41] = t8;
+    $[42] = t18;
+  } else {
+    t18 = $[42];
+  }
+  let t19;
+  if ($[43] !== t18 || $[44] !== t2) {
+    t19 = /*#__PURE__*/_jsx("div", {
+      role: "alert",
+      className: t2,
+      children: t18
+    });
+    $[43] = t18;
+    $[44] = t2;
+    $[45] = t19;
+  } else {
+    t19 = $[45];
+  }
+  return t19;
 }
 /*
  * Keeps a render failure to the subtree it happened in. Without one React unmounts the whole tree,
  * and whatever lives in it (an embedded page, a running terminal) goes down with it. Key it so it
  * resets only while it holds an error: `resetKeys` for what the children draw from.
  */
+function _temp() {
+  return window.location.reload();
+}
 export class ErrorBoundary extends Component {
-    state = CLEAR;
-    static getDerivedStateFromError(error) {
-        return { error, failed: true };
-    }
-    componentDidCatch(error, info) {
-        console.error(`${this.props.label}:`, error, info.componentStack);
-        this.setState({ componentStack: info.componentStack ?? null });
+  state = CLEAR;
+  static getDerivedStateFromError(error) {
+    return {
+      error,
+      failed: true
+    };
+  }
+  componentDidCatch(error, info) {
+    console.error(`${this.props.label}:`, error, info.componentStack);
+    this.setState({
+      componentStack: info.componentStack ?? null
+    });
+  }
+  componentDidUpdate(previous) {
+    if (shouldReset(this.state.failed, previous.resetKeys ?? [], this.props.resetKeys ?? [])) {
+      this.reset();
     }
-    componentDidUpdate(previous) {
-        if (shouldReset(this.state.failed, previous.resetKeys ?? [], this.props.resetKeys ?? [])) {
-            this.reset();
-        }
+  }
+  reset() {
+    this.setState(CLEAR);
+  }
+  render() {
+    if (!this.state.failed) {
+      return this.props.children;
     }
-    reset() {
-        this.setState(CLEAR);
-    }
-    render() {
-        if (!this.state.failed) {
-            return this.props.children;
-        }
-        const { label, compact = false, reload = false, className = 'absolute inset-0' } = this.props;
-        return (_jsx(ErrorFallback, { label: label, error: this.state.error, componentStack: this.state.componentStack, compact: compact, reload: reload, className: className, onRetry: () => this.reset() }));
-    }
-}
+    const {
+      label,
+      compact = false,
+      reload = false,
+      className = 'absolute inset-0'
+    } = this.props;
+    return /*#__PURE__*/_jsx(ErrorFallback, {
+      label: label,
+      error: this.state.error,
+      componentStack: this.state.componentStack,
+      compact: compact,
+      reload: reload,
+      className: className,
+      onRetry: () => this.reset()
+    });
+  }
+}