@adecore/ui 0.31.11 → 0.32.0

package/dist/settings/SettingsRow.js

@@ -1,30 +1,217 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef } from 'react';
 import clsx from 'clsx';
-import { Icon } from '../Icon.js';
+import { Icon } from "../Icon.js";
 import { mergeRefs } from '../merge-refs.js';
 import { useSettingsTarget } from './target.js';
 /* How long a row a search result jumped to stays lit. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TARGET_MS = 1600;
 /* An icon beside text that may wrap: the box is one line of `text-sm` high, so the icon sits on the first line. */
-export function TopIcon({ icon, size = 16, className, ref }) {
-    return (_jsx("span", { ref: ref, className: "flex h-5.5 shrink-0 items-center", children: _jsx(Icon, { icon: icon, size: size, className: className }) }));
+export function TopIcon(t0) {
+  const $ = _c(7);
+  const {
+    icon,
+    size: t1,
+    className,
+    ref
+  } = t0;
+  const size = t1 === undefined ? 16 : t1;
+  let t2;
+  if ($[0] !== className || $[1] !== icon || $[2] !== size) {
+    t2 = /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: size,
+      className: className
+    });
+    $[0] = className;
+    $[1] = icon;
+    $[2] = size;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== ref || $[5] !== t2) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      className: "flex h-5.5 shrink-0 items-center",
+      children: t2
+    });
+    $[4] = ref;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 }
 /*
  * One setting: what it is on the left, the control on the right. Where the two do not fit side by
  * side (a tablet, a narrow window) the control wraps under the label instead of widening the dialog.
  */
-export function SettingsRow({ label, description, control, children, muted = false, leading, indent = false, searchId, className, ref }) {
-    const row = useRef(null);
-    const { target, shown } = useSettingsTarget();
-    const targeted = searchId !== undefined && target === searchId;
-    useEffect(() => {
-        if (!targeted) {
-            return;
-        }
-        row.current?.scrollIntoView({ block: 'center' });
-        const timer = window.setTimeout(shown, TARGET_MS);
-        return () => window.clearTimeout(timer);
-    }, [targeted, shown]);
-    return (_jsxs("div", { ref: mergeRefs(row, ref), "data-settings-row": searchId, className: clsx('flex min-w-0 flex-col gap-3 pr-4.5 transition-colors duration-500 first:rounded-t-xl last:rounded-b-xl', indent ? 'pl-14.5' : 'pl-4.5', description || children || leading ? 'py-3.5' : 'py-3', targeted && 'bg-accent-soft duration-0', className), children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-5 gap-y-2", children: [_jsxs("div", { className: "flex min-w-0 grow basis-60 items-start gap-3", children: [leading, _jsxs("div", { className: "min-w-0 grow", children: [_jsx("div", { className: clsx('text-sm break-words', muted ? 'text-text-muted' : 'text-text'), children: label }), description && _jsx("div", { className: "mt-0.5 text-xs break-words text-text-muted", children: description })] })] }), control && _jsx("div", { className: "ml-auto flex max-w-full min-w-0 flex-wrap items-center justify-end gap-2", children: control })] }), children] }));
-}
+export function SettingsRow(t0) {
+  const $ = _c(35);
+  const {
+    label,
+    description,
+    control,
+    children,
+    muted: t1,
+    leading,
+    indent: t2,
+    searchId,
+    className,
+    ref
+  } = t0;
+  const muted = t1 === undefined ? false : t1;
+  const indent = t2 === undefined ? false : t2;
+  const row = useRef(null);
+  const {
+    target,
+    shown
+  } = useSettingsTarget();
+  const targeted = searchId !== undefined && target === searchId;
+  let t3;
+  let t4;
+  if ($[0] !== shown || $[1] !== targeted) {
+    t3 = () => {
+      if (!targeted) {
+        return;
+      }
+      row.current?.scrollIntoView({
+        block: "center"
+      });
+      const timer = window.setTimeout(shown, TARGET_MS);
+      return () => window.clearTimeout(timer);
+    };
+    t4 = [targeted, shown];
+    $[0] = shown;
+    $[1] = targeted;
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t3 = $[2];
+    t4 = $[3];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[4] !== ref) {
+    t5 = mergeRefs(row, ref);
+    $[4] = ref;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const t6 = indent ? "pl-14.5" : "pl-4.5";
+  const t7 = description || children || leading ? "py-3.5" : "py-3";
+  const t8 = targeted && "bg-accent-soft duration-0";
+  let t9;
+  if ($[6] !== className || $[7] !== t6 || $[8] !== t7 || $[9] !== t8) {
+    t9 = clsx("flex min-w-0 flex-col gap-3 pr-4.5 transition-colors duration-500 first:rounded-t-xl last:rounded-b-xl", t6, t7, t8, className);
+    $[6] = className;
+    $[7] = t6;
+    $[8] = t7;
+    $[9] = t8;
+    $[10] = t9;
+  } else {
+    t9 = $[10];
+  }
+  const t10 = muted ? "text-text-muted" : "text-text";
+  let t11;
+  if ($[11] !== t10) {
+    t11 = clsx("text-sm break-words", t10);
+    $[11] = t10;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  let t12;
+  if ($[13] !== label || $[14] !== t11) {
+    t12 = /*#__PURE__*/_jsx("div", {
+      className: t11,
+      children: label
+    });
+    $[13] = label;
+    $[14] = t11;
+    $[15] = t12;
+  } else {
+    t12 = $[15];
+  }
+  let t13;
+  if ($[16] !== description) {
+    t13 = description && /*#__PURE__*/_jsx("div", {
+      className: "mt-0.5 text-xs break-words text-text-muted",
+      children: description
+    });
+    $[16] = description;
+    $[17] = t13;
+  } else {
+    t13 = $[17];
+  }
+  let t14;
+  if ($[18] !== t12 || $[19] !== t13) {
+    t14 = /*#__PURE__*/_jsxs("div", {
+      className: "min-w-0 grow",
+      children: [t12, t13]
+    });
+    $[18] = t12;
+    $[19] = t13;
+    $[20] = t14;
+  } else {
+    t14 = $[20];
+  }
+  let t15;
+  if ($[21] !== leading || $[22] !== t14) {
+    t15 = /*#__PURE__*/_jsxs("div", {
+      className: "flex min-w-0 grow basis-60 items-start gap-3",
+      children: [leading, t14]
+    });
+    $[21] = leading;
+    $[22] = t14;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  let t16;
+  if ($[24] !== control) {
+    t16 = control && /*#__PURE__*/_jsx("div", {
+      className: "ml-auto flex max-w-full min-w-0 flex-wrap items-center justify-end gap-2",
+      children: control
+    });
+    $[24] = control;
+    $[25] = t16;
+  } else {
+    t16 = $[25];
+  }
+  let t17;
+  if ($[26] !== t15 || $[27] !== t16) {
+    t17 = /*#__PURE__*/_jsxs("div", {
+      className: "flex min-w-0 flex-wrap items-center gap-x-5 gap-y-2",
+      children: [t15, t16]
+    });
+    $[26] = t15;
+    $[27] = t16;
+    $[28] = t17;
+  } else {
+    t17 = $[28];
+  }
+  let t18;
+  if ($[29] !== children || $[30] !== searchId || $[31] !== t17 || $[32] !== t5 || $[33] !== t9) {
+    t18 = /*#__PURE__*/_jsxs("div", {
+      ref: t5,
+      "data-settings-row": searchId,
+      className: t9,
+      children: [t17, children]
+    });
+    $[29] = children;
+    $[30] = searchId;
+    $[31] = t17;
+    $[32] = t5;
+    $[33] = t9;
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  return t18;
+}

package/dist/settings/SettingsSection.js

@@ -1,8 +1,98 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-import { Icon } from '../Icon.js';
+import { Icon } from "../Icon.js";
 /* A titled group of rows in one card; rows divide themselves with a hairline. Without a title it is the card alone. */
-export function SettingsSection({ title, description, icon, tag, action, footer, children, className, ref }) {
-    const hasHeader = title !== undefined || description !== undefined || tag !== undefined || action !== undefined;
-    return (_jsxs("section", { ref: ref, className: clsx('flex min-w-0 flex-col gap-2.5', className), "aria-label": title, children: [hasHeader && (_jsxs("div", { className: "flex min-w-0 flex-wrap items-end gap-x-3 gap-y-2", children: [_jsxs("div", { className: "min-w-0 grow basis-48", children: [title !== undefined && (_jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium text-text", children: [icon && _jsx(Icon, { icon: icon, size: 14, className: "shrink-0 text-text-faint" }), title] })), description !== undefined && _jsx("p", { className: "mt-0.5 text-xs break-words text-text-muted", children: description })] }), action, tag] })), _jsx("div", { className: "min-w-0 divide-y divide-border rounded-xl border border-border bg-surface bg-clip-padding", children: children }), footer && _jsx("p", { className: "text-xs text-text-faint", children: footer })] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SettingsSection(t0) {
+  const $ = _c(20);
+  const {
+    title,
+    description,
+    icon,
+    tag,
+    action,
+    footer,
+    children,
+    className,
+    ref
+  } = t0;
+  const hasHeader = title !== undefined || description !== undefined || tag !== undefined || action !== undefined;
+  let t1;
+  if ($[0] !== className) {
+    t1 = clsx("flex min-w-0 flex-col gap-2.5", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== action || $[3] !== description || $[4] !== hasHeader || $[5] !== icon || $[6] !== tag || $[7] !== title) {
+    t2 = hasHeader && /*#__PURE__*/_jsxs("div", {
+      className: "flex min-w-0 flex-wrap items-end gap-x-3 gap-y-2",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "min-w-0 grow basis-48",
+        children: [title !== undefined && /*#__PURE__*/_jsxs("h3", {
+          className: "flex items-center gap-2 text-sm font-medium text-text",
+          children: [icon && /*#__PURE__*/_jsx(Icon, {
+            icon: icon,
+            size: 14,
+            className: "shrink-0 text-text-faint"
+          }), title]
+        }), description !== undefined && /*#__PURE__*/_jsx("p", {
+          className: "mt-0.5 text-xs break-words text-text-muted",
+          children: description
+        })]
+      }), action, tag]
+    });
+    $[2] = action;
+    $[3] = description;
+    $[4] = hasHeader;
+    $[5] = icon;
+    $[6] = tag;
+    $[7] = title;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== children) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      className: "min-w-0 divide-y divide-border rounded-xl border border-border bg-surface bg-clip-padding",
+      children: children
+    });
+    $[9] = children;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== footer) {
+    t4 = footer && /*#__PURE__*/_jsx("p", {
+      className: "text-xs text-text-faint",
+      children: footer
+    });
+    $[11] = footer;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== ref || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== title) {
+    t5 = /*#__PURE__*/_jsxs("section", {
+      ref: ref,
+      className: t1,
+      "aria-label": title,
+      children: [t2, t3, t4]
+    });
+    $[13] = ref;
+    $[14] = t1;
+    $[15] = t2;
+    $[16] = t3;
+    $[17] = t4;
+    $[18] = title;
+    $[19] = t5;
+  } else {
+    t5 = $[19];
+  }
+  return t5;
+}

package/dist/settings/index.js

@@ -1,8 +1,8 @@
 /* The settings dialog and the parts a pane is built from. */
-export { ConfirmDialog } from './ConfirmDialog.js';
-export { DetailHeader } from './DetailHeader.js';
-export { MasterDetail, MasterItem } from './MasterDetail.js';
-export { SettingsDialog } from './SettingsDialog.js';
-export { SettingsRow, TopIcon } from './SettingsRow.js';
-export { SettingsSection } from './SettingsSection.js';
-export { useSettingsTarget } from './target.js';
+export { ConfirmDialog } from "./ConfirmDialog.js";
+export { DetailHeader } from "./DetailHeader.js";
+export { MasterDetail, MasterItem } from "./MasterDetail.js";
+export { SettingsDialog } from "./SettingsDialog.js";
+export { SettingsRow, TopIcon } from "./SettingsRow.js";
+export { SettingsSection } from "./SettingsSection.js";
+export { useSettingsTarget } from './target.js';

package/dist/settings/target.js

@@ -1,3 +1,8 @@
 import { createContext, useContext } from 'react';
-export const SettingsTargetContext = createContext({ target: null, shown: () => { } });
-export const useSettingsTarget = () => useContext(SettingsTargetContext);
+export const SettingsTargetContext = createContext({
+  target: null,
+  shown: () => {}
+});
+export const useSettingsTarget = () => {
+  return useContext(SettingsTargetContext);
+};

package/dist/shortcut-hints.js

@@ -4,11 +4,14 @@ const targets = new Map();
 let nextId = 0;
 /* Called by every `Tooltip` whose `kbd` is a real shortcut; a phrase about a key is no shortcut to print. */
 export const registerShortcutHint = (element, shortcut) => {
-    nextId += 1;
-    targets.set(element, { id: nextId, shortcut });
-    return () => {
-        targets.delete(element);
-    };
+  nextId += 1;
+  targets.set(element, {
+    id: nextId,
+    shortcut
+  });
+  return () => {
+    targets.delete(element);
+  };
 };
 export const shortcutHintTargets = () => targets;
 /*
@@ -17,49 +20,49 @@ export const shortcutHintTargets = () => targets;
  * a shortcut pressed in passing never flashes them.
  */
 export class ModifierHold {
-    apple;
-    onChange;
-    timer = null;
-    shown = false;
-    constructor(apple, onChange) {
-        this.apple = apple;
-        this.onChange = onChange;
-    }
-    keyDown(event) {
-        // A repeat is the key still held; only a fresh press starts the wait.
-        if (event.repeat && event.key === this.modifierKey()) {
-            return;
-        }
-        this.cancel();
-        if (event.key === this.modifierKey() && !this.otherModifierHeld(event)) {
-            this.timer = setTimeout(() => {
-                this.timer = null;
-                this.shown = true;
-                this.onChange(true);
-            }, HINT_DELAY_MS);
-        }
+  apple;
+  onChange;
+  timer = null;
+  shown = false;
+  constructor(apple, onChange) {
+    this.apple = apple;
+    this.onChange = onChange;
+  }
+  keyDown(event) {
+    // A repeat is the key still held; only a fresh press starts the wait.
+    if (event.repeat && event.key === this.modifierKey()) {
+      return;
     }
-    keyUp(event) {
-        if (event.key === this.modifierKey()) {
-            this.cancel();
-        }
+    this.cancel();
+    if (event.key === this.modifierKey() && !this.otherModifierHeld(event)) {
+      this.timer = setTimeout(() => {
+        this.timer = null;
+        this.shown = true;
+        this.onChange(true);
+      }, HINT_DELAY_MS);
     }
-    cancel() {
-        if (this.timer !== null) {
-            clearTimeout(this.timer);
-            this.timer = null;
-        }
-        if (this.shown) {
-            this.shown = false;
-            this.onChange(false);
-        }
+  }
+  keyUp(event) {
+    if (event.key === this.modifierKey()) {
+      this.cancel();
     }
-    modifierKey() {
-        return this.apple ? 'Meta' : 'Control';
+  }
+  cancel() {
+    if (this.timer !== null) {
+      clearTimeout(this.timer);
+      this.timer = null;
     }
-    otherModifierHeld(event) {
-        return event.altKey || event.shiftKey || (this.apple ? event.ctrlKey : event.metaKey);
+    if (this.shown) {
+      this.shown = false;
+      this.onChange(false);
     }
+  }
+  modifierKey() {
+    return this.apple ? 'Meta' : 'Control';
+  }
+  otherModifierHeld(event) {
+    return event.altKey || event.shiftKey || (this.apple ? event.ctrlKey : event.metaKey);
+  }
 }
 const HINT_GAP_PX = 2;
 /* Room a hint needs to be centered under its button; nearer a window edge it lines up with that edge instead. */
@@ -67,15 +70,30 @@ const EDGE_ROOM_PX = 48;
 const HINT_HEIGHT_PX = 24;
 /* Under the button, centered, and above it where the window ends first. */
 export const placeHint = (rect, viewport) => {
-    const below = rect.bottom + HINT_GAP_PX + HINT_HEIGHT_PX <= viewport.height;
-    const top = Math.round(below ? rect.bottom + HINT_GAP_PX : rect.top - HINT_GAP_PX);
-    const translateY = below ? '0' : '-100%';
-    const center = (rect.left + rect.right) / 2;
-    if (center < EDGE_ROOM_PX) {
-        return { left: Math.round(rect.left), top, translateX: '0', translateY };
-    }
-    if (center > viewport.width - EDGE_ROOM_PX) {
-        return { right: Math.round(viewport.width - rect.right), top, translateX: '0', translateY };
-    }
-    return { left: Math.round(center), top, translateX: '-50%', translateY };
-};
+  const below = rect.bottom + HINT_GAP_PX + HINT_HEIGHT_PX <= viewport.height;
+  const top = Math.round(below ? rect.bottom + HINT_GAP_PX : rect.top - HINT_GAP_PX);
+  const translateY = below ? '0' : '-100%';
+  const center = (rect.left + rect.right) / 2;
+  if (center < EDGE_ROOM_PX) {
+    return {
+      left: Math.round(rect.left),
+      top,
+      translateX: '0',
+      translateY
+    };
+  }
+  if (center > viewport.width - EDGE_ROOM_PX) {
+    return {
+      right: Math.round(viewport.width - rect.right),
+      top,
+      translateX: '0',
+      translateY
+    };
+  }
+  return {
+    left: Math.round(center),
+    top,
+    translateX: '-50%',
+    translateY
+  };
+};