@grafana/plugin-ui 0.10.8 → 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) => {
@@ -9595,16 +9608,15 @@ const QueryBuilderHints = ({
   buildDataQueryFromQueryString,
   buildQueryStringFromDataQuery
 }) => {
-  const [hints, setHints] = React.useState([]);
   const styles = ui.useStyles2(getStyles$2);
-  React.useEffect(() => {
+  const hints = React.useMemo(() => {
     var _a;
     const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
     const hints2 = (_a = datasource.getQueryHints) == null ? undefined : _a.call(datasource, dataQuery, (data == null ? undefined : data.series) || []).filter((hint) => {
       var _a2;
       return (_a2 = hint.fix) == null ? undefined : _a2.action;
     });
-    setHints(hints2 != null ? hints2 : []);
+    return hints2 != null ? hints2 : [];
   }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);
   return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, hints.length > 0 && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.container }, hints.map((hint) => {
     var _a, _b, _c, _d;