@grafana/plugin-ui 0.10.0 → 0.10.2

package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useState, useMemo, useEffect } from 'react';
+import React__default, { useState, useMemo, useEffect } from 'react';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { getValueFormat, formattedValueToString } from '@grafana/data';
 import { useTheme2, Spinner, Icon } from '@grafana/ui';
@@ -58,7 +58,7 @@ function QueryValidator({ db, query, onValidate, range }) {
     return null;
   }
   const error = ((_a = state.value) == null ? undefined : _a.error) ? processErrorMessage(state.value.error) : "";
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, state.loading && /* @__PURE__ */ React.createElement("div", { className: styles.info }, /* @__PURE__ */ React.createElement(Spinner, { inline: true, size: 12 }), " Validating query..."), !state.loading && state.value && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, state.value.isValid && state.value.statistics && /* @__PURE__ */ React.createElement("div", { className: styles.valid }, /* @__PURE__ */ React.createElement(Icon, { name: "check" }), " This query will process", " ", /* @__PURE__ */ React.createElement("strong", null, formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))), " ", "when run.")), /* @__PURE__ */ React.createElement(React.Fragment, null, state.value.isError && /* @__PURE__ */ React.createElement("div", { className: styles.error }, error))));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, state.loading && /* @__PURE__ */ React__default.createElement("div", { className: styles.info }, /* @__PURE__ */ React__default.createElement(Spinner, { inline: true, size: 12 }), " Validating query..."), !state.loading && state.value && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, state.value.isValid && state.value.statistics && /* @__PURE__ */ React__default.createElement("div", { className: styles.valid }, /* @__PURE__ */ React__default.createElement(Icon, { name: "check" }), " This query will process", " ", /* @__PURE__ */ React__default.createElement("strong", null, formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))), " ", "when run.")), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, state.value.isError && /* @__PURE__ */ React__default.createElement("div", { className: styles.error }, error))));
 }
 function processErrorMessage(error) {
   const splat = error.split(":");

package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryValidator.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryValidator.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, useMemo, useEffect } from 'react';\nimport { useAsyncFn, useDebounce } from 'react-use';\nimport { formattedValueToString, getValueFormat, type TimeRange } from '@grafana/data';\nimport { Icon, Spinner, useTheme2 } from '@grafana/ui';\nimport { type DB, type SQLQuery, type ValidationResults } from '../types';\n\nexport interface QueryValidatorProps {\n  db: DB;\n  query: SQLQuery;\n  range?: TimeRange;\n  onValidate: (isValid: boolean) => void;\n}\n\nexport function QueryValidator({ db, query, onValidate, range }: QueryValidatorProps) {\n  const [validationResult, setValidationResult] = useState<ValidationResults | null>();\n  const theme = useTheme2();\n  const valueFormatter = useMemo(() => getValueFormat('bytes'), []);\n\n  const styles = useMemo(() => {\n    return {\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n    };\n  }, [theme]);\n\n  const [state, validateQuery] = useAsyncFn(\n    async (q: SQLQuery) => {\n      if (q.rawSql?.trim() === '') {\n        return null;\n      }\n\n      return await db.validateQuery(q, range);\n    },\n    [db]\n  );\n\n  const [,] = useDebounce(\n    async () => {\n      const result = await validateQuery(query);\n      if (result) {\n        setValidationResult(result);\n      }\n\n      return null;\n    },\n    1000,\n    [query, validateQuery]\n  );\n\n  useEffect(() => {\n    if (validationResult?.isError) {\n      onValidate(false);\n    }\n    if (validationResult?.isValid) {\n      onValidate(true);\n    }\n  }, [validationResult, onValidate]);\n\n  if (!state.value && !state.loading) {\n    return null;\n  }\n\n  const error = state.value?.error ? processErrorMessage(state.value.error) : '';\n\n  return (\n    <>\n      {state.loading && (\n        <div className={styles.info}>\n          <Spinner inline={true} size={12} /> Validating query...\n        </div>\n      )}\n      {!state.loading && state.value && (\n        <>\n          <>\n            {state.value.isValid && state.value.statistics && (\n              <div className={styles.valid}>\n                <Icon name=\"check\" /> This query will process{' '}\n                <strong>{formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))}</strong>{' '}\n                when run.\n              </div>\n            )}\n          </>\n\n          <>{state.value.isError && <div className={styles.error}>{error}</div>}</>\n        </>\n      )}\n    </>\n  );\n}\n\nfunction processErrorMessage(error: string) {\n  const splat = error.split(':');\n  if (splat.length > 2) {\n    return splat.slice(2).join(':');\n  }\n  return error;\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"QueryValidator.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryValidator.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, useMemo, useEffect } from 'react';\nimport { useAsyncFn, useDebounce } from 'react-use';\nimport { formattedValueToString, getValueFormat, type TimeRange } from '@grafana/data';\nimport { Icon, Spinner, useTheme2 } from '@grafana/ui';\nimport { type DB, type SQLQuery, type ValidationResults } from '../types';\n\nexport interface QueryValidatorProps {\n  db: DB;\n  query: SQLQuery;\n  range?: TimeRange;\n  onValidate: (isValid: boolean) => void;\n}\n\nexport function QueryValidator({ db, query, onValidate, range }: QueryValidatorProps) {\n  const [validationResult, setValidationResult] = useState<ValidationResults | null>();\n  const theme = useTheme2();\n  const valueFormatter = useMemo(() => getValueFormat('bytes'), []);\n\n  const styles = useMemo(() => {\n    return {\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n    };\n  }, [theme]);\n\n  const [state, validateQuery] = useAsyncFn(\n    async (q: SQLQuery) => {\n      if (q.rawSql?.trim() === '') {\n        return null;\n      }\n\n      return await db.validateQuery(q, range);\n    },\n    [db]\n  );\n\n  const [,] = useDebounce(\n    async () => {\n      const result = await validateQuery(query);\n      if (result) {\n        setValidationResult(result);\n      }\n\n      return null;\n    },\n    1000,\n    [query, validateQuery]\n  );\n\n  useEffect(() => {\n    if (validationResult?.isError) {\n      onValidate(false);\n    }\n    if (validationResult?.isValid) {\n      onValidate(true);\n    }\n  }, [validationResult, onValidate]);\n\n  if (!state.value && !state.loading) {\n    return null;\n  }\n\n  const error = state.value?.error ? processErrorMessage(state.value.error) : '';\n\n  return (\n    <>\n      {state.loading && (\n        <div className={styles.info}>\n          <Spinner inline={true} size={12} /> Validating query...\n        </div>\n      )}\n      {!state.loading && state.value && (\n        <>\n          <>\n            {state.value.isValid && state.value.statistics && (\n              <div className={styles.valid}>\n                <Icon name=\"check\" /> This query will process{' '}\n                <strong>{formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))}</strong>{' '}\n                when run.\n              </div>\n            )}\n          </>\n\n          <>{state.value.isError && <div className={styles.error}>{error}</div>}</>\n        </>\n      )}\n    </>\n  );\n}\n\nfunction processErrorMessage(error: string) {\n  const splat = error.split(':');\n  if (splat.length > 2) {\n    return splat.slice(2).join(':');\n  }\n  return error;\n}\n"],"names":["_a","React"],"mappings":"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"}

package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useState, useMemo } from 'react';
+import React__default, { useState, useMemo } from 'react';
 import { useMeasure } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import '@grafana/data';
@@ -16,7 +16,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
   const [editorRef, editorMeasure] = useMeasure();
   const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);
   const renderQueryEditor = (width, height) => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       QueryEditorRaw,
       {
         completionProvider,
@@ -26,7 +26,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
         onChange
       },
       ({ formatQuery }) => {
-        return /* @__PURE__ */ React.createElement("div", { ref: toolboxRef }, /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React__default.createElement("div", { ref: toolboxRef }, /* @__PURE__ */ React__default.createElement(
           QueryToolbox,
           {
             db,
@@ -43,12 +43,12 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
     );
   };
   const renderEditor = (standalone = false) => {
-    return standalone ? /* @__PURE__ */ React.createElement(AutoSizer, null, ({ width, height }) => {
+    return standalone ? /* @__PURE__ */ React__default.createElement(AutoSizer, null, ({ width, height }) => {
       return renderQueryEditor(width, height);
-    }) : /* @__PURE__ */ React.createElement("div", { ref: editorRef }, renderQueryEditor());
+    }) : /* @__PURE__ */ React__default.createElement("div", { ref: editorRef }, renderQueryEditor());
   };
   const renderPlaceholder = () => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       "div",
       {
         style: {
@@ -63,7 +63,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
       "Editing in expanded code editor"
     );
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isExpanded ? renderPlaceholder() : renderEditor(), isExpanded && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isExpanded ? renderPlaceholder() : renderEditor(), isExpanded && /* @__PURE__ */ React__default.createElement(
     Modal,
     {
       title: `Query ${query.refId}`,

package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\n\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\n\ninterface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {\n  onRunQuery: () => void;\n  onChange: (q: SQLQuery, processQuery: boolean) => void;\n  onValidate: (isValid: boolean) => void;\n  queryToValidate: SQLQuery;\n}\n\nexport function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps) {\n  const theme = useTheme2();\n  const styles = useStyles2(getStyles);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();\n  const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();\n\n  const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);\n\n  const renderQueryEditor = (width?: number, height?: number) => {\n    return (\n      <QueryEditorRaw\n        completionProvider={completionProvider}\n        query={query}\n        width={width}\n        height={height ? height - toolboxMeasure.height : undefined}\n        onChange={onChange}\n      >\n        {({ formatQuery }) => {\n          return (\n            <div ref={toolboxRef}>\n              <QueryToolbox\n                db={db}\n                query={queryToValidate}\n                onValidate={onValidate}\n                onFormatCode={formatQuery}\n                showTools\n                range={range}\n                onExpand={setIsExpanded}\n                isExpanded={isExpanded}\n              />\n            </div>\n          );\n        }}\n      </QueryEditorRaw>\n    );\n  };\n\n  interface AutoSizerProps {\n    width: number;\n    height: number;\n  }\n\n  const renderEditor = (standalone = false) => {\n    return standalone ? (\n      <AutoSizer>\n        {({ width, height }: AutoSizerProps) => {\n          return renderQueryEditor(width, height);\n        }}\n      </AutoSizer>\n    ) : (\n      <div ref={editorRef}>{renderQueryEditor()}</div>\n    );\n  };\n\n  const renderPlaceholder = () => {\n    return (\n      <div\n        style={{\n          width: editorMeasure.width,\n          height: editorMeasure.height,\n          background: theme.colors.background.primary,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        Editing in expanded code editor\n      </div>\n    );\n  };\n\n  return (\n    <>\n      {isExpanded ? renderPlaceholder() : renderEditor()}\n      {isExpanded && (\n        <Modal\n          title={`Query ${query.refId}`}\n          closeOnBackdropClick={false}\n          closeOnEscape={false}\n          className={styles.modal}\n          contentClassName={styles.modalContent}\n          isOpen={isExpanded}\n          onDismiss={() => {\n            setIsExpanded(false);\n          }}\n        >\n          {renderEditor(true)}\n        </Modal>\n      )}\n    </>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    modal: css`\n      width: 95vw;\n      height: 95vh;\n    `,\n    modalContent: css`\n      height: 100%;\n      padding-top: 0;\n    `,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;AAoBgB,SAAA,SAAA,CAAU,EAAE,EAAI,EAAA,KAAA,EAAO,UAAU,UAAY,EAAA,UAAA,EAAY,eAAiB,EAAA,KAAA,EAAyB,EAAA;AACjH,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,UAAA,EAAY,cAAc,CAAA,GAAI,UAA2B,EAAA;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,UAA2B,EAAA;AAE9D,EAAM,MAAA,kBAAA,GAAqB,QAAQ,MAAM,EAAA,CAAG,0BAA4B,EAAA,CAAC,EAAE,CAAC,CAAA;AAE5E,EAAM,MAAA,iBAAA,GAAoB,CAAC,KAAA,EAAgB,MAAoB,KAAA;AAC7D,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,kBAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAQ,EAAA,MAAA,GAAS,MAAS,GAAA,cAAA,CAAe,MAAS,GAAA,SAAA;AAAA,QAClD;AAAA,OAAA;AAAA,MAEC,CAAC,EAAE,WAAA,EAAkB,KAAA;AACpB,QACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAK,UACR,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,EAAA;AAAA,YACA,KAAO,EAAA,eAAA;AAAA,YACP,UAAA;AAAA,YACA,YAAc,EAAA,WAAA;AAAA,YACd,SAAS,EAAA,IAAA;AAAA,YACT,KAAA;AAAA,YACA,QAAU,EAAA,aAAA;AAAA,YACV;AAAA;AAAA,SAEJ,CAAA;AAAA;AAEJ,KACF;AAAA,GAEJ;AAOA,EAAM,MAAA,YAAA,GAAe,CAAC,UAAA,GAAa,KAAU,KAAA;AAC3C,IAAA,OAAO,6BACJ,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EACE,CAAC,EAAE,KAAA,EAAO,QAA6B,KAAA;AACtC,MAAO,OAAA,iBAAA,CAAkB,OAAO,MAAM,CAAA;AAAA,KAE1C,CAEA,mBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,GAAK,EAAA,SAAA,EAAA,EAAY,mBAAoB,CAAA;AAAA,GAE9C;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,OAAO,aAAc,CAAA,KAAA;AAAA,UACrB,QAAQ,aAAc,CAAA,MAAA;AAAA,UACtB,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,OAAA;AAAA,UACpC,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,cAAgB,EAAA;AAAA;AAClB,OAAA;AAAA,MACD;AAAA,KAED;AAAA,GAEJ;AAEA,EAAA,iEAEK,UAAa,GAAA,iBAAA,EAAsB,GAAA,YAAA,IACnC,UACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAS,MAAA,EAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,MAC3B,oBAAsB,EAAA,KAAA;AAAA,MACtB,aAAe,EAAA,KAAA;AAAA,MACf,WAAW,MAAO,CAAA,KAAA;AAAA,MAClB,kBAAkB,MAAO,CAAA,YAAA;AAAA,MACzB,MAAQ,EAAA,UAAA;AAAA,MACR,WAAW,MAAM;AACf,QAAA,aAAA,CAAc,KAAK,CAAA;AAAA;AACrB,KAAA;AAAA,IAEC,aAAa,IAAI;AAAA,GAGxB,CAAA;AAEJ;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,KAAO,EAAA,GAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAIP,YAAc,EAAA,GAAA;AAAA;AAAA;AAAA,IAAA;AAAA,GAIhB;AACF;;;;"}
+{"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\n\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\n\ninterface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {\n  onRunQuery: () => void;\n  onChange: (q: SQLQuery, processQuery: boolean) => void;\n  onValidate: (isValid: boolean) => void;\n  queryToValidate: SQLQuery;\n}\n\nexport function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps) {\n  const theme = useTheme2();\n  const styles = useStyles2(getStyles);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();\n  const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();\n\n  const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);\n\n  const renderQueryEditor = (width?: number, height?: number) => {\n    return (\n      <QueryEditorRaw\n        completionProvider={completionProvider}\n        query={query}\n        width={width}\n        height={height ? height - toolboxMeasure.height : undefined}\n        onChange={onChange}\n      >\n        {({ formatQuery }) => {\n          return (\n            <div ref={toolboxRef}>\n              <QueryToolbox\n                db={db}\n                query={queryToValidate}\n                onValidate={onValidate}\n                onFormatCode={formatQuery}\n                showTools\n                range={range}\n                onExpand={setIsExpanded}\n                isExpanded={isExpanded}\n              />\n            </div>\n          );\n        }}\n      </QueryEditorRaw>\n    );\n  };\n\n  interface AutoSizerProps {\n    width: number;\n    height: number;\n  }\n\n  const renderEditor = (standalone = false) => {\n    return standalone ? (\n      <AutoSizer>\n        {({ width, height }: AutoSizerProps) => {\n          return renderQueryEditor(width, height);\n        }}\n      </AutoSizer>\n    ) : (\n      <div ref={editorRef}>{renderQueryEditor()}</div>\n    );\n  };\n\n  const renderPlaceholder = () => {\n    return (\n      <div\n        style={{\n          width: editorMeasure.width,\n          height: editorMeasure.height,\n          background: theme.colors.background.primary,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        Editing in expanded code editor\n      </div>\n    );\n  };\n\n  return (\n    <>\n      {isExpanded ? renderPlaceholder() : renderEditor()}\n      {isExpanded && (\n        <Modal\n          title={`Query ${query.refId}`}\n          closeOnBackdropClick={false}\n          closeOnEscape={false}\n          className={styles.modal}\n          contentClassName={styles.modalContent}\n          isOpen={isExpanded}\n          onDismiss={() => {\n            setIsExpanded(false);\n          }}\n        >\n          {renderEditor(true)}\n        </Modal>\n      )}\n    </>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    modal: css`\n      width: 95vw;\n      height: 95vh;\n    `,\n    modalContent: css`\n      height: 100%;\n      padding-top: 0;\n    `,\n  };\n}\n"],"names":["React"],"mappings":"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"}

package/dist/esm/components/QueryEditor/types.js

@@ -1,4 +1,4 @@
-import 'react-awesome-query-builder';
+import '@react-awesome-query-builder/ui';
 import { toOption as toOption$1 } from '@grafana/data';
 import 'lodash';
 import '@grafana/ui';

package/dist/esm/components/QueryEditor/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/QueryEditor/types.ts"],"sourcesContent":["import { type JsonTree } from 'react-awesome-query-builder';\n\nimport {\n  type DataFrame,\n  type DataSourceJsonData,\n  type MetricFindValue,\n  type SelectableValue,\n  type TimeRange,\n  toOption as toOptionFromData,\n} from '@grafana/data';\n\nimport { type DataQuery } from '@grafana/schema';\n\nimport { type QueryWithDefaults } from './defaults';\nimport {\n  type QueryEditorFunctionExpression,\n  type QueryEditorGroupByExpression,\n  type QueryEditorPropertyExpression,\n} from './expressions';\nimport { type CompletionItemKind, type LanguageCompletionProvider } from '../SQLEditor';\n\nexport interface SqlQueryForInterpolation {\n  dataset?: string;\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  refId: string;\n  hide?: boolean;\n}\n\nexport interface SQLConnectionLimits {\n  maxOpenConns: number;\n  maxIdleConns: number;\n  connMaxLifetime: number;\n}\n\nexport interface SQLOptions extends SQLConnectionLimits, DataSourceJsonData {\n  tlsAuth: boolean;\n  tlsAuthWithCACert: boolean;\n  timezone: string;\n  tlsSkipVerify: boolean;\n  user: string;\n  database: string;\n  url: string;\n  timeInterval: string;\n}\n\n// Match the Enums Expected in SqlUtil and SqlDS\n// https://github.com/grafana/grafana-plugin-sdk-go/blob/main/data/sqlutil/query.go#L18-L29\nexport enum QueryFormat {\n  Timeseries,\n  Table,\n  Logs,\n  Trace,\n  OptionMulti,\n}\n\nexport enum EditorMode {\n  Builder = 'builder',\n  Code = 'code',\n}\n\nexport interface SQLQuery extends DataQuery {\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  dataset?: string;\n  table?: string;\n  sql?: SQLExpression;\n  editorMode?: EditorMode;\n  rawQuery?: boolean;\n}\n\nexport interface NameValue {\n  name: string;\n  value: string;\n}\n\nexport type SQLFilters = NameValue[];\n\nexport interface SQLExpression {\n  columns?: QueryEditorFunctionExpression[];\n  whereJsonTree?: JsonTree;\n  whereString?: string;\n  filters?: SQLFilters;\n  groupBy?: QueryEditorGroupByExpression[];\n  orderBy?: QueryEditorPropertyExpression;\n  orderByDirection?: 'ASC' | 'DESC';\n  limit?: number;\n  offset?: number;\n}\n\nexport interface TableSchema {\n  name?: string;\n  schema?: TableFieldSchema[];\n}\n\nexport interface TableFieldSchema {\n  name: string;\n  description?: string;\n  type: string;\n  repeated: boolean;\n  schema: TableFieldSchema[];\n}\n\nexport interface QueryRowFilter {\n  filter: boolean;\n  group: boolean;\n  order: boolean;\n  preview: boolean;\n}\n\nexport const QUERY_FORMAT_OPTIONS = [\n  { label: 'Time series', value: QueryFormat.Timeseries },\n  { label: 'Table', value: QueryFormat.Table },\n];\n\nconst backWardToOption = (value: string) => ({ label: value, value });\n\nexport const toOption = toOptionFromData ?? backWardToOption;\n\nexport interface ResourceSelectorProps {\n  disabled?: boolean;\n  className?: string;\n  applyDefault?: boolean;\n}\n// React Awesome Query builder field types.\n// These are responsible for rendering the correct UI for the field.\nexport type RAQBFieldTypes = 'text' | 'number' | 'boolean' | 'datetime' | 'date' | 'time';\n\nexport interface SQLSelectableValue extends SelectableValue {\n  type?: string;\n  raqbFieldType?: RAQBFieldTypes;\n}\n\nexport interface Aggregate {\n  id: string;\n  name: string;\n  description?: string;\n}\n\nexport interface DB {\n  init?: (datasourceId?: string) => Promise<boolean>;\n  datasets: () => Promise<string[]>;\n  tables: (dataset?: string) => Promise<string[]>;\n  fields: (query: SQLQuery, order?: boolean) => Promise<SQLSelectableValue[]>;\n  validateQuery: (query: SQLQuery, range?: TimeRange) => Promise<ValidationResults>;\n  dsID: () => number;\n  dispose?: (dsID?: string) => void;\n  lookup: (path?: string) => Promise<Array<{ name: string; completion: string }>>;\n  getSqlCompletionProvider: () => LanguageCompletionProvider;\n  toRawSql?: (query: SQLQuery) => string;\n  functions: () => Promise<Aggregate[]>;\n  labels?: Map<'dataset', string>;\n  disableDatasets?: boolean;\n}\n\nexport interface QueryEditorProps {\n  db: DB;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  range?: TimeRange;\n}\n\nexport interface ValidationResults {\n  query: SQLQuery;\n  rawSql?: string;\n  error: string;\n  isError: boolean;\n  isValid: boolean;\n  statistics?: {\n    TotalBytesProcessed: number;\n  } | null;\n}\n\nexport interface SqlQueryModel {\n  interpolate: () => string;\n  quoteLiteral: (v: string) => string;\n}\n\nexport interface ResponseParser {\n  transformMetricFindResponse: (frame: DataFrame) => MetricFindValue[];\n}\n\nexport interface MetaDefinition {\n  name: string;\n  completion?: string;\n  kind: CompletionItemKind;\n}\n"],"names":["QueryFormat","EditorMode","toOptionFromData"],"mappings":";;;;;;;;;;AAAA,IAAA,EAAA;AAiDY,IAAA,WAAA,qBAAAA,YAAL,KAAA;AACL,EAAAA,YAAA,CAAA,YAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA;AALU,EAAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAQA,IAAA,UAAA,qBAAAC,WAAL,KAAA;AACL,EAAAA,YAAA,SAAU,CAAA,GAAA,SAAA;AACV,EAAAA,YAAA,MAAO,CAAA,GAAA,MAAA;AAFG,EAAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAuDL,MAAM,oBAAuB,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,aAAe,EAAA,KAAA,EAAO,CAAuB,mBAAA;AAAA,EACtD,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,CAAkB;AAC7C;AAEA,MAAM,mBAAmB,CAAC,KAAA,MAAmB,EAAE,KAAA,EAAO,OAAO,KAAM,EAAA,CAAA;AAE5D,MAAM,YAAW,EAAoB,GAAAC,UAAA,KAAA,IAAA,GAAA,EAAA,GAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/QueryEditor/types.ts"],"sourcesContent":["import { type JsonTree } from '@react-awesome-query-builder/ui';\n\nimport {\n  type DataFrame,\n  type DataSourceJsonData,\n  type MetricFindValue,\n  type SelectableValue,\n  type TimeRange,\n  toOption as toOptionFromData,\n} from '@grafana/data';\n\nimport { type DataQuery } from '@grafana/schema';\n\nimport { type QueryWithDefaults } from './defaults';\nimport {\n  type QueryEditorFunctionExpression,\n  type QueryEditorGroupByExpression,\n  type QueryEditorPropertyExpression,\n} from './expressions';\nimport { type CompletionItemKind, type LanguageCompletionProvider } from '../SQLEditor';\n\nexport interface SqlQueryForInterpolation {\n  dataset?: string;\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  refId: string;\n  hide?: boolean;\n}\n\nexport interface SQLConnectionLimits {\n  maxOpenConns: number;\n  maxIdleConns: number;\n  connMaxLifetime: number;\n}\n\nexport interface SQLOptions extends SQLConnectionLimits, DataSourceJsonData {\n  tlsAuth: boolean;\n  tlsAuthWithCACert: boolean;\n  timezone: string;\n  tlsSkipVerify: boolean;\n  user: string;\n  database: string;\n  url: string;\n  timeInterval: string;\n}\n\n// Match the Enums Expected in SqlUtil and SqlDS\n// https://github.com/grafana/grafana-plugin-sdk-go/blob/main/data/sqlutil/query.go#L18-L29\nexport enum QueryFormat {\n  Timeseries,\n  Table,\n  Logs,\n  Trace,\n  OptionMulti,\n}\n\nexport enum EditorMode {\n  Builder = 'builder',\n  Code = 'code',\n}\n\nexport interface SQLQuery extends DataQuery {\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  dataset?: string;\n  table?: string;\n  sql?: SQLExpression;\n  editorMode?: EditorMode;\n  rawQuery?: boolean;\n}\n\nexport interface NameValue {\n  name: string;\n  value: string;\n}\n\nexport type SQLFilters = NameValue[];\n\nexport interface SQLExpression {\n  columns?: QueryEditorFunctionExpression[];\n  whereJsonTree?: JsonTree;\n  whereString?: string;\n  filters?: SQLFilters;\n  groupBy?: QueryEditorGroupByExpression[];\n  orderBy?: QueryEditorPropertyExpression;\n  orderByDirection?: 'ASC' | 'DESC';\n  limit?: number;\n  offset?: number;\n}\n\nexport interface TableSchema {\n  name?: string;\n  schema?: TableFieldSchema[];\n}\n\nexport interface TableFieldSchema {\n  name: string;\n  description?: string;\n  type: string;\n  repeated: boolean;\n  schema: TableFieldSchema[];\n}\n\nexport interface QueryRowFilter {\n  filter: boolean;\n  group: boolean;\n  order: boolean;\n  preview: boolean;\n}\n\nexport const QUERY_FORMAT_OPTIONS = [\n  { label: 'Time series', value: QueryFormat.Timeseries },\n  { label: 'Table', value: QueryFormat.Table },\n];\n\nconst backWardToOption = (value: string) => ({ label: value, value });\n\nexport const toOption = toOptionFromData ?? backWardToOption;\n\nexport interface ResourceSelectorProps {\n  disabled?: boolean;\n  className?: string;\n  applyDefault?: boolean;\n}\n// React Awesome Query builder field types.\n// These are responsible for rendering the correct UI for the field.\nexport type RAQBFieldTypes = 'text' | 'number' | 'boolean' | 'datetime' | 'date' | 'time';\n\nexport interface SQLSelectableValue extends SelectableValue {\n  type?: string;\n  raqbFieldType?: RAQBFieldTypes;\n}\n\nexport interface Aggregate {\n  id: string;\n  name: string;\n  description?: string;\n}\n\nexport interface DB {\n  init?: (datasourceId?: string) => Promise<boolean>;\n  datasets: () => Promise<string[]>;\n  tables: (dataset?: string) => Promise<string[]>;\n  fields: (query: SQLQuery, order?: boolean) => Promise<SQLSelectableValue[]>;\n  validateQuery: (query: SQLQuery, range?: TimeRange) => Promise<ValidationResults>;\n  dsID: () => number;\n  dispose?: (dsID?: string) => void;\n  lookup: (path?: string) => Promise<Array<{ name: string; completion: string }>>;\n  getSqlCompletionProvider: () => LanguageCompletionProvider;\n  toRawSql?: (query: SQLQuery) => string;\n  functions: () => Promise<Aggregate[]>;\n  labels?: Map<'dataset', string>;\n  disableDatasets?: boolean;\n}\n\nexport interface QueryEditorProps {\n  db: DB;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  range?: TimeRange;\n}\n\nexport interface ValidationResults {\n  query: SQLQuery;\n  rawSql?: string;\n  error: string;\n  isError: boolean;\n  isValid: boolean;\n  statistics?: {\n    TotalBytesProcessed: number;\n  } | null;\n}\n\nexport interface SqlQueryModel {\n  interpolate: () => string;\n  quoteLiteral: (v: string) => string;\n}\n\nexport interface ResponseParser {\n  transformMetricFindResponse: (frame: DataFrame) => MetricFindValue[];\n}\n\nexport interface MetaDefinition {\n  name: string;\n  completion?: string;\n  kind: CompletionItemKind;\n}\n"],"names":["QueryFormat","EditorMode","toOptionFromData"],"mappings":";;;;;;;;;;AAAA,IAAA,EAAA;AAiDY,IAAA,WAAA,qBAAAA,YAAL,KAAA;AACL,EAAAA,YAAA,CAAA,YAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA;AALU,EAAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAQA,IAAA,UAAA,qBAAAC,WAAL,KAAA;AACL,EAAAA,YAAA,SAAU,CAAA,GAAA,SAAA;AACV,EAAAA,YAAA,MAAO,CAAA,GAAA,MAAA;AAFG,EAAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAuDL,MAAM,oBAAuB,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,aAAe,EAAA,KAAA,EAAO,CAAuB,mBAAA;AAAA,EACtD,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,CAAkB;AAC7C;AAEA,MAAM,mBAAmB,CAAC,KAAA,MAAmB,EAAE,KAAA,EAAO,OAAO,KAAM,EAAA,CAAA;AAE5D,MAAM,YAAW,EAAoB,GAAAC,UAAA,KAAA,IAAA,GAAA,EAAA,GAAA;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/AwesomeQueryBuilder.js

@@ -1,6 +1,6 @@
 import { isString } from 'lodash';
-import React from 'react';
-import { Utils, BasicConfig } from 'react-awesome-query-builder';
+import React__default from 'react';
+import { Utils, BasicConfig } from '@react-awesome-query-builder/ui';
 import { dateTime, toOption } from '@grafana/data';
 import { Input, DateTimePicker, Select, Button } from '@grafana/ui';
 
@@ -11,8 +11,9 @@ const buttonLabels = {
 ({
   id: Utils.uuid(),
   type: "group",
-  children1: {
-    [Utils.uuid()]: {
+  children1: [
+    {
+      id: Utils.uuid(),
       type: "rule",
       properties: {
         field: null,
@@ -21,13 +22,14 @@ const buttonLabels = {
         valueSrc: []
       }
     }
-  }
+  ]
 });
 const emptyInitTree = {
   id: Utils.uuid(),
   type: "group",
-  children1: {
-    [Utils.uuid()]: {
+  children1: [
+    {
+      id: Utils.uuid(),
       type: "rule",
       properties: {
         field: null,
@@ -36,14 +38,14 @@ const emptyInitTree = {
         valueSrc: []
       }
     }
-  }
+  ]
 };
 const widgets = {
   ...BasicConfig.widgets,
   text: {
     ...BasicConfig.widgets.text,
     factory: function TextInput(props) {
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React__default.createElement(
         Input,
         {
           value: (props == null ? undefined : props.value) || "",
@@ -56,7 +58,7 @@ const widgets = {
   number: {
     ...BasicConfig.widgets.number,
     factory: function NumberInput(props) {
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React__default.createElement(
         Input,
         {
           value: props == null ? undefined : props.value,
@@ -70,7 +72,7 @@ const widgets = {
   datetime: {
     ...BasicConfig.widgets.datetime,
     factory: function DateTimeInput(props) {
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React__default.createElement(
         DateTimePicker,
         {
           onChange: (e) => {
@@ -91,7 +93,7 @@ const settings = {
   addRuleLabel: buttonLabels.add,
   deleteLabel: buttonLabels.remove,
   renderConjs: function Conjunctions(conjProps) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       Select,
       {
         id: conjProps == null ? undefined : conjProps.id,
@@ -106,7 +108,7 @@ const settings = {
   renderField: function Field(fieldProps) {
     var _a;
     const fields = ((_a = fieldProps == null ? undefined : fieldProps.config) == null ? undefined : _a.fields) || {};
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       Select,
       {
         id: fieldProps == null ? undefined : fieldProps.id,
@@ -130,7 +132,7 @@ const settings = {
     );
   },
   renderButton: function RAQBButton(buttonProps) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       Button,
       {
         type: "button",
@@ -143,7 +145,7 @@ const settings = {
     );
   },
   renderOperator: function Operator(operatorProps) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       Select,
       {
         options: operatorProps == null ? undefined : operatorProps.items.map((op) => ({ label: op.label, value: op.key })),
@@ -185,13 +187,29 @@ function getCustomOperators(config) {
   const { ...supportedOperators } = config.operators;
   const noop = () => "";
   const sqlFormatInOp = supportedOperators["select_any_in" /* IN */].sqlFormatOp || noop;
-  const customSqlInFormatter = (field, op, value, valueSrc, valueType, opDef, operatorOptions, fieldDef) => {
-    return sqlFormatInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);
-  };
+  const customSqlInFormatter = (field, op, value, valueSrc, valueType, opDef, operatorOptions, fieldDef) => sqlFormatInOp.call(
+    config.ctx,
+    field,
+    op,
+    splitIfString(value),
+    valueSrc,
+    valueType,
+    opDef,
+    operatorOptions,
+    fieldDef
+  );
   const sqlFormatNotInOp = supportedOperators["select_not_any_in" /* NOT_IN */].sqlFormatOp || noop;
-  const customSqlNotInFormatter = (field, op, value, valueSrc, valueType, opDef, operatorOptions, fieldDef) => {
-    return sqlFormatNotInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);
-  };
+  const customSqlNotInFormatter = (field, op, value, valueSrc, valueType, opDef, operatorOptions, fieldDef) => sqlFormatNotInOp.call(
+    config.ctx,
+    field,
+    op,
+    splitIfString(value),
+    valueSrc,
+    valueType,
+    opDef,
+    operatorOptions,
+    fieldDef
+  );
   const customOperators2 = {
     ...supportedOperators,
     ["select_any_in" /* IN */]: {

package/dist/esm/components/QueryEditor/visual-query-builder/AwesomeQueryBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"AwesomeQueryBuilder.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/AwesomeQueryBuilder.tsx"],"sourcesContent":["import { type List } from 'immutable';\nimport { isString } from 'lodash';\nimport React from 'react';\nimport {\n  BasicConfig,\n  type Config,\n  type JsonItem,\n  type JsonTree,\n  type Operator,\n  type Settings,\n  type SimpleField,\n  Utils,\n  type ValueSource,\n  type Widgets,\n} from 'react-awesome-query-builder';\n\nimport { dateTime, toOption } from '@grafana/data';\nimport { Button, DateTimePicker, Input, Select } from '@grafana/ui';\n\nconst buttonLabels = {\n  add: 'Add',\n  remove: 'Remove',\n};\n\nexport const emptyInitValue: JsonItem = {\n  id: Utils.uuid(),\n  type: 'group' as const,\n  children1: {\n    [Utils.uuid()]: {\n      type: 'rule',\n      properties: {\n        field: null,\n        operator: null,\n        value: [],\n        valueSrc: [],\n      },\n    },\n  },\n};\n\nexport const emptyInitTree: JsonTree = {\n  id: Utils.uuid(),\n  type: 'group' as const,\n  children1: {\n    [Utils.uuid()]: {\n      type: 'rule',\n      properties: {\n        field: null,\n        operator: null,\n        value: [],\n        valueSrc: [],\n      },\n    },\n  },\n};\n\nexport const widgets: Widgets = {\n  ...BasicConfig.widgets,\n  text: {\n    ...BasicConfig.widgets.text,\n    factory: function TextInput(props) {\n      return (\n        <Input\n          value={props?.value || ''}\n          placeholder={props?.placeholder}\n          onChange={(e) => props?.setValue(e.currentTarget.value)}\n        />\n      );\n    },\n  },\n  number: {\n    ...BasicConfig.widgets.number,\n    factory: function NumberInput(props) {\n      return (\n        <Input\n          value={props?.value}\n          placeholder={props?.placeholder}\n          type=\"number\"\n          onChange={(e) => props?.setValue(Number.parseInt(e.currentTarget.value, 10))}\n        />\n      );\n    },\n  },\n  datetime: {\n    ...BasicConfig.widgets.datetime,\n    factory: function DateTimeInput(props) {\n      return (\n        <DateTimePicker\n          onChange={(e) => {\n            props?.setValue(e?.format(BasicConfig.widgets.datetime.valueFormat));\n          }}\n          date={dateTime(props?.value).utc()}\n        />\n      );\n    },\n  },\n};\n\nexport const settings: Settings = {\n  ...BasicConfig.settings,\n  canRegroup: false,\n  maxNesting: 1,\n  canReorder: false,\n  showNot: false,\n  addRuleLabel: buttonLabels.add,\n  deleteLabel: buttonLabels.remove,\n  renderConjs: function Conjunctions(conjProps) {\n    return (\n      <Select\n        id={conjProps?.id}\n        aria-label=\"Conjunction\"\n        menuShouldPortal\n        options={conjProps?.conjunctionOptions ? Object.keys(conjProps?.conjunctionOptions).map(toOption) : undefined}\n        value={conjProps?.selectedConjunction}\n        onChange={(val) => conjProps?.setConjunction(val.value!)}\n      />\n    );\n  },\n  renderField: function Field(fieldProps) {\n    const fields = fieldProps?.config?.fields || {};\n    return (\n      <Select\n        id={fieldProps?.id}\n        width={25}\n        aria-label=\"Field\"\n        menuShouldPortal\n        options={fieldProps?.items.map((f) => {\n          // @ts-ignore\n          const icon = fields[f.key].mainWidgetProps?.customProps?.icon;\n          return {\n            label: f.label,\n            value: f.key,\n            icon,\n          };\n        })}\n        value={fieldProps?.selectedKey}\n        onChange={(val) => {\n          fieldProps?.setField(val.label!);\n        }}\n      />\n    );\n  },\n  renderButton: function RAQBButton(buttonProps) {\n    return (\n      <Button\n        type=\"button\"\n        title={`${buttonProps?.label} filter`}\n        onClick={buttonProps?.onClick}\n        variant=\"secondary\"\n        size=\"md\"\n        icon={buttonProps?.label === buttonLabels.add ? 'plus' : 'times'}\n      />\n    );\n  },\n  renderOperator: function Operator(operatorProps) {\n    return (\n      <Select\n        options={operatorProps?.items.map((op) => ({ label: op.label, value: op.key }))}\n        aria-label=\"Operator\"\n        menuShouldPortal\n        value={operatorProps?.selectedKey}\n        onChange={(val) => {\n          operatorProps?.setField(val.value || '');\n        }}\n      />\n    );\n  },\n};\n\n// add IN / NOT IN operators to text to support multi-value variables\nconst enum Op {\n  IN = 'select_any_in',\n  NOT_IN = 'select_not_any_in',\n}\n// eslint-ignore\nconst customOperators = getCustomOperators(BasicConfig) as typeof BasicConfig.operators;\nconst textWidget = BasicConfig.types.text.widgets.text;\nconst opers = [...(textWidget.operators || []), Op.IN, Op.NOT_IN];\nconst customTextWidget = {\n  ...textWidget,\n  operators: opers,\n};\n\nconst customTypes = {\n  ...BasicConfig.types,\n  text: {\n    ...BasicConfig.types.text,\n    widgets: {\n      ...BasicConfig.types.text.widgets,\n      text: customTextWidget,\n    },\n  },\n};\n\nexport const raqbConfig: Config = {\n  ...BasicConfig,\n  widgets,\n  settings,\n  operators: customOperators as typeof BasicConfig.operators,\n  types: customTypes,\n};\n\nexport type { Config };\n\nfunction getCustomOperators(config: BasicConfig) {\n  const { ...supportedOperators } = config.operators;\n  const noop = () => '';\n  // IN operator expects array, override IN formatter for multi-value variables\n  const sqlFormatInOp = supportedOperators[Op.IN].sqlFormatOp || noop;\n  const customSqlInFormatter = (\n    field: string,\n    op: string,\n    value: string | List<string>,\n    valueSrc: ValueSource,\n    valueType: string,\n    opDef: Operator,\n    operatorOptions: object,\n    fieldDef: SimpleField\n  ) => {\n    return sqlFormatInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);\n  };\n  // NOT IN operator expects array, override NOT IN formatter for multi-value variables\n  const sqlFormatNotInOp = supportedOperators[Op.NOT_IN].sqlFormatOp || noop;\n  const customSqlNotInFormatter = (\n    field: string,\n    op: string,\n    value: string | List<string>,\n    valueSrc: ValueSource,\n    valueType: string,\n    opDef: Operator,\n    operatorOptions: object,\n    fieldDef: SimpleField\n  ) => {\n    return sqlFormatNotInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);\n  };\n\n  const customOperators = {\n    ...supportedOperators,\n    [Op.IN]: {\n      ...supportedOperators[Op.IN],\n      sqlFormatOp: customSqlInFormatter,\n    },\n    [Op.NOT_IN]: {\n      ...supportedOperators[Op.NOT_IN],\n      sqlFormatOp: customSqlNotInFormatter,\n    },\n  };\n\n  return customOperators;\n}\n\n// value: string | List<string> but AQB uses a different version of Immutable\n// eslint-ignore\nfunction splitIfString(value: any) {\n  if (isString(value)) {\n    return value.split(',');\n  }\n  return value;\n}\n"],"names":["_a","customOperators"],"mappings":"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"}
+{"version":3,"file":"AwesomeQueryBuilder.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/AwesomeQueryBuilder.tsx"],"sourcesContent":["import { type List } from 'immutable';\nimport { isString } from 'lodash';\nimport React from 'react';\nimport {\n  BasicConfig,\n  Utils,\n  type Config,\n  type JsonItem,\n  type JsonTree,\n  type Operator,\n  type Settings,\n  type Field,\n  type ValueSource,\n  type WidgetProps,\n  type Widgets,\n  type OperatorOptionsI,\n} from '@react-awesome-query-builder/ui';\n\nimport { dateTime, toOption } from '@grafana/data';\nimport { Button, DateTimePicker, Input, Select } from '@grafana/ui';\n\nconst buttonLabels = {\n  add: 'Add',\n  remove: 'Remove',\n};\n\nexport const emptyInitValue: JsonItem = {\n  id: Utils.uuid(),\n  type: 'group' as const,\n  children1: [\n    {\n      id: Utils.uuid(),\n      type: 'rule',\n      properties: {\n        field: null,\n        operator: null,\n        value: [],\n        valueSrc: [],\n      },\n    },\n  ],\n};\n\nexport const emptyInitTree: JsonTree = {\n  id: Utils.uuid(),\n  type: 'group' as const,\n  children1: [\n    {\n      id: Utils.uuid(),\n      type: 'rule',\n      properties: {\n        field: null,\n        operator: null,\n        value: [],\n        valueSrc: [],\n      },\n    },\n  ],\n};\n\nexport const widgets: Widgets = {\n  ...BasicConfig.widgets,\n  text: {\n    ...BasicConfig.widgets.text,\n    factory: function TextInput(props: WidgetProps) {\n      return (\n        <Input\n          value={props?.value || ''}\n          placeholder={props?.placeholder}\n          onChange={(e) => props?.setValue(e.currentTarget.value)}\n        />\n      );\n    },\n  },\n  number: {\n    ...BasicConfig.widgets.number,\n    factory: function NumberInput(props: WidgetProps) {\n      return (\n        <Input\n          value={props?.value}\n          placeholder={props?.placeholder}\n          type=\"number\"\n          onChange={(e) => props?.setValue(Number.parseInt(e.currentTarget.value, 10))}\n        />\n      );\n    },\n  },\n  datetime: {\n    ...BasicConfig.widgets.datetime,\n    factory: function DateTimeInput(props: WidgetProps) {\n      return (\n        <DateTimePicker\n          onChange={(e) => {\n            props?.setValue(e?.format(BasicConfig.widgets.datetime.valueFormat));\n          }}\n          date={dateTime(props?.value).utc()}\n        />\n      );\n    },\n  },\n};\n\nexport const settings: Settings = {\n  ...BasicConfig.settings,\n  canRegroup: false,\n  maxNesting: 1,\n  canReorder: false,\n  showNot: false,\n  addRuleLabel: buttonLabels.add,\n  deleteLabel: buttonLabels.remove,\n  renderConjs: function Conjunctions(conjProps) {\n    return (\n      <Select\n        id={conjProps?.id}\n        aria-label=\"Conjunction\"\n        menuShouldPortal\n        options={conjProps?.conjunctionOptions ? Object.keys(conjProps?.conjunctionOptions).map(toOption) : undefined}\n        value={conjProps?.selectedConjunction}\n        onChange={(val) => conjProps?.setConjunction(val.value!)}\n      />\n    );\n  },\n  renderField: function Field(fieldProps) {\n    const fields = fieldProps?.config?.fields || {};\n    return (\n      <Select\n        id={fieldProps?.id}\n        width={25}\n        aria-label=\"Field\"\n        menuShouldPortal\n        options={fieldProps?.items.map((f) => {\n          // @ts-ignore\n          const icon = fields[f.key].mainWidgetProps?.customProps?.icon;\n          return {\n            label: f.label,\n            value: f.key,\n            icon,\n          };\n        })}\n        value={fieldProps?.selectedKey}\n        onChange={(val) => {\n          fieldProps?.setField(val.label!);\n        }}\n      />\n    );\n  },\n  renderButton: function RAQBButton(buttonProps) {\n    return (\n      <Button\n        type=\"button\"\n        title={`${buttonProps?.label} filter`}\n        onClick={buttonProps?.onClick}\n        variant=\"secondary\"\n        size=\"md\"\n        icon={buttonProps?.label === buttonLabels.add ? 'plus' : 'times'}\n      />\n    );\n  },\n  renderOperator: function Operator(operatorProps) {\n    return (\n      <Select\n        options={operatorProps?.items.map((op) => ({ label: op.label, value: op.key }))}\n        aria-label=\"Operator\"\n        menuShouldPortal\n        value={operatorProps?.selectedKey}\n        onChange={(val) => {\n          operatorProps?.setField(val.value || '');\n        }}\n      />\n    );\n  },\n};\n\n// add IN / NOT IN operators to text to support multi-value variables\nconst enum Op {\n  IN = 'select_any_in',\n  NOT_IN = 'select_not_any_in',\n}\n\nconst customOperators = getCustomOperators(BasicConfig);\nconst textWidget = BasicConfig.types.text.widgets.text;\nconst opers = [...(textWidget.operators || []), Op.IN, Op.NOT_IN];\nconst customTextWidget = {\n  ...textWidget,\n  operators: opers,\n};\n\nconst customTypes = {\n  ...BasicConfig.types,\n  text: {\n    ...BasicConfig.types.text,\n    widgets: {\n      ...BasicConfig.types.text.widgets,\n      text: customTextWidget,\n    },\n  },\n};\n\nexport const raqbConfig: Config = {\n  ...BasicConfig,\n  widgets,\n  settings,\n  operators: customOperators as typeof BasicConfig.operators,\n  types: customTypes,\n};\n\nexport type { Config };\n\nfunction getCustomOperators(config: BasicConfig) {\n  const { ...supportedOperators } = config.operators;\n  const noop = () => '';\n  // IN operator expects array, override IN formatter for multi-value variables\n\n  const sqlFormatInOp = supportedOperators[Op.IN].sqlFormatOp || noop;\n  const customSqlInFormatter = (\n    field: string,\n    op: string,\n    value: string | List<string>,\n    valueSrc: ValueSource,\n    valueType: string,\n    opDef: Operator,\n    operatorOptions: OperatorOptionsI,\n    fieldDef: Field\n  ) =>\n    sqlFormatInOp.call(\n      config.ctx,\n      field,\n      op,\n      splitIfString(value),\n      valueSrc,\n      valueType,\n      opDef,\n      operatorOptions,\n      fieldDef\n    );\n  // NOT IN operator expects array, override NOT IN formatter for multi-value variables\n  const sqlFormatNotInOp = supportedOperators[Op.NOT_IN].sqlFormatOp || noop;\n  const customSqlNotInFormatter = (\n    field: string,\n    op: string,\n    value: string | List<string>,\n    valueSrc: ValueSource,\n    valueType: string,\n    opDef: Operator,\n    operatorOptions: OperatorOptionsI,\n    fieldDef: Field\n  ) =>\n    sqlFormatNotInOp.call(\n      config.ctx,\n      field,\n      op,\n      splitIfString(value),\n      valueSrc,\n      valueType,\n      opDef,\n      operatorOptions,\n      fieldDef\n    );\n\n  const customOperators = {\n    ...supportedOperators,\n    [Op.IN]: {\n      ...supportedOperators[Op.IN],\n      sqlFormatOp: customSqlInFormatter,\n    },\n    [Op.NOT_IN]: {\n      ...supportedOperators[Op.NOT_IN],\n      sqlFormatOp: customSqlNotInFormatter,\n    },\n  };\n\n  return customOperators;\n}\n\n// value: string | List<string> but AQB uses a different version of Immutable\n// eslint-ignore\nfunction splitIfString(value: any) {\n  if (isString(value)) {\n    return value.split(',');\n  }\n  return value;\n}\n"],"names":["React","_a","customOperators"],"mappings":"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"}

package/dist/esm/components/QueryEditor/visual-query-builder/EditorField.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React__default from 'react';
 import '@grafana/data';
 import { stylesFactory, useTheme2, ReactUtils, Tooltip, Icon, Field } from '@grafana/ui';
 import { Space } from '../Space.js';
@@ -10,8 +10,8 @@ const EditorField = (props) => {
   const theme = useTheme2();
   const styles = getStyles(theme, width);
   const childInputId = (fieldProps == null ? undefined : fieldProps.htmlFor) || ((_a = ReactUtils) == null ? undefined : _a.getChildId(children));
-  const labelEl = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", content: tooltip, theme: "info" }, /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React.createElement(Space, { v: 0.5 }));
-  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
+  const labelEl = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React__default.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React__default.createElement(Tooltip, { placement: "top", content: tooltip, theme: "info" }, /* @__PURE__ */ React__default.createElement(Icon, { name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React__default.createElement(Space, { v: 0.5 }));
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.createElement(Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
 };
 const getStyles = stylesFactory((theme, width) => {
   return {

package/dist/esm/components/QueryEditor/visual-query-builder/EditorField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorField.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/EditorField.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { type ComponentProps } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Field, type PopoverContent, useTheme2, ReactUtils, Tooltip, Icon, stylesFactory } from '@grafana/ui';\nimport { Space } from '../Space';\n\ninterface EditorFieldProps extends ComponentProps<typeof Field> {\n  label: string;\n  children: React.ReactElement;\n  width?: number | string;\n  optional?: boolean;\n  tooltip?: PopoverContent;\n}\n\nexport const EditorField = (props: EditorFieldProps) => {\n  const { label, optional, tooltip, children, width, ...fieldProps } = props;\n\n  const theme = useTheme2();\n  const styles = getStyles(theme, width);\n\n  // Null check for backward compatibility\n  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);\n\n  const labelEl = (\n    <>\n      <label className={styles.label} htmlFor={childInputId}>\n        {label}\n        {optional && <span className={styles.optional}> - optional</span>}\n        {tooltip && (\n          <Tooltip placement=\"top\" content={tooltip} theme=\"info\">\n            <Icon name=\"info-circle\" size=\"sm\" className={styles.icon} />\n          </Tooltip>\n        )}\n      </label>\n      <Space v={0.5} />\n    </>\n  );\n\n  return (\n    <div className={styles.root}>\n      <Field className={styles.field} label={labelEl} {...fieldProps}>\n        {children}\n      </Field>\n    </div>\n  );\n};\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2, width?: number | string) => {\n  return {\n    root: css({\n      minWidth: theme.spacing(width ?? 0),\n    }),\n    label: css({\n      fontSize: 12,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n    optional: css({\n      fontStyle: 'italic',\n      color: theme.colors.text.secondary,\n    }),\n    field: css({\n      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove\n    }),\n    icon: css({\n      color: theme.colors.text.secondary,\n      marginLeft: theme.spacing(1),\n      ':hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n});\n"],"names":[],"mappings":";;;;;;AAea,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAfxD,EAAA,IAAA,EAAA;AAgBE,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,GAAG,YAAe,GAAA,KAAA;AAErE,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,KAAK,CAAA;AAGrC,EAAA,MAAM,YAAe,GAAA,CAAA,UAAA,IAAA,IAAA,GAAA,SAAA,GAAA,UAAA,CAAY,OAAW,MAAA,CAAA,EAAA,GAAA,UAAA,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAY,UAAW,CAAA,QAAA,CAAA,CAAA;AAEnE,EAAA,MAAM,0BAEF,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAM,SAAW,EAAA,MAAA,CAAO,OAAO,OAAS,EAAA,YAAA,EAAA,EACtC,OACA,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,YAAU,aAAW,CAAA,EACzD,2BACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,WAAU,KAAM,EAAA,OAAA,EAAS,SAAS,KAAM,EAAA,MAAA,EAAA,sCAC9C,IAAK,EAAA,EAAA,IAAA,EAAK,eAAc,IAAK,EAAA,IAAA,EAAK,WAAW,MAAO,CAAA,IAAA,EAAM,CAC7D,CAEJ,CAAA,sCACC,KAAM,EAAA,EAAA,CAAA,EAAG,KAAK,CACjB,CAAA;AAGF,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,wBACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,OAAO,KAAO,EAAA,OAAA,EAAU,GAAG,UAAA,EAAA,EACjD,QACH,CACF,CAAA;AAEJ;AAEA,MAAM,SAAY,GAAA,aAAA,CAAc,CAAC,KAAA,EAAsB,KAA4B,KAAA;AACjF,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,CAAC;AAAA,KACnC,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,QAAU,EAAA,EAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA;AAAA,KAC9B,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,SAAW,EAAA,QAAA;AAAA,MACX,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA,KAC1B,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,YAAc,EAAA;AAAA;AAAA,KACf,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,QAAU,EAAA;AAAA,QACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAC,CAAA;;;;"}
+{"version":3,"file":"EditorField.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/EditorField.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { type ComponentProps } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Field, type PopoverContent, useTheme2, ReactUtils, Tooltip, Icon, stylesFactory } from '@grafana/ui';\nimport { Space } from '../Space';\n\ninterface EditorFieldProps extends ComponentProps<typeof Field> {\n  label: string;\n  children: React.ReactElement;\n  width?: number | string;\n  optional?: boolean;\n  tooltip?: PopoverContent;\n}\n\nexport const EditorField = (props: EditorFieldProps) => {\n  const { label, optional, tooltip, children, width, ...fieldProps } = props;\n\n  const theme = useTheme2();\n  const styles = getStyles(theme, width);\n\n  // Null check for backward compatibility\n  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);\n\n  const labelEl = (\n    <>\n      <label className={styles.label} htmlFor={childInputId}>\n        {label}\n        {optional && <span className={styles.optional}> - optional</span>}\n        {tooltip && (\n          <Tooltip placement=\"top\" content={tooltip} theme=\"info\">\n            <Icon name=\"info-circle\" size=\"sm\" className={styles.icon} />\n          </Tooltip>\n        )}\n      </label>\n      <Space v={0.5} />\n    </>\n  );\n\n  return (\n    <div className={styles.root}>\n      <Field className={styles.field} label={labelEl} {...fieldProps}>\n        {children}\n      </Field>\n    </div>\n  );\n};\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2, width?: number | string) => {\n  return {\n    root: css({\n      minWidth: theme.spacing(width ?? 0),\n    }),\n    label: css({\n      fontSize: 12,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n    optional: css({\n      fontStyle: 'italic',\n      color: theme.colors.text.secondary,\n    }),\n    field: css({\n      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove\n    }),\n    icon: css({\n      color: theme.colors.text.secondary,\n      marginLeft: theme.spacing(1),\n      ':hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n});\n"],"names":["React"],"mappings":";;;;;;AAea,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAfxD,EAAA,IAAA,EAAA;AAgBE,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,GAAG,YAAe,GAAA,KAAA;AAErE,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,KAAK,CAAA;AAGrC,EAAA,MAAM,YAAe,GAAA,CAAA,UAAA,IAAA,IAAA,GAAA,SAAA,GAAA,UAAA,CAAY,OAAW,MAAA,CAAA,EAAA,GAAA,UAAA,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAY,UAAW,CAAA,QAAA,CAAA,CAAA;AAEnE,EAAA,MAAM,0BAEFA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,WAAM,SAAW,EAAA,MAAA,CAAO,OAAO,OAAS,EAAA,YAAA,EAAA,EACtC,OACA,QAAY,oBAAAA,cAAA,CAAA,aAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,YAAU,aAAW,CAAA,EACzD,2BACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,WAAU,KAAM,EAAA,OAAA,EAAS,SAAS,KAAM,EAAA,MAAA,EAAA,+CAC9C,IAAK,EAAA,EAAA,IAAA,EAAK,eAAc,IAAK,EAAA,IAAA,EAAK,WAAW,MAAO,CAAA,IAAA,EAAM,CAC7D,CAEJ,CAAA,+CACC,KAAM,EAAA,EAAA,CAAA,EAAG,KAAK,CACjB,CAAA;AAGF,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,wBACpBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,OAAO,KAAO,EAAA,OAAA,EAAU,GAAG,UAAA,EAAA,EACjD,QACH,CACF,CAAA;AAEJ;AAEA,MAAM,SAAY,GAAA,aAAA,CAAc,CAAC,KAAA,EAAsB,KAA4B,KAAA;AACjF,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,CAAC;AAAA,KACnC,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,QAAU,EAAA,EAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA;AAAA,KAC9B,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,SAAW,EAAA,QAAA;AAAA,MACX,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA,KAC1B,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,YAAc,EAAA;AAAA;AAAA,KACf,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,QAAU,EAAA;AAAA,QACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAC,CAAA;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/EditorRow.js

@@ -1,12 +1,12 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React__default from 'react';
 import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 import { EditorStack } from '../EditorStack.js';
 
 const EditorRow = ({ children }) => {
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 2 }, children));
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.createElement(EditorStack, { gap: 2 }, children));
 };
 const getStyles = (theme) => {
   return {

package/dist/esm/components/QueryEditor/visual-query-builder/EditorRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/EditorRow.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '@grafana/ui';\nimport { EditorStack } from '../EditorStack';\n\ninterface EditorRowProps {\n  children?: React.ReactNode;\n}\n\nexport const EditorRow = ({ children }: EditorRowProps) => {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.root}>\n      <EditorStack gap={2}>{children}</EditorStack>\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    root: css({\n      padding: theme.spacing(1),\n      backgroundColor: theme.colors.background.secondary,\n      borderRadius: theme.shape.borderRadius(1),\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,SAAY,GAAA,CAAC,EAAE,QAAA,EAA+B,KAAA;AACzD,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,sCACpB,WAAY,EAAA,EAAA,GAAA,EAAK,CAAI,EAAA,EAAA,QAAS,CACjC,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACzC,YAAc,EAAA,KAAA,CAAM,KAAM,CAAA,YAAA,CAAa,CAAC;AAAA,KACzC;AAAA,GACH;AACF,CAAA;;;;"}
+{"version":3,"file":"EditorRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/EditorRow.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '@grafana/ui';\nimport { EditorStack } from '../EditorStack';\n\ninterface EditorRowProps {\n  children?: React.ReactNode;\n}\n\nexport const EditorRow = ({ children }: EditorRowProps) => {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.root}>\n      <EditorStack gap={2}>{children}</EditorStack>\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    root: css({\n      padding: theme.spacing(1),\n      backgroundColor: theme.colors.background.secondary,\n      borderRadius: theme.shape.borderRadius(1),\n    }),\n  };\n};\n"],"names":["React"],"mappings":";;;;;;AAYO,MAAM,SAAY,GAAA,CAAC,EAAE,QAAA,EAA+B,KAAA;AACzD,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,+CACpB,WAAY,EAAA,EAAA,GAAA,EAAK,CAAI,EAAA,EAAA,QAAS,CACjC,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACzC,YAAc,EAAA,KAAA,CAAM,KAAM,CAAA,YAAA,CAAa,CAAC;AAAA,KACzC;AAAA,GACH;AACF,CAAA;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/EditorRows.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { EditorStack } from '../EditorStack.js';
 
 const EditorRows = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(EditorStack, { gap: 0.5, direction: "column" }, children);
+  return /* @__PURE__ */ React__default.createElement(EditorStack, { gap: 0.5, direction: "column" }, children);
 };
 
 export { EditorRows };

package/dist/esm/components/QueryEditor/visual-query-builder/EditorRows.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorRows.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/EditorRows.tsx"],"sourcesContent":["import React from 'react';\n\nimport { EditorStack } from '../EditorStack';\n\ninterface EditorRowsProps {\n  children?: React.ReactNode;\n}\n\nexport const EditorRows = ({ children }: EditorRowsProps) => {\n  return (\n    <EditorStack gap={0.5} direction=\"column\">\n      {children}\n    </EditorStack>\n  );\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,UAAa,GAAA,CAAC,EAAE,QAAA,EAAgC,KAAA;AAC3D,EAAA,2CACG,WAAY,EAAA,EAAA,GAAA,EAAK,GAAK,EAAA,SAAA,EAAU,YAC9B,QACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EditorRows.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/EditorRows.tsx"],"sourcesContent":["import React from 'react';\n\nimport { EditorStack } from '../EditorStack';\n\ninterface EditorRowsProps {\n  children?: React.ReactNode;\n}\n\nexport const EditorRows = ({ children }: EditorRowsProps) => {\n  return (\n    <EditorStack gap={0.5} direction=\"column\">\n      {children}\n    </EditorStack>\n  );\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,UAAa,GAAA,CAAC,EAAE,QAAA,EAAgC,KAAA;AAC3D,EAAA,oDACG,WAAY,EAAA,EAAA,GAAA,EAAK,GAAK,EAAA,SAAA,EAAU,YAC9B,QACH,CAAA;AAEJ;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/GroupByRow.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import { toOption } from '@grafana/data';
 import '../types.js';
 import { setGroupByField } from '../utils/sql.utils.js';
@@ -19,7 +19,7 @@ function GroupByRow({ sql, columns, onSqlChange }) {
     },
     [onSqlChange, sql]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     EditorList,
     {
       items: sql.groupBy,
@@ -33,7 +33,7 @@ function GroupByRow({ sql, columns, onSqlChange }) {
 function makeRenderColumn({ options }) {
   const renderColumn = function(item, onChangeItem, onDeleteItem) {
     var _a;
-    return /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(InputGroup, null, /* @__PURE__ */ React__default.createElement(
       Select,
       {
         value: ((_a = item.property) == null ? undefined : _a.name) ? toOption(item.property.name) : null,
@@ -42,7 +42,7 @@ function makeRenderColumn({ options }) {
         menuShouldPortal: true,
         onChange: ({ value }) => value && onChangeItem(setGroupByField(value))
       }
-    ), /* @__PURE__ */ React.createElement(AccessoryButton, { "aria-label": "Remove group by column", icon: "times", variant: "secondary", onClick: onDeleteItem }));
+    ), /* @__PURE__ */ React__default.createElement(AccessoryButton, { "aria-label": "Remove group by column", icon: "times", variant: "secondary", onClick: onDeleteItem }));
   };
   return renderColumn;
 }

package/dist/esm/components/QueryEditor/visual-query-builder/GroupByRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/GroupByRow.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { type SQLExpression } from '../types';\nimport { type QueryEditorGroupByExpression } from '../expressions';\nimport { setGroupByField } from '../utils/sql.utils';\nimport { EditorList } from '../EditorList';\nimport { Select } from '@grafana/ui';\nimport { AccessoryButton } from '../AccessoryButton';\nimport { InputGroup } from '../InputGroup';\n\ninterface GroupByRowProps {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  columns?: Array<SelectableValue<string>>;\n}\n\nexport function GroupByRow({ sql, columns, onSqlChange }: GroupByRowProps) {\n  const onGroupByChange = useCallback(\n    (item: Array<Partial<QueryEditorGroupByExpression>>) => {\n      // As new (empty object) items come in, we need to make sure they have the correct type\n      const cleaned = item.map((v) => setGroupByField(v.property?.name));\n      const newSql = { ...sql, groupBy: cleaned };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  return (\n    <EditorList\n      items={sql.groupBy!}\n      onChange={onGroupByChange}\n      renderItem={makeRenderColumn({\n        options: columns,\n      })}\n    />\n  );\n}\n\nfunction makeRenderColumn({ options }: { options?: Array<SelectableValue<string>> }) {\n  const renderColumn = function (\n    item: Partial<QueryEditorGroupByExpression>,\n    onChangeItem: (item: QueryEditorGroupByExpression) => void,\n    onDeleteItem: () => void\n  ) {\n    return (\n      <InputGroup>\n        <Select\n          value={item.property?.name ? toOption(item.property.name) : null}\n          aria-label=\"Group by\"\n          options={options}\n          menuShouldPortal\n          onChange={({ value }) => value && onChangeItem(setGroupByField(value))}\n        />\n        <AccessoryButton aria-label=\"Remove group by column\" icon=\"times\" variant=\"secondary\" onClick={onDeleteItem} />\n      </InputGroup>\n    );\n  };\n  return renderColumn;\n}\n"],"names":[],"mappings":";;;;;;;;;AAiBO,SAAS,UAAW,CAAA,EAAE,GAAK,EAAA,OAAA,EAAS,aAAgC,EAAA;AACzE,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,IAAuD,KAAA;AAEtD,MAAA,MAAM,OAAU,GAAA,IAAA,CAAK,GAAI,CAAA,CAAC,CAAG,KAAA;AArBnC,QAAA,IAAA,EAAA;AAqBsC,QAAgB,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,QAAF,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAY,IAAI,CAAA;AAAA,OAAC,CAAA;AACjE,MAAA,MAAM,MAAS,GAAA,EAAE,GAAG,GAAA,EAAK,SAAS,OAAQ,EAAA;AAC1C,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,GAAI,CAAA,OAAA;AAAA,MACX,QAAU,EAAA,eAAA;AAAA,MACV,YAAY,gBAAiB,CAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACV;AAAA;AAAA,GACH;AAEJ;AAEA,SAAS,gBAAA,CAAiB,EAAE,OAAA,EAAyD,EAAA;AACnF,EAAA,MAAM,YAAe,GAAA,SACnB,IACA,EAAA,YAAA,EACA,YACA,EAAA;AA5CJ,IAAA,IAAA,EAAA;AA6CI,IAAA,2CACG,UACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAA,CAAA,CAAO,UAAK,QAAL,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAe,QAAO,QAAS,CAAA,IAAA,CAAK,QAAS,CAAA,IAAI,CAAI,GAAA,IAAA;AAAA,QAC5D,YAAW,EAAA,UAAA;AAAA,QACX,OAAA;AAAA,QACA,gBAAgB,EAAA,IAAA;AAAA,QAChB,QAAA,EAAU,CAAC,EAAE,KAAA,OAAY,KAAS,IAAA,YAAA,CAAa,eAAgB,CAAA,KAAK,CAAC;AAAA;AAAA,KACvE,kBACC,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,YAAW,EAAA,wBAAA,EAAyB,IAAK,EAAA,OAAA,EAAQ,OAAQ,EAAA,WAAA,EAAY,OAAS,EAAA,YAAA,EAAc,CAC/G,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,YAAA;AACT;;;;"}
+{"version":3,"file":"GroupByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/GroupByRow.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { type SQLExpression } from '../types';\nimport { type QueryEditorGroupByExpression } from '../expressions';\nimport { setGroupByField } from '../utils/sql.utils';\nimport { EditorList } from '../EditorList';\nimport { Select } from '@grafana/ui';\nimport { AccessoryButton } from '../AccessoryButton';\nimport { InputGroup } from '../InputGroup';\n\ninterface GroupByRowProps {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  columns?: Array<SelectableValue<string>>;\n}\n\nexport function GroupByRow({ sql, columns, onSqlChange }: GroupByRowProps) {\n  const onGroupByChange = useCallback(\n    (item: Array<Partial<QueryEditorGroupByExpression>>) => {\n      // As new (empty object) items come in, we need to make sure they have the correct type\n      const cleaned = item.map((v) => setGroupByField(v.property?.name));\n      const newSql = { ...sql, groupBy: cleaned };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  return (\n    <EditorList\n      items={sql.groupBy!}\n      onChange={onGroupByChange}\n      renderItem={makeRenderColumn({\n        options: columns,\n      })}\n    />\n  );\n}\n\nfunction makeRenderColumn({ options }: { options?: Array<SelectableValue<string>> }) {\n  const renderColumn = function (\n    item: Partial<QueryEditorGroupByExpression>,\n    onChangeItem: (item: QueryEditorGroupByExpression) => void,\n    onDeleteItem: () => void\n  ) {\n    return (\n      <InputGroup>\n        <Select\n          value={item.property?.name ? toOption(item.property.name) : null}\n          aria-label=\"Group by\"\n          options={options}\n          menuShouldPortal\n          onChange={({ value }) => value && onChangeItem(setGroupByField(value))}\n        />\n        <AccessoryButton aria-label=\"Remove group by column\" icon=\"times\" variant=\"secondary\" onClick={onDeleteItem} />\n      </InputGroup>\n    );\n  };\n  return renderColumn;\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAiBO,SAAS,UAAW,CAAA,EAAE,GAAK,EAAA,OAAA,EAAS,aAAgC,EAAA;AACzE,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,IAAuD,KAAA;AAEtD,MAAA,MAAM,OAAU,GAAA,IAAA,CAAK,GAAI,CAAA,CAAC,CAAG,KAAA;AArBnC,QAAA,IAAA,EAAA;AAqBsC,QAAgB,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,QAAF,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAY,IAAI,CAAA;AAAA,OAAC,CAAA;AACjE,MAAA,MAAM,MAAS,GAAA,EAAE,GAAG,GAAA,EAAK,SAAS,OAAQ,EAAA;AAC1C,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,GAAI,CAAA,OAAA;AAAA,MACX,QAAU,EAAA,eAAA;AAAA,MACV,YAAY,gBAAiB,CAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACV;AAAA;AAAA,GACH;AAEJ;AAEA,SAAS,gBAAA,CAAiB,EAAE,OAAA,EAAyD,EAAA;AACnF,EAAA,MAAM,YAAe,GAAA,SACnB,IACA,EAAA,YAAA,EACA,YACA,EAAA;AA5CJ,IAAA,IAAA,EAAA;AA6CI,IAAA,oDACG,UACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAA,CAAA,CAAO,UAAK,QAAL,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAe,QAAO,QAAS,CAAA,IAAA,CAAK,QAAS,CAAA,IAAI,CAAI,GAAA,IAAA;AAAA,QAC5D,YAAW,EAAA,UAAA;AAAA,QACX,OAAA;AAAA,QACA,gBAAgB,EAAA,IAAA;AAAA,QAChB,QAAA,EAAU,CAAC,EAAE,KAAA,OAAY,KAAS,IAAA,YAAA,CAAa,eAAgB,CAAA,KAAK,CAAC;AAAA;AAAA,KACvE,kBACCA,cAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,YAAW,EAAA,wBAAA,EAAyB,IAAK,EAAA,OAAA,EAAQ,OAAQ,EAAA,WAAA,EAAY,OAAS,EAAA,YAAA,EAAc,CAC/G,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,YAAA;AACT;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/OrderByRow.js

@@ -1,5 +1,5 @@
 import { uniqueId } from 'lodash';
-import React, { useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import { toOption } from '@grafana/data';
 import { Select, RadioButtonGroup, Input } from '@grafana/ui';
 import '../types.js';
@@ -45,7 +45,7 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
     },
     [onSqlChange, sql]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Order by", width: 25 }, /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(EditorField, { label: "Order by", width: 25 }, /* @__PURE__ */ React__default.createElement(InputGroup, null, /* @__PURE__ */ React__default.createElement(
     Select,
     {
       "aria-label": "Order by",
@@ -55,7 +55,7 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
       menuShouldPortal: true,
       onChange: onOrderByChange
     }
-  ), /* @__PURE__ */ React.createElement(Space, { h: 1.5 }), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(Space, { h: 1.5 }), /* @__PURE__ */ React__default.createElement(
     RadioButtonGroup,
     {
       options: sortOrderOptions,
@@ -63,7 +63,7 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
       value: sql.orderByDirection,
       onChange: onSortOrderChange
     }
-  ))), /* @__PURE__ */ React.createElement(EditorField, { label: "Limit", optional: true, width: 25 }, /* @__PURE__ */ React.createElement(Input, { type: "number", min: 0, id: uniqueId("limit-"), value: sql.limit || "", onChange: onLimitChange })), showOffset && /* @__PURE__ */ React.createElement(EditorField, { label: "Offset", optional: true, width: 25 }, /* @__PURE__ */ React.createElement(Input, { type: "number", id: uniqueId("offset-"), value: sql.offset || "", onChange: onOffsetChange })));
+  ))), /* @__PURE__ */ React__default.createElement(EditorField, { label: "Limit", optional: true, width: 25 }, /* @__PURE__ */ React__default.createElement(Input, { type: "number", min: 0, id: uniqueId("limit-"), value: sql.limit || "", onChange: onLimitChange })), showOffset && /* @__PURE__ */ React__default.createElement(EditorField, { label: "Offset", optional: true, width: 25 }, /* @__PURE__ */ React__default.createElement(Input, { type: "number", id: uniqueId("offset-"), value: sql.offset || "", onChange: onOffsetChange })));
 }
 
 export { OrderByRow };

package/dist/esm/components/QueryEditor/visual-query-builder/OrderByRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/OrderByRow.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport React, { useCallback } from 'react';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Input, RadioButtonGroup, Select } from '@grafana/ui';\nimport { type SQLExpression } from '../types';\nimport { setPropertyField } from '../utils/sql.utils';\n\nimport { Space } from '../Space';\nimport { EditorField } from '../EditorField';\nimport { InputGroup } from '../InputGroup';\n\ntype OrderByRowProps = {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  columns?: Array<SelectableValue<string>>;\n  showOffset?: boolean;\n};\n\nconst sortOrderOptions = [\n  { description: 'Sort by ascending', value: 'ASC', icon: 'sort-amount-up' } as const,\n  { description: 'Sort by descending', value: 'DESC', icon: 'sort-amount-down' } as const,\n];\n\nexport function OrderByRow({ sql, onSqlChange, columns, showOffset }: OrderByRowProps) {\n  const onSortOrderChange = useCallback(\n    (item: 'ASC' | 'DESC') => {\n      const newSql: SQLExpression = { ...sql, orderByDirection: item };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onLimitChange = useCallback(\n    (event: React.FormEvent<HTMLInputElement>) => {\n      const newSql: SQLExpression = { ...sql, limit: Number.parseInt(event.currentTarget.value, 10) };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onOffsetChange = useCallback(\n    (event: React.FormEvent<HTMLInputElement>) => {\n      const newSql: SQLExpression = { ...sql, offset: Number.parseInt(event.currentTarget.value, 10) };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onOrderByChange = useCallback(\n    (item: SelectableValue<string>) => {\n      const newSql: SQLExpression = { ...sql, orderBy: setPropertyField(item?.value) };\n      if (item === null) {\n        newSql.orderByDirection = undefined;\n      }\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  return (\n    <>\n      <EditorField label=\"Order by\" width={25}>\n        <InputGroup>\n          <Select\n            aria-label=\"Order by\"\n            options={columns}\n            value={sql.orderBy?.property.name ? toOption(sql.orderBy.property.name) : null}\n            isClearable\n            menuShouldPortal\n            onChange={onOrderByChange}\n          />\n\n          <Space h={1.5} />\n\n          <RadioButtonGroup\n            options={sortOrderOptions}\n            disabled={!sql?.orderBy?.property.name}\n            value={sql.orderByDirection}\n            onChange={onSortOrderChange}\n          />\n        </InputGroup>\n      </EditorField>\n      <EditorField label=\"Limit\" optional width={25}>\n        <Input type=\"number\" min={0} id={uniqueId('limit-')} value={sql.limit || ''} onChange={onLimitChange} />\n      </EditorField>\n      {showOffset && (\n        <EditorField label=\"Offset\" optional width={25}>\n          <Input type=\"number\" id={uniqueId('offset-')} value={sql.offset || ''} onChange={onOffsetChange} />\n        </EditorField>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OrderByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/OrderByRow.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport React, { useCallback } from 'react';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Input, RadioButtonGroup, Select } from '@grafana/ui';\nimport { type SQLExpression } from '../types';\nimport { setPropertyField } from '../utils/sql.utils';\n\nimport { Space } from '../Space';\nimport { EditorField } from '../EditorField';\nimport { InputGroup } from '../InputGroup';\n\ntype OrderByRowProps = {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  columns?: Array<SelectableValue<string>>;\n  showOffset?: boolean;\n};\n\nconst sortOrderOptions = [\n  { description: 'Sort by ascending', value: 'ASC', icon: 'sort-amount-up' } as const,\n  { description: 'Sort by descending', value: 'DESC', icon: 'sort-amount-down' } as const,\n];\n\nexport function OrderByRow({ sql, onSqlChange, columns, showOffset }: OrderByRowProps) {\n  const onSortOrderChange = useCallback(\n    (item: 'ASC' | 'DESC') => {\n      const newSql: SQLExpression = { ...sql, orderByDirection: item };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onLimitChange = useCallback(\n    (event: React.FormEvent<HTMLInputElement>) => {\n      const newSql: SQLExpression = { ...sql, limit: Number.parseInt(event.currentTarget.value, 10) };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onOffsetChange = useCallback(\n    (event: React.FormEvent<HTMLInputElement>) => {\n      const newSql: SQLExpression = { ...sql, offset: Number.parseInt(event.currentTarget.value, 10) };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onOrderByChange = useCallback(\n    (item: SelectableValue<string>) => {\n      const newSql: SQLExpression = { ...sql, orderBy: setPropertyField(item?.value) };\n      if (item === null) {\n        newSql.orderByDirection = undefined;\n      }\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  return (\n    <>\n      <EditorField label=\"Order by\" width={25}>\n        <InputGroup>\n          <Select\n            aria-label=\"Order by\"\n            options={columns}\n            value={sql.orderBy?.property.name ? toOption(sql.orderBy.property.name) : null}\n            isClearable\n            menuShouldPortal\n            onChange={onOrderByChange}\n          />\n\n          <Space h={1.5} />\n\n          <RadioButtonGroup\n            options={sortOrderOptions}\n            disabled={!sql?.orderBy?.property.name}\n            value={sql.orderByDirection}\n            onChange={onSortOrderChange}\n          />\n        </InputGroup>\n      </EditorField>\n      <EditorField label=\"Limit\" optional width={25}>\n        <Input type=\"number\" min={0} id={uniqueId('limit-')} value={sql.limit || ''} onChange={onLimitChange} />\n      </EditorField>\n      {showOffset && (\n        <EditorField label=\"Offset\" optional width={25}>\n          <Input type=\"number\" id={uniqueId('offset-')} value={sql.offset || ''} onChange={onOffsetChange} />\n        </EditorField>\n      )}\n    </>\n  );\n}\n"],"names":["React"],"mappings":"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"}