@adecore/editor-react 0.31.11 → 0.32.0

package/dist/PickPopup.js

@@ -1,47 +1,317 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useId, useLayoutEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { PathText } from './PathText.js';
+import { PathText } from "./PathText.js";
 import { keepFocusOutOfList } from './popup-focus.js';
 import { placePopup } from './popup-placement.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CARD = 'fixed top-0 left-0 z-(--z-popup) flex w-[420px] flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)';
-function PreviewLines({ preview }) {
-    return (_jsxs("div", { className: "flex flex-col gap-px border-t border-border p-1 font-mono text-code", children: [preview.removed.map((line, index) => (_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "text-status-error", children: "\u2212" }), _jsx("span", { className: "min-w-0 truncate", children: line })] }, `-${index}`))), preview.added.map((line, index) => (_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "text-status-idle", children: "+" }), _jsx("span", { className: "min-w-0 truncate", children: line })] }, `+${index}`))), preview.note !== null && _jsx("div", { className: "px-1.5 font-sans text-xs text-text-muted", children: preview.note }), preview.refusal !== undefined && (_jsx("div", { role: "alert", className: "px-1.5 py-0.5 font-sans text-xs text-status-error", children: preview.refusal }))] }));
+function PreviewLines(t0) {
+  const $ = _c(13);
+  const {
+    preview
+  } = t0;
+  let t1;
+  if ($[0] !== preview.removed) {
+    t1 = preview.removed.map(_temp);
+    $[0] = preview.removed;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== preview.added) {
+    t2 = preview.added.map(_temp2);
+    $[2] = preview.added;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== preview.note) {
+    t3 = preview.note !== null && /*#__PURE__*/_jsx("div", {
+      className: "px-1.5 font-sans text-xs text-text-muted",
+      children: preview.note
+    });
+    $[4] = preview.note;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== preview.refusal) {
+    t4 = preview.refusal !== undefined && /*#__PURE__*/_jsx("div", {
+      role: "alert",
+      className: "px-1.5 py-0.5 font-sans text-xs text-status-error",
+      children: preview.refusal
+    });
+    $[6] = preview.refusal;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-px border-t border-border p-1 font-mono text-code",
+      children: [t1, t2, t3, t4]
+    });
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
 }
 /*
  * The list of an editor's pick feature under the character it belongs to. A press on a row never takes
  * the focus from the editor, so the keys keep going to it while the list is open.
  */
-export function PickPopup({ language, view, rect }) {
-    const listId = useId();
-    const card = useRef(null);
-    const activeRow = useRef(null);
-    // Every render: the character moves with the scroll, and the list changes size with its preview.
-    useLayoutEffect(() => {
-        const element = card.current;
-        if (element === null) {
-            return;
-        }
-        const placed = placePopup(rect, { width: element.offsetWidth, height: element.offsetHeight }, { width: window.innerWidth, height: window.innerHeight }, { gap: 2 });
-        element.style.left = `${Math.round(placed.left)}px`;
-        element.style.top = `${Math.round(placed.top)}px`;
-        element.style.maxHeight = `${Math.floor(placed.maxHeight)}px`;
-        element.style.visibility = 'visible';
-    });
-    useLayoutEffect(() => {
-        activeRow.current?.scrollIntoView({ block: 'nearest' });
-    }, [view.active]);
-    const optionIds = new Map();
+function _temp2(line_0, index_0) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre",
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "text-status-idle",
+      children: "+"
+    }), /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 truncate",
+      children: line_0
+    })]
+  }, `+${index_0}`);
+}
+function _temp(line, index) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre",
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "text-status-error",
+      children: "\u2212"
+    }), /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 truncate",
+      children: line
+    })]
+  }, `-${index}`);
+}
+export function PickPopup(t0) {
+  const $ = _c(39);
+  const {
+    language,
+    view,
+    rect
+  } = t0;
+  const listId = useId();
+  const card = useRef(null);
+  const activeRow = useRef(null);
+  let t1;
+  if ($[0] !== rect) {
+    t1 = () => {
+      const element = card.current;
+      if (element === null) {
+        return;
+      }
+      const placed = placePopup(rect, {
+        width: element.offsetWidth,
+        height: element.offsetHeight
+      }, {
+        width: window.innerWidth,
+        height: window.innerHeight
+      }, {
+        gap: 2
+      });
+      element.style.left = `${Math.round(placed.left)}px`;
+      element.style.top = `${Math.round(placed.top)}px`;
+      element.style.maxHeight = `${Math.floor(placed.maxHeight)}px`;
+      element.style.visibility = "visible";
+    };
+    $[0] = rect;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useLayoutEffect(t1);
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      activeRow.current?.scrollIntoView({
+        block: "nearest"
+      });
+    };
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== view.active) {
+    t3 = [view.active];
+    $[3] = view.active;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  useLayoutEffect(t2, t3);
+  let optionIds;
+  if ($[5] !== listId || $[6] !== view.groups) {
+    optionIds = new Map();
     for (const group of view.groups) {
-        for (const row of group.rows) {
-            optionIds.set(row.id, `${listId}-option-${optionIds.size}`);
-        }
+      for (const row of group.rows) {
+        optionIds.set(row.id, `${listId}-option-${optionIds.size}`);
+      }
     }
-    const activeId = optionIds.get(view.active);
-    // The focus stays in the text, so the input is what names the list and its active option.
-    useLayoutEffect(() => {
-        language.editor.setInputPopup({ controls: listId, activeDescendant: activeId });
-        return () => language.editor.setInputPopup(null);
-    }, [language, listId, activeId]);
-    return createPortal(_jsxs("div", { ref: card, className: CARD, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), ...keepFocusOutOfList(() => language.editor.focus()), children: [view.title !== null && _jsx("div", { className: "border-b border-border px-3 py-1.5 text-xs text-text-muted", children: view.title }), _jsx("div", { id: listId, role: "listbox", className: "min-h-0 flex-1 overflow-y-auto p-1", children: view.groups.map((group, groupIndex) => (_jsxs("div", { role: "group", className: "flex flex-col", children: [group.title !== null && _jsx("div", { className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint", children: group.title }), group.rows.map((row) => (_jsxs("button", { id: optionIds.get(row.id), ref: row.id === view.active ? activeRow : undefined, type: "button", role: "option", tabIndex: -1, "aria-selected": row.id === view.active, "data-active": row.id === view.active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => language.pick.choose(row.id), children: [_jsx("span", { className: row.path ? 'shrink-0' : 'min-w-0 truncate', children: row.label }), row.path ? (_jsx(PathText, { path: row.detail, className: "ml-auto font-mono text-text-faint" })) : (_jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: row.id === view.active && row.detail === '' ? '↵' : row.detail }))] }, row.id)))] }, group.title ?? groupIndex))) }), view.preview !== null && _jsx(PreviewLines, { preview: view.preview })] }), document.body);
+    $[5] = listId;
+    $[6] = view.groups;
+    $[7] = optionIds;
+  } else {
+    optionIds = $[7];
+  }
+  let t4;
+  if ($[8] !== optionIds || $[9] !== view.active) {
+    t4 = optionIds.get(view.active);
+    $[8] = optionIds;
+    $[9] = view.active;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const activeId = t4;
+  let t5;
+  if ($[11] !== activeId || $[12] !== language.editor || $[13] !== listId) {
+    t5 = () => {
+      language.editor.setInputPopup({
+        controls: listId,
+        activeDescendant: activeId
+      });
+      return () => language.editor.setInputPopup(null);
+    };
+    $[11] = activeId;
+    $[12] = language.editor;
+    $[13] = listId;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== activeId || $[16] !== language || $[17] !== listId) {
+    t6 = [language, listId, activeId];
+    $[15] = activeId;
+    $[16] = language;
+    $[17] = listId;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  useLayoutEffect(t5, t6);
+  let t7;
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = {
+      visibility: "hidden"
+    };
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== language.editor) {
+    t8 = keepFocusOutOfList(() => language.editor.focus());
+    $[20] = language.editor;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  let t9;
+  if ($[22] !== view.title) {
+    t9 = view.title !== null && /*#__PURE__*/_jsx("div", {
+      className: "border-b border-border px-3 py-1.5 text-xs text-text-muted",
+      children: view.title
+    });
+    $[22] = view.title;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== language.pick || $[25] !== optionIds || $[26] !== view.active || $[27] !== view.groups) {
+    t10 = view.groups.map((group_0, groupIndex) => /*#__PURE__*/_jsxs("div", {
+      role: "group",
+      className: "flex flex-col",
+      children: [group_0.title !== null && /*#__PURE__*/_jsx("div", {
+        className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint",
+        children: group_0.title
+      }), group_0.rows.map(row_0 => /*#__PURE__*/_jsxs("button", {
+        id: optionIds.get(row_0.id),
+        ref: row_0.id === view.active ? activeRow : undefined,
+        type: "button",
+        role: "option",
+        tabIndex: -1,
+        "aria-selected": row_0.id === view.active,
+        "data-active": row_0.id === view.active,
+        className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row",
+        onClick: () => language.pick.choose(row_0.id),
+        children: [/*#__PURE__*/_jsx("span", {
+          className: row_0.path ? "shrink-0" : "min-w-0 truncate",
+          children: row_0.label
+        }), row_0.path ? /*#__PURE__*/_jsx(PathText, {
+          path: row_0.detail,
+          className: "ml-auto font-mono text-text-faint"
+        }) : /*#__PURE__*/_jsx("span", {
+          className: "ml-auto shrink-0 font-mono text-text-faint",
+          children: row_0.id === view.active && row_0.detail === "" ? "\u21B5" : row_0.detail
+        })]
+      }, row_0.id))]
+    }, group_0.title ?? groupIndex));
+    $[24] = language.pick;
+    $[25] = optionIds;
+    $[26] = view.active;
+    $[27] = view.groups;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  let t11;
+  if ($[29] !== listId || $[30] !== t10) {
+    t11 = /*#__PURE__*/_jsx("div", {
+      id: listId,
+      role: "listbox",
+      className: "min-h-0 flex-1 overflow-y-auto p-1",
+      children: t10
+    });
+    $[29] = listId;
+    $[30] = t10;
+    $[31] = t11;
+  } else {
+    t11 = $[31];
+  }
+  let t12;
+  if ($[32] !== view.preview) {
+    t12 = view.preview !== null && /*#__PURE__*/_jsx(PreviewLines, {
+      preview: view.preview
+    });
+    $[32] = view.preview;
+    $[33] = t12;
+  } else {
+    t12 = $[33];
+  }
+  let t13;
+  if ($[34] !== t11 || $[35] !== t12 || $[36] !== t8 || $[37] !== t9) {
+    t13 = createPortal(/*#__PURE__*/_jsxs("div", {
+      ref: card,
+      className: CARD,
+      style: t7,
+      onPointerDown: _temp3,
+      ...t8,
+      children: [t9, t11, t12]
+    }), document.body);
+    $[34] = t11;
+    $[35] = t12;
+    $[36] = t8;
+    $[37] = t9;
+    $[38] = t13;
+  } else {
+    t13 = $[38];
+  }
+  return t13;
 }
+function _temp3(event) {
+  return event.preventDefault();
+}