@grafana/plugin-ui 0.10.0 → 0.10.2

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

@@ -1,10 +1,10 @@
 import { css } from '@emotion/css';
 import { Switch } from '@grafana/ui';
-import React from 'react';
+import React__default from 'react';
 
 const EditorSwitch = (props) => {
   const styles = getStyles();
-  return /* @__PURE__ */ React.createElement("div", { className: styles.switch }, /* @__PURE__ */ React.createElement(Switch, { ...props }));
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.switch }, /* @__PURE__ */ React__default.createElement(Switch, { ...props }));
 };
 const getStyles = () => {
   return {

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

@@ -1 +1 @@
-{"version":3,"file":"EditorSwitch.js","sources":["../../../../src/components/QueryEditor/EditorSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { Switch } from '@grafana/ui';\nimport React, { type ComponentProps } from 'react';\n\n// Wrapper component around <Switch /> that properly aligns it in <EditorField />\nexport const EditorSwitch = (props: ComponentProps<typeof Switch>) => {\n  const styles = getStyles();\n\n  return (\n    <div className={styles.switch}>\n      <Switch {...props} />\n    </div>\n  );\n};\n\nconst getStyles = () => {\n  return {\n    switch: css({\n      display: 'flex',\n      alignItems: 'center',\n      minHeight: 30,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;AAKa,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AACpE,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,0BACpB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,CACrB,CAAA;AAEJ;AAEA,MAAM,YAAY,MAAM;AACtB,EAAO,OAAA;AAAA,IACL,QAAQ,GAAI,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,SAAW,EAAA;AAAA,KACZ;AAAA,GACH;AACF,CAAA;;;;"}
+{"version":3,"file":"EditorSwitch.js","sources":["../../../../src/components/QueryEditor/EditorSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { Switch } from '@grafana/ui';\nimport React, { type ComponentProps } from 'react';\n\n// Wrapper component around <Switch /> that properly aligns it in <EditorField />\nexport const EditorSwitch = (props: ComponentProps<typeof Switch>) => {\n  const styles = getStyles();\n\n  return (\n    <div className={styles.switch}>\n      <Switch {...props} />\n    </div>\n  );\n};\n\nconst getStyles = () => {\n  return {\n    switch: css({\n      display: 'flex',\n      alignItems: 'center',\n      minHeight: 30,\n    }),\n  };\n};\n"],"names":["React"],"mappings":";;;;AAKa,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AACpE,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,0BACpBA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,CACrB,CAAA;AAEJ;AAEA,MAAM,YAAY,MAAM;AACtB,EAAO,OAAA;AAAA,IACL,QAAQ,GAAI,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,SAAW,EAAA;AAAA,KACZ;AAAA,GACH;AACF,CAAA;;;;"}

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import React__default from 'react';
 
 const FlexItem = ({ grow, shrink }) => {
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "block", flexGrow: grow, flexShrink: shrink } });
+  return /* @__PURE__ */ React__default.createElement("div", { style: { display: "block", flexGrow: grow, flexShrink: shrink } });
 };
 
 export { FlexItem };

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

@@ -1 +1 @@
-{"version":3,"file":"FlexItem.js","sources":["../../../../src/components/QueryEditor/FlexItem.tsx"],"sourcesContent":["import React from 'react';\n\ninterface FlexItemProps {\n  grow?: number;\n  shrink?: number;\n}\n\nexport const FlexItem = ({ grow, shrink }: FlexItemProps) => {\n  return <div style={{ display: 'block', flexGrow: grow, flexShrink: shrink }} />;\n};\n"],"names":[],"mappings":";;AAOO,MAAM,QAAW,GAAA,CAAC,EAAE,IAAA,EAAM,QAA4B,KAAA;AAC3D,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,OAAA,EAAS,SAAS,QAAU,EAAA,IAAA,EAAM,UAAY,EAAA,MAAA,EAAU,EAAA,CAAA;AAC/E;;;;"}
+{"version":3,"file":"FlexItem.js","sources":["../../../../src/components/QueryEditor/FlexItem.tsx"],"sourcesContent":["import React from 'react';\n\ninterface FlexItemProps {\n  grow?: number;\n  shrink?: number;\n}\n\nexport const FlexItem = ({ grow, shrink }: FlexItemProps) => {\n  return <div style={{ display: 'block', flexGrow: grow, flexShrink: shrink }} />;\n};\n"],"names":["React"],"mappings":";;AAOO,MAAM,QAAW,GAAA,CAAC,EAAE,IAAA,EAAM,QAA4B,KAAA;AAC3D,EAAO,uBAAAA,cAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,OAAA,EAAS,SAAS,QAAU,EAAA,IAAA,EAAM,UAAY,EAAA,MAAA,EAAU,EAAA,CAAA;AAC/E;;;;"}

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

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import '@grafana/data';
 import { useStyles2, Select, SelectContainer as SelectContainer$1 } from '@grafana/ui';
 
@@ -11,17 +11,17 @@ function InlineSelect({ label: labelProp, ...props }) {
     ValueContainer,
     SingleValue: ValueContainer
   };
-  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, labelProp && /* @__PURE__ */ React.createElement("label", { className: styles.label, htmlFor: id }, labelProp, ":", "\xA0"), /* @__PURE__ */ React.createElement(Select, { openMenuOnFocus: true, inputId: id, ...props, components }));
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.root }, labelProp && /* @__PURE__ */ React__default.createElement("label", { className: styles.label, htmlFor: id }, labelProp, ":", "\xA0"), /* @__PURE__ */ React__default.createElement(Select, { openMenuOnFocus: true, inputId: id, ...props, components }));
 }
 const SelectContainer = (props) => {
   const { children } = props;
   const styles = useStyles2(getSelectStyles);
-  return /* @__PURE__ */ React.createElement(SelectContainer$1, { ...props, className: cx(props.className, styles.container) }, children);
+  return /* @__PURE__ */ React__default.createElement(SelectContainer$1, { ...props, className: cx(props.className, styles.container) }, children);
 };
 const ValueContainer = (props) => {
   const { className, children } = props;
   const styles = useStyles2(getSelectStyles);
-  return /* @__PURE__ */ React.createElement("div", { className: cx(className, styles.valueContainer) }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: cx(className, styles.valueContainer) }, children);
 };
 const getSelectStyles = (theme) => ({
   root: css({

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

@@ -1 +1 @@
-{"version":3,"file":"InlineSelect.js","sources":["../../../../src/components/QueryEditor/InlineSelect.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React, { useState } from 'react';\nimport { type GroupBase } from 'react-select';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport {\n  Select,\n  type SelectCommonProps,\n  type SelectContainerProps,\n  SelectContainer as BaseSelectContainer,\n  useStyles2,\n} from '@grafana/ui';\n\ninterface InlineSelectProps<T> extends SelectCommonProps<T> {\n  label?: string;\n}\n\nexport function InlineSelect<T>({ label: labelProp, ...props }: InlineSelectProps<T>) {\n  const [id] = useState(() => Math.random().toString(16).slice(2));\n  const styles = useStyles2(getSelectStyles);\n  const components = {\n    SelectContainer,\n    ValueContainer,\n    SingleValue: ValueContainer,\n  };\n\n  return (\n    <div className={styles.root}>\n      {labelProp && (\n        <label className={styles.label} htmlFor={id}>\n          {labelProp}\n          {':'}&nbsp;\n        </label>\n      )}\n      <Select openMenuOnFocus inputId={id} {...props} components={components} />\n    </div>\n  );\n}\n\nconst SelectContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(\n  props: SelectContainerProps<Option, isMulti, Group>\n) => {\n  const { children } = props;\n\n  const styles = useStyles2(getSelectStyles);\n\n  return (\n    <BaseSelectContainer {...props} className={cx(props.className, styles.container)}>\n      {children}\n    </BaseSelectContainer>\n  );\n};\n\nconst ValueContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(\n  props: SelectContainerProps<Option, isMulti, Group>\n) => {\n  const { className, children } = props;\n  const styles = useStyles2(getSelectStyles);\n\n  return <div className={cx(className, styles.valueContainer)}>{children}</div>;\n};\n\nconst getSelectStyles = (theme: GrafanaTheme2) => ({\n  root: css({\n    display: 'flex',\n    fontSize: 12,\n    alignItems: 'center',\n  }),\n\n  label: css({\n    color: theme.colors.text.secondary,\n    whiteSpace: 'nowrap',\n  }),\n\n  container: css({\n    background: 'none',\n    borderColor: 'transparent',\n  }),\n\n  valueContainer: css({\n    display: 'flex',\n    alignItems: 'center',\n    flex: 'initial',\n    color: theme.colors.text.secondary,\n    fontSize: 12,\n  }),\n});\n"],"names":["BaseSelectContainer"],"mappings":";;;;;AAiBO,SAAS,aAAgB,EAAE,KAAA,EAAO,SAAW,EAAA,GAAG,OAA+B,EAAA;AACpF,EAAA,MAAM,CAAC,EAAE,CAAI,GAAA,QAAA,CAAS,MAAM,IAAA,CAAK,MAAO,EAAA,CAAE,QAAS,CAAA,EAAE,CAAE,CAAA,KAAA,CAAM,CAAC,CAAC,CAAA;AAC/D,EAAM,MAAA,MAAA,GAAS,WAAW,eAAe,CAAA;AACzC,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,eAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAa,EAAA;AAAA,GACf;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,EACpB,SACC,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,KAAA,EAAO,OAAS,EAAA,EAAA,EAAA,EACtC,WACA,GAAI,EAAA,MACP,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,eAAA,EAAe,IAAC,EAAA,OAAA,EAAS,EAAK,EAAA,GAAG,KAAO,EAAA,UAAA,EAAwB,CAC1E,CAAA;AAEJ;AAEA,MAAM,eAAA,GAAkB,CACtB,KACG,KAAA;AACH,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAM,MAAA,MAAA,GAAS,WAAW,eAAe,CAAA;AAEzC,EACE,uBAAA,KAAA,CAAA,aAAA,CAACA,iBAAqB,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAW,EAAG,CAAA,KAAA,CAAM,SAAW,EAAA,MAAA,CAAO,SAAS,CAAA,EAAA,EAC5E,QACH,CAAA;AAEJ,CAAA;AAEA,MAAM,cAAA,GAAiB,CACrB,KACG,KAAA;AACH,EAAM,MAAA,EAAE,SAAW,EAAA,QAAA,EAAa,GAAA,KAAA;AAChC,EAAM,MAAA,MAAA,GAAS,WAAW,eAAe,CAAA;AAEzC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,WAAW,MAAO,CAAA,cAAc,KAAI,QAAS,CAAA;AACzE,CAAA;AAEA,MAAM,eAAA,GAAkB,CAAC,KAA0B,MAAA;AAAA,EACjD,MAAM,GAAI,CAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,EAAA;AAAA,IACV,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EAED,OAAO,GAAI,CAAA;AAAA,IACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EAED,WAAW,GAAI,CAAA;AAAA,IACb,UAAY,EAAA,MAAA;AAAA,IACZ,WAAa,EAAA;AAAA,GACd,CAAA;AAAA,EAED,gBAAgB,GAAI,CAAA;AAAA,IAClB,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,IAAM,EAAA,SAAA;AAAA,IACN,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,QAAU,EAAA;AAAA,GACX;AACH,CAAA,CAAA;;;;"}
+{"version":3,"file":"InlineSelect.js","sources":["../../../../src/components/QueryEditor/InlineSelect.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React, { useState } from 'react';\nimport { type GroupBase } from 'react-select';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport {\n  Select,\n  type SelectCommonProps,\n  type SelectContainerProps,\n  SelectContainer as BaseSelectContainer,\n  useStyles2,\n} from '@grafana/ui';\n\ninterface InlineSelectProps<T> extends SelectCommonProps<T> {\n  label?: string;\n}\n\nexport function InlineSelect<T>({ label: labelProp, ...props }: InlineSelectProps<T>) {\n  const [id] = useState(() => Math.random().toString(16).slice(2));\n  const styles = useStyles2(getSelectStyles);\n  const components = {\n    SelectContainer,\n    ValueContainer,\n    SingleValue: ValueContainer,\n  };\n\n  return (\n    <div className={styles.root}>\n      {labelProp && (\n        <label className={styles.label} htmlFor={id}>\n          {labelProp}\n          {':'}&nbsp;\n        </label>\n      )}\n      <Select openMenuOnFocus inputId={id} {...props} components={components} />\n    </div>\n  );\n}\n\nconst SelectContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(\n  props: SelectContainerProps<Option, isMulti, Group>\n) => {\n  const { children } = props;\n\n  const styles = useStyles2(getSelectStyles);\n\n  return (\n    <BaseSelectContainer {...props} className={cx(props.className, styles.container)}>\n      {children}\n    </BaseSelectContainer>\n  );\n};\n\nconst ValueContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(\n  props: SelectContainerProps<Option, isMulti, Group>\n) => {\n  const { className, children } = props;\n  const styles = useStyles2(getSelectStyles);\n\n  return <div className={cx(className, styles.valueContainer)}>{children}</div>;\n};\n\nconst getSelectStyles = (theme: GrafanaTheme2) => ({\n  root: css({\n    display: 'flex',\n    fontSize: 12,\n    alignItems: 'center',\n  }),\n\n  label: css({\n    color: theme.colors.text.secondary,\n    whiteSpace: 'nowrap',\n  }),\n\n  container: css({\n    background: 'none',\n    borderColor: 'transparent',\n  }),\n\n  valueContainer: css({\n    display: 'flex',\n    alignItems: 'center',\n    flex: 'initial',\n    color: theme.colors.text.secondary,\n    fontSize: 12,\n  }),\n});\n"],"names":["React","BaseSelectContainer"],"mappings":";;;;;AAiBO,SAAS,aAAgB,EAAE,KAAA,EAAO,SAAW,EAAA,GAAG,OAA+B,EAAA;AACpF,EAAA,MAAM,CAAC,EAAE,CAAI,GAAA,QAAA,CAAS,MAAM,IAAA,CAAK,MAAO,EAAA,CAAE,QAAS,CAAA,EAAE,CAAE,CAAA,KAAA,CAAM,CAAC,CAAC,CAAA;AAC/D,EAAM,MAAA,MAAA,GAAS,WAAW,eAAe,CAAA;AACzC,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,eAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAa,EAAA;AAAA,GACf;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,EACpB,SACC,oBAAAA,cAAA,CAAA,aAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,KAAA,EAAO,OAAS,EAAA,EAAA,EAAA,EACtC,WACA,GAAI,EAAA,MACP,CAEF,kBAAAA,cAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,eAAA,EAAe,IAAC,EAAA,OAAA,EAAS,EAAK,EAAA,GAAG,KAAO,EAAA,UAAA,EAAwB,CAC1E,CAAA;AAEJ;AAEA,MAAM,eAAA,GAAkB,CACtB,KACG,KAAA;AACH,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAM,MAAA,MAAA,GAAS,WAAW,eAAe,CAAA;AAEzC,EACE,uBAAAA,cAAA,CAAA,aAAA,CAACC,iBAAqB,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAW,EAAG,CAAA,KAAA,CAAM,SAAW,EAAA,MAAA,CAAO,SAAS,CAAA,EAAA,EAC5E,QACH,CAAA;AAEJ,CAAA;AAEA,MAAM,cAAA,GAAiB,CACrB,KACG,KAAA;AACH,EAAM,MAAA,EAAE,SAAW,EAAA,QAAA,EAAa,GAAA,KAAA;AAChC,EAAM,MAAA,MAAA,GAAS,WAAW,eAAe,CAAA;AAEzC,EAAO,uBAAAD,cAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,WAAW,MAAO,CAAA,cAAc,KAAI,QAAS,CAAA;AACzE,CAAA;AAEA,MAAM,eAAA,GAAkB,CAAC,KAA0B,MAAA;AAAA,EACjD,MAAM,GAAI,CAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,EAAA;AAAA,IACV,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EAED,OAAO,GAAI,CAAA;AAAA,IACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EAED,WAAW,GAAI,CAAA;AAAA,IACb,UAAY,EAAA,MAAA;AAAA,IACZ,WAAa,EAAA;AAAA,GACd,CAAA;AAAA,EAED,gBAAgB,GAAI,CAAA;AAAA,IAClB,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,IAAM,EAAA,SAAA;AAAA,IACN,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,QAAU,EAAA;AAAA,GACX;AACH,CAAA,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
 import { cx, css } from '@emotion/css';
 import { useStyles2 } from '@grafana/ui';
-import React, { Children, isValidElement, cloneElement } from 'react';
+import React__default, { Children, isValidElement, cloneElement } from 'react';
 
 const InputGroup = ({ children }) => {
   const styles = useStyles2(getStyles);
@@ -10,7 +10,7 @@ const InputGroup = ({ children }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, modifiedChildren);
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.root }, modifiedChildren);
 };
 const borderPriority = [
   "",

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

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sources":["../../../../src/components/QueryEditor/InputGroup.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useStyles2 } from '@grafana/ui';\nimport React, { Children, cloneElement, isValidElement, type ReactElement } from 'react';\n\ntype Child = string | undefined | ReactElement<{ className?: string; invalid?: unknown }>;\ninterface InputGroupProps {\n  // we type the children props so we can test them later on\n  children: Child | Child[];\n}\n\nexport const InputGroup = ({ children }: InputGroupProps) => {\n  const styles = useStyles2(getStyles);\n\n  // Find children with an invalid prop, and set a class name to raise their z-index so all\n  // of the invalid border is visible\n  const modifiedChildren = Children.map(children, (child) => {\n    if (isValidElement(child) && child.props.invalid) {\n      return cloneElement(child, { className: cx(child.props.className, styles.invalidChild) });\n    }\n\n    return child;\n  });\n\n  return <div className={styles.root}>{modifiedChildren}</div>;\n};\n\n// The later in the array the higher the priority for showing that element's border\nconst borderPriority = [\n  '' as const, // lowest priority\n  'base' as const,\n  'hovered' as const,\n  'invalid' as const,\n  'focused' as const, // highest priority\n];\n\nconst getStyles = () => ({\n  root: css({\n    display: 'flex',\n\n    // Style the direct children of the component\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      //\n      position: 'relative',\n      zIndex: borderPriority.indexOf('base'),\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: borderPriority.indexOf('hovered'),\n      },\n      '&:focus-within': {\n        zIndex: borderPriority.indexOf('focused'),\n      },\n    },\n  }),\n\n  invalidChild: css({\n    zIndex: borderPriority.indexOf('invalid'),\n  }),\n});\n"],"names":[],"mappings":";;;;AAUO,MAAM,UAAa,GAAA,CAAC,EAAE,QAAA,EAAgC,KAAA;AAC3D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAInC,EAAA,MAAM,gBAAmB,GAAA,QAAA,CAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AACzD,IAAA,IAAI,cAAe,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,MAAM,OAAS,EAAA;AAChD,MAAO,OAAA,YAAA,CAAa,KAAO,EAAA,EAAE,SAAW,EAAA,EAAA,CAAG,KAAM,CAAA,KAAA,CAAM,SAAW,EAAA,MAAA,CAAO,YAAY,CAAA,EAAG,CAAA;AAAA;AAG1F,IAAO,OAAA,KAAA;AAAA,GACR,CAAA;AAED,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,QAAO,gBAAiB,CAAA;AACxD;AAGA,MAAM,cAAiB,GAAA;AAAA,EACrB,EAAA;AAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AAAA;AACF,CAAA;AAEA,MAAM,YAAY,OAAO;AAAA,EACvB,MAAM,GAAI,CAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA;AAAA,IAGT,KAAO,EAAA;AAAA,MACL,qBAAuB,EAAA;AAAA;AAAA,QAErB,UAAY,EAAA;AAAA,OACd;AAAA,MAEA,eAAiB,EAAA;AAAA,QACf,oBAAsB,EAAA,CAAA;AAAA,QACtB,uBAAyB,EAAA;AAAA,OAC3B;AAAA,MAEA,cAAgB,EAAA;AAAA,QACd,mBAAqB,EAAA,CAAA;AAAA,QACrB,sBAAwB,EAAA;AAAA,OAC1B;AAAA,MAEA,sCAAwC,EAAA;AAAA,QACtC,YAAc,EAAA;AAAA,OAChB;AAAA;AAAA,MAGA,QAAU,EAAA,UAAA;AAAA,MACV,MAAA,EAAQ,cAAe,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA;AAAA;AAAA,MAIrC,SAAW,EAAA;AAAA,QACT,MAAA,EAAQ,cAAe,CAAA,OAAA,CAAQ,SAAS;AAAA,OAC1C;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,MAAA,EAAQ,cAAe,CAAA,OAAA,CAAQ,SAAS;AAAA;AAC1C;AACF,GACD,CAAA;AAAA,EAED,cAAc,GAAI,CAAA;AAAA,IAChB,MAAA,EAAQ,cAAe,CAAA,OAAA,CAAQ,SAAS;AAAA,GACzC;AACH,CAAA,CAAA;;;;"}
+{"version":3,"file":"InputGroup.js","sources":["../../../../src/components/QueryEditor/InputGroup.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useStyles2 } from '@grafana/ui';\nimport React, { Children, cloneElement, isValidElement, type ReactElement } from 'react';\n\ntype Child = string | undefined | ReactElement<{ className?: string; invalid?: unknown }>;\ninterface InputGroupProps {\n  // we type the children props so we can test them later on\n  children: Child | Child[];\n}\n\nexport const InputGroup = ({ children }: InputGroupProps) => {\n  const styles = useStyles2(getStyles);\n\n  // Find children with an invalid prop, and set a class name to raise their z-index so all\n  // of the invalid border is visible\n  const modifiedChildren = Children.map(children, (child) => {\n    if (isValidElement(child) && child.props.invalid) {\n      return cloneElement(child, { className: cx(child.props.className, styles.invalidChild) });\n    }\n\n    return child;\n  });\n\n  return <div className={styles.root}>{modifiedChildren}</div>;\n};\n\n// The later in the array the higher the priority for showing that element's border\nconst borderPriority = [\n  '' as const, // lowest priority\n  'base' as const,\n  'hovered' as const,\n  'invalid' as const,\n  'focused' as const, // highest priority\n];\n\nconst getStyles = () => ({\n  root: css({\n    display: 'flex',\n\n    // Style the direct children of the component\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      //\n      position: 'relative',\n      zIndex: borderPriority.indexOf('base'),\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: borderPriority.indexOf('hovered'),\n      },\n      '&:focus-within': {\n        zIndex: borderPriority.indexOf('focused'),\n      },\n    },\n  }),\n\n  invalidChild: css({\n    zIndex: borderPriority.indexOf('invalid'),\n  }),\n});\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,UAAa,GAAA,CAAC,EAAE,QAAA,EAAgC,KAAA;AAC3D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAInC,EAAA,MAAM,gBAAmB,GAAA,QAAA,CAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AACzD,IAAA,IAAI,cAAe,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,MAAM,OAAS,EAAA;AAChD,MAAO,OAAA,YAAA,CAAa,KAAO,EAAA,EAAE,SAAW,EAAA,EAAA,CAAG,KAAM,CAAA,KAAA,CAAM,SAAW,EAAA,MAAA,CAAO,YAAY,CAAA,EAAG,CAAA;AAAA;AAG1F,IAAO,OAAA,KAAA;AAAA,GACR,CAAA;AAED,EAAA,uBAAQA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,QAAO,gBAAiB,CAAA;AACxD;AAGA,MAAM,cAAiB,GAAA;AAAA,EACrB,EAAA;AAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AAAA;AACF,CAAA;AAEA,MAAM,YAAY,OAAO;AAAA,EACvB,MAAM,GAAI,CAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA;AAAA,IAGT,KAAO,EAAA;AAAA,MACL,qBAAuB,EAAA;AAAA;AAAA,QAErB,UAAY,EAAA;AAAA,OACd;AAAA,MAEA,eAAiB,EAAA;AAAA,QACf,oBAAsB,EAAA,CAAA;AAAA,QACtB,uBAAyB,EAAA;AAAA,OAC3B;AAAA,MAEA,cAAgB,EAAA;AAAA,QACd,mBAAqB,EAAA,CAAA;AAAA,QACrB,sBAAwB,EAAA;AAAA,OAC1B;AAAA,MAEA,sCAAwC,EAAA;AAAA,QACtC,YAAc,EAAA;AAAA,OAChB;AAAA;AAAA,MAGA,QAAU,EAAA,UAAA;AAAA,MACV,MAAA,EAAQ,cAAe,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA;AAAA;AAAA,MAIrC,SAAW,EAAA;AAAA,QACT,MAAA,EAAQ,cAAe,CAAA,OAAA,CAAQ,SAAS;AAAA,OAC1C;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,MAAA,EAAQ,cAAe,CAAA,OAAA,CAAQ,SAAS;AAAA;AAC1C;AACF,GACD,CAAA;AAAA,EAED,cAAc,GAAI,CAAA;AAAA,IAChB,MAAA,EAAQ,cAAe,CAAA,OAAA,CAAQ,SAAS;AAAA,GACzC;AACH,CAAA,CAAA;;;;"}

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React__default, { useState, useEffect, useCallback } from 'react';
 import { useAsync } from 'react-use';
 import '@grafana/data';
 import { applyQueryDefaults } from './defaults.js';
@@ -65,7 +65,7 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
   if (loading || error) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     QueryHeader,
     {
       db,
@@ -79,7 +79,7 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
       isQueryRunnable,
       labels: (_g = datasource.getDB(datasource.id)) == null ? undefined : _g.labels
     }
-  ), /* @__PURE__ */ React.createElement(Space, { v: 0.5 }), queryWithDefaults.editorMode !== EditorMode.Code && /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(Space, { v: 0.5 }), queryWithDefaults.editorMode !== EditorMode.Code && /* @__PURE__ */ React__default.createElement(
     VisualEditor,
     {
       db,
@@ -89,7 +89,7 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
       onValidate: setIsQueryRunnable,
       range
     }
-  ), queryWithDefaults.editorMode === EditorMode.Code && /* @__PURE__ */ React.createElement(
+  ), queryWithDefaults.editorMode === EditorMode.Code && /* @__PURE__ */ React__default.createElement(
     RawEditor,
     {
       db,

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

@@ -1 +1 @@
-{"version":3,"file":"QueryEditor.js","sources":["../../../../src/components/QueryEditor/QueryEditor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { type QueryEditorProps } from '@grafana/data';\n\nimport { applyQueryDefaults } from './defaults';\nimport { type SQLQuery, type QueryRowFilter, type SQLOptions, EditorMode } from './types';\nimport { haveColumns } from './utils/sql.utils';\n\nimport { QueryHeader } from './QueryHeader';\nimport { RawEditor } from './query-editor-raw/RawEditor';\nimport { VisualEditor } from './visual-query-builder/VisualEditor';\n\nimport { type SqlDatasource } from '../../datasource/SqlDatasource';\nimport { Space } from './Space';\n\ninterface Props extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {}\n\nexport function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }: Props) {\n  const [isQueryRunnable, setIsQueryRunnable] = useState(true);\n  const db = datasource.getDB();\n  const defaultDataset = datasource.dataset;\n\n  const { loading, error } = useAsync(async () => {\n    return () => {\n      if (datasource.getDB(datasource.id).init !== undefined) {\n        datasource.getDB(datasource.id).init!();\n      }\n    };\n  }, [datasource]);\n\n  const queryWithDefaults = applyQueryDefaults(query);\n  const [queryRowFilter, setQueryRowFilter] = useState<QueryRowFilter>({\n    filter: !!queryWithDefaults.sql?.whereString,\n    group: !!queryWithDefaults.sql?.groupBy?.[0]?.property.name,\n    order: !!queryWithDefaults.sql?.orderBy?.property.name,\n    preview: true,\n  });\n  const [queryToValidate, setQueryToValidate] = useState(queryWithDefaults);\n\n  useEffect(() => {\n    return () => {\n      if (datasource.getDB(datasource.id).dispose !== undefined) {\n        datasource.getDB(datasource.id).dispose!();\n      }\n    };\n  }, [datasource]);\n\n  const processQuery = useCallback(\n    (q: SQLQuery) => {\n      if (isQueryValid(q) && onRunQuery) {\n        onRunQuery();\n      }\n    },\n    [onRunQuery]\n  );\n\n  const onQueryChange = (q: SQLQuery, process = true) => {\n    setQueryToValidate(q);\n    onChange(q);\n\n    if (haveColumns(q.sql?.columns) && q.sql?.columns.some((c) => c.name) && !queryRowFilter.group) {\n      setQueryRowFilter({ ...queryRowFilter, group: true });\n    }\n\n    if (process) {\n      processQuery(q);\n    }\n  };\n\n  const onQueryHeaderChange = (q: SQLQuery) => {\n    setQueryToValidate(q);\n    onChange(q);\n  };\n\n  if (loading || error) {\n    return null;\n  }\n\n  return (\n    <>\n      <QueryHeader\n        db={db}\n        defaultDataset={defaultDataset || ''}\n        enableDatasets={!db.disableDatasets}\n        onChange={onQueryHeaderChange}\n        onRunQuery={onRunQuery}\n        onQueryRowChange={setQueryRowFilter}\n        queryRowFilter={queryRowFilter}\n        query={queryWithDefaults}\n        isQueryRunnable={isQueryRunnable}\n        labels={datasource.getDB(datasource.id)?.labels}\n      />\n\n      <Space v={0.5} />\n\n      {queryWithDefaults.editorMode !== EditorMode.Code && (\n        <VisualEditor\n          db={db}\n          query={queryWithDefaults}\n          onChange={(q: SQLQuery) => onQueryChange(q, false)}\n          queryRowFilter={queryRowFilter}\n          onValidate={setIsQueryRunnable}\n          range={range}\n        />\n      )}\n\n      {queryWithDefaults.editorMode === EditorMode.Code && (\n        <RawEditor\n          db={db}\n          query={queryWithDefaults}\n          queryToValidate={queryToValidate}\n          onChange={onQueryChange}\n          onRunQuery={onRunQuery}\n          onValidate={setIsQueryRunnable}\n          range={range}\n        />\n      )}\n    </>\n  );\n}\n\nconst isQueryValid = (q: SQLQuery) => {\n  return Boolean(q.rawSql);\n};\n"],"names":["_a","_b"],"mappings":"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"}
+{"version":3,"file":"QueryEditor.js","sources":["../../../../src/components/QueryEditor/QueryEditor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { type QueryEditorProps } from '@grafana/data';\n\nimport { applyQueryDefaults } from './defaults';\nimport { type SQLQuery, type QueryRowFilter, type SQLOptions, EditorMode } from './types';\nimport { haveColumns } from './utils/sql.utils';\n\nimport { QueryHeader } from './QueryHeader';\nimport { RawEditor } from './query-editor-raw/RawEditor';\nimport { VisualEditor } from './visual-query-builder/VisualEditor';\n\nimport { type SqlDatasource } from '../../datasource/SqlDatasource';\nimport { Space } from './Space';\n\ninterface Props extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {}\n\nexport function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }: Props) {\n  const [isQueryRunnable, setIsQueryRunnable] = useState(true);\n  const db = datasource.getDB();\n  const defaultDataset = datasource.dataset;\n\n  const { loading, error } = useAsync(async () => {\n    return () => {\n      if (datasource.getDB(datasource.id).init !== undefined) {\n        datasource.getDB(datasource.id).init!();\n      }\n    };\n  }, [datasource]);\n\n  const queryWithDefaults = applyQueryDefaults(query);\n  const [queryRowFilter, setQueryRowFilter] = useState<QueryRowFilter>({\n    filter: !!queryWithDefaults.sql?.whereString,\n    group: !!queryWithDefaults.sql?.groupBy?.[0]?.property.name,\n    order: !!queryWithDefaults.sql?.orderBy?.property.name,\n    preview: true,\n  });\n  const [queryToValidate, setQueryToValidate] = useState(queryWithDefaults);\n\n  useEffect(() => {\n    return () => {\n      if (datasource.getDB(datasource.id).dispose !== undefined) {\n        datasource.getDB(datasource.id).dispose!();\n      }\n    };\n  }, [datasource]);\n\n  const processQuery = useCallback(\n    (q: SQLQuery) => {\n      if (isQueryValid(q) && onRunQuery) {\n        onRunQuery();\n      }\n    },\n    [onRunQuery]\n  );\n\n  const onQueryChange = (q: SQLQuery, process = true) => {\n    setQueryToValidate(q);\n    onChange(q);\n\n    if (haveColumns(q.sql?.columns) && q.sql?.columns.some((c) => c.name) && !queryRowFilter.group) {\n      setQueryRowFilter({ ...queryRowFilter, group: true });\n    }\n\n    if (process) {\n      processQuery(q);\n    }\n  };\n\n  const onQueryHeaderChange = (q: SQLQuery) => {\n    setQueryToValidate(q);\n    onChange(q);\n  };\n\n  if (loading || error) {\n    return null;\n  }\n\n  return (\n    <>\n      <QueryHeader\n        db={db}\n        defaultDataset={defaultDataset || ''}\n        enableDatasets={!db.disableDatasets}\n        onChange={onQueryHeaderChange}\n        onRunQuery={onRunQuery}\n        onQueryRowChange={setQueryRowFilter}\n        queryRowFilter={queryRowFilter}\n        query={queryWithDefaults}\n        isQueryRunnable={isQueryRunnable}\n        labels={datasource.getDB(datasource.id)?.labels}\n      />\n\n      <Space v={0.5} />\n\n      {queryWithDefaults.editorMode !== EditorMode.Code && (\n        <VisualEditor\n          db={db}\n          query={queryWithDefaults}\n          onChange={(q: SQLQuery) => onQueryChange(q, false)}\n          queryRowFilter={queryRowFilter}\n          onValidate={setIsQueryRunnable}\n          range={range}\n        />\n      )}\n\n      {queryWithDefaults.editorMode === EditorMode.Code && (\n        <RawEditor\n          db={db}\n          query={queryWithDefaults}\n          queryToValidate={queryToValidate}\n          onChange={onQueryChange}\n          onRunQuery={onRunQuery}\n          onValidate={setIsQueryRunnable}\n          range={range}\n        />\n      )}\n    </>\n  );\n}\n\nconst isQueryValid = (q: SQLQuery) => {\n  return Boolean(q.rawSql);\n};\n"],"names":["_a","_b","React"],"mappings":";;;;;;;;;;;;;;AAkBO,SAAS,eAAe,EAAE,UAAA,EAAY,OAAO,QAAU,EAAA,UAAA,EAAY,OAAgB,EAAA;AAlB1F,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAmBE,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAM,MAAA,EAAA,GAAK,WAAW,KAAM,EAAA;AAC5B,EAAA,MAAM,iBAAiB,UAAW,CAAA,OAAA;AAElC,EAAA,MAAM,EAAE,OAAA,EAAS,KAAM,EAAA,GAAI,SAAS,YAAY;AAC9C,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,KAAM,CAAA,UAAA,CAAW,EAAE,CAAA,CAAE,SAAS,SAAW,EAAA;AACtD,QAAA,UAAA,CAAW,KAAM,CAAA,UAAA,CAAW,EAAE,CAAA,CAAE,IAAM,EAAA;AAAA;AACxC,KACF;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,iBAAA,GAAoB,mBAAmB,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,QAAyB,CAAA;AAAA,IACnE,MAAQ,EAAA,CAAC,EAAC,CAAA,EAAA,GAAA,iBAAA,CAAkB,QAAlB,IAAuB,GAAA,SAAA,GAAA,EAAA,CAAA,WAAA,CAAA;AAAA,IACjC,KAAA,EAAO,CAAC,EAAA,CAAC,EAAkB,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,iBAAA,CAAA,GAAA,KAAlB,sBAAuB,OAAvB,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAiC,CAAjC,CAAA,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAqC,QAAS,CAAA,IAAA,CAAA;AAAA,IACvD,KAAA,EAAO,CAAC,EAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,iBAAA,CAAkB,QAAlB,IAAuB,GAAA,SAAA,GAAA,EAAA,CAAA,OAAA,KAAvB,sBAAgC,QAAS,CAAA,IAAA,CAAA;AAAA,IAClD,OAAS,EAAA;AAAA,GACV,CAAA;AACD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,iBAAiB,CAAA;AAExE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,KAAM,CAAA,UAAA,CAAW,EAAE,CAAA,CAAE,YAAY,SAAW,EAAA;AACzD,QAAA,UAAA,CAAW,KAAM,CAAA,UAAA,CAAW,EAAE,CAAA,CAAE,OAAS,EAAA;AAAA;AAC3C,KACF;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,CAAgB,KAAA;AACf,MAAI,IAAA,YAAA,CAAa,CAAC,CAAA,IAAK,UAAY,EAAA;AACjC,QAAW,UAAA,EAAA;AAAA;AACb,KACF;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,MAAM,aAAgB,GAAA,CAAC,CAAa,EAAA,OAAA,GAAU,IAAS,KAAA;AAzDzD,IAAA,IAAAA,GAAAC,EAAAA,GAAAA;AA0DI,IAAA,kBAAA,CAAmB,CAAC,CAAA;AACpB,IAAA,QAAA,CAAS,CAAC,CAAA;AAEV,IAAI,IAAA,WAAA,CAAA,CAAYD,MAAA,CAAE,CAAA,GAAA,KAAF,mBAAAA,GAAO,CAAA,OAAO,OAAKC,GAAA,GAAA,CAAA,CAAE,QAAF,IAAAA,GAAAA,SAAAA,GAAAA,GAAAA,CAAO,QAAQ,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,IAAA,CAAA,CAAA,IAAS,CAAC,cAAA,CAAe,KAAO,EAAA;AAC9F,MAAA,iBAAA,CAAkB,EAAE,GAAG,cAAgB,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA;AAGtD,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA;AAChB,GACF;AAEA,EAAM,MAAA,mBAAA,GAAsB,CAAC,CAAgB,KAAA;AAC3C,IAAA,kBAAA,CAAmB,CAAC,CAAA;AACpB,IAAA,QAAA,CAAS,CAAC,CAAA;AAAA,GACZ;AAEA,EAAA,IAAI,WAAW,KAAO,EAAA;AACpB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBAEIC,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,gBAAgB,cAAkB,IAAA,EAAA;AAAA,MAClC,cAAA,EAAgB,CAAC,EAAG,CAAA,eAAA;AAAA,MACpB,QAAU,EAAA,mBAAA;AAAA,MACV,UAAA;AAAA,MACA,gBAAkB,EAAA,iBAAA;AAAA,MAClB,cAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,eAAA;AAAA,MACA,SAAQ,EAAW,GAAA,UAAA,CAAA,KAAA,CAAM,UAAW,CAAA,EAAE,MAA9B,IAAiC,GAAA,SAAA,GAAA,EAAA,CAAA;AAAA;AAAA,GAC3C,+CAEC,KAAM,EAAA,EAAA,CAAA,EAAG,KAAK,CAEd,EAAA,iBAAA,CAAkB,UAAe,KAAA,UAAA,CAAW,IAC3C,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,QAAU,EAAA,CAAC,CAAgB,KAAA,aAAA,CAAc,GAAG,KAAK,CAAA;AAAA,MACjD,cAAA;AAAA,MACA,UAAY,EAAA,kBAAA;AAAA,MACZ;AAAA;AAAA,GAIH,EAAA,iBAAA,CAAkB,UAAe,KAAA,UAAA,CAAW,IAC3C,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,eAAA;AAAA,MACA,QAAU,EAAA,aAAA;AAAA,MACV,UAAA;AAAA,MACA,UAAY,EAAA,kBAAA;AAAA,MACZ;AAAA;AAAA,GAGN,CAAA;AAEJ;AAEA,MAAM,YAAA,GAAe,CAAC,CAAgB,KAAA;AACpC,EAAO,OAAA,OAAA,CAAQ,EAAE,MAAM,CAAA;AACzB,CAAA;;;;"}

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React__default, { useState, useId, useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import '@grafana/data';
 import { ConfirmModal } from './ConfirmModal.js';
@@ -35,6 +35,7 @@ function QueryHeader({
   const [_, copyToClipboard] = useCopyToClipboard();
   const [showConfirm, setShowConfirm] = useState(false);
   const toRawSql = getRawSqlFn(db);
+  const htmlId = useId();
   const onEditorModeChange = useCallback(
     (newEditorMode) => {
       if (editorMode === EditorMode.Code) {
@@ -74,7 +75,7 @@ function QueryHeader({
     };
     onChange(next);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorHeader, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(EditorHeader, null, /* @__PURE__ */ React__default.createElement(
     InlineSelect,
     {
       label: "Format",
@@ -84,47 +85,47 @@ function QueryHeader({
       onChange: onFormatChange,
       options: QUERY_FORMAT_OPTIONS
     }
-  ), editorMode === EditorMode.Builder && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  ), editorMode === EditorMode.Builder && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     InlineSwitch,
     {
-      id: "sql-filter",
+      id: `sql-filter-${htmlId}`,
       label: "Filter",
       transparent: true,
       showLabel: true,
       value: queryRowFilter.filter,
       onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     InlineSwitch,
     {
-      id: "sql-group",
+      id: `sql-group-${htmlId}`,
       label: "Group",
       transparent: true,
       showLabel: true,
       value: queryRowFilter.group,
       onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     InlineSwitch,
     {
-      id: "sql-order",
+      id: `sql-order-${htmlId}`,
       label: "Order",
       transparent: true,
       showLabel: true,
       value: queryRowFilter.order,
       onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     InlineSwitch,
     {
-      id: "sql-preview",
+      id: `sql-preview-${htmlId}`,
       label: "Preview",
       transparent: true,
       showLabel: true,
       value: queryRowFilter.preview,
       onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })
     }
-  )), /* @__PURE__ */ React.createElement(FlexItem, { grow: 1 }), /* @__PURE__ */ React.createElement(RunQueryButton, { queryInvalid: !isQueryRunnable, onClick: () => onRunQuery() }), /* @__PURE__ */ React.createElement(RadioButtonGroup, { options: editorModes, size: "sm", value: editorMode, onChange: onEditorModeChange }), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React__default.createElement(FlexItem, { grow: 1 }), /* @__PURE__ */ React__default.createElement(RunQueryButton, { queryInvalid: !isQueryRunnable, onClick: () => onRunQuery() }), /* @__PURE__ */ React__default.createElement(RadioButtonGroup, { options: editorModes, size: "sm", value: editorMode, onChange: onEditorModeChange }), /* @__PURE__ */ React__default.createElement(
     ConfirmModal,
     {
       isOpen: showConfirm,
@@ -147,18 +148,20 @@ function QueryHeader({
       },
       onCancel: () => setShowConfirm(false)
     }
-  )), editorMode === EditorMode.Builder && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Space, { v: 0.5 }), /* @__PURE__ */ React.createElement(EditorRow, null, enableDatasets === true && /* @__PURE__ */ React.createElement(EditorField, { label: labels.get("dataset") || "Dataset", width: 25 }, /* @__PURE__ */ React.createElement(
+  )), editorMode === EditorMode.Builder && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Space, { v: 0.5 }), /* @__PURE__ */ React__default.createElement(EditorRow, null, enableDatasets === true && /* @__PURE__ */ React__default.createElement(EditorField, { label: labels.get("dataset") || "Dataset", width: 25 }, /* @__PURE__ */ React__default.createElement(
     DatasetSelector,
     {
       db,
+      inputId: `sql-dataset-${htmlId}`,
       dataset: defaultDataset,
       value: query.dataset === undefined ? null : query.dataset,
       onChange: onDatasetChange
     }
-  )), /* @__PURE__ */ React.createElement(EditorField, { label: "Table", width: 25 }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React__default.createElement(EditorField, { label: "Table", width: 25 }, /* @__PURE__ */ React__default.createElement(
     TableSelector,
     {
       db,
+      inputId: `sql-table-${htmlId}`,
       dataset: query.dataset || defaultDataset,
       query,
       value: query.table === undefined ? null : query.table,

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

@@ -1 +1 @@
-{"version":3,"file":"QueryHeader.js","sources":["../../../../src/components/QueryEditor/QueryHeader.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { ConfirmModal } from './ConfirmModal';\nimport { DatasetSelector } from './DatasetSelector';\nimport { TableSelector } from './TableSelector';\nimport { InlineSwitch, RadioButtonGroup } from '@grafana/ui';\nimport { type QueryWithDefaults } from './defaults';\nimport { EditorField } from './EditorField';\nimport { EditorHeader } from './EditorHeader';\nimport { EditorRow } from './EditorRow';\nimport { FlexItem } from './FlexItem';\nimport { InlineSelect } from './InlineSelect';\nimport { Space } from './Space';\nimport { RunQueryButton } from './RunQueryButton';\nimport { type DB, type SQLQuery, type QueryRowFilter, EditorMode, QueryFormat, QUERY_FORMAT_OPTIONS } from './types';\nimport { getRawSqlFn } from './utils/sql.utils';\n\ninterface QueryHeaderProps {\n  db: DB;\n  defaultDataset: string;\n  enableDatasets: boolean;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  onRunQuery: () => void;\n  onQueryRowChange: (queryRowFilter: QueryRowFilter) => void;\n  queryRowFilter: QueryRowFilter;\n  isQueryRunnable: boolean;\n  labels?: Map<string, string>;\n}\n\nconst editorModes = [\n  { label: 'Builder', value: EditorMode.Builder },\n  { label: 'Code', value: EditorMode.Code },\n];\n\nexport function QueryHeader({\n  db,\n  defaultDataset,\n  enableDatasets,\n  query,\n  queryRowFilter,\n  onChange,\n  onRunQuery,\n  onQueryRowChange,\n  isQueryRunnable,\n  labels = new Map([['dataset', 'Dataset']]),\n}: QueryHeaderProps) {\n  const { editorMode } = query;\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const [showConfirm, setShowConfirm] = useState(false);\n  const toRawSql = getRawSqlFn(db);\n\n  const onEditorModeChange = useCallback(\n    (newEditorMode: EditorMode) => {\n      if (editorMode === EditorMode.Code) {\n        setShowConfirm(true);\n        return;\n      }\n      onChange({ ...query, editorMode: newEditorMode });\n    },\n    [editorMode, onChange, query]\n  );\n\n  const onFormatChange = (e: SelectableValue) => {\n    const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };\n    onChange(next);\n  };\n\n  const onDatasetChange = (e: SelectableValue) => {\n    if (e.value === query.dataset) {\n      return;\n    }\n\n    const next = {\n      ...query,\n      dataset: e.value,\n      table: undefined,\n      sql: undefined,\n      rawSql: '',\n    };\n\n    onChange(next);\n  };\n\n  const onTableChange = (e: SelectableValue) => {\n    if (e.value === query.table) {\n      return;\n    }\n\n    const next: SQLQuery = {\n      ...query,\n      table: e.value,\n      sql: undefined,\n      rawSql: '',\n    };\n    onChange(next);\n  };\n\n  return (\n    <>\n      <EditorHeader>\n        <InlineSelect\n          label=\"Format\"\n          value={query.format}\n          placeholder=\"Select format\"\n          menuShouldPortal\n          onChange={onFormatChange}\n          options={QUERY_FORMAT_OPTIONS}\n        />\n        {editorMode === EditorMode.Builder && (\n          <>\n            <InlineSwitch\n              id=\"sql-filter\"\n              label=\"Filter\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.filter}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id=\"sql-group\"\n              label=\"Group\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.group}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id=\"sql-order\"\n              label=\"Order\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.order}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id=\"sql-preview\"\n              label=\"Preview\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.preview}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })\n              }\n            />\n          </>\n        )}\n\n        <FlexItem grow={1} />\n\n        <RunQueryButton queryInvalid={!isQueryRunnable} onClick={() => onRunQuery()} />\n\n        <RadioButtonGroup options={editorModes} size=\"sm\" value={editorMode} onChange={onEditorModeChange} />\n\n        <ConfirmModal\n          isOpen={showConfirm}\n          onCopy={() => {\n            setShowConfirm(false);\n            copyToClipboard(query.rawSql!);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onDiscard={() => {\n            setShowConfirm(false);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onCancel={() => setShowConfirm(false)}\n        />\n      </EditorHeader>\n\n      {editorMode === EditorMode.Builder && (\n        <>\n          <Space v={0.5} />\n\n          <EditorRow>\n            {enableDatasets === true && (\n              <EditorField label={labels.get('dataset') || 'Dataset'} width={25}>\n                <DatasetSelector\n                  db={db}\n                  dataset={defaultDataset}\n                  value={query.dataset === undefined ? null : query.dataset}\n                  onChange={onDatasetChange}\n                />\n              </EditorField>\n            )}\n\n            <EditorField label=\"Table\" width={25}>\n              <TableSelector\n                db={db}\n                dataset={query.dataset || defaultDataset}\n                query={query}\n                value={query.table === undefined ? null : query.table}\n                onChange={onTableChange}\n                applyDefault\n              />\n            </EditorField>\n          </EditorRow>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"QueryHeader.js","sources":["../../../../src/components/QueryEditor/QueryHeader.tsx"],"sourcesContent":["import React, { useCallback, useState, useId } from 'react';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { ConfirmModal } from './ConfirmModal';\nimport { DatasetSelector } from './DatasetSelector';\nimport { TableSelector } from './TableSelector';\nimport { InlineSwitch, RadioButtonGroup } from '@grafana/ui';\nimport { type QueryWithDefaults } from './defaults';\nimport { EditorField } from './EditorField';\nimport { EditorHeader } from './EditorHeader';\nimport { EditorRow } from './EditorRow';\nimport { FlexItem } from './FlexItem';\nimport { InlineSelect } from './InlineSelect';\nimport { Space } from './Space';\nimport { RunQueryButton } from './RunQueryButton';\nimport { type DB, type SQLQuery, type QueryRowFilter, EditorMode, QueryFormat, QUERY_FORMAT_OPTIONS } from './types';\nimport { getRawSqlFn } from './utils/sql.utils';\n\ninterface QueryHeaderProps {\n  db: DB;\n  defaultDataset: string;\n  enableDatasets: boolean;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  onRunQuery: () => void;\n  onQueryRowChange: (queryRowFilter: QueryRowFilter) => void;\n  queryRowFilter: QueryRowFilter;\n  isQueryRunnable: boolean;\n  labels?: Map<string, string>;\n}\n\nconst editorModes = [\n  { label: 'Builder', value: EditorMode.Builder },\n  { label: 'Code', value: EditorMode.Code },\n];\n\nexport function QueryHeader({\n  db,\n  defaultDataset,\n  enableDatasets,\n  query,\n  queryRowFilter,\n  onChange,\n  onRunQuery,\n  onQueryRowChange,\n  isQueryRunnable,\n  labels = new Map([['dataset', 'Dataset']]),\n}: QueryHeaderProps) {\n  const { editorMode } = query;\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const [showConfirm, setShowConfirm] = useState(false);\n  const toRawSql = getRawSqlFn(db);\n  const htmlId = useId();\n\n  const onEditorModeChange = useCallback(\n    (newEditorMode: EditorMode) => {\n      if (editorMode === EditorMode.Code) {\n        setShowConfirm(true);\n        return;\n      }\n      onChange({ ...query, editorMode: newEditorMode });\n    },\n    [editorMode, onChange, query]\n  );\n\n  const onFormatChange = (e: SelectableValue) => {\n    const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };\n    onChange(next);\n  };\n\n  const onDatasetChange = (e: SelectableValue) => {\n    if (e.value === query.dataset) {\n      return;\n    }\n\n    const next = {\n      ...query,\n      dataset: e.value,\n      table: undefined,\n      sql: undefined,\n      rawSql: '',\n    };\n\n    onChange(next);\n  };\n\n  const onTableChange = (e: SelectableValue) => {\n    if (e.value === query.table) {\n      return;\n    }\n\n    const next: SQLQuery = {\n      ...query,\n      table: e.value,\n      sql: undefined,\n      rawSql: '',\n    };\n    onChange(next);\n  };\n\n  return (\n    <>\n      <EditorHeader>\n        <InlineSelect\n          label=\"Format\"\n          value={query.format}\n          placeholder=\"Select format\"\n          menuShouldPortal\n          onChange={onFormatChange}\n          options={QUERY_FORMAT_OPTIONS}\n        />\n        {editorMode === EditorMode.Builder && (\n          <>\n            <InlineSwitch\n              id={`sql-filter-${htmlId}`}\n              label=\"Filter\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.filter}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id={`sql-group-${htmlId}`}\n              label=\"Group\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.group}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id={`sql-order-${htmlId}`}\n              label=\"Order\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.order}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id={`sql-preview-${htmlId}`}\n              label=\"Preview\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.preview}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })\n              }\n            />\n          </>\n        )}\n\n        <FlexItem grow={1} />\n\n        <RunQueryButton queryInvalid={!isQueryRunnable} onClick={() => onRunQuery()} />\n\n        <RadioButtonGroup options={editorModes} size=\"sm\" value={editorMode} onChange={onEditorModeChange} />\n\n        <ConfirmModal\n          isOpen={showConfirm}\n          onCopy={() => {\n            setShowConfirm(false);\n            copyToClipboard(query.rawSql!);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onDiscard={() => {\n            setShowConfirm(false);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onCancel={() => setShowConfirm(false)}\n        />\n      </EditorHeader>\n\n      {editorMode === EditorMode.Builder && (\n        <>\n          <Space v={0.5} />\n\n          <EditorRow>\n            {enableDatasets === true && (\n              <EditorField label={labels.get('dataset') || 'Dataset'} width={25}>\n                <DatasetSelector\n                  db={db}\n                  inputId={`sql-dataset-${htmlId}`}\n                  dataset={defaultDataset}\n                  value={query.dataset === undefined ? null : query.dataset}\n                  onChange={onDatasetChange}\n                />\n              </EditorField>\n            )}\n\n            <EditorField label=\"Table\" width={25}>\n              <TableSelector\n                db={db}\n                inputId={`sql-table-${htmlId}`}\n                dataset={query.dataset || defaultDataset}\n                query={query}\n                value={query.table === undefined ? null : query.table}\n                onChange={onTableChange}\n                applyDefault\n              />\n            </EditorField>\n          </EditorRow>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["React"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Tooltip, Button } from '@grafana/ui';
 
 const RunQueryButton = ({
@@ -14,7 +14,7 @@ const RunQueryButton = ({
   if (queryRunning) {
     icon = "fa fa-spinner";
   }
-  const RunButton = /* @__PURE__ */ React.createElement(
+  const RunButton = /* @__PURE__ */ React__default.createElement(
     Button,
     {
       "aria-label": ariaLabel,
@@ -27,12 +27,12 @@ const RunQueryButton = ({
     },
     "Run query"
   );
-  return queryInvalid ? /* @__PURE__ */ React.createElement(
+  return queryInvalid ? /* @__PURE__ */ React__default.createElement(
     Tooltip,
     {
       theme: "error",
       placement: "top",
-      content: invalidQueryTooltip != null ? invalidQueryTooltip : /* @__PURE__ */ React.createElement(React.Fragment, null, "Your query is invalid. Check below for details. ", /* @__PURE__ */ React.createElement("br", null), "However, you can still run this query.")
+      content: invalidQueryTooltip != null ? invalidQueryTooltip : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "Your query is invalid. Check below for details. ", /* @__PURE__ */ React__default.createElement("br", null), "However, you can still run this query.")
     },
     RunButton
   ) : RunButton;

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

@@ -1 +1 @@
-{"version":3,"file":"RunQueryButton.js","sources":["../../../../src/components/QueryEditor/RunQueryButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, type IconName, type PopoverContent, Tooltip } from '@grafana/ui';\n\ntype RunQueryButtonProps = {\n  ariaLabel?: string;\n  queryInvalid?: boolean;\n  invalidQueryTooltip?: PopoverContent;\n  disabled?: boolean;\n  queryRunning?: boolean;\n  onClick: () => void;\n  dataTestId?: string;\n};\n\nexport const RunQueryButton = ({\n  ariaLabel = 'Query editor Run button',\n  queryRunning = false,\n  queryInvalid = false,\n  invalidQueryTooltip,\n  disabled = false,\n  onClick,\n  dataTestId,\n}: RunQueryButtonProps) => {\n  let icon: IconName | undefined = queryInvalid ? 'exclamation-triangle' : undefined;\n  if (queryRunning) {\n    icon = 'fa fa-spinner';\n  }\n\n  const RunButton = (\n    <Button\n      aria-label={ariaLabel}\n      size=\"sm\"\n      variant=\"secondary\"\n      icon={icon}\n      disabled={disabled || queryRunning}\n      onClick={onClick}\n      data-testid={dataTestId}\n    >\n      Run query\n    </Button>\n  );\n\n  return queryInvalid ? (\n    <Tooltip\n      theme=\"error\"\n      placement=\"top\"\n      content={\n        invalidQueryTooltip ?? (\n          <>\n            Your query is invalid. Check below for details. <br />\n            However, you can still run this query.\n          </>\n        )\n      }\n    >\n      {RunButton}\n    </Tooltip>\n  ) : (\n    RunButton\n  );\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAY,GAAA,yBAAA;AAAA,EACZ,YAAe,GAAA,KAAA;AAAA,EACf,YAAe,GAAA,KAAA;AAAA,EACf,mBAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAI,IAAA,IAAA,GAA6B,eAAe,sBAAyB,GAAA,SAAA;AACzE,EAAA,IAAI,YAAc,EAAA;AAChB,IAAO,IAAA,GAAA,eAAA;AAAA;AAGT,EAAA,MAAM,SACJ,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,IAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,IAAA;AAAA,MACA,UAAU,QAAY,IAAA,YAAA;AAAA,MACtB,OAAA;AAAA,MACA,aAAa,EAAA;AAAA,KAAA;AAAA,IACd;AAAA,GAED;AAGF,EAAA,OAAO,YACL,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,OAAA;AAAA,MACN,SAAU,EAAA,KAAA;AAAA,MACV,SACE,mBACE,IAAA,IAAA,GAAA,mBAAA,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAE,oEACiD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,GAAE,wCAExD;AAAA,KAAA;AAAA,IAIH;AAAA,GAGH,GAAA,SAAA;AAEJ;;;;"}
+{"version":3,"file":"RunQueryButton.js","sources":["../../../../src/components/QueryEditor/RunQueryButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, type IconName, type PopoverContent, Tooltip } from '@grafana/ui';\n\ntype RunQueryButtonProps = {\n  ariaLabel?: string;\n  queryInvalid?: boolean;\n  invalidQueryTooltip?: PopoverContent;\n  disabled?: boolean;\n  queryRunning?: boolean;\n  onClick: () => void;\n  dataTestId?: string;\n};\n\nexport const RunQueryButton = ({\n  ariaLabel = 'Query editor Run button',\n  queryRunning = false,\n  queryInvalid = false,\n  invalidQueryTooltip,\n  disabled = false,\n  onClick,\n  dataTestId,\n}: RunQueryButtonProps) => {\n  let icon: IconName | undefined = queryInvalid ? 'exclamation-triangle' : undefined;\n  if (queryRunning) {\n    icon = 'fa fa-spinner';\n  }\n\n  const RunButton = (\n    <Button\n      aria-label={ariaLabel}\n      size=\"sm\"\n      variant=\"secondary\"\n      icon={icon}\n      disabled={disabled || queryRunning}\n      onClick={onClick}\n      data-testid={dataTestId}\n    >\n      Run query\n    </Button>\n  );\n\n  return queryInvalid ? (\n    <Tooltip\n      theme=\"error\"\n      placement=\"top\"\n      content={\n        invalidQueryTooltip ?? (\n          <>\n            Your query is invalid. Check below for details. <br />\n            However, you can still run this query.\n          </>\n        )\n      }\n    >\n      {RunButton}\n    </Tooltip>\n  ) : (\n    RunButton\n  );\n};\n"],"names":["React"],"mappings":";;;AAaO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAY,GAAA,yBAAA;AAAA,EACZ,YAAe,GAAA,KAAA;AAAA,EACf,YAAe,GAAA,KAAA;AAAA,EACf,mBAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAI,IAAA,IAAA,GAA6B,eAAe,sBAAyB,GAAA,SAAA;AACzE,EAAA,IAAI,YAAc,EAAA;AAChB,IAAO,IAAA,GAAA,eAAA;AAAA;AAGT,EAAA,MAAM,SACJ,mBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,IAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,IAAA;AAAA,MACA,UAAU,QAAY,IAAA,YAAA;AAAA,MACtB,OAAA;AAAA,MACA,aAAa,EAAA;AAAA,KAAA;AAAA,IACd;AAAA,GAED;AAGF,EAAA,OAAO,YACL,mBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,OAAA;AAAA,MACN,SAAU,EAAA,KAAA;AAAA,MACV,SACE,mBACE,IAAA,IAAA,GAAA,mBAAA,mBAAAA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAE,oEACiDA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,GAAE,wCAExD;AAAA,KAAA;AAAA,IAIH;AAAA,GAGH,GAAA,SAAA;AAEJ;;;;"}

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

@@ -1,12 +1,12 @@
 import { css, cx } from '@emotion/css';
-import React from 'react';
+import React__default from 'react';
 import '@grafana/data';
 import { stylesFactory, useTheme2 } from '@grafana/ui';
 
 const Space = (props) => {
   const theme = useTheme2();
   const styles = getStyles(theme, props);
-  return /* @__PURE__ */ React.createElement("span", { className: cx(styles.wrapper) });
+  return /* @__PURE__ */ React__default.createElement("span", { className: cx(styles.wrapper) });
 };
 Space.defaultProps = {
   v: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"Space.js","sources":["../../../../src/components/QueryEditor/Space.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useTheme2, stylesFactory } from '@grafana/ui';\n\nexport interface SpaceProps {\n  v?: number;\n  h?: number;\n  layout?: 'block' | 'inline';\n}\n\nexport const Space = (props: SpaceProps) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme, props);\n\n  return <span className={cx(styles.wrapper)} />;\n};\n\nSpace.defaultProps = {\n  v: 0,\n  h: 0,\n  layout: 'block',\n};\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({\n  wrapper: css([\n    {\n      paddingRight: theme.spacing(props.h ?? 0),\n      paddingBottom: theme.spacing(props.v ?? 0),\n    },\n    props.layout === 'inline' && {\n      display: 'inline-block',\n    },\n    props.layout === 'block' && {\n      display: 'block',\n    },\n  ]),\n}));\n"],"names":[],"mappings":";;;;;AAYa,MAAA,KAAA,GAAQ,CAAC,KAAsB,KAAA;AAC1C,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,KAAK,CAAA;AAErC,EAAA,2CAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,OAAO,CAAG,EAAA,CAAA;AAC9C;AAEA,KAAA,CAAM,YAAe,GAAA;AAAA,EACnB,CAAG,EAAA,CAAA;AAAA,EACH,CAAG,EAAA,CAAA;AAAA,EACH,MAAQ,EAAA;AACV,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAc,CAAC,KAAA,EAAsB,KAAmB,KAAA;AAzB1E,EAAA,IAAA,EAAA,EAAA,EAAA;AAyB8E,EAAA,OAAA;AAAA,IAC5E,SAAS,GAAI,CAAA;AAAA,MACX;AAAA,QACE,cAAc,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC,CAAA;AAAA,QACxC,eAAe,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC;AAAA,OAC3C;AAAA,MACA,KAAA,CAAM,WAAW,QAAY,IAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACX;AAAA,MACA,KAAA,CAAM,WAAW,OAAW,IAAA;AAAA,QAC1B,OAAS,EAAA;AAAA;AACX,KACD;AAAA,GACH;AAAA,CAAE,CAAA;;;;"}
+{"version":3,"file":"Space.js","sources":["../../../../src/components/QueryEditor/Space.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useTheme2, stylesFactory } from '@grafana/ui';\n\nexport interface SpaceProps {\n  v?: number;\n  h?: number;\n  layout?: 'block' | 'inline';\n}\n\nexport const Space = (props: SpaceProps) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme, props);\n\n  return <span className={cx(styles.wrapper)} />;\n};\n\nSpace.defaultProps = {\n  v: 0,\n  h: 0,\n  layout: 'block',\n};\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({\n  wrapper: css([\n    {\n      paddingRight: theme.spacing(props.h ?? 0),\n      paddingBottom: theme.spacing(props.v ?? 0),\n    },\n    props.layout === 'inline' && {\n      display: 'inline-block',\n    },\n    props.layout === 'block' && {\n      display: 'block',\n    },\n  ]),\n}));\n"],"names":[],"mappings":";;;;;AAYa,MAAA,KAAA,GAAQ,CAAC,KAAsB,KAAA;AAC1C,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,KAAK,CAAA;AAErC,EAAA,oDAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,OAAO,CAAG,EAAA,CAAA;AAC9C;AAEA,KAAA,CAAM,YAAe,GAAA;AAAA,EACnB,CAAG,EAAA,CAAA;AAAA,EACH,CAAG,EAAA,CAAA;AAAA,EACH,MAAQ,EAAA;AACV,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAc,CAAC,KAAA,EAAsB,KAAmB,KAAA;AAzB1E,EAAA,IAAA,EAAA,EAAA,EAAA;AAyB8E,EAAA,OAAA;AAAA,IAC5E,SAAS,GAAI,CAAA;AAAA,MACX;AAAA,QACE,cAAc,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC,CAAA;AAAA,QACxC,eAAe,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC;AAAA,OAC3C;AAAA,MACA,KAAA,CAAM,WAAW,QAAY,IAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACX;AAAA,MACA,KAAA,CAAM,WAAW,OAAW,IAAA;AAAA,QAC1B,OAAS,EAAA;AAAA;AACX,KACD;AAAA,GACH;AAAA,CAAE,CAAA;;;;"}

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React__default from 'react';
 import { useAsync } from 'react-use';
 import { toOption } from '@grafana/data';
 import { Select } from '@grafana/ui';
 import './types.js';
 import 'lodash';
 
-const TableSelector = ({ db, dataset, value, className, onChange }) => {
+const TableSelector = ({ db, dataset, value, className, onChange, inputId }) => {
   const state = useAsync(async () => {
     if (!dataset) {
       return [];
@@ -13,9 +13,10 @@ const TableSelector = ({ db, dataset, value, className, onChange }) => {
     const tables = await db.tables(dataset);
     return tables.map(toOption);
   }, [dataset]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Select,
     {
+      inputId,
       className,
       disabled: state.loading,
       "aria-label": "Table selector",

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

@@ -1 +1 @@
-{"version":3,"file":"TableSelector.js","sources":["../../../../src/components/QueryEditor/TableSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Select } from '@grafana/ui';\nimport { type DB, type ResourceSelectorProps } from './types';\nimport { type QueryWithDefaults } from './defaults';\n\ninterface TableSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset: string;\n  value: string | null;\n  query: QueryWithDefaults;\n  onChange: (v: SelectableValue) => void;\n}\n\nexport const TableSelector = ({ db, dataset, value, className, onChange }: TableSelectorProps) => {\n  const state = useAsync(async () => {\n    if (!dataset) {\n      return [];\n    }\n\n    const tables = await db.tables(dataset);\n    return tables.map(toOption);\n  }, [dataset]);\n\n  return (\n    <Select\n      className={className}\n      disabled={state.loading}\n      aria-label=\"Table selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      placeholder={state.loading ? 'Loading tables' : 'Select table'}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgBa,MAAA,aAAA,GAAgB,CAAC,EAAE,EAAA,EAAI,SAAS,KAAO,EAAA,SAAA,EAAW,UAAmC,KAAA;AAChG,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAO,EAAC;AAAA;AAGV,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,OAAO,CAAA;AACtC,IAAO,OAAA,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,GAC5B,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,UAAU,KAAM,CAAA,OAAA;AAAA,MAChB,YAAW,EAAA,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,WAAA,EAAa,KAAM,CAAA,OAAA,GAAU,gBAAmB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}
+{"version":3,"file":"TableSelector.js","sources":["../../../../src/components/QueryEditor/TableSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Select } from '@grafana/ui';\nimport { type DB, type ResourceSelectorProps } from './types';\nimport { type QueryWithDefaults } from './defaults';\n\ninterface TableSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset: string;\n  value: string | null;\n  query: QueryWithDefaults;\n  onChange: (v: SelectableValue) => void;\n  inputId?: string;\n}\n\nexport const TableSelector = ({ db, dataset, value, className, onChange, inputId }: TableSelectorProps) => {\n  const state = useAsync(async () => {\n    if (!dataset) {\n      return [];\n    }\n\n    const tables = await db.tables(dataset);\n    return tables.map(toOption);\n  }, [dataset]);\n\n  return (\n    <Select\n      inputId={inputId}\n      className={className}\n      disabled={state.loading}\n      aria-label=\"Table selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      placeholder={state.loading ? 'Loading tables' : 'Select table'}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAiBa,MAAA,aAAA,GAAgB,CAAC,EAAE,EAAA,EAAI,SAAS,KAAO,EAAA,SAAA,EAAW,QAAU,EAAA,OAAA,EAAkC,KAAA;AACzG,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAO,EAAC;AAAA;AAGV,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,OAAO,CAAA;AACtC,IAAO,OAAA,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,GAC5B,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,KAAM,CAAA,OAAA;AAAA,MAChB,YAAW,EAAA,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,WAAA,EAAa,KAAM,CAAA,OAAA,GAAU,gBAAmB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback } from 'react';
+import React__default, { useRef, useEffect, useCallback } from 'react';
 import '../types.js';
 import { formatSQL } from '../utils/formatSQL.js';
 import { SQLEditor } from '../../SQLEditor/components/SQLEditor.js';
@@ -22,7 +22,7 @@ function QueryEditorRaw({ children, onChange, query, width, height, completionPr
     },
     [onChange]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     SQLEditor,
     {
       width,

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';\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};\n\nexport function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }: 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: formatSQL }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAgBgB,SAAA,cAAA,CAAe,EAAE,QAAU,EAAA,QAAA,EAAU,OAAO,KAAO,EAAA,MAAA,EAAQ,oBAA6B,EAAA;AAEtG,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,UAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,WAAW,SAAU;AAAA,KAAA;AAAA,IAE/D;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';\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};\n\nexport function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }: 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: formatSQL }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;AAgBgB,SAAA,cAAA,CAAe,EAAE,QAAU,EAAA,QAAA,EAAU,OAAO,KAAO,EAAA,MAAA,EAAQ,oBAA6B,EAAA;AAEtG,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,uBAAAA,cAAA,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,UAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,WAAW,SAAU;AAAA,KAAA;AAAA,IAE/D;AAAA,GACH;AAEJ;;;;"}

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useState, useMemo } from 'react';
+import React__default, { useState, useMemo } from 'react';
 import { useTheme2, HorizontalGroup, IconButton, Tooltip, Icon } from '@grafana/ui';
 import { QueryValidator } from './QueryValidator.js';
 
@@ -39,7 +39,7 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
   if (!showTools && validationResult === undefined) {
     style = { height: 0, padding: 0, visibility: "hidden" };
   }
-  return /* @__PURE__ */ React.createElement("div", { className: styles.container, style }, /* @__PURE__ */ React.createElement("div", null, validatorProps.onValidate && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.container, style }, /* @__PURE__ */ React__default.createElement("div", null, validatorProps.onValidate && /* @__PURE__ */ React__default.createElement(
     QueryValidator,
     {
       ...validatorProps,
@@ -48,7 +48,7 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
         validatorProps.onValidate(result);
       }
     }
-  )), showTools && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React.createElement(IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React.createElement(
+  )), showTools && /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React__default.createElement(IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React__default.createElement(
     IconButton,
     {
       onClick: () => onExpand(!isExpanded),
@@ -56,7 +56,7 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
       size: "xs",
       tooltip: isExpanded ? "Collapse editor" : "Expand editor"
     }
-  ), /* @__PURE__ */ React.createElement(Tooltip, { content: "Hit CTRL/CMD+Return to run query" }, /* @__PURE__ */ React.createElement(Icon, { className: styles.hint, name: "keyboard" })))));
+  ), /* @__PURE__ */ React__default.createElement(Tooltip, { content: "Hit CTRL/CMD+Return to run query" }, /* @__PURE__ */ React__default.createElement(Icon, { className: styles.hint, name: "keyboard" })))));
 }
 
 export { QueryToolbox };

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';\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\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={onFormatCode} 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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"}
+{"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';\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\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={onFormatCode} 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":["React"],"mappings":"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"}