@grafana/plugin-ui 0.13.1 → 0.14.1-dsconfig.b962e11

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

@@ -37,9 +37,9 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
   );
   const onOrderByChange = useCallback(
     (item) => {
-      const newSql = { ...sql, orderBy: setPropertyField(item == null ? undefined : item.value) };
+      const newSql = { ...sql, orderBy: setPropertyField(item == null ? void 0 : item.value) };
       if (item === null) {
-        newSql.orderByDirection = undefined;
+        newSql.orderByDirection = void 0;
       }
       onSqlChange(newSql);
     },
@@ -50,7 +50,7 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
     {
       "aria-label": "Order by",
       options: columns,
-      value: ((_a = sql.orderBy) == null ? undefined : _a.property.name) ? toOption(sql.orderBy.property.name) : null,
+      value: ((_a = sql.orderBy) == null ? void 0 : _a.property.name) ? toOption(sql.orderBy.property.name) : null,
       isClearable: true,
       menuShouldPortal: true,
       onChange: onOrderByChange
@@ -59,7 +59,7 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
     RadioButtonGroup,
     {
       options: sortOrderOptions,
-      disabled: !((_b = sql == null ? undefined : sql.orderBy) == null ? undefined : _b.property.name),
+      disabled: !((_b = sql == null ? void 0 : sql.orderBy) == null ? void 0 : _b.property.name),
       value: sql.orderByDirection,
       onChange: onSortOrderChange
     }

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":[],"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

@@ -5,23 +5,23 @@ import '@grafana/data';
 import { useStyles2, IconButton, Field, CodeEditor } from '@grafana/ui';
 import { formatSQL } from '../utils/formatSQL.js';
 
-function Preview({ rawSql }) {
+function Preview({ rawSql, language = "sql" }) {
   const [_, copyToClipboard] = useCopyToClipboard();
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles$k);
   const labelElement = /* @__PURE__ */ React.createElement("div", { className: styles.labelWrapper }, /* @__PURE__ */ React.createElement("label", { className: styles.label }, "Preview"), /* @__PURE__ */ React.createElement(IconButton, { tooltip: "Copy to clipboard", onClick: () => copyToClipboard(rawSql), name: "copy" }));
   return /* @__PURE__ */ React.createElement(Field, { label: labelElement, className: styles.grow }, /* @__PURE__ */ React.createElement(
     CodeEditor,
     {
       language: "sql",
       height: 80,
-      value: formatSQL(rawSql),
+      value: formatSQL(rawSql, language),
       monacoOptions: { scrollbar: { vertical: "hidden" }, scrollBeyondLastLine: false },
       readOnly: true,
       showMiniMap: false
     }
   ));
 }
-function getStyles(theme) {
+function getStyles$k(theme) {
   return {
     grow: css({ flexGrow: 1 }),
     label: css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),

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

@@ -1 +1 @@
-{"version":3,"file":"Preview.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/Preview.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { CodeEditor, Field, IconButton, useStyles2 } from '@grafana/ui';\n\nimport { formatSQL } from '../utils/formatSQL';\n\ntype PreviewProps = {\n  rawSql: string;\n};\n\nexport function Preview({ rawSql }: PreviewProps) {\n  // TODO: use zero index to give feedback about copy success\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const styles = useStyles2(getStyles);\n\n  const labelElement = (\n    <div className={styles.labelWrapper}>\n      <label className={styles.label}>Preview</label>\n      <IconButton tooltip=\"Copy to clipboard\" onClick={() => copyToClipboard(rawSql)} name=\"copy\" />\n    </div>\n  );\n\n  return (\n    <Field label={labelElement} className={styles.grow}>\n      <CodeEditor\n        language=\"sql\"\n        height={80}\n        value={formatSQL(rawSql)}\n        monacoOptions={{ scrollbar: { vertical: 'hidden' }, scrollBeyondLastLine: false }}\n        readOnly={true}\n        showMiniMap={false}\n      />\n    </Field>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    grow: css({ flexGrow: 1 }),\n    label: css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),\n    labelWrapper: css({ display: 'flex', justifyContent: 'space-between', paddingBottom: theme.spacing(0.5) }),\n  };\n}\n"],"names":[],"mappings":";;;;;;;AAagB,SAAA,OAAA,CAAQ,EAAE,MAAA,EAAwB,EAAA;AAEhD,EAAA,MAAM,CAAC,CAAA,EAAG,eAAe,CAAA,GAAI,kBAAmB,EAAA;AAChD,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAM,MAAA,YAAA,mBACH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,gCACpB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,KAAO,EAAA,EAAA,SAAO,mBACtC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,mBAAA,EAAoB,OAAS,EAAA,MAAM,gBAAgB,MAAM,CAAA,EAAG,IAAK,EAAA,MAAA,EAAO,CAC9F,CAAA;AAGF,EAAA,2CACG,KAAM,EAAA,EAAA,KAAA,EAAO,YAAc,EAAA,SAAA,EAAW,OAAO,IAC5C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,KAAA;AAAA,MACT,MAAQ,EAAA,EAAA;AAAA,MACR,KAAA,EAAO,UAAU,MAAM,CAAA;AAAA,MACvB,aAAA,EAAe,EAAE,SAAW,EAAA,EAAE,UAAU,QAAS,EAAA,EAAG,sBAAsB,KAAM,EAAA;AAAA,MAChF,QAAU,EAAA,IAAA;AAAA,MACV,WAAa,EAAA;AAAA;AAAA,GAEjB,CAAA;AAEJ;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,IAAM,EAAA,GAAA,CAAI,EAAE,QAAA,EAAU,GAAG,CAAA;AAAA,IACzB,KAAA,EAAO,IAAI,EAAE,QAAA,EAAU,IAAI,UAAY,EAAA,KAAA,CAAM,UAAW,CAAA,gBAAA,EAAkB,CAAA;AAAA,IAC1E,YAAc,EAAA,GAAA,CAAI,EAAE,OAAA,EAAS,MAAQ,EAAA,cAAA,EAAgB,eAAiB,EAAA,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA,EAAG;AAAA,GAC3G;AACF;;;;"}
+{"version":3,"file":"Preview.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/Preview.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { CodeEditor, Field, IconButton, useStyles2 } from '@grafana/ui';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport type { SqlLanguage } from 'sql-formatter';\n\ntype PreviewProps = {\n  rawSql: string;\n  language?: SqlLanguage;\n};\n\nexport function Preview({ rawSql, language = 'sql' }: PreviewProps) {\n  // TODO: use zero index to give feedback about copy success\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const styles = useStyles2(getStyles);\n\n  const labelElement = (\n    <div className={styles.labelWrapper}>\n      <label className={styles.label}>Preview</label>\n      <IconButton tooltip=\"Copy to clipboard\" onClick={() => copyToClipboard(rawSql)} name=\"copy\" />\n    </div>\n  );\n\n  return (\n    <Field label={labelElement} className={styles.grow}>\n      <CodeEditor\n        language=\"sql\"\n        height={80}\n        value={formatSQL(rawSql, language)}\n        monacoOptions={{ scrollbar: { vertical: 'hidden' }, scrollBeyondLastLine: false }}\n        readOnly={true}\n        showMiniMap={false}\n      />\n    </Field>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    grow: css({ flexGrow: 1 }),\n    label: css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),\n    labelWrapper: css({ display: 'flex', justifyContent: 'space-between', paddingBottom: theme.spacing(0.5) }),\n  };\n}\n"],"names":["getStyles"],"mappings":";;;;;;;AAeO,SAAS,OAAA,CAAQ,EAAE,MAAA,EAAQ,QAAA,GAAW,OAAM,EAAiB;AAElE,EAAA,MAAM,CAAC,CAAA,EAAG,eAAe,CAAA,GAAI,kBAAA,EAAmB;AAChD,EAAA,MAAM,MAAA,GAAS,WAAWA,WAAS,CAAA;AAEnC,EAAA,MAAM,YAAA,mBACJ,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gCACrB,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,MAAA,CAAO,KAAA,EAAA,EAAO,SAAO,mBACvC,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,mBAAA,EAAoB,OAAA,EAAS,MAAM,gBAAgB,MAAM,CAAA,EAAG,IAAA,EAAK,MAAA,EAAO,CAC9F,CAAA;AAGF,EAAA,2CACG,KAAA,EAAA,EAAM,KAAA,EAAO,YAAA,EAAc,SAAA,EAAW,OAAO,IAAA,EAAA,kBAC5C,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAS,KAAA;AAAA,MACT,MAAA,EAAQ,EAAA;AAAA,MACR,KAAA,EAAO,SAAA,CAAU,MAAA,EAAQ,QAAQ,CAAA;AAAA,MACjC,aAAA,EAAe,EAAE,SAAA,EAAW,EAAE,UAAU,QAAA,EAAS,EAAG,sBAAsB,KAAA,EAAM;AAAA,MAChF,QAAA,EAAU,IAAA;AAAA,MACV,WAAA,EAAa;AAAA;AAAA,GAEjB,CAAA;AAEJ;AAEA,SAASA,YAAU,KAAA,EAAsB;AACvC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,GAAA,CAAI,EAAE,QAAA,EAAU,GAAG,CAAA;AAAA,IACzB,KAAA,EAAO,IAAI,EAAE,QAAA,EAAU,IAAI,UAAA,EAAY,KAAA,CAAM,UAAA,CAAW,gBAAA,EAAkB,CAAA;AAAA,IAC1E,YAAA,EAAc,GAAA,CAAI,EAAE,OAAA,EAAS,MAAA,EAAQ,cAAA,EAAgB,eAAA,EAAiB,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA,EAAG;AAAA,GAC3G;AACF;;;;"}

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

@@ -2,7 +2,6 @@ import React from 'react';
 import '@grafana/data';
 import { GroupByRow } from './GroupByRow.js';
 import '../types.js';
-import 'lodash';
 import { useSqlChange } from '../utils/useSqlChange.js';
 
 function SQLGroupByRow({ fields, query, onQueryChange, db }) {

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

@@ -1 +1 @@
-{"version":3,"file":"SQLGroupByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLGroupByRow.tsx"],"sourcesContent":["import React from 'react';\nimport { type SelectableValue } from '@grafana/data';\n\nimport { GroupByRow } from './GroupByRow';\nimport { type QueryWithDefaults } from '../defaults';\nimport { type SQLQuery, type DB } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface SQLGroupByRowProps {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLGroupByRow({ fields, query, onQueryChange, db }: SQLGroupByRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  return <GroupByRow columns={fields} sql={query.sql!} onSqlChange={onSqlChange} />;\n}\n"],"names":[],"mappings":";;;;;;;AAeO,SAAS,cAAc,EAAE,MAAA,EAAQ,KAAO,EAAA,aAAA,EAAe,IAA0B,EAAA;AACtF,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,2CAAQ,UAAW,EAAA,EAAA,OAAA,EAAS,QAAQ,GAAK,EAAA,KAAA,CAAM,KAAM,WAA0B,EAAA,CAAA;AACjF;;;;"}
+{"version":3,"file":"SQLGroupByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLGroupByRow.tsx"],"sourcesContent":["import React from 'react';\nimport { type SelectableValue } from '@grafana/data';\n\nimport { GroupByRow } from './GroupByRow';\nimport { type SQLQuery, type DB, type QueryWithDefaults } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface SQLGroupByRowProps {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLGroupByRow({ fields, query, onQueryChange, db }: SQLGroupByRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  return <GroupByRow columns={fields} sql={query.sql!} onSqlChange={onSqlChange} />;\n}\n"],"names":[],"mappings":";;;;;;AAcO,SAAS,cAAc,EAAE,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,IAAG,EAAuB;AACtF,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,2CAAQ,UAAA,EAAA,EAAW,OAAA,EAAS,QAAQ,GAAA,EAAK,KAAA,CAAM,KAAM,WAAA,EAA0B,CAAA;AACjF;;;;"}

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

@@ -2,7 +2,6 @@ import React from 'react';
 import '@grafana/data';
 import { OrderByRow } from './OrderByRow.js';
 import '../types.js';
-import 'lodash';
 import { useSqlChange } from '../utils/useSqlChange.js';
 
 function SQLOrderByRow({ fields, query, onQueryChange, db }) {
@@ -10,9 +9,9 @@ function SQLOrderByRow({ fields, query, onQueryChange, db }) {
   const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
   let columnsWithIndices = [];
   if (fields) {
-    const options = (_b = (_a = query.sql) == null ? undefined : _a.columns) == null ? undefined : _b.map((c, i) => {
+    const options = (_b = (_a = query.sql) == null ? void 0 : _a.columns) == null ? void 0 : _b.map((c, i) => {
       var _a2, _b2;
-      const value = c.name ? `${c.name}(${(_a2 = c.parameters) == null ? undefined : _a2.map((p) => p.name)})` : (_b2 = c.parameters) == null ? undefined : _b2.map((p) => p.name);
+      const value = c.name ? `${c.name}(${(_a2 = c.parameters) == null ? void 0 : _a2.map((p) => p.name)})` : (_b2 = c.parameters) == null ? void 0 : _b2.map((p) => p.name);
       return {
         value,
         label: `${i + 1} - ${value}`

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

@@ -1 +1 @@
-{"version":3,"file":"SQLOrderByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLOrderByRow.tsx"],"sourcesContent":["import React from 'react';\nimport { type SelectableValue } from '@grafana/data';\nimport { OrderByRow } from './OrderByRow';\nimport { type QueryWithDefaults } from '../defaults';\nimport { type SQLQuery, type DB } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ntype SQLOrderByRowProps = {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n};\n\nexport function SQLOrderByRow({ fields, query, onQueryChange, db }: SQLOrderByRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n  let columnsWithIndices: SelectableValue[] = [];\n\n  if (fields) {\n    const options = query.sql?.columns?.map((c, i) => {\n      const value = c.name ? `${c.name}(${c.parameters?.map((p) => p.name)})` : c.parameters?.map((p) => p.name);\n      return {\n        value,\n        label: `${i + 1} - ${value}`,\n      };\n    });\n    columnsWithIndices = [\n      {\n        value: '',\n        label: 'Selected columns',\n        options,\n        expanded: true,\n      },\n      ...fields,\n    ];\n  }\n\n  return <OrderByRow sql={query.sql!} onSqlChange={onSqlChange} columns={columnsWithIndices} />;\n}\n"],"names":["_a","_b"],"mappings":";;;;;;;AAcO,SAAS,cAAc,EAAE,MAAA,EAAQ,KAAO,EAAA,aAAA,EAAe,IAA0B,EAAA;AAdxF,EAAA,IAAA,EAAA,EAAA,EAAA;AAeE,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AACjE,EAAA,IAAI,qBAAwC,EAAC;AAE7C,EAAA,IAAI,MAAQ,EAAA;AACV,IAAM,MAAA,OAAA,GAAA,CAAU,iBAAM,GAAN,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAW,YAAX,IAAoB,GAAA,SAAA,GAAA,EAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AAnBtD,MAAA,IAAAA,GAAAC,EAAAA,GAAAA;AAoBM,MAAM,MAAA,KAAA,GAAQ,CAAE,CAAA,IAAA,GAAO,CAAG,EAAA,CAAA,CAAE,IAAI,CAAA,CAAA,EAAA,CAAID,GAAA,GAAA,CAAA,CAAE,UAAF,KAAA,IAAA,GAAA,SAAA,GAAAA,GAAc,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,CAAA,CAAE,IAAK,CAAA,CAAA,CAAA,CAAA,GAAA,CAAMC,GAAA,GAAA,CAAA,CAAE,UAAF,KAAA,IAAA,GAAA,SAAA,GAAAA,GAAc,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,CAAE,CAAA,IAAA,CAAA;AACrG,MAAO,OAAA;AAAA,QACL,KAAA;AAAA,QACA,KAAO,EAAA,CAAA,EAAG,CAAI,GAAA,CAAC,MAAM,KAAK,CAAA;AAAA,OAC5B;AAAA,KACF,CAAA;AACA,IAAqB,kBAAA,GAAA;AAAA,MACnB;AAAA,QACE,KAAO,EAAA,EAAA;AAAA,QACP,KAAO,EAAA,kBAAA;AAAA,QACP,OAAA;AAAA,QACA,QAAU,EAAA;AAAA,OACZ;AAAA,MACA,GAAG;AAAA,KACL;AAAA;AAGF,EAAA,2CAAQ,UAAW,EAAA,EAAA,GAAA,EAAK,MAAM,GAAM,EAAA,WAAA,EAA0B,SAAS,kBAAoB,EAAA,CAAA;AAC7F;;;;"}
+{"version":3,"file":"SQLOrderByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLOrderByRow.tsx"],"sourcesContent":["import React from 'react';\nimport { type SelectableValue } from '@grafana/data';\nimport { OrderByRow } from './OrderByRow';\nimport { type SQLQuery, type DB, type QueryWithDefaults } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ntype SQLOrderByRowProps = {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n};\n\nexport function SQLOrderByRow({ fields, query, onQueryChange, db }: SQLOrderByRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n  let columnsWithIndices: SelectableValue[] = [];\n\n  if (fields) {\n    const options = query.sql?.columns?.map((c, i) => {\n      const value = c.name ? `${c.name}(${c.parameters?.map((p) => p.name)})` : c.parameters?.map((p) => p.name);\n      return {\n        value,\n        label: `${i + 1} - ${value}`,\n      };\n    });\n    columnsWithIndices = [\n      {\n        value: '',\n        label: 'Selected columns',\n        options,\n        expanded: true,\n      },\n      ...fields,\n    ];\n  }\n\n  return <OrderByRow sql={query.sql!} onSqlChange={onSqlChange} columns={columnsWithIndices} />;\n}\n"],"names":["_a","_b"],"mappings":";;;;;;AAaO,SAAS,cAAc,EAAE,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,IAAG,EAAuB;AAbxF,EAAA,IAAA,EAAA,EAAA,EAAA;AAcE,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AACjE,EAAA,IAAI,qBAAwC,EAAC;AAE7C,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,MAAM,OAAA,GAAA,CAAU,iBAAM,GAAA,KAAN,IAAA,GAAA,MAAA,GAAA,EAAA,CAAW,YAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoB,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AAlBtD,MAAA,IAAAA,GAAAA,EAAAC,GAAAA;AAmBM,MAAA,MAAM,KAAA,GAAQ,CAAA,CAAE,IAAA,GAAO,CAAA,EAAG,CAAA,CAAE,IAAI,CAAA,CAAA,EAAA,CAAID,GAAAA,GAAA,CAAA,CAAE,UAAA,KAAF,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAc,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,CAAA,GAAA,CAAMC,GAAAA,GAAA,CAAA,CAAE,UAAA,KAAF,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAc,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,CAAA;AACrG,MAAA,OAAO;AAAA,QACL,KAAA;AAAA,QACA,KAAA,EAAO,CAAA,EAAG,CAAA,GAAI,CAAC,MAAM,KAAK,CAAA;AAAA,OAC5B;AAAA,IACF,CAAA,CAAA;AACA,IAAA,kBAAA,GAAqB;AAAA,MACnB;AAAA,QACE,KAAA,EAAO,EAAA;AAAA,QACP,KAAA,EAAO,kBAAA;AAAA,QACP,OAAA;AAAA,QACA,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,GAAG;AAAA,KACL;AAAA,EACF;AAEA,EAAA,2CAAQ,UAAA,EAAA,EAAW,GAAA,EAAK,MAAM,GAAA,EAAM,WAAA,EAA0B,SAAS,kBAAA,EAAoB,CAAA;AAC7F;;;;"}

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

@@ -3,7 +3,6 @@ import { useAsync } from 'react-use';
 import { toOption } from '@grafana/data';
 import { SelectRow } from './SelectRow.js';
 import '../types.js';
-import 'lodash';
 import { useSqlChange } from '../utils/useSqlChange.js';
 
 function SQLSelectRow({ fields, query, onQueryChange, db }) {

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

@@ -1 +1 @@
-{"version":3,"file":"SQLSelectRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLSelectRow.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { SelectRow } from './SelectRow';\nimport { type QueryWithDefaults } from '../defaults';\nimport { type SQLQuery, type DB } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface SQLSelectRowProps {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLSelectRow({ fields, query, onQueryChange, db }: SQLSelectRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  const state = useAsync(async () => {\n    const functions = await db.functions();\n    return functions.map((f) => toOption(f.name));\n  }, [db]);\n\n  return <SelectRow columns={fields} sql={query.sql!} functions={state.value} onSqlChange={onSqlChange} />;\n}\n"],"names":[],"mappings":";;;;;;;;AAeO,SAAS,aAAa,EAAE,MAAA,EAAQ,KAAO,EAAA,aAAA,EAAe,IAAyB,EAAA;AACpF,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAM,MAAA,SAAA,GAAY,MAAM,EAAA,CAAG,SAAU,EAAA;AACrC,IAAA,OAAO,UAAU,GAAI,CAAA,CAAC,MAAM,QAAS,CAAA,CAAA,CAAE,IAAI,CAAC,CAAA;AAAA,GAC9C,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,OAAA,EAAS,MAAQ,EAAA,GAAA,EAAK,MAAM,GAAM,EAAA,SAAA,EAAW,KAAM,CAAA,KAAA,EAAO,WAA0B,EAAA,CAAA;AACxG;;;;"}
+{"version":3,"file":"SQLSelectRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLSelectRow.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { SelectRow } from './SelectRow';\nimport { type SQLQuery, type DB, type QueryWithDefaults } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface SQLSelectRowProps {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLSelectRow({ fields, query, onQueryChange, db }: SQLSelectRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  const state = useAsync(async () => {\n    const functions = await db.functions();\n    return functions.map((f) => toOption(f.name));\n  }, [db]);\n\n  return <SelectRow columns={fields} sql={query.sql!} functions={state.value} onSqlChange={onSqlChange} />;\n}\n"],"names":[],"mappings":";;;;;;;AAcO,SAAS,aAAa,EAAE,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,IAAG,EAAsB;AACpF,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,MAAM,SAAA,GAAY,MAAM,EAAA,CAAG,SAAA,EAAU;AACrC,IAAA,OAAO,UAAU,GAAA,CAAI,CAAC,MAAM,QAAA,CAAS,CAAA,CAAE,IAAI,CAAC,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,uBAAO,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAS,MAAA,EAAQ,GAAA,EAAK,MAAM,GAAA,EAAM,SAAA,EAAW,KAAA,CAAM,KAAA,EAAO,WAAA,EAA0B,CAAA;AACxG;;;;"}

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

@@ -4,7 +4,6 @@ import '@grafana/data';
 import './AwesomeQueryBuilder.js';
 import { WhereRow } from './WhereRow.js';
 import '../types.js';
-import 'lodash';
 import { useSqlChange } from '../utils/useSqlChange.js';
 
 function SQLWhereRow({ query, fields, onQueryChange, db }) {

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

@@ -1 +1 @@
-{"version":3,"file":"SQLWhereRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLWhereRow.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue } from '@grafana/data';\nimport { type Config } from './AwesomeQueryBuilder';\nimport { WhereRow } from './WhereRow';\nimport { type QueryWithDefaults } from '../defaults';\nimport { type SQLQuery, type DB, type SQLExpression, type SQLSelectableValue } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface WhereRowProps {\n  query: QueryWithDefaults;\n  fields: SelectableValue[];\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLWhereRow({ query, fields, onQueryChange, db }: WhereRowProps) {\n  const state = useAsync(async () => {\n    return mapFieldsToTypes(fields);\n  }, [fields]);\n\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  return (\n    <WhereRow\n      // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly\n      key={JSON.stringify(state.value)}\n      config={{ fields: state.value || {} }}\n      sql={query.sql!}\n      onSqlChange={(val: SQLExpression) => {\n        onSqlChange(val);\n      }}\n    />\n  );\n}\n\n// needed for awesome query builder\nfunction mapFieldsToTypes(columns: SQLSelectableValue[]) {\n  const fields: Config['fields'] = {};\n  for (const col of columns) {\n    fields[col.value] = {\n      type: col.raqbFieldType || 'text',\n      valueSources: ['value'],\n      mainWidgetProps: { customProps: { icon: col.icon } },\n    };\n  }\n  return fields;\n}\n"],"names":[],"mappings":";;;;;;;;;AAgBO,SAAS,YAAY,EAAE,KAAA,EAAO,MAAQ,EAAA,aAAA,EAAe,IAAqB,EAAA;AAC/E,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,OAAO,iBAAiB,MAAM,CAAA;AAAA,GAChC,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AAEjE,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAEC,GAAK,EAAA,IAAA,CAAK,SAAU,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC/B,QAAQ,EAAE,MAAA,EAAQ,KAAM,CAAA,KAAA,IAAS,EAAG,EAAA;AAAA,MACpC,KAAK,KAAM,CAAA,GAAA;AAAA,MACX,WAAA,EAAa,CAAC,GAAuB,KAAA;AACnC,QAAA,WAAA,CAAY,GAAG,CAAA;AAAA;AACjB;AAAA,GACF;AAEJ;AAGA,SAAS,iBAAiB,OAA+B,EAAA;AACvD,EAAA,MAAM,SAA2B,EAAC;AAClC,EAAA,KAAA,MAAW,OAAO,OAAS,EAAA;AACzB,IAAO,MAAA,CAAA,GAAA,CAAI,KAAK,CAAI,GAAA;AAAA,MAClB,IAAA,EAAM,IAAI,aAAiB,IAAA,MAAA;AAAA,MAC3B,YAAA,EAAc,CAAC,OAAO,CAAA;AAAA,MACtB,iBAAiB,EAAE,WAAA,EAAa,EAAE,IAAM,EAAA,GAAA,CAAI,MAAO;AAAA,KACrD;AAAA;AAEF,EAAO,OAAA,MAAA;AACT;;;;"}
+{"version":3,"file":"SQLWhereRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLWhereRow.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue } from '@grafana/data';\nimport { type Config } from './AwesomeQueryBuilder';\nimport { WhereRow } from './WhereRow';\nimport { type SQLQuery, type DB, type SQLExpression, type SQLSelectableValue, type QueryWithDefaults } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface WhereRowProps {\n  query: QueryWithDefaults;\n  fields: SelectableValue[];\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLWhereRow({ query, fields, onQueryChange, db }: WhereRowProps) {\n  const state = useAsync(async () => {\n    return mapFieldsToTypes(fields);\n  }, [fields]);\n\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  return (\n    <WhereRow\n      // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly\n      key={JSON.stringify(state.value)}\n      config={{ fields: state.value || {} }}\n      sql={query.sql!}\n      onSqlChange={(val: SQLExpression) => {\n        onSqlChange(val);\n      }}\n    />\n  );\n}\n\n// needed for awesome query builder\nfunction mapFieldsToTypes(columns: SQLSelectableValue[]) {\n  const fields: Config['fields'] = {};\n  for (const col of columns) {\n    fields[col.value] = {\n      type: col.raqbFieldType || 'text',\n      valueSources: ['value'],\n      mainWidgetProps: { customProps: { icon: col.icon } },\n    };\n  }\n  return fields;\n}\n"],"names":[],"mappings":";;;;;;;;AAeO,SAAS,YAAY,EAAE,KAAA,EAAO,MAAA,EAAQ,aAAA,EAAe,IAAG,EAAkB;AAC/E,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,OAAO,iBAAiB,MAAM,CAAA;AAAA,EAChC,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAEC,GAAA,EAAK,IAAA,CAAK,SAAA,CAAU,KAAA,CAAM,KAAK,CAAA;AAAA,MAC/B,QAAQ,EAAE,MAAA,EAAQ,KAAA,CAAM,KAAA,IAAS,EAAC,EAAE;AAAA,MACpC,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,WAAA,EAAa,CAAC,GAAA,KAAuB;AACnC,QAAA,WAAA,CAAY,GAAG,CAAA;AAAA,MACjB;AAAA;AAAA,GACF;AAEJ;AAGA,SAAS,iBAAiB,OAAA,EAA+B;AACvD,EAAA,MAAM,SAA2B,EAAC;AAClC,EAAA,KAAA,MAAW,OAAO,OAAA,EAAS;AACzB,IAAA,MAAA,CAAO,GAAA,CAAI,KAAK,CAAA,GAAI;AAAA,MAClB,IAAA,EAAM,IAAI,aAAA,IAAiB,MAAA;AAAA,MAC3B,YAAA,EAAc,CAAC,OAAO,CAAA;AAAA,MACtB,iBAAiB,EAAE,WAAA,EAAa,EAAE,IAAA,EAAM,GAAA,CAAI,MAAK;AAAE,KACrD;AAAA,EACF;AACA,EAAA,OAAO,MAAA;AACT;;;;"}

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

@@ -12,13 +12,13 @@ import { EditorStack } from '../EditorStack.js';
 const asteriskValue = { label: "*", value: "*" };
 function SelectRow({ sql, columns, onSqlChange, functions }) {
   var _a;
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles$j);
   const columnsWithAsterisk = [asteriskValue, ...columns || []];
   const onColumnChange = useCallback(
     (item, index) => (column) => {
       var _a2, _b;
       let modifiedItem = { ...item };
-      if (!((_a2 = item.parameters) == null ? undefined : _a2.length)) {
+      if (!((_a2 = item.parameters) == null ? void 0 : _a2.length)) {
         modifiedItem.parameters = [{ type: QueryEditorExpressionType.FunctionParameter, name: column.value }];
       } else {
         modifiedItem.parameters = item.parameters.map(
@@ -27,7 +27,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
       }
       const newSql = {
         ...sql,
-        columns: (_b = sql.columns) == null ? undefined : _b.map((c, i) => i === index ? modifiedItem : c)
+        columns: (_b = sql.columns) == null ? void 0 : _b.map((c, i) => i === index ? modifiedItem : c)
       };
       onSqlChange(newSql);
     },
@@ -38,11 +38,11 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
       var _a2;
       const newItem = {
         ...item,
-        name: aggregation == null ? undefined : aggregation.value
+        name: aggregation == null ? void 0 : aggregation.value
       };
       const newSql = {
         ...sql,
-        columns: (_a2 = sql.columns) == null ? undefined : _a2.map((c, i) => i === index ? newItem : c)
+        columns: (_a2 = sql.columns) == null ? void 0 : _a2.map((c, i) => i === index ? newItem : c)
       };
       onSqlChange(newSql);
     },
@@ -64,7 +64,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     const newSql = { ...sql, columns: [...sql.columns, createFunctionField()] };
     onSqlChange(newSql);
   }, [onSqlChange, sql]);
-  return /* @__PURE__ */ React.createElement(EditorStack, { gap: 2, alignItems: "end", direction: "column" }, (_a = sql.columns) == null ? undefined : _a.map((item, index) => /* @__PURE__ */ React.createElement("div", { key: index }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 2, alignItems: "end" }, /* @__PURE__ */ React.createElement(EditorField, { label: "Column", width: 25 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(EditorStack, { gap: 2, alignItems: "end", direction: "column" }, (_a = sql.columns) == null ? void 0 : _a.map((item, index) => /* @__PURE__ */ React.createElement("div", { key: index }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 2, alignItems: "end" }, /* @__PURE__ */ React.createElement(EditorField, { label: "Column", width: 25 }, /* @__PURE__ */ React.createElement(
     Select,
     {
       value: getColumnValue(item),
@@ -108,12 +108,12 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     }
   ));
 }
-const getStyles = () => {
+const getStyles$j = () => {
   return { addButton: css({ alignSelf: "flex-start" }) };
 };
 function getColumnValue({ parameters }) {
-  const column = parameters == null ? undefined : parameters.find((p) => p.type === QueryEditorExpressionType.FunctionParameter);
-  if (column == null ? undefined : column.name) {
+  const column = parameters == null ? void 0 : parameters.find((p) => p.type === QueryEditorExpressionType.FunctionParameter);
+  if (column == null ? void 0 : column.name) {
     return toOption(column.name);
   }
   return null;

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":["_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":["getStyles","_a"],"mappings":"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"}

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

@@ -12,12 +12,20 @@ import { EditorRow } from './EditorRow.js';
 import { EditorField } from './EditorField.js';
 import { EditorRows } from './EditorRows.js';
 
-const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }) => {
+const VisualEditor = ({
+  query,
+  db,
+  queryRowFilter,
+  onChange,
+  onValidate,
+  language = "sql",
+  range
+}) => {
   const state = useAsync(async () => {
     const fields = await db.fields(query);
     return fields;
   }, [db, query.dataset, query.table]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorRows, null, /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(Preview, { rawSql: query.rawSql }))), /* @__PURE__ */ React.createElement(QueryToolbox, { db, query, onValidate, range }));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorRows, null, /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(Preview, { rawSql: query.rawSql, language }))), /* @__PURE__ */ React.createElement(QueryToolbox, { db, query, onValidate, range }));
 };
 
 export { VisualEditor };

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

@@ -1 +1 @@
-{"version":3,"file":"VisualEditor.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/VisualEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type DB, type QueryEditorProps, type QueryRowFilter, type SQLQuery } from '../types';\nimport { QueryToolbox } from '../query-editor-raw/QueryToolbox';\nimport { Preview } from './Preview';\nimport { SQLGroupByRow } from './SQLGroupByRow';\nimport { SQLOrderByRow } from './SQLOrderByRow';\nimport { SQLSelectRow } from './SQLSelectRow';\nimport { SQLWhereRow } from './SQLWhereRow';\nimport { type TimeRange } from '@grafana/data';\nimport { EditorRow } from './EditorRow';\nimport { EditorField } from './EditorField';\nimport { EditorRows } from './EditorRows';\n\ninterface VisualEditorProps extends QueryEditorProps {\n  query: SQLQuery;\n  db: DB;\n  queryRowFilter: QueryRowFilter;\n  onChange: (q: SQLQuery) => void;\n  onValidate: (isValid: boolean) => void;\n  range?: TimeRange;\n}\n\nexport const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }: VisualEditorProps) => {\n  const state = useAsync(async () => {\n    const fields = await db.fields(query);\n    return fields;\n  }, [db, query.dataset, query.table]);\n\n  return (\n    <>\n      <EditorRows>\n        <EditorRow>\n          <SQLSelectRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />\n        </EditorRow>\n        {queryRowFilter.filter && (\n          <EditorRow>\n            <EditorField label=\"Filter by column value\" optional>\n              <SQLWhereRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />\n            </EditorField>\n          </EditorRow>\n        )}\n        {queryRowFilter.group && (\n          <EditorRow>\n            <EditorField label=\"Group by column\">\n              <SQLGroupByRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />\n            </EditorField>\n          </EditorRow>\n        )}\n        {queryRowFilter.order && (\n          <EditorRow>\n            <SQLOrderByRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />\n          </EditorRow>\n        )}\n        {queryRowFilter.preview && query.rawSql && (\n          <EditorRow>\n            <Preview rawSql={query.rawSql} />\n          </EditorRow>\n        )}\n      </EditorRows>\n      <QueryToolbox db={db} query={query} onValidate={onValidate} range={range} />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAuBa,MAAA,YAAA,GAAe,CAAC,EAAE,KAAA,EAAO,IAAI,cAAgB,EAAA,QAAA,EAAU,UAAY,EAAA,KAAA,EAA+B,KAAA;AAC7G,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,KAAK,CAAA;AACpC,IAAO,OAAA,MAAA;AAAA,KACN,CAAC,EAAA,EAAI,MAAM,OAAS,EAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,UACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iCACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,KAAA,CAAM,KAAS,IAAA,IAAI,KAAc,EAAA,aAAA,EAAe,UAAU,EAAQ,EAAA,CAC1F,GACC,cAAe,CAAA,MAAA,oBACb,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,OAAM,wBAAyB,EAAA,QAAA,EAAQ,wBACjD,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,QAAQ,KAAM,CAAA,KAAA,IAAS,EAAC,EAAG,KAAc,EAAA,aAAA,EAAe,UAAU,EAAQ,EAAA,CACzF,CACF,CAED,EAAA,cAAA,CAAe,yBACb,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAM,EAAA,iBAAA,EAAA,sCAChB,aAAc,EAAA,EAAA,MAAA,EAAQ,MAAM,KAAS,IAAA,IAAI,KAAc,EAAA,aAAA,EAAe,QAAU,EAAA,EAAA,EAAQ,CAC3F,CACF,GAED,cAAe,CAAA,KAAA,wCACb,SACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAc,MAAQ,EAAA,KAAA,CAAM,KAAS,IAAA,EAAI,EAAA,KAAA,EAAc,eAAe,QAAU,EAAA,EAAA,EAAQ,CAC3F,CAED,EAAA,cAAA,CAAe,WAAW,KAAM,CAAA,MAAA,oBAC9B,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,QAAQ,KAAM,CAAA,MAAA,EAAQ,CACjC,CAEJ,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAa,EAAQ,EAAA,KAAA,EAAc,UAAwB,EAAA,KAAA,EAAc,CAC5E,CAAA;AAEJ;;;;"}
+{"version":3,"file":"VisualEditor.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/VisualEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type DB, type QueryEditorProps, type QueryRowFilter, type SQLQuery } from '../types';\nimport { QueryToolbox } from '../query-editor-raw/QueryToolbox';\nimport { Preview } from './Preview';\nimport { SQLGroupByRow } from './SQLGroupByRow';\nimport { SQLOrderByRow } from './SQLOrderByRow';\nimport { SQLSelectRow } from './SQLSelectRow';\nimport { SQLWhereRow } from './SQLWhereRow';\nimport { type TimeRange } from '@grafana/data';\nimport { EditorRow } from './EditorRow';\nimport { EditorField } from './EditorField';\nimport { EditorRows } from './EditorRows';\nimport type { SqlLanguage } from 'sql-formatter';\n\ninterface VisualEditorProps extends QueryEditorProps {\n  query: SQLQuery;\n  db: DB;\n  queryRowFilter: QueryRowFilter;\n  onChange: (q: SQLQuery) => void;\n  onValidate: (isValid: boolean) => void;\n  language?: SqlLanguage;\n  range?: TimeRange;\n}\n\nexport const VisualEditor = ({\n  query,\n  db,\n  queryRowFilter,\n  onChange,\n  onValidate,\n  language = 'sql',\n  range,\n}: VisualEditorProps) => {\n  const state = useAsync(async () => {\n    const fields = await db.fields(query);\n    return fields;\n  }, [db, query.dataset, query.table]);\n\n  return (\n    <>\n      <EditorRows>\n        <EditorRow>\n          <SQLSelectRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />\n        </EditorRow>\n        {queryRowFilter.filter && (\n          <EditorRow>\n            <EditorField label=\"Filter by column value\" optional>\n              <SQLWhereRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />\n            </EditorField>\n          </EditorRow>\n        )}\n        {queryRowFilter.group && (\n          <EditorRow>\n            <EditorField label=\"Group by column\">\n              <SQLGroupByRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />\n            </EditorField>\n          </EditorRow>\n        )}\n        {queryRowFilter.order && (\n          <EditorRow>\n            <SQLOrderByRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />\n          </EditorRow>\n        )}\n        {queryRowFilter.preview && query.rawSql && (\n          <EditorRow>\n            <Preview rawSql={query.rawSql} language={language} />\n          </EditorRow>\n        )}\n      </EditorRows>\n      <QueryToolbox db={db} query={query} onValidate={onValidate} range={range} />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAyBO,MAAM,eAAe,CAAC;AAAA,EAC3B,KAAA;AAAA,EACA,EAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,KAAyB;AACvB,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,MAAM,MAAA,GAAS,MAAM,EAAA,CAAG,MAAA,CAAO,KAAK,CAAA;AACpC,IAAA,OAAO,MAAA;AAAA,EACT,GAAG,CAAC,EAAA,EAAI,MAAM,OAAA,EAAS,KAAA,CAAM,KAAK,CAAC,CAAA;AAEnC,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,UAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,iCACC,KAAA,CAAA,aAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,KAAA,CAAM,KAAA,IAAS,IAAI,KAAA,EAAc,aAAA,EAAe,UAAU,EAAA,EAAQ,CAC1F,GACC,cAAA,CAAe,MAAA,oBACd,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,WAAA,EAAA,EAAY,OAAM,wBAAA,EAAyB,QAAA,EAAQ,wBAClD,KAAA,CAAA,aAAA,CAAC,WAAA,EAAA,EAAY,QAAQ,KAAA,CAAM,KAAA,IAAS,EAAC,EAAG,KAAA,EAAc,aAAA,EAAe,UAAU,EAAA,EAAQ,CACzF,CACF,CAAA,EAED,cAAA,CAAe,KAAA,wCACb,SAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAM,iBAAA,EAAA,kBACjB,KAAA,CAAA,aAAA,CAAC,iBAAc,MAAA,EAAQ,KAAA,CAAM,SAAS,EAAC,EAAG,OAAc,aAAA,EAAe,QAAA,EAAU,EAAA,EAAQ,CAC3F,CACF,CAAA,EAED,eAAe,KAAA,oBACd,KAAA,CAAA,aAAA,CAAC,iCACC,KAAA,CAAA,aAAA,CAAC,aAAA,EAAA,EAAc,QAAQ,KAAA,CAAM,KAAA,IAAS,EAAC,EAAG,KAAA,EAAc,aAAA,EAAe,UAAU,EAAA,EAAQ,CAC3F,GAED,cAAA,CAAe,OAAA,IAAW,MAAM,MAAA,oBAC/B,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAQ,MAAA,EAAQ,MAAM,MAAA,EAAQ,QAAA,EAAoB,CACrD,CAEJ,CAAA,kBACA,KAAA,CAAA,aAAA,CAAC,gBAAa,EAAA,EAAQ,KAAA,EAAc,UAAA,EAAwB,KAAA,EAAc,CAC5E,CAAA;AAEJ;;;;"}

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":["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;;;;"}
+{"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,QAAA,CAAS,EAAE,GAAA,EAAK,MAAA,EAAQ,aAAY,EAA4B;AAC9E,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA,EAAwB;AAChD,EAAA,MAAM,kBAAA,GAAqB,OAAA,CAAQ,OAAO,EAAE,GAAG,UAAA,EAAY,GAAG,MAAA,EAAO,CAAA,EAAI,CAAC,MAAM,CAAC,CAAA;AAEjF,EAAA,SAAA,CAAU,MAAM;AAhBlB,IAAA,IAAA,EAAA;AAkBI,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,MAAM,QAAA,GAAW,KAAA,CAAM,SAAA,CAAU,KAAA,CAAM,QAAA,CAAA,CAAS,SAAI,aAAA,KAAJ,IAAA,GAAA,EAAA,GAAqB,aAAa,CAAA,EAAG,kBAAkB,CAAA;AACvG,MAAA,OAAA,CAAQ,QAAQ,CAAA;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,kBAAA,EAAoB,GAAA,CAAI,aAAA,EAAe,IAAI,CAAC,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAI,aAAA,EAAe;AACtB,MAAA,OAAA,CAAQ,MAAM,SAAA,CAAU,KAAA,CAAM,SAAS,aAAa,CAAA,EAAG,kBAAkB,CAAC,CAAA;AAAA,IAC5E;AAAA,EACF,CAAA,EAAG,CAAC,kBAAA,EAAoB,GAAA,CAAI,aAAa,CAAC,CAAA;AAE1C,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,aAA4BA,OAAAA,KAAmB;AAC9C,MAAA,OAAA,CAAQ,WAAW,CAAA;AACnB,MAAA,MAAM,MAAA,GAAS;AAAA,QACb,GAAG,GAAA;AAAA,QACH,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,WAAW,CAAA;AAAA,QACxC,WAAA,EAAa,KAAA,CAAM,SAAA,CAAU,WAAA,EAAaA,OAAM;AAAA,OAClD;AAEA,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,IACpB,CAAA;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,IAAA;AAAA,MACP,QAAA,EAAU,YAAA;AAAA,MACV,eAAe,CAAC,KAAA,qBAAU,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAS,GAAG,KAAA,EAAO;AAAA;AAAA,GAChD;AAEJ;AAEA,SAAS,KAAK,SAAA,EAAmB;AAC/B,EAAA,OAAO;AAAA;AAAA;AAAA,oBAAA,EAGa,SAAS,CAAA,CAAA,CAAA;AAC/B;AAGA,YAAA;AAAA;AAAA,IAAA,EAEM,IAAA,CAAK,KAAK,CAAC;AAAA;;AAAA;AAAA,IAAA,EAIX,IAAA,CAAK,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,IAAA,EAOd,IAAA,CAAK,KAAK,CAAC;AAAA;;AAAA;AAAA,IAAA,EAIX,IAAA,CAAK,QAAQ,CAAC;AAAA;;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"QueryEditorRow.js","sources":["../../../../src/components/QueryEditorRow/QueryEditorRow.tsx"],"sourcesContent":["import React from 'react';\nexport interface QueryEditorRowProps {\n  label?: string;\n  className?: string;\n  noFillEnd?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const QueryEditorRow = (props: QueryEditorRowProps) => {\n  const className: string = props.className ?? 'width-8';\n  const noFillEnd: boolean = props.noFillEnd ?? false;\n\n  return (\n    <div className=\"gf-form\">\n      {props.label && <label className={`gf-form-label query-keyword ${className}`}>{props.label}</label>}\n      {props.children}\n\n      <div className={'gf-form--grow'}>{noFillEnd || <div className={'gf-form-label gf-form-label--grow'}></div>}</div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAQa,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAR9D,EAAA,IAAA,EAAA,EAAA,EAAA;AASE,EAAM,MAAA,SAAA,GAAA,CAAoB,EAAM,GAAA,KAAA,CAAA,SAAA,KAAN,IAAmB,GAAA,EAAA,GAAA,SAAA;AAC7C,EAAM,MAAA,SAAA,GAAA,CAAqB,EAAM,GAAA,KAAA,CAAA,SAAA,KAAN,IAAmB,GAAA,EAAA,GAAA,KAAA;AAE9C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,SACZ,EAAA,EAAA,KAAA,CAAM,KAAS,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,CAA+B,4BAAA,EAAA,SAAS,CAAK,CAAA,EAAA,EAAA,KAAA,CAAM,KAAM,CAAA,EAC1F,KAAM,CAAA,QAAA,kBAEN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,eAAA,EAAA,EAAkB,SAAa,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,mCAAqC,EAAA,CAAO,CAC7G,CAAA;AAEJ;;;;"}
+{"version":3,"file":"QueryEditorRow.js","sources":["../../../../src/components/QueryEditorRow/QueryEditorRow.tsx"],"sourcesContent":["import React from 'react';\nexport interface QueryEditorRowProps {\n  label?: string;\n  className?: string;\n  noFillEnd?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const QueryEditorRow = (props: QueryEditorRowProps) => {\n  const className: string = props.className ?? 'width-8';\n  const noFillEnd: boolean = props.noFillEnd ?? false;\n\n  return (\n    <div className=\"gf-form\">\n      {props.label && <label className={`gf-form-label query-keyword ${className}`}>{props.label}</label>}\n      {props.children}\n\n      <div className={'gf-form--grow'}>{noFillEnd || <div className={'gf-form-label gf-form-label--grow'}></div>}</div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAQO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAR9D,EAAA,IAAA,EAAA,EAAA,EAAA;AASE,EAAA,MAAM,SAAA,GAAA,CAAoB,EAAA,GAAA,KAAA,CAAM,SAAA,KAAN,IAAA,GAAA,EAAA,GAAmB,SAAA;AAC7C,EAAA,MAAM,SAAA,GAAA,CAAqB,EAAA,GAAA,KAAA,CAAM,SAAA,KAAN,IAAA,GAAA,EAAA,GAAmB,KAAA;AAE9C,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EAAA,EACZ,KAAA,CAAM,KAAA,oBAAS,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,CAAA,4BAAA,EAA+B,SAAS,CAAA,CAAA,EAAA,EAAK,KAAA,CAAM,KAAM,CAAA,EAC1F,KAAA,CAAM,QAAA,kBAEP,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,eAAA,EAAA,EAAkB,SAAA,oBAAa,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,mCAAA,EAAqC,CAAO,CAC7G,CAAA;AAEJ;;;;"}

package/dist/esm/components/SQLEditor/components/SQLEditor.js

@@ -3,7 +3,7 @@ import React, { useRef, useMemo, useEffect, useCallback } from 'react';
 import { getStatementPosition } from '../standardSql/getStatementPosition.js';
 import { getStandardSuggestions } from '../standardSql/getStandardSuggestions.js';
 import { initSuggestionsKindRegistry } from '../standardSql/suggestionsKindRegistry.js';
-import { SuggestionKind, CompletionItemKind, CompletionItemPriority, CompletionItemInsertTextRule } from '../types.js';
+import { SuggestionKind, CompletionItemPriority, CompletionItemKind, CompletionItemInsertTextRule } from '../types.js';
 import { getSuggestionKinds } from '../utils/getSuggestionKind.js';
 import { linkedTokenBuilder } from '../utils/linkedTokenBuilder.js';
 import { getTableToken, defaultTableNameParser } from '../utils/tokenUtils.js';
@@ -59,7 +59,7 @@ const SQLEditor = ({
     CodeEditor,
     {
       height: height || "240px",
-      width: width ? `${width - 2}px` : undefined,
+      width: width ? `${width - 2}px` : void 0,
       language: id,
       value: query,
       onBlur: onSqlBlur,
@@ -90,12 +90,12 @@ const SQLEditor = ({
   ), children && children({ formatQuery }));
 };
 const resolveLanguage = (monaco, languageDefinitionProp) => {
-  if ((languageDefinitionProp == null ? undefined : languageDefinitionProp.id) !== STANDARD_SQL_LANGUAGE && !languageDefinitionProp.loader) {
-    sqlEditorLog(`Loading language '${languageDefinitionProp == null ? undefined : languageDefinitionProp.id}' from Monaco registry`, false);
+  if ((languageDefinitionProp == null ? void 0 : languageDefinitionProp.id) !== STANDARD_SQL_LANGUAGE && !languageDefinitionProp.loader) {
+    sqlEditorLog(`Loading language '${languageDefinitionProp == null ? void 0 : languageDefinitionProp.id}' from Monaco registry`, false);
     const allLangs = monaco.languages.getLanguages();
-    const custom = allLangs.find(({ id }) => id === (languageDefinitionProp == null ? undefined : languageDefinitionProp.id));
+    const custom = allLangs.find(({ id }) => id === (languageDefinitionProp == null ? void 0 : languageDefinitionProp.id));
     if (!custom) {
-      throw Error(`Unknown Monaco language ${languageDefinitionProp == null ? undefined : languageDefinitionProp.id}`);
+      throw Error(`Unknown Monaco language ${languageDefinitionProp == null ? void 0 : languageDefinitionProp.id}`);
     }
     return { completionProvider: getStandardSQLCompletionProvider, ...custom, ...languageDefinitionProp };
   }
@@ -117,7 +117,7 @@ const registerLanguageAndSuggestions = async (monaco, l, lid) => {
     monaco.languages.registerDocumentFormattingEditProvider(lid, {
       provideDocumentFormattingEdits: (model) => {
         var _a;
-        const formatted = (_a = l.formatter) == null ? undefined : _a.call(l, model.getValue());
+        const formatted = (_a = l.formatter) == null ? void 0 : _a.call(l, model.getValue());
         return [
           {
             range: model.getFullModelRange(),
@@ -224,7 +224,7 @@ function extendStandardRegistries(id, lid, customProvider) {
   }
   if (customProvider.customSuggestionKinds) {
     for (const kind of customProvider.customSuggestionKinds()) {
-      (_a = kind.applyTo) == null ? undefined : _a.forEach((applyTo) => {
+      (_a = kind.applyTo) == null ? void 0 : _a.forEach((applyTo) => {
         const exists = languageRegistries.suggestionKinds.getIfExists(applyTo);
         if (exists) {
           if (exists.kind.indexOf(kind.id) === -1) {
@@ -234,7 +234,7 @@ function extendStandardRegistries(id, lid, customProvider) {
       });
       if (kind.overrideDefault) {
         const stbBehavior = instanceSuggestionsRegistry.get(kind.id);
-        if (stbBehavior !== undefined) {
+        if (stbBehavior !== void 0) {
           stbBehavior.suggestions = kind.suggestionsResolver;
           continue;
         }
@@ -276,9 +276,9 @@ function extendStandardRegistries(id, lid, customProvider) {
       var _a2, _b, _c, _d, _e;
       const o = await s(ctx, m);
       const tableToken = getTableToken(ctx.currentToken);
-      const tableNameParser = (_b = (_a2 = customProvider.tables) == null ? undefined : _a2.parseName) != null ? _b : defaultTableNameParser;
+      const tableNameParser = (_b = (_a2 = customProvider.tables) == null ? void 0 : _a2.parseName) != null ? _b : defaultTableNameParser;
       const tableIdentifier = tableNameParser(tableToken);
-      const oo = ((_e = await ((_d = (_c = customProvider.tables) == null ? undefined : _c.resolve) == null ? undefined : _d.call(_c, tableIdentifier))) != null ? _e : []).map((x) => {
+      const oo = ((_e = await ((_d = (_c = customProvider.tables) == null ? void 0 : _c.resolve) == null ? void 0 : _d.call(_c, tableIdentifier))) != null ? _e : []).map((x) => {
         var _a3;
         return {
           label: x.name,
@@ -301,13 +301,13 @@ function extendStandardRegistries(id, lid, customProvider) {
       const o = await s(ctx, m);
       const tableToken = getTableToken(ctx.currentToken);
       let tableIdentifier;
-      const tableNameParser = (_b = (_a2 = customProvider.tables) == null ? undefined : _a2.parseName) != null ? _b : defaultTableNameParser;
+      const tableNameParser = (_b = (_a2 = customProvider.tables) == null ? void 0 : _a2.parseName) != null ? _b : defaultTableNameParser;
       if (tableToken && tableToken.value) {
         tableIdentifier = tableNameParser(tableToken);
       }
       let oo = [];
       if (tableIdentifier) {
-        const columns = await ((_c = customProvider.columns) == null ? undefined : _c.resolve(tableIdentifier));
+        const columns = await ((_c = customProvider.columns) == null ? void 0 : _c.resolve(tableIdentifier));
         oo = columns ? columns.map((x) => {
           var _a3;
           return {