@grafana/plugin-ui 0.10.9 → 0.10.10

package/dist/cjs/index.cjs

@@ -2880,6 +2880,18 @@ const standardSQLLanguageDefinition = {
   completionProvider: getStandardSQLCompletionProvider
 };
 
+function useLatestCallback(callback) {
+  const ref = React.useRef(callback);
+  React.useEffect(() => {
+    ref.current = callback;
+  });
+  const hasCallback = Boolean(callback);
+  return React.useMemo(
+    () => hasCallback ? (...args) => ref.current(...args) : undefined,
+    [hasCallback]
+  );
+}
+
 const STANDARD_SQL_LANGUAGE = "sql";
 const LANGUAGES_CACHE = /* @__PURE__ */ new Map();
 const INSTANCE_CACHE = /* @__PURE__ */ new Map();
@@ -2894,6 +2906,7 @@ const SQLEditor = ({
 }) => {
   const monacoRef = React.useRef(null);
   const langUid = React.useRef();
+  const stableOnChange = useLatestCallback(onChange);
   const id = React.useMemo(() => {
     const uid = uuid.v4();
     const id2 = `${language.id}-${uid}`;
@@ -2914,7 +2927,7 @@ const SQLEditor = ({
     }
   }, []);
   const onSqlBlur = (text) => {
-    onChange && onChange(text, false);
+    stableOnChange && stableOnChange(text, false);
     onBlur && onBlur(text);
   };
   return /* @__PURE__ */ React__namespace.default.createElement("div", { style: { width } }, /* @__PURE__ */ React__namespace.default.createElement(
@@ -2931,14 +2944,14 @@ const SQLEditor = ({
         monacoRef.current = editor;
         editor.onDidChangeModelContent((e) => {
           const text = editor.getValue();
-          if (onChange) {
-            onChange(text, false);
+          if (stableOnChange) {
+            stableOnChange(text, false);
           }
         });
         editor.addCommand(m.KeyMod.CtrlCmd | m.KeyCode.Enter, () => {
           const text = editor.getValue();
-          if (onChange) {
-            onChange(text, true);
+          if (stableOnChange) {
+            stableOnChange(text, true);
           }
         });
         editor.onKeyUp((e) => {