@grafana/plugin-ui 0.15.0 → 0.15.1

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

@@ -1,4 +1,4 @@
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useRef, useEffect, useCallback } from 'react';
 import '../types.js';
 import { formatSQL } from '../utils/formatSQL.js';
 import { SQLEditor } from '../../SQLEditor/components/SQLEditor.js';
@@ -16,11 +16,11 @@ function QueryEditorRaw({
   completionProvider,
   language = "sql"
 }) {
-  const queryRef = reactExports.useRef(query);
-  reactExports.useEffect(() => {
+  const queryRef = useRef(query);
+  useEffect(() => {
     queryRef.current = query;
   }, [query]);
-  const onRawQueryChange = reactExports.useCallback(
+  const onRawQueryChange = useCallback(
     (rawSql, processQuery) => {
       const newQuery = {
         ...queryRef.current,

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

@@ -1 +1 @@
-{"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\nimport type { SqlLanguage } from 'sql-formatter';\n\ntype Props = {\n  query: SQLQuery;\n  onChange: (value: SQLQuery, processQuery: boolean) => void;\n  children?: (props: { formatQuery: () => void }) => React.ReactNode;\n  width?: number;\n  height?: number;\n  completionProvider: LanguageCompletionProvider;\n  language?: SqlLanguage;\n};\n\nexport function QueryEditorRaw({\n  children,\n  onChange,\n  query,\n  width,\n  height,\n  completionProvider,\n  language = 'sql',\n}: Props) {\n  // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property\n  const queryRef = useRef<SQLQuery>(query);\n  useEffect(() => {\n    queryRef.current = query;\n  }, [query]);\n\n  const onRawQueryChange = useCallback(\n    (rawSql: string, processQuery: boolean) => {\n      const newQuery = {\n        ...queryRef.current,\n        rawQuery: true,\n        rawSql,\n      };\n      onChange(newQuery, processQuery);\n    },\n    [onChange]\n  );\n\n  return (\n    <SQLEditor\n      width={width}\n      height={height}\n      query={query.rawSql!}\n      onChange={onRawQueryChange}\n      language={{ id: 'sql', completionProvider, formatter: (q) => formatSQL(q, language) }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":["useRef","useEffect","useCallback"],"mappings":";;;;;;;;;AAkBO,SAAS,cAAe,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAW,GAAA;AACb,CAAU,EAAA;AAER,EAAM,MAAA,QAAA,GAAWA,oBAAiB,KAAK,CAAA;AACvC,EAAAC,sBAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AAAA,GACrB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAmB,GAAAC,wBAAA;AAAA,IACvB,CAAC,QAAgB,YAA0B,KAAA;AACzC,MAAA,MAAM,QAAW,GAAA;AAAA,QACf,GAAG,QAAS,CAAA,OAAA;AAAA,QACZ,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,QAAU,EAAA,gBAAA;AAAA,MACV,QAAA,EAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,SAAW,EAAA,CAAC,CAAM,KAAA,SAAA,CAAU,CAAG,EAAA,QAAQ,CAAE;AAAA,KAAA;AAAA,IAEnF;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\nimport type { SqlLanguage } from 'sql-formatter';\n\ntype Props = {\n  query: SQLQuery;\n  onChange: (value: SQLQuery, processQuery: boolean) => void;\n  children?: (props: { formatQuery: () => void }) => React.ReactNode;\n  width?: number;\n  height?: number;\n  completionProvider: LanguageCompletionProvider;\n  language?: SqlLanguage;\n};\n\nexport function QueryEditorRaw({\n  children,\n  onChange,\n  query,\n  width,\n  height,\n  completionProvider,\n  language = 'sql',\n}: Props) {\n  // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property\n  const queryRef = useRef<SQLQuery>(query);\n  useEffect(() => {\n    queryRef.current = query;\n  }, [query]);\n\n  const onRawQueryChange = useCallback(\n    (rawSql: string, processQuery: boolean) => {\n      const newQuery = {\n        ...queryRef.current,\n        rawQuery: true,\n        rawSql,\n      };\n      onChange(newQuery, processQuery);\n    },\n    [onChange]\n  );\n\n  return (\n    <SQLEditor\n      width={width}\n      height={height}\n      query={query.rawSql!}\n      onChange={onRawQueryChange}\n      language={{ id: 'sql', completionProvider, formatter: (q) => formatSQL(q, language) }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBO,SAAS,cAAe,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAW,GAAA;AACb,CAAU,EAAA;AAER,EAAM,MAAA,QAAA,GAAW,OAAiB,KAAK,CAAA;AACvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AAAA,GACrB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAgB,YAA0B,KAAA;AACzC,MAAA,MAAM,QAAW,GAAA;AAAA,QACf,GAAG,QAAS,CAAA,OAAA;AAAA,QACZ,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,QAAU,EAAA,gBAAA;AAAA,MACV,QAAA,EAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,SAAW,EAAA,CAAC,CAAM,KAAA,SAAA,CAAU,CAAG,EAAA,QAAQ,CAAE;AAAA,KAAA;AAAA,IAEnF;AAAA,GACH;AAEJ;;;;"}

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

@@ -1,13 +1,13 @@
 import { css } from '@emotion/css';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useState, useMemo } from 'react';
 import { useTheme2, HorizontalGroup, IconButton, Tooltip, Icon } from '@grafana/ui';
 import { QueryValidator } from './QueryValidator.js';
 import { reportInteraction } from '@grafana/runtime';
 
 function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }) {
   const theme = useTheme2();
-  const [validationResult, setValidationResult] = reactExports.useState();
-  const styles = reactExports.useMemo(() => {
+  const [validationResult, setValidationResult] = useState();
+  const styles = useMemo(() => {
     return {
       container: css`
         border: 1px solid ${theme.colors.border.medium};

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

@@ -1 +1 @@
-{"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\nimport { reportInteraction } from '@grafana/runtime';\n\ninterface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {\n  showTools?: boolean;\n  isExpanded?: boolean;\n  onFormatCode?: () => void;\n  onExpand?: (expand: boolean) => void;\n  onValidate?: (isValid: boolean) => void;\n}\n\nexport function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {\n  const theme = useTheme2();\n  const [validationResult, setValidationResult] = useState<boolean>();\n\n  const styles = useMemo(() => {\n    return {\n      container: css`\n        border: 1px solid ${theme.colors.border.medium};\n        border-top: none;\n        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        font-size: ${theme.typography.bodySmall.fontSize};\n      `,\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      hint: css`\n        color: ${theme.colors.text.disabled};\n        white-space: nowrap;\n        cursor: help;\n      `,\n    };\n  }, [theme]);\n\n  let style = {};\n\n  if (!showTools && validationResult === undefined) {\n    style = { height: 0, padding: 0, visibility: 'hidden' };\n  }\n  const onFormatClick = () => {\n    reportInteraction('grafana_sql_query_editor_format_click');\n    onFormatCode?.();\n  };\n\n  return (\n    <div className={styles.container} style={style}>\n      <div>\n        {validatorProps.onValidate && (\n          <QueryValidator\n            {...validatorProps}\n            onValidate={(result: boolean) => {\n              setValidationResult(result);\n              validatorProps.onValidate!(result);\n            }}\n          />\n        )}\n      </div>\n      {showTools && (\n        <div>\n          <HorizontalGroup spacing=\"sm\">\n            {onFormatCode && (\n              <IconButton onClick={onFormatClick} name=\"brackets-curly\" size=\"xs\" tooltip=\"Format query\" />\n            )}\n            {onExpand && (\n              <IconButton\n                onClick={() => onExpand(!isExpanded)}\n                name={isExpanded ? 'angle-up' : 'angle-down'}\n                size=\"xs\"\n                tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}\n              />\n            )}\n            <Tooltip content=\"Hit CTRL/CMD+Return to run query\">\n              <Icon className={styles.hint} name=\"keyboard\" />\n            </Tooltip>\n          </HorizontalGroup>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useMemo"],"mappings":"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"}
+{"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\nimport { reportInteraction } from '@grafana/runtime';\n\ninterface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {\n  showTools?: boolean;\n  isExpanded?: boolean;\n  onFormatCode?: () => void;\n  onExpand?: (expand: boolean) => void;\n  onValidate?: (isValid: boolean) => void;\n}\n\nexport function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {\n  const theme = useTheme2();\n  const [validationResult, setValidationResult] = useState<boolean>();\n\n  const styles = useMemo(() => {\n    return {\n      container: css`\n        border: 1px solid ${theme.colors.border.medium};\n        border-top: none;\n        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        font-size: ${theme.typography.bodySmall.fontSize};\n      `,\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      hint: css`\n        color: ${theme.colors.text.disabled};\n        white-space: nowrap;\n        cursor: help;\n      `,\n    };\n  }, [theme]);\n\n  let style = {};\n\n  if (!showTools && validationResult === undefined) {\n    style = { height: 0, padding: 0, visibility: 'hidden' };\n  }\n  const onFormatClick = () => {\n    reportInteraction('grafana_sql_query_editor_format_click');\n    onFormatCode?.();\n  };\n\n  return (\n    <div className={styles.container} style={style}>\n      <div>\n        {validatorProps.onValidate && (\n          <QueryValidator\n            {...validatorProps}\n            onValidate={(result: boolean) => {\n              setValidationResult(result);\n              validatorProps.onValidate!(result);\n            }}\n          />\n        )}\n      </div>\n      {showTools && (\n        <div>\n          <HorizontalGroup spacing=\"sm\">\n            {onFormatCode && (\n              <IconButton onClick={onFormatClick} name=\"brackets-curly\" size=\"xs\" tooltip=\"Format query\" />\n            )}\n            {onExpand && (\n              <IconButton\n                onClick={() => onExpand(!isExpanded)}\n                name={isExpanded ? 'angle-up' : 'angle-down'}\n                size=\"xs\"\n                tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}\n              />\n            )}\n            <Tooltip content=\"Hit CTRL/CMD+Return to run query\">\n              <Icon className={styles.hint} name=\"keyboard\" />\n            </Tooltip>\n          </HorizontalGroup>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useState, useMemo, useEffect } from 'react';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { getValueFormat, formattedValueToString } from '@grafana/data';
 import { useTheme2, Spinner, Icon } from '@grafana/ui';
@@ -7,10 +7,10 @@ import '../types.js';
 
 function QueryValidator({ db, query, onValidate, range }) {
   var _a;
-  const [validationResult, setValidationResult] = reactExports.useState();
+  const [validationResult, setValidationResult] = useState();
   const theme = useTheme2();
-  const valueFormatter = reactExports.useMemo(() => getValueFormat("bytes"), []);
-  const styles = reactExports.useMemo(() => {
+  const valueFormatter = useMemo(() => getValueFormat("bytes"), []);
+  const styles = useMemo(() => {
     return {
       error: css`
         color: ${theme.colors.error.text};
@@ -46,7 +46,7 @@ function QueryValidator({ db, query, onValidate, range }) {
     1e3,
     [query, validateQuery]
   );
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (validationResult == null ? undefined : validationResult.isError) {
       onValidate(false);
     }

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":["useState","useMemo","_a","useEffect"],"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"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useState, useMemo } from 'react';
 import { css } from '@emotion/css';
 import { useMeasure } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -20,10 +20,10 @@ function RawEditor({
 }) {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
-  const [isExpanded, setIsExpanded] = reactExports.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
   const [toolboxRef, toolboxMeasure] = useMeasure();
   const [editorRef, editorMeasure] = useMeasure();
-  const completionProvider = reactExports.useMemo(() => db.getSqlCompletionProvider(), [db]);
+  const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);
   const renderQueryEditor = (width, height) => {
     return /* @__PURE__ */ React.createElement(
       QueryEditorRaw,

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 React, { useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\nimport type { SqlLanguage } from 'sql-formatter';\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  language?: SqlLanguage;\n}\n\nexport function RawEditor({\n  db,\n  query,\n  onChange,\n  onRunQuery,\n  onValidate,\n  queryToValidate,\n  range,\n  language = 'sql',\n}: 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        language={language}\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":["useState","useMemo"],"mappings":"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"}
+{"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\nimport type { SqlLanguage } from 'sql-formatter';\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  language?: SqlLanguage;\n}\n\nexport function RawEditor({\n  db,\n  query,\n  onChange,\n  onRunQuery,\n  onValidate,\n  queryToValidate,\n  range,\n  language = 'sql',\n}: 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        language={language}\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":"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"}

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

@@ -1,7 +1,7 @@
 import '@react-awesome-query-builder/ui';
 import { toOption as toOption$1 } from '@grafana/data';
 import '@grafana/ui';
-import '../../_virtual/index.js';
+import 'react';
 import '../SQLEditor/standardSql/language.js';
 import 'uuid';
 import '@grafana/runtime';

package/dist/esm/components/QueryEditor/utils/useSqlChange.js

@@ -1,9 +1,9 @@
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useCallback } from 'react';
 import '../types.js';
 import { getRawSqlFn } from './sql.utils.js';
 
 function useSqlChange({ query, onQueryChange, db }) {
-  const onSqlChange = reactExports.useCallback(
+  const onSqlChange = useCallback(
     (sql) => {
       const toRawSql = getRawSqlFn(db);
       const rawSql = toRawSql({

package/dist/esm/components/QueryEditor/utils/useSqlChange.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSqlChange.js","sources":["../../../../../src/components/QueryEditor/utils/useSqlChange.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { type DB, type SQLExpression, type SQLQuery } from '../types';\n\nimport { getRawSqlFn } from './sql.utils';\n\ninterface UseSqlChange {\n  db: DB;\n  query: SQLQuery;\n  onQueryChange: (query: SQLQuery) => void;\n}\n\nexport function useSqlChange({ query, onQueryChange, db }: UseSqlChange) {\n  const onSqlChange = useCallback(\n    (sql: SQLExpression) => {\n      const toRawSql = getRawSqlFn(db);\n      const rawSql = toRawSql({\n        sql,\n        catalog: query.catalog,\n        dataset: query.dataset,\n        table: query.table,\n        refId: query.refId,\n      });\n      const newQuery: SQLQuery = { ...query, sql, rawSql };\n      onQueryChange(newQuery);\n    },\n    [db, onQueryChange, query]\n  );\n\n  return { onSqlChange };\n}\n"],"names":["useCallback"],"mappings":";;;;AAYO,SAAS,YAAa,CAAA,EAAE,KAAO,EAAA,aAAA,EAAe,IAAoB,EAAA;AACvE,EAAA,MAAM,WAAc,GAAAA,wBAAA;AAAA,IAClB,CAAC,GAAuB,KAAA;AACtB,MAAM,MAAA,QAAA,GAAW,YAAY,EAAE,CAAA;AAC/B,MAAA,MAAM,SAAS,QAAS,CAAA;AAAA,QACtB,GAAA;AAAA,QACA,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,OAAO,KAAM,CAAA;AAAA,OACd,CAAA;AACD,MAAA,MAAM,QAAqB,GAAA,EAAE,GAAG,KAAA,EAAO,KAAK,MAAO,EAAA;AACnD,MAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,EAAI,EAAA,aAAA,EAAe,KAAK;AAAA,GAC3B;AAEA,EAAA,OAAO,EAAE,WAAY,EAAA;AACvB;;;;"}
+{"version":3,"file":"useSqlChange.js","sources":["../../../../../src/components/QueryEditor/utils/useSqlChange.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { type DB, type SQLExpression, type SQLQuery } from '../types';\n\nimport { getRawSqlFn } from './sql.utils';\n\ninterface UseSqlChange {\n  db: DB;\n  query: SQLQuery;\n  onQueryChange: (query: SQLQuery) => void;\n}\n\nexport function useSqlChange({ query, onQueryChange, db }: UseSqlChange) {\n  const onSqlChange = useCallback(\n    (sql: SQLExpression) => {\n      const toRawSql = getRawSqlFn(db);\n      const rawSql = toRawSql({\n        sql,\n        catalog: query.catalog,\n        dataset: query.dataset,\n        table: query.table,\n        refId: query.refId,\n      });\n      const newQuery: SQLQuery = { ...query, sql, rawSql };\n      onQueryChange(newQuery);\n    },\n    [db, onQueryChange, query]\n  );\n\n  return { onSqlChange };\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,YAAa,CAAA,EAAE,KAAO,EAAA,aAAA,EAAe,IAAoB,EAAA;AACvE,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAuB,KAAA;AACtB,MAAM,MAAA,QAAA,GAAW,YAAY,EAAE,CAAA;AAC/B,MAAA,MAAM,SAAS,QAAS,CAAA;AAAA,QACtB,GAAA;AAAA,QACA,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,OAAO,KAAM,CAAA;AAAA,OACd,CAAA;AACD,MAAA,MAAM,QAAqB,GAAA,EAAE,GAAG,KAAA,EAAO,KAAK,MAAO,EAAA;AACnD,MAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,EAAI,EAAA,aAAA,EAAe,KAAK;AAAA,GAC3B;AAEA,EAAA,OAAO,EAAE,WAAY,EAAA;AACvB;;;;"}

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { isString } from 'lodash';
 import { Utils, BasicConfig } from '@react-awesome-query-builder/ui';
 import { dateTime, toOption } from '@grafana/data';

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import '@grafana/data';
 import { stylesFactory, useTheme2, ReactUtils, Tooltip, Icon, Field } from '@grafana/ui';
 import { Space } from '../Space.js';

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { css } from '@emotion/css';
 import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { EditorStack } from '../EditorStack.js';
 
 const EditorRows = ({ children }) => {

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

@@ -1,4 +1,4 @@
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useCallback } from 'react';
 import { toOption } from '@grafana/data';
 import '../types.js';
 import { setGroupByField } from '../utils/sql.utils.js';
@@ -8,7 +8,7 @@ import { AccessoryButton } from '../AccessoryButton.js';
 import { InputGroup } from '../InputGroup.js';
 
 function GroupByRow({ sql, columns, onSqlChange }) {
-  const onGroupByChange = reactExports.useCallback(
+  const onGroupByChange = useCallback(
     (item) => {
       const cleaned = item.map((v) => {
         var _a;

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';\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":["useCallback"],"mappings":";;;;;;;;;AAgBO,SAAS,UAAW,CAAA,EAAE,GAAK,EAAA,OAAA,EAAS,aAAgC,EAAA;AACzE,EAAA,MAAM,eAAkB,GAAAA,wBAAA;AAAA,IACtB,CAAC,IAAuD,KAAA;AAEtD,MAAA,MAAM,OAAU,GAAA,IAAA,CAAK,GAAI,CAAA,CAAC,CAAG,KAAA;AApBnC,QAAA,IAAA,EAAA;AAoBsC,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;AA3CJ,IAAA,IAAA,EAAA;AA4CI,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';\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":";;;;;;;;;AAgBO,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;AApBnC,QAAA,IAAA,EAAA;AAoBsC,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;AA3CJ,IAAA,IAAA,EAAA;AA4CI,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;;;;"}

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

@@ -1,5 +1,5 @@
 import { uniqueId } from 'lodash';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useCallback } from 'react';
 import { toOption } from '@grafana/data';
 import { Select, RadioButtonGroup, Input } from '@grafana/ui';
 import '../types.js';
@@ -14,28 +14,28 @@ const sortOrderOptions = [
 ];
 function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
   var _a, _b;
-  const onSortOrderChange = reactExports.useCallback(
+  const onSortOrderChange = useCallback(
     (item) => {
       const newSql = { ...sql, orderByDirection: item };
       onSqlChange(newSql);
     },
     [onSqlChange, sql]
   );
-  const onLimitChange = reactExports.useCallback(
+  const onLimitChange = useCallback(
     (event) => {
       const newSql = { ...sql, limit: Number.parseInt(event.currentTarget.value, 10) };
       onSqlChange(newSql);
     },
     [onSqlChange, sql]
   );
-  const onOffsetChange = reactExports.useCallback(
+  const onOffsetChange = useCallback(
     (event) => {
       const newSql = { ...sql, offset: Number.parseInt(event.currentTarget.value, 10) };
       onSqlChange(newSql);
     },
     [onSqlChange, sql]
   );
-  const onOrderByChange = reactExports.useCallback(
+  const onOrderByChange = useCallback(
     (item) => {
       const newSql = { ...sql, orderBy: setPropertyField(item == null ? undefined : item.value) };
       if (item === null) {

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';\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';\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":["useCallback"],"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';\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';\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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"}

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { css } from '@emotion/css';
 import { useCopyToClipboard } from 'react-use';
 import '@grafana/data';

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import '@grafana/data';
 import { GroupByRow } from './GroupByRow.js';
 import '../types.js';

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import '@grafana/data';
 import { OrderByRow } from './OrderByRow.js';
 import '../types.js';

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { useAsync } from 'react-use';
 import { toOption } from '@grafana/data';
 import { SelectRow } from './SelectRow.js';

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { useAsync } from 'react-use';
 import '@grafana/data';
 import './AwesomeQueryBuilder.js';

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { uniqueId } from 'lodash';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useCallback } from 'react';
 import { toOption } from '@grafana/data';
 import { useStyles2, Select, Button } from '@grafana/ui';
 import { EditorField } from '../EditorField.js';
@@ -14,7 +14,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
   var _a;
   const styles = useStyles2(getStyles);
   const columnsWithAsterisk = [asteriskValue, ...columns || []];
-  const onColumnChange = reactExports.useCallback(
+  const onColumnChange = useCallback(
     (item, index) => (column) => {
       var _a2, _b;
       let modifiedItem = { ...item };
@@ -33,7 +33,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     },
     [onSqlChange, sql]
   );
-  const onAggregationChange = reactExports.useCallback(
+  const onAggregationChange = useCallback(
     (item, index) => (aggregation) => {
       var _a2;
       const newItem = {
@@ -48,7 +48,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     },
     [onSqlChange, sql]
   );
-  const removeColumn = reactExports.useCallback(
+  const removeColumn = useCallback(
     (index) => () => {
       const clone = [...sql.columns];
       clone.splice(index, 1);
@@ -60,7 +60,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     },
     [onSqlChange, sql]
   );
-  const addColumn = reactExports.useCallback(() => {
+  const addColumn = useCallback(() => {
     const newSql = { ...sql, columns: [...sql.columns, createFunctionField()] };
     onSqlChange(newSql);
   }, [onSqlChange, sql]);

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

@@ -1 +1 @@
-{"version":3,"file":"SelectRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SelectRow.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport React, { useCallback } from 'react';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Button, Select, useStyles2 } from '@grafana/ui';\nimport { EditorField } from '../EditorField';\nimport { type QueryEditorFunctionExpression, QueryEditorExpressionType } from '../expressions';\nimport { type SQLExpression } from '../types';\nimport { createFunctionField } from '../utils/sql.utils';\nimport { EditorStack } from '../EditorStack';\n\ninterface SelectRowProps {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  columns?: Array<SelectableValue<string>>;\n  functions?: Array<SelectableValue<string>>;\n}\n\nconst asteriskValue = { label: '*', value: '*' };\n\nexport function SelectRow({ sql, columns, onSqlChange, functions }: SelectRowProps) {\n  const styles = useStyles2(getStyles);\n  const columnsWithAsterisk = [asteriskValue, ...(columns || [])];\n\n  const onColumnChange = useCallback(\n    (item: QueryEditorFunctionExpression, index: number) => (column: SelectableValue<string>) => {\n      let modifiedItem = { ...item };\n      if (!item.parameters?.length) {\n        modifiedItem.parameters = [{ type: QueryEditorExpressionType.FunctionParameter, name: column.value } as const];\n      } else {\n        modifiedItem.parameters = item.parameters.map((p) =>\n          p.type === QueryEditorExpressionType.FunctionParameter ? { ...p, name: column.value } : p\n        );\n      }\n\n      const newSql: SQLExpression = {\n        ...sql,\n        columns: sql.columns?.map((c, i) => (i === index ? modifiedItem : c)),\n      };\n\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onAggregationChange = useCallback(\n    (item: QueryEditorFunctionExpression, index: number) => (aggregation: SelectableValue<string>) => {\n      const newItem = {\n        ...item,\n        name: aggregation?.value,\n      };\n      const newSql: SQLExpression = {\n        ...sql,\n        columns: sql.columns?.map((c, i) => (i === index ? newItem : c)),\n      };\n\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const removeColumn = useCallback(\n    (index: number) => () => {\n      const clone = [...sql.columns!];\n      clone.splice(index, 1);\n      const newSql: SQLExpression = {\n        ...sql,\n        columns: clone,\n      };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const addColumn = useCallback(() => {\n    const newSql: SQLExpression = { ...sql, columns: [...sql.columns!, createFunctionField()] };\n    onSqlChange(newSql);\n  }, [onSqlChange, sql]);\n\n  return (\n    <EditorStack gap={2} alignItems=\"end\" direction=\"column\">\n      {sql.columns?.map((item, index) => (\n        <div key={index}>\n          <EditorStack gap={2} alignItems=\"end\">\n            <EditorField label=\"Column\" width={25}>\n              <Select\n                value={getColumnValue(item)}\n                options={columnsWithAsterisk}\n                inputId={`select-column-${index}-${uniqueId()}`}\n                menuShouldPortal\n                allowCustomValue\n                onChange={onColumnChange(item, index)}\n              />\n            </EditorField>\n\n            <EditorField label=\"Aggregation\" optional width={25}>\n              <Select\n                value={item.name ? toOption(item.name) : null}\n                inputId={`select-aggregation-${index}-${uniqueId()}`}\n                isClearable\n                menuShouldPortal\n                allowCustomValue\n                options={functions}\n                onChange={onAggregationChange(item, index)}\n              />\n            </EditorField>\n            <Button\n              aria-label=\"Remove\"\n              type=\"button\"\n              icon=\"trash-alt\"\n              variant=\"secondary\"\n              size=\"md\"\n              onClick={removeColumn(index)}\n            />\n          </EditorStack>\n        </div>\n      ))}\n      <Button\n        type=\"button\"\n        onClick={addColumn}\n        variant=\"secondary\"\n        size=\"md\"\n        icon=\"plus\"\n        aria-label=\"Add\"\n        className={styles.addButton}\n      />\n    </EditorStack>\n  );\n}\n\nconst getStyles = () => {\n  return { addButton: css({ alignSelf: 'flex-start' }) };\n};\n\nfunction getColumnValue({ parameters }: QueryEditorFunctionExpression): SelectableValue<string> | null {\n  const column = parameters?.find((p) => p.type === QueryEditorExpressionType.FunctionParameter);\n  if (column?.name) {\n    return toOption(column.name);\n  }\n  return null;\n}\n"],"names":["useCallback","_a"],"mappings":"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"}
+{"version":3,"file":"SelectRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SelectRow.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport React, { useCallback } from 'react';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Button, Select, useStyles2 } from '@grafana/ui';\nimport { EditorField } from '../EditorField';\nimport { type QueryEditorFunctionExpression, QueryEditorExpressionType } from '../expressions';\nimport { type SQLExpression } from '../types';\nimport { createFunctionField } from '../utils/sql.utils';\nimport { EditorStack } from '../EditorStack';\n\ninterface SelectRowProps {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  columns?: Array<SelectableValue<string>>;\n  functions?: Array<SelectableValue<string>>;\n}\n\nconst asteriskValue = { label: '*', value: '*' };\n\nexport function SelectRow({ sql, columns, onSqlChange, functions }: SelectRowProps) {\n  const styles = useStyles2(getStyles);\n  const columnsWithAsterisk = [asteriskValue, ...(columns || [])];\n\n  const onColumnChange = useCallback(\n    (item: QueryEditorFunctionExpression, index: number) => (column: SelectableValue<string>) => {\n      let modifiedItem = { ...item };\n      if (!item.parameters?.length) {\n        modifiedItem.parameters = [{ type: QueryEditorExpressionType.FunctionParameter, name: column.value } as const];\n      } else {\n        modifiedItem.parameters = item.parameters.map((p) =>\n          p.type === QueryEditorExpressionType.FunctionParameter ? { ...p, name: column.value } : p\n        );\n      }\n\n      const newSql: SQLExpression = {\n        ...sql,\n        columns: sql.columns?.map((c, i) => (i === index ? modifiedItem : c)),\n      };\n\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onAggregationChange = useCallback(\n    (item: QueryEditorFunctionExpression, index: number) => (aggregation: SelectableValue<string>) => {\n      const newItem = {\n        ...item,\n        name: aggregation?.value,\n      };\n      const newSql: SQLExpression = {\n        ...sql,\n        columns: sql.columns?.map((c, i) => (i === index ? newItem : c)),\n      };\n\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const removeColumn = useCallback(\n    (index: number) => () => {\n      const clone = [...sql.columns!];\n      clone.splice(index, 1);\n      const newSql: SQLExpression = {\n        ...sql,\n        columns: clone,\n      };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const addColumn = useCallback(() => {\n    const newSql: SQLExpression = { ...sql, columns: [...sql.columns!, createFunctionField()] };\n    onSqlChange(newSql);\n  }, [onSqlChange, sql]);\n\n  return (\n    <EditorStack gap={2} alignItems=\"end\" direction=\"column\">\n      {sql.columns?.map((item, index) => (\n        <div key={index}>\n          <EditorStack gap={2} alignItems=\"end\">\n            <EditorField label=\"Column\" width={25}>\n              <Select\n                value={getColumnValue(item)}\n                options={columnsWithAsterisk}\n                inputId={`select-column-${index}-${uniqueId()}`}\n                menuShouldPortal\n                allowCustomValue\n                onChange={onColumnChange(item, index)}\n              />\n            </EditorField>\n\n            <EditorField label=\"Aggregation\" optional width={25}>\n              <Select\n                value={item.name ? toOption(item.name) : null}\n                inputId={`select-aggregation-${index}-${uniqueId()}`}\n                isClearable\n                menuShouldPortal\n                allowCustomValue\n                options={functions}\n                onChange={onAggregationChange(item, index)}\n              />\n            </EditorField>\n            <Button\n              aria-label=\"Remove\"\n              type=\"button\"\n              icon=\"trash-alt\"\n              variant=\"secondary\"\n              size=\"md\"\n              onClick={removeColumn(index)}\n            />\n          </EditorStack>\n        </div>\n      ))}\n      <Button\n        type=\"button\"\n        onClick={addColumn}\n        variant=\"secondary\"\n        size=\"md\"\n        icon=\"plus\"\n        aria-label=\"Add\"\n        className={styles.addButton}\n      />\n    </EditorStack>\n  );\n}\n\nconst getStyles = () => {\n  return { addButton: css({ alignSelf: 'flex-start' }) };\n};\n\nfunction getColumnValue({ parameters }: QueryEditorFunctionExpression): SelectableValue<string> | null {\n  const column = parameters?.find((p) => p.type === QueryEditorExpressionType.FunctionParameter);\n  if (column?.name) {\n    return toOption(column.name);\n  }\n  return null;\n}\n"],"names":["_a"],"mappings":";;;;;;;;;;;AAkBA,MAAM,aAAgB,GAAA,EAAE,KAAO,EAAA,GAAA,EAAK,OAAO,GAAI,EAAA;AAExC,SAAS,UAAU,EAAE,GAAA,EAAK,OAAS,EAAA,WAAA,EAAa,WAA6B,EAAA;AApBpF,EAAA,IAAA,EAAA;AAqBE,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,sBAAsB,CAAC,aAAA,EAAe,GAAI,OAAA,IAAW,EAAG,CAAA;AAE9D,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,IAAA,EAAqC,KAAkB,KAAA,CAAC,MAAoC,KAAA;AAzBjG,MAAA,IAAAA,GAAA,EAAA,EAAA;AA0BM,MAAI,IAAA,YAAA,GAAe,EAAE,GAAG,IAAK,EAAA;AAC7B,MAAA,IAAI,GAACA,GAAA,GAAA,IAAA,CAAK,UAAL,KAAA,IAAA,GAAA,SAAA,GAAAA,IAAiB,MAAQ,CAAA,EAAA;AAC5B,QAAa,YAAA,CAAA,UAAA,GAAa,CAAC,EAAE,IAAA,EAAM,0BAA0B,iBAAmB,EAAA,IAAA,EAAM,MAAO,CAAA,KAAA,EAAgB,CAAA;AAAA,OACxG,MAAA;AACL,QAAa,YAAA,CAAA,UAAA,GAAa,KAAK,UAAW,CAAA,GAAA;AAAA,UAAI,CAAC,CAAA,KAC7C,CAAE,CAAA,IAAA,KAAS,yBAA0B,CAAA,iBAAA,GAAoB,EAAE,GAAG,CAAG,EAAA,IAAA,EAAM,MAAO,CAAA,KAAA,EAAU,GAAA;AAAA,SAC1F;AAAA;AAGF,MAAA,MAAM,MAAwB,GAAA;AAAA,QAC5B,GAAG,GAAA;AAAA,QACH,OAAA,EAAA,CAAS,EAAI,GAAA,GAAA,CAAA,OAAA,KAAJ,IAAa,GAAA,SAAA,GAAA,EAAA,CAAA,GAAA,CAAI,CAAC,CAAG,EAAA,CAAA,KAAO,CAAM,KAAA,KAAA,GAAQ,YAAe,GAAA,CAAA;AAAA,OACpE;AAEA,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,IAAA,EAAqC,KAAkB,KAAA,CAAC,WAAyC,KAAA;AA9CtG,MAAAA,IAAAA,GAAAA;AA+CM,MAAA,MAAM,OAAU,GAAA;AAAA,QACd,GAAG,IAAA;AAAA,QACH,MAAM,WAAa,IAAA,IAAA,GAAA,SAAA,GAAA,WAAA,CAAA;AAAA,OACrB;AACA,MAAA,MAAM,MAAwB,GAAA;AAAA,QAC5B,GAAG,GAAA;AAAA,QACH,OAASA,EAAAA,CAAAA,GAAAA,GAAA,GAAI,CAAA,OAAA,KAAJ,IAAAA,GAAAA,SAAAA,GAAAA,GAAAA,CAAa,GAAI,CAAA,CAAC,CAAG,EAAA,CAAA,KAAO,CAAM,KAAA,KAAA,GAAQ,OAAU,GAAA,CAAA;AAAA,OAC/D;AAEA,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,UAAkB,MAAM;AACvB,MAAA,MAAM,KAAQ,GAAA,CAAC,GAAG,GAAA,CAAI,OAAQ,CAAA;AAC9B,MAAM,KAAA,CAAA,MAAA,CAAO,OAAO,CAAC,CAAA;AACrB,MAAA,MAAM,MAAwB,GAAA;AAAA,QAC5B,GAAG,GAAA;AAAA,QACH,OAAS,EAAA;AAAA,OACX;AACA,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAM,MAAA,MAAA,GAAwB,EAAE,GAAG,GAAK,EAAA,OAAA,EAAS,CAAC,GAAG,GAAI,CAAA,OAAA,EAAU,mBAAoB,EAAC,CAAE,EAAA;AAC1F,IAAA,WAAA,CAAY,MAAM,CAAA;AAAA,GACjB,EAAA,CAAC,WAAa,EAAA,GAAG,CAAC,CAAA;AAErB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,GAAK,EAAA,CAAA,EAAG,UAAW,EAAA,KAAA,EAAM,SAAU,EAAA,QAAA,EAAA,EAAA,CAC7C,EAAI,GAAA,GAAA,CAAA,OAAA,KAAJ,IAAa,GAAA,SAAA,GAAA,EAAA,CAAA,GAAA,CAAI,CAAC,IAAM,EAAA,KAAA,qBACtB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,KAAA,EAAA,kBACP,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,GAAK,EAAA,CAAA,EAAG,UAAW,EAAA,KAAA,EAAA,kBAC7B,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAM,EAAA,QAAA,EAAS,OAAO,EACjC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,eAAe,IAAI,CAAA;AAAA,MAC1B,OAAS,EAAA,mBAAA;AAAA,MACT,OAAS,EAAA,CAAA,cAAA,EAAiB,KAAK,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA;AAAA,MAC7C,gBAAgB,EAAA,IAAA;AAAA,MAChB,gBAAgB,EAAA,IAAA;AAAA,MAChB,QAAA,EAAU,cAAe,CAAA,IAAA,EAAM,KAAK;AAAA;AAAA,GAExC,mBAEC,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,OAAM,aAAc,EAAA,QAAA,EAAQ,IAAC,EAAA,KAAA,EAAO,EAC/C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAO,IAAK,CAAA,IAAA,GAAO,QAAS,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,IAAA;AAAA,MACzC,OAAS,EAAA,CAAA,mBAAA,EAAsB,KAAK,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA;AAAA,MAClD,WAAW,EAAA,IAAA;AAAA,MACX,gBAAgB,EAAA,IAAA;AAAA,MAChB,gBAAgB,EAAA,IAAA;AAAA,MAChB,OAAS,EAAA,SAAA;AAAA,MACT,QAAA,EAAU,mBAAoB,CAAA,IAAA,EAAM,KAAK;AAAA;AAAA,GAE7C,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,QAAA;AAAA,MACX,IAAK,EAAA,QAAA;AAAA,MACL,IAAK,EAAA,WAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,IAAA;AAAA,MACL,OAAA,EAAS,aAAa,KAAK;AAAA;AAAA,GAE/B,CACF,CAEF,CAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,QAAA;AAAA,MACL,OAAS,EAAA,SAAA;AAAA,MACT,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,IAAA;AAAA,MACL,IAAK,EAAA,MAAA;AAAA,MACL,YAAW,EAAA,KAAA;AAAA,MACX,WAAW,MAAO,CAAA;AAAA;AAAA,GAEtB,CAAA;AAEJ;AAEA,MAAM,YAAY,MAAM;AACtB,EAAA,OAAO,EAAE,SAAW,EAAA,GAAA,CAAI,EAAE,SAAW,EAAA,YAAA,EAAc,CAAE,EAAA;AACvD,CAAA;AAEA,SAAS,cAAA,CAAe,EAAE,UAAA,EAA6E,EAAA;AACrG,EAAA,MAAM,SAAS,UAAY,IAAA,IAAA,GAAA,SAAA,GAAA,UAAA,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,yBAA0B,CAAA,iBAAA,CAAA;AAC5E,EAAA,IAAI,oCAAQ,IAAM,EAAA;AAChB,IAAO,OAAA,QAAA,CAAS,OAAO,IAAI,CAAA;AAAA;AAE7B,EAAO,OAAA,IAAA;AACT;;;;"}

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { useAsync } from 'react-use';
 import '../types.js';
 import { QueryToolbox } from '../query-editor-raw/QueryToolbox.js';

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

@@ -1,25 +1,25 @@
 import { injectGlobal } from '@emotion/css';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { Utils, Query, Builder } from '@react-awesome-query-builder/ui';
 import '../types.js';
 import { raqbConfig, emptyInitTree } from './AwesomeQueryBuilder.js';
 
 function WhereRow({ sql, config, onSqlChange }) {
-  const [tree, setTree] = reactExports.useState();
-  const configWithDefaults = reactExports.useMemo(() => ({ ...raqbConfig, ...config }), [config]);
-  reactExports.useEffect(() => {
+  const [tree, setTree] = useState();
+  const configWithDefaults = useMemo(() => ({ ...raqbConfig, ...config }), [config]);
+  useEffect(() => {
     var _a;
     if (!tree) {
       const initTree = Utils.checkTree(Utils.loadTree((_a = sql.whereJsonTree) != null ? _a : emptyInitTree), configWithDefaults);
       setTree(initTree);
     }
   }, [configWithDefaults, sql.whereJsonTree, tree]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (!sql.whereJsonTree) {
       setTree(Utils.checkTree(Utils.loadTree(emptyInitTree), configWithDefaults));
     }
   }, [configWithDefaults, sql.whereJsonTree]);
-  const onTreeChange = reactExports.useCallback(
+  const onTreeChange = useCallback(
     (changedTree, config2) => {
       setTree(changedTree);
       const newSql = {

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

@@ -1 +1 @@
-{"version":3,"file":"WhereRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/WhereRow.tsx"],"sourcesContent":["import { injectGlobal } from '@emotion/css';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Builder, type Config, type ImmutableTree, Query, Utils } from '@react-awesome-query-builder/ui';\nimport { type SQLExpression } from '../types';\nimport { emptyInitTree, raqbConfig } from './AwesomeQueryBuilder';\n\ninterface SQLBuilderWhereRowProps {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  config?: Partial<Config>;\n}\n\nexport function WhereRow({ sql, config, onSqlChange }: SQLBuilderWhereRowProps) {\n  const [tree, setTree] = useState<ImmutableTree>();\n  const configWithDefaults = useMemo(() => ({ ...raqbConfig, ...config }), [config]);\n\n  useEffect(() => {\n    // Set the initial tree\n    if (!tree) {\n      const initTree = Utils.checkTree(Utils.loadTree(sql.whereJsonTree ?? emptyInitTree), configWithDefaults);\n      setTree(initTree);\n    }\n  }, [configWithDefaults, sql.whereJsonTree, tree]);\n\n  useEffect(() => {\n    if (!sql.whereJsonTree) {\n      setTree(Utils.checkTree(Utils.loadTree(emptyInitTree), configWithDefaults));\n    }\n  }, [configWithDefaults, sql.whereJsonTree]);\n\n  const onTreeChange = useCallback(\n    (changedTree: ImmutableTree, config: Config) => {\n      setTree(changedTree);\n      const newSql = {\n        ...sql,\n        whereJsonTree: Utils.getTree(changedTree),\n        whereString: Utils.sqlFormat(changedTree, config),\n      };\n\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  if (!tree) {\n    return null;\n  }\n\n  return (\n    <Query\n      {...configWithDefaults}\n      value={tree}\n      onChange={onTreeChange}\n      renderBuilder={(props) => <Builder {...props} />}\n    />\n  );\n}\n\nfunction flex(direction: string) {\n  return `\n    display: flex;\n    gap: 8px;\n    flex-direction: ${direction};`;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-expressions\ninjectGlobal`\n  .group--header {\n    ${flex('row')}\n  }\n\n  .group-or-rule {\n    ${flex('column')}\n    .rule {\n      flex-direction: row;\n    }\n  }\n\n  .rule--body {\n    ${flex('row')}\n  }\n\n  .group--children {\n    ${flex('column')}\n  }\n\n  .group--conjunctions:empty {\n    display: none;\n  }\n`;\n"],"names":["useState","useMemo","useEffect","useCallback","config"],"mappings":";;;;;;AAYO,SAAS,QAAS,CAAA,EAAE,GAAK,EAAA,MAAA,EAAQ,aAAwC,EAAA;AAC9E,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,qBAAwB,EAAA;AAChD,EAAM,MAAA,kBAAA,GAAqBC,oBAAQ,CAAA,OAAO,EAAE,GAAG,UAAY,EAAA,GAAG,MAAO,EAAA,CAAA,EAAI,CAAC,MAAM,CAAC,CAAA;AAEjF,EAAAC,sBAAA,CAAU,MAAM;AAhBlB,IAAA,IAAA,EAAA;AAkBI,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,SAAA,CAAU,KAAM,CAAA,QAAA,CAAA,CAAS,SAAI,aAAJ,KAAA,IAAA,GAAA,EAAA,GAAqB,aAAa,CAAA,EAAG,kBAAkB,CAAA;AACvG,MAAA,OAAA,CAAQ,QAAQ,CAAA;AAAA;AAClB,KACC,CAAC,kBAAA,EAAoB,GAAI,CAAA,aAAA,EAAe,IAAI,CAAC,CAAA;AAEhD,EAAAA,sBAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,IAAI,aAAe,EAAA;AACtB,MAAA,OAAA,CAAQ,MAAM,SAAU,CAAA,KAAA,CAAM,SAAS,aAAa,CAAA,EAAG,kBAAkB,CAAC,CAAA;AAAA;AAC5E,GACC,EAAA,CAAC,kBAAoB,EAAA,GAAA,CAAI,aAAa,CAAC,CAAA;AAE1C,EAAA,MAAM,YAAe,GAAAC,wBAAA;AAAA,IACnB,CAAC,aAA4BC,OAAmB,KAAA;AAC9C,MAAA,OAAA,CAAQ,WAAW,CAAA;AACnB,MAAA,MAAM,MAAS,GAAA;AAAA,QACb,GAAG,GAAA;AAAA,QACH,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,WAAW,CAAA;AAAA,QACxC,WAAa,EAAA,KAAA,CAAM,SAAU,CAAA,WAAA,EAAaA,OAAM;AAAA,OAClD;AAEA,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAO,EAAA,IAAA;AAAA,MACP,QAAU,EAAA,YAAA;AAAA,MACV,eAAe,CAAC,KAAA,qBAAW,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAS,GAAG,KAAO,EAAA;AAAA;AAAA,GAChD;AAEJ;AAEA,SAAS,KAAK,SAAmB,EAAA;AAC/B,EAAO,OAAA;AAAA;AAAA;AAAA,oBAAA,EAGa,SAAS,CAAA,CAAA,CAAA;AAC/B;AAGA,YAAA;AAAA;AAAA,IAEM,EAAA,IAAA,CAAK,KAAK,CAAC;AAAA;;AAAA;AAAA,IAIX,EAAA,IAAA,CAAK,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,IAOd,EAAA,IAAA,CAAK,KAAK,CAAC;AAAA;;AAAA;AAAA,IAIX,EAAA,IAAA,CAAK,QAAQ,CAAC;AAAA;;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"WhereRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/WhereRow.tsx"],"sourcesContent":["import { injectGlobal } from '@emotion/css';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Builder, type Config, type ImmutableTree, Query, Utils } from '@react-awesome-query-builder/ui';\nimport { type SQLExpression } from '../types';\nimport { emptyInitTree, raqbConfig } from './AwesomeQueryBuilder';\n\ninterface SQLBuilderWhereRowProps {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  config?: Partial<Config>;\n}\n\nexport function WhereRow({ sql, config, onSqlChange }: SQLBuilderWhereRowProps) {\n  const [tree, setTree] = useState<ImmutableTree>();\n  const configWithDefaults = useMemo(() => ({ ...raqbConfig, ...config }), [config]);\n\n  useEffect(() => {\n    // Set the initial tree\n    if (!tree) {\n      const initTree = Utils.checkTree(Utils.loadTree(sql.whereJsonTree ?? emptyInitTree), configWithDefaults);\n      setTree(initTree);\n    }\n  }, [configWithDefaults, sql.whereJsonTree, tree]);\n\n  useEffect(() => {\n    if (!sql.whereJsonTree) {\n      setTree(Utils.checkTree(Utils.loadTree(emptyInitTree), configWithDefaults));\n    }\n  }, [configWithDefaults, sql.whereJsonTree]);\n\n  const onTreeChange = useCallback(\n    (changedTree: ImmutableTree, config: Config) => {\n      setTree(changedTree);\n      const newSql = {\n        ...sql,\n        whereJsonTree: Utils.getTree(changedTree),\n        whereString: Utils.sqlFormat(changedTree, config),\n      };\n\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  if (!tree) {\n    return null;\n  }\n\n  return (\n    <Query\n      {...configWithDefaults}\n      value={tree}\n      onChange={onTreeChange}\n      renderBuilder={(props) => <Builder {...props} />}\n    />\n  );\n}\n\nfunction flex(direction: string) {\n  return `\n    display: flex;\n    gap: 8px;\n    flex-direction: ${direction};`;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-expressions\ninjectGlobal`\n  .group--header {\n    ${flex('row')}\n  }\n\n  .group-or-rule {\n    ${flex('column')}\n    .rule {\n      flex-direction: row;\n    }\n  }\n\n  .rule--body {\n    ${flex('row')}\n  }\n\n  .group--children {\n    ${flex('column')}\n  }\n\n  .group--conjunctions:empty {\n    display: none;\n  }\n`;\n"],"names":["config"],"mappings":";;;;;;AAYO,SAAS,QAAS,CAAA,EAAE,GAAK,EAAA,MAAA,EAAQ,aAAwC,EAAA;AAC9E,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAwB,EAAA;AAChD,EAAM,MAAA,kBAAA,GAAqB,OAAQ,CAAA,OAAO,EAAE,GAAG,UAAY,EAAA,GAAG,MAAO,EAAA,CAAA,EAAI,CAAC,MAAM,CAAC,CAAA;AAEjF,EAAA,SAAA,CAAU,MAAM;AAhBlB,IAAA,IAAA,EAAA;AAkBI,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,SAAA,CAAU,KAAM,CAAA,QAAA,CAAA,CAAS,SAAI,aAAJ,KAAA,IAAA,GAAA,EAAA,GAAqB,aAAa,CAAA,EAAG,kBAAkB,CAAA;AACvG,MAAA,OAAA,CAAQ,QAAQ,CAAA;AAAA;AAClB,KACC,CAAC,kBAAA,EAAoB,GAAI,CAAA,aAAA,EAAe,IAAI,CAAC,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,IAAI,aAAe,EAAA;AACtB,MAAA,OAAA,CAAQ,MAAM,SAAU,CAAA,KAAA,CAAM,SAAS,aAAa,CAAA,EAAG,kBAAkB,CAAC,CAAA;AAAA;AAC5E,GACC,EAAA,CAAC,kBAAoB,EAAA,GAAA,CAAI,aAAa,CAAC,CAAA;AAE1C,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,aAA4BA,OAAmB,KAAA;AAC9C,MAAA,OAAA,CAAQ,WAAW,CAAA;AACnB,MAAA,MAAM,MAAS,GAAA;AAAA,QACb,GAAG,GAAA;AAAA,QACH,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,WAAW,CAAA;AAAA,QACxC,WAAa,EAAA,KAAA,CAAM,SAAU,CAAA,WAAA,EAAaA,OAAM;AAAA,OAClD;AAEA,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAO,EAAA,IAAA;AAAA,MACP,QAAU,EAAA,YAAA;AAAA,MACV,eAAe,CAAC,KAAA,qBAAW,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAS,GAAG,KAAO,EAAA;AAAA;AAAA,GAChD;AAEJ;AAEA,SAAS,KAAK,SAAmB,EAAA;AAC/B,EAAO,OAAA;AAAA;AAAA;AAAA,oBAAA,EAGa,SAAS,CAAA,CAAA,CAAA;AAC/B;AAGA,YAAA;AAAA;AAAA,IAEM,EAAA,IAAA,CAAK,KAAK,CAAC;AAAA;;AAAA;AAAA,IAIX,EAAA,IAAA,CAAK,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,IAOd,EAAA,IAAA,CAAK,KAAK,CAAC;AAAA;;AAAA;AAAA,IAIX,EAAA,IAAA,CAAK,QAAQ,CAAC;AAAA;;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/esm/components/QueryEditorRow/QueryEditorRow.js

@@ -1,4 +1,4 @@
-import React from '../../_virtual/index.js';
+import React from 'react';
 
 const QueryEditorRow = (props) => {
   var _a, _b;