@adecore/editor-react 0.31.11 → 0.32.0

package/dist/PanelResizeHandle.js

@@ -1,71 +1,204 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PANEL_BODY_MIN, PANEL_KEY_STEP, availableHeightOf, clampPanelBody, panelBodyMax } from './panel-size.js';
 import { realTimers, revealRow } from './timers.js';
 /* The bottom edge of a panel: a drag, or the arrow keys, change the height of its body. */
-export function PanelResizeHandle({ container, height, onHeight, onCommit }) {
-    const { t } = useTranslation('editor');
-    const drag = useRef(null);
-    const [dragging, setDragging] = useState(false);
-    const [max, setMax] = useState(() => panelBodyMax(availableHeightOf(container)));
-    useEffect(() => {
-        const viewport = container.closest('.se-viewport');
-        const Observer = viewport?.ownerDocument.defaultView?.ResizeObserver;
-        if (viewport === null || viewport === undefined || Observer === undefined) {
-            return;
-        }
-        const observer = new Observer(() => setMax(panelBodyMax(availableHeightOf(container))));
-        observer.observe(viewport);
-        return () => observer.disconnect();
-    }, [container]);
-    function settle(value, from) {
-        const next = clampPanelBody(value, availableHeightOf(container));
-        onHeight(next);
-        if (next !== from) {
-            onCommit(next);
-            revealRow(realTimers, container);
-        }
-    }
-    function heightAt(clientY) {
-        return clampPanelBody(drag.current.startHeight + clientY - drag.current.startY, availableHeightOf(container));
-    }
-    function down(event) {
-        if (event.button !== 0) {
-            return;
-        }
-        event.currentTarget.setPointerCapture(event.pointerId);
-        drag.current = { startY: event.clientY, startHeight: height, lastY: event.clientY };
-        setDragging(true);
-    }
-    function move(event) {
-        if (drag.current !== null) {
-            drag.current.lastY = event.clientY;
-            onHeight(heightAt(event.clientY));
-        }
-    }
-    // Also the end of a drag whose capture was lost, such as a container that was replaced under the pointer.
-    function end(event) {
-        if (drag.current === null) {
-            return;
-        }
-        const { startHeight } = drag.current;
-        const next = heightAt(drag.current.lastY);
-        drag.current = null;
-        setDragging(false);
-        event.currentTarget.releasePointerCapture?.(event.pointerId);
-        settle(next, startHeight);
-    }
-    function key(event) {
-        const step = event.shiftKey ? PANEL_KEY_STEP * 4 : PANEL_KEY_STEP;
-        const end = panelBodyMax(availableHeightOf(container));
-        const target = { ArrowUp: height - step, ArrowDown: height + step, Home: PANEL_BODY_MIN, End: end }[event.key];
-        if (target === undefined) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        settle(target, height);
-    }
-    return (_jsx("div", { role: "separator", "aria-orientation": "horizontal", "aria-label": t('language.panel.resize'), "aria-valuemin": PANEL_BODY_MIN, "aria-valuemax": max, "aria-valuenow": height, tabIndex: 0, "data-dragging": dragging, className: "absolute inset-x-0 bottom-0 z-10 h-1 cursor-row-resize touch-none outline-none hover:bg-accent-soft focus-visible:bg-accent-soft data-[dragging=true]:bg-accent-soft", onPointerDown: down, onPointerMove: move, onPointerUp: end, onPointerCancel: end, onLostPointerCapture: end, onKeyDown: key }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PanelResizeHandle(t0) {
+  const $ = _c(34);
+  const {
+    container,
+    height,
+    onHeight,
+    onCommit
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  const drag = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  let t1;
+  if ($[0] !== container) {
+    t1 = () => panelBodyMax(availableHeightOf(container));
+    $[0] = container;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [max, setMax] = useState(t1);
+  let t2;
+  let t3;
+  if ($[2] !== container) {
+    t2 = () => {
+      const viewport = container.closest(".se-viewport");
+      const Observer = viewport?.ownerDocument.defaultView?.ResizeObserver;
+      if (viewport === null || viewport === undefined || Observer === undefined) {
+        return;
+      }
+      const observer = new Observer(() => setMax(panelBodyMax(availableHeightOf(container))));
+      observer.observe(viewport);
+      return () => observer.disconnect();
+    };
+    t3 = [container];
+    $[2] = container;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t2 = $[3];
+    t3 = $[4];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[5] !== container || $[6] !== onCommit || $[7] !== onHeight) {
+    t4 = function settle(value, from) {
+      const next = clampPanelBody(value, availableHeightOf(container));
+      onHeight(next);
+      if (next !== from) {
+        onCommit(next);
+        revealRow(realTimers, container);
+      }
+    };
+    $[5] = container;
+    $[6] = onCommit;
+    $[7] = onHeight;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const settle = t4;
+  let t5;
+  if ($[9] !== container) {
+    t5 = function heightAt(clientY) {
+      return clampPanelBody(drag.current.startHeight + clientY - drag.current.startY, availableHeightOf(container));
+    };
+    $[9] = container;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const heightAt = t5;
+  let t6;
+  if ($[11] !== height) {
+    t6 = function down(event) {
+      if (event.button !== 0) {
+        return;
+      }
+      event.currentTarget.setPointerCapture(event.pointerId);
+      drag.current = {
+        startY: event.clientY,
+        startHeight: height,
+        lastY: event.clientY
+      };
+      setDragging(true);
+    };
+    $[11] = height;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  const down = t6;
+  let t7;
+  if ($[13] !== heightAt || $[14] !== onHeight) {
+    t7 = function move(event_0) {
+      if (drag.current !== null) {
+        drag.current.lastY = event_0.clientY;
+        onHeight(heightAt(event_0.clientY));
+      }
+    };
+    $[13] = heightAt;
+    $[14] = onHeight;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  const move = t7;
+  let t8;
+  if ($[16] !== heightAt || $[17] !== settle) {
+    t8 = function end(event_1) {
+      if (drag.current === null) {
+        return;
+      }
+      const {
+        startHeight
+      } = drag.current;
+      const next_0 = heightAt(drag.current.lastY);
+      drag.current = null;
+      setDragging(false);
+      event_1.currentTarget.releasePointerCapture?.(event_1.pointerId);
+      settle(next_0, startHeight);
+    };
+    $[16] = heightAt;
+    $[17] = settle;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  const end = t8;
+  let t9;
+  if ($[19] !== container || $[20] !== height || $[21] !== settle) {
+    t9 = function key(event_2) {
+      const step = event_2.shiftKey ? PANEL_KEY_STEP * 4 : PANEL_KEY_STEP;
+      const end_0 = panelBodyMax(availableHeightOf(container));
+      const target = {
+        ArrowUp: height - step,
+        ArrowDown: height + step,
+        Home: PANEL_BODY_MIN,
+        End: end_0
+      }[event_2.key];
+      if (target === undefined) {
+        return;
+      }
+      event_2.preventDefault();
+      event_2.stopPropagation();
+      settle(target, height);
+    };
+    $[19] = container;
+    $[20] = height;
+    $[21] = settle;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  const key = t9;
+  let t10;
+  if ($[23] !== t) {
+    t10 = t("language.panel.resize");
+    $[23] = t;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  let t11;
+  if ($[25] !== down || $[26] !== dragging || $[27] !== end || $[28] !== height || $[29] !== key || $[30] !== max || $[31] !== move || $[32] !== t10) {
+    t11 = /*#__PURE__*/_jsx("div", {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      "aria-label": t10,
+      "aria-valuemin": PANEL_BODY_MIN,
+      "aria-valuemax": max,
+      "aria-valuenow": height,
+      tabIndex: 0,
+      "data-dragging": dragging,
+      className: "absolute inset-x-0 bottom-0 z-10 h-1 cursor-row-resize touch-none outline-none hover:bg-accent-soft focus-visible:bg-accent-soft data-[dragging=true]:bg-accent-soft",
+      onPointerDown: down,
+      onPointerMove: move,
+      onPointerUp: end,
+      onPointerCancel: end,
+      onLostPointerCapture: end,
+      onKeyDown: key
+    });
+    $[25] = down;
+    $[26] = dragging;
+    $[27] = end;
+    $[28] = height;
+    $[29] = key;
+    $[30] = max;
+    $[31] = move;
+    $[32] = t10;
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  return t11;
+}

package/dist/PathText.js

@@ -1,12 +1,54 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Tooltip } from '@adecore/ui';
 /*
  * A path that gives way from its start, so the end of it, which names the place, stays readable. The
  * full path is in the tooltip. The `bdi` keeps the slashes in reading order inside the right-to-left box.
  */
-export function PathText({ path, className = '' }) {
-    if (path === '') {
-        return null;
-    }
-    return (_jsx(Tooltip, { label: path, children: _jsx("span", { className: `min-w-0 overflow-hidden text-left text-ellipsis whitespace-nowrap [direction:rtl] ${className}`, children: _jsx("bdi", { children: path }) }) }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PathText(t0) {
+  const $ = _c(8);
+  const {
+    path,
+    className: t1
+  } = t0;
+  const className = t1 === undefined ? "" : t1;
+  if (path === "") {
+    return null;
+  }
+  const t2 = `min-w-0 overflow-hidden text-left text-ellipsis whitespace-nowrap [direction:rtl] ${className}`;
+  let t3;
+  if ($[0] !== path) {
+    t3 = /*#__PURE__*/_jsx("bdi", {
+      children: path
+    });
+    $[0] = path;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== t2 || $[3] !== t3) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      className: t2,
+      children: t3
+    });
+    $[2] = t2;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== path || $[6] !== t4) {
+    t5 = /*#__PURE__*/_jsx(Tooltip, {
+      label: path,
+      children: t4
+    });
+    $[5] = path;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
+}