@grafana/plugin-ui 0.12.0 → 0.13.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"EditorField.js","sources":["../../../../src/components/QueryEditor/EditorField.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { type ComponentProps } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Field, Icon, type PopoverContent, ReactUtils, Space, Tooltip, useStyles2 } from '@grafana/ui';\n\ninterface EditorFieldProps extends ComponentProps<typeof Field> {\n  label: string;\n  children: React.ReactElement;\n  width?: number | string;\n  optional?: boolean;\n  tooltip?: PopoverContent;\n  tooltipInteractive?: boolean;\n}\nexport const EditorField = (props: EditorFieldProps) => {\n  const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;\n\n  const styles = useStyles2(getStyles, width);\n\n  // Null check for backward compatibility\n  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);\n\n  const labelEl = (\n    <>\n      <label className={styles.label} htmlFor={childInputId}>\n        {label}\n        {optional && <span className={styles.optional}> - optional</span>}\n        {tooltip && (\n          <Tooltip placement=\"top\" content={tooltip} theme=\"info\" interactive={tooltipInteractive}>\n            <Icon tabIndex={0} name=\"info-circle\" size=\"sm\" className={styles.icon} />\n          </Tooltip>\n        )}\n      </label>\n      <Space v={0.5} />\n    </>\n  );\n\n  return (\n    <div className={styles.root}>\n      <Field className={styles.field} label={labelEl} {...fieldProps}>\n        {children}\n      </Field>\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2, width?: number | string) => {\n  return {\n    root: css({\n      minWidth: theme.spacing(width ?? 0),\n    }),\n    label: css({\n      fontSize: 12,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n    optional: css({\n      fontStyle: 'italic',\n      color: theme.colors.text.secondary,\n    }),\n    field: css({\n      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove\n    }),\n    icon: css({\n      color: theme.colors.text.secondary,\n      marginLeft: theme.spacing(1),\n      ':hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;AAca,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAdxD,EAAA,IAAA,EAAA;AAeE,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,OAAA,EAAS,oBAAoB,QAAU,EAAA,KAAA,EAAO,GAAG,UAAA,EAAe,GAAA,KAAA;AAEzF,EAAM,MAAA,MAAA,GAAS,UAAW,CAAA,SAAA,EAAW,KAAK,CAAA;AAG1C,EAAA,MAAM,YAAe,GAAA,CAAA,UAAA,IAAA,IAAA,GAAA,SAAA,GAAA,UAAA,CAAY,OAAW,MAAA,CAAA,EAAA,GAAA,UAAA,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAY,UAAW,CAAA,QAAA,CAAA,CAAA;AAEnE,EAAA,MAAM,0BAEF,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,KAAA,EAAO,SAAS,YACtC,EAAA,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,4BAAa,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,UAAU,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,MACzD,OAAA,wBACE,OAAQ,EAAA,EAAA,SAAA,EAAU,OAAM,OAAS,EAAA,OAAA,EAAS,KAAM,EAAA,MAAA,EAAO,WAAa,EAAA,kBAAA,EACnE,8BAAC,IAAK,EAAA,EAAA,QAAA,EAAU,GAAG,IAAK,EAAA,aAAA,EAAc,MAAK,IAAK,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAM,CAC1E,EAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,KAAM,EAAA,EAAA,CAAA,EAAG,GAAK,EAAA;AAAA,GACjB,EAAA,CAAA;AAGF,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,MACrB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,OAAO,KAAO,EAAA,OAAA,EAAU,GAAG,UAAA,EACjD,UACH,CACF,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,KAA4B,KAAA;AACnE,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,CAAC;AAAA,KACnC,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,QAAU,EAAA,EAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA;AAAA,KAC9B,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,SAAW,EAAA,QAAA;AAAA,MACX,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA,KAC1B,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,YAAc,EAAA;AAAA;AAAA,KACf,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,QAAU,EAAA;AAAA,QACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAA;;;;"}
+{"version":3,"file":"EditorField.js","sources":["../../../../src/components/QueryEditor/EditorField.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { css } from '@emotion/css';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Field, Icon, type PopoverContent, ReactUtils, Space, Tooltip, useStyles2 } from '@grafana/ui';\n\ninterface EditorFieldProps extends ComponentProps<typeof Field> {\n  label: string;\n  children: React.ReactElement;\n  width?: number | string;\n  optional?: boolean;\n  tooltip?: PopoverContent;\n  tooltipInteractive?: boolean;\n}\nexport const EditorField = (props: EditorFieldProps) => {\n  const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;\n\n  const styles = useStyles2(getStyles, width);\n\n  // Null check for backward compatibility\n  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);\n\n  const labelEl = (\n    <>\n      <label className={styles.label} htmlFor={childInputId}>\n        {label}\n        {optional && <span className={styles.optional}> - optional</span>}\n        {tooltip && (\n          <Tooltip placement=\"top\" content={tooltip} theme=\"info\" interactive={tooltipInteractive}>\n            <Icon tabIndex={0} name=\"info-circle\" size=\"sm\" className={styles.icon} />\n          </Tooltip>\n        )}\n      </label>\n      <Space v={0.5} />\n    </>\n  );\n\n  return (\n    <div className={styles.root}>\n      <Field className={styles.field} label={labelEl} {...fieldProps}>\n        {children}\n      </Field>\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2, width?: number | string) => {\n  return {\n    root: css({\n      minWidth: theme.spacing(width ?? 0),\n    }),\n    label: css({\n      fontSize: 12,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n    optional: css({\n      fontStyle: 'italic',\n      color: theme.colors.text.secondary,\n    }),\n    field: css({\n      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove\n    }),\n    icon: css({\n      color: theme.colors.text.secondary,\n      marginLeft: theme.spacing(1),\n      ':hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;AAaa,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAbxD,EAAA,IAAA,EAAA;AAcE,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,OAAA,EAAS,oBAAoB,QAAU,EAAA,KAAA,EAAO,GAAG,UAAA,EAAe,GAAA,KAAA;AAEzF,EAAM,MAAA,MAAA,GAAS,UAAW,CAAA,SAAA,EAAW,KAAK,CAAA;AAG1C,EAAA,MAAM,YAAe,GAAA,CAAA,UAAA,IAAA,IAAA,GAAA,SAAA,GAAA,UAAA,CAAY,OAAW,MAAA,CAAA,EAAA,GAAA,UAAA,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAY,UAAW,CAAA,QAAA,CAAA,CAAA;AAEnE,EAAM,MAAA,OAAA,6EAED,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAM,WAAW,MAAO,CAAA,KAAA,EAAO,SAAS,YACtC,EAAA,EAAA,KAAA,EACA,4BAAa,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,WAAW,MAAO,CAAA,QAAA,EAAA,EAAU,aAAW,CACzD,EAAA,OAAA,oBACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,SAAS,OAAS,EAAA,KAAA,EAAM,QAAO,WAAa,EAAA,kBAAA,EAAA,sCAClE,IAAK,EAAA,EAAA,QAAA,EAAU,CAAG,EAAA,IAAA,EAAK,aAAc,EAAA,IAAA,EAAK,MAAK,SAAW,EAAA,MAAA,CAAO,MAAM,CAC1E,CAEJ,mBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,CAAG,EAAA,GAAA,EAAK,CACjB,CAAA;AAGF,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,wBACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,OAAO,KAAO,EAAA,OAAA,EAAU,GAAG,UAAA,EAAA,EACjD,QACH,CACF,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,KAA4B,KAAA;AACnE,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,CAAC;AAAA,KACnC,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,QAAU,EAAA,EAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA;AAAA,KAC9B,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,SAAW,EAAA,QAAA;AAAA,MACX,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA,KAC1B,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,YAAc,EAAA;AAAA;AAAA,KACf,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,QAAU,EAAA;AAAA,QACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAA;;;;"}

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

@@ -1,8 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { EditorStack } from './EditorStack.js';
 
 const EditorFieldGroup = ({ children }) => {
-  return /* @__PURE__ */ jsx(EditorStack, { gap: 1, children });
+  return /* @__PURE__ */ React.createElement(EditorStack, { gap: 1 }, children);
 };
 
 export { EditorFieldGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"EditorFieldGroup.js","sources":["../../../../src/components/QueryEditor/EditorFieldGroup.tsx"],"sourcesContent":["import { EditorStack } from './EditorStack';\n\ninterface EditorFieldGroupProps {\n  children?: React.ReactNode;\n}\n\nexport const EditorFieldGroup = ({ children }: EditorFieldGroupProps) => {\n  return <EditorStack gap={1}>{children}</EditorStack>;\n};\n"],"names":[],"mappings":";;;AAMO,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AACvE,EAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAY,GAAK,EAAA,CAAA,EAAI,QAAS,EAAA,CAAA;AACxC;;;;"}
+{"version":3,"file":"EditorFieldGroup.js","sources":["../../../../src/components/QueryEditor/EditorFieldGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { EditorStack } from './EditorStack';\n\ninterface EditorFieldGroupProps {\n  children?: React.ReactNode;\n}\n\nexport const EditorFieldGroup = ({ children }: EditorFieldGroupProps) => {\n  return <EditorStack gap={1}>{children}</EditorStack>;\n};\n"],"names":[],"mappings":";;;AAOO,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AACvE,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,GAAK,EAAA,CAAA,EAAA,EAAI,QAAS,CAAA;AACxC;;;;"}

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

@@ -1,11 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { css } from '@emotion/css';
 import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 const EditorHeader = ({ children }) => {
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ jsx("div", { className: styles.root, children });
+  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, children);
 };
 const getStyles = (theme) => ({
   root: css({

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

@@ -1 +1 @@
-{"version":3,"file":"EditorHeader.js","sources":["../../../../src/components/QueryEditor/EditorHeader.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\ninterface EditorHeaderProps {\n  children?: React.ReactNode;\n}\n\nexport const EditorHeader = ({ children }: EditorHeaderProps) => {\n  const styles = useStyles2(getStyles);\n\n  return <div className={styles.root}>{children}</div>;\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  root: css({\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    minHeight: theme.spacing(4),\n  }),\n});\n"],"names":[],"mappings":";;;;;AASO,MAAM,YAAe,GAAA,CAAC,EAAE,QAAA,EAAkC,KAAA;AAC/D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,MAAO,QAAS,EAAA,CAAA;AAChD;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,MAAM,GAAI,CAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,GAC3B;AACH,CAAA,CAAA;;;;"}
+{"version":3,"file":"EditorHeader.js","sources":["../../../../src/components/QueryEditor/EditorHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\ninterface EditorHeaderProps {\n  children?: React.ReactNode;\n}\n\nexport const EditorHeader = ({ children }: EditorHeaderProps) => {\n  const styles = useStyles2(getStyles);\n\n  return <div className={styles.root}>{children}</div>;\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  root: css({\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    minHeight: theme.spacing(4),\n  }),\n});\n"],"names":[],"mappings":";;;;;AASO,MAAM,YAAe,GAAA,CAAC,EAAE,QAAA,EAAkC,KAAA;AAC/D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,QAAO,QAAS,CAAA;AAChD;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,MAAM,GAAI,CAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,GAC3B;AACH,CAAA,CAAA;;;;"}

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

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { Button } from '@grafana/ui';
 import { EditorStack } from './EditorStack.js';
 
@@ -18,14 +17,11 @@ const EditorList = forwardRef(function EditorList2({ items, renderItem, onChange
     newItems.splice(itemIndex, 1);
     onChange(newItems);
   };
-  return /* @__PURE__ */ jsxs(EditorStack, { children: [
-    items.map((item, index) => /* @__PURE__ */ jsx("div", { children: renderItem(
-      item,
-      (newItem) => onChangeItem(index, newItem),
-      () => onDeleteItem(index)
-    ) }, index)),
-    /* @__PURE__ */ jsx(Button, { ref, onClick: onAddItem, variant: "secondary", size: "md", icon: "plus", "aria-label": "Add", type: "button" })
-  ] });
+  return /* @__PURE__ */ React.createElement(EditorStack, null, items.map((item, index) => /* @__PURE__ */ React.createElement("div", { key: index }, renderItem(
+    item,
+    (newItem) => onChangeItem(index, newItem),
+    () => onDeleteItem(index)
+  ))), /* @__PURE__ */ React.createElement(Button, { ref, onClick: onAddItem, variant: "secondary", size: "md", icon: "plus", "aria-label": "Add", type: "button" }));
 });
 
 export { EditorList };

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

@@ -1 +1 @@
-{"version":3,"file":"EditorList.js","sources":["../../../../src/components/QueryEditor/EditorList.tsx"],"sourcesContent":["import { type ReactElement, type Ref, forwardRef } from 'react';\nimport { Button } from '@grafana/ui';\n\nimport { EditorStack } from './EditorStack';\n\ninterface EditorListProps<T> {\n  items: Array<Partial<T>>;\n  renderItem: (item: Partial<T>, onChangeItem: (item: Partial<T>) => void, onDeleteItem: () => void) => ReactElement;\n  onChange: (items: Array<Partial<T>>) => void;\n}\n\nexport const EditorList = forwardRef(function EditorList<T>(\n  { items, renderItem, onChange }: EditorListProps<T>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const onAddItem = () => {\n    const newItems = [...items, {}];\n\n    onChange(newItems);\n  };\n\n  const onChangeItem = (itemIndex: number, newItem: Partial<T>) => {\n    const newItems = [...items];\n    newItems[itemIndex] = newItem;\n    onChange(newItems);\n  };\n\n  const onDeleteItem = (itemIndex: number) => {\n    const newItems = [...items];\n    newItems.splice(itemIndex, 1);\n    onChange(newItems);\n  };\n  return (\n    <EditorStack>\n      {items.map((item, index) => (\n        <div key={index}>\n          {renderItem(\n            item,\n            (newItem) => onChangeItem(index, newItem),\n            () => onDeleteItem(index)\n          )}\n        </div>\n      ))}\n      <Button ref={ref} onClick={onAddItem} variant=\"secondary\" size=\"md\" icon=\"plus\" aria-label=\"Add\" type=\"button\" />\n    </EditorStack>\n  );\n});\n"],"names":["EditorList"],"mappings":";;;;;AAWa,MAAA,UAAA,GAAa,WAAW,SAASA,WAAAA,CAC5C,EAAE,KAAO,EAAA,UAAA,EAAY,QAAS,EAAA,EAC9B,GACA,EAAA;AACA,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,MAAM,QAAW,GAAA,CAAC,GAAG,KAAA,EAAO,EAAE,CAAA;AAE9B,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,GACnB;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,SAAA,EAAmB,OAAwB,KAAA;AAC/D,IAAM,MAAA,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA;AAC1B,IAAA,QAAA,CAAS,SAAS,CAAI,GAAA,OAAA;AACtB,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,GACnB;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,SAAsB,KAAA;AAC1C,IAAM,MAAA,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA;AAC1B,IAAS,QAAA,CAAA,MAAA,CAAO,WAAW,CAAC,CAAA;AAC5B,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,GACnB;AACA,EAAA,4BACG,WACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAM,EAAA,KAAA,yBACf,KACE,EAAA,EAAA,QAAA,EAAA,UAAA;AAAA,MACC,IAAA;AAAA,MACA,CAAC,OAAA,KAAY,YAAa,CAAA,KAAA,EAAO,OAAO,CAAA;AAAA,MACxC,MAAM,aAAa,KAAK;AAAA,KAC1B,EAAA,EALQ,KAMV,CACD,CAAA;AAAA,oBACA,GAAA,CAAA,MAAA,EAAA,EAAO,GAAU,EAAA,OAAA,EAAS,WAAW,OAAQ,EAAA,WAAA,EAAY,IAAK,EAAA,IAAA,EAAK,IAAK,EAAA,MAAA,EAAO,YAAW,EAAA,KAAA,EAAM,MAAK,QAAS,EAAA;AAAA,GACjH,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"EditorList.js","sources":["../../../../src/components/QueryEditor/EditorList.tsx"],"sourcesContent":["import React, { type ReactElement, type Ref, forwardRef } from 'react';\nimport { Button } from '@grafana/ui';\n\nimport { EditorStack } from './EditorStack';\n\ninterface EditorListProps<T> {\n  items: Array<Partial<T>>;\n  renderItem: (item: Partial<T>, onChangeItem: (item: Partial<T>) => void, onDeleteItem: () => void) => ReactElement;\n  onChange: (items: Array<Partial<T>>) => void;\n}\n\nexport const EditorList = forwardRef(function EditorList<T>(\n  { items, renderItem, onChange }: EditorListProps<T>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const onAddItem = () => {\n    const newItems = [...items, {}];\n\n    onChange(newItems);\n  };\n\n  const onChangeItem = (itemIndex: number, newItem: Partial<T>) => {\n    const newItems = [...items];\n    newItems[itemIndex] = newItem;\n    onChange(newItems);\n  };\n\n  const onDeleteItem = (itemIndex: number) => {\n    const newItems = [...items];\n    newItems.splice(itemIndex, 1);\n    onChange(newItems);\n  };\n  return (\n    <EditorStack>\n      {items.map((item, index) => (\n        <div key={index}>\n          {renderItem(\n            item,\n            (newItem) => onChangeItem(index, newItem),\n            () => onDeleteItem(index)\n          )}\n        </div>\n      ))}\n      <Button ref={ref} onClick={onAddItem} variant=\"secondary\" size=\"md\" icon=\"plus\" aria-label=\"Add\" type=\"button\" />\n    </EditorStack>\n  );\n});\n"],"names":["EditorList"],"mappings":";;;;AAWa,MAAA,UAAA,GAAa,WAAW,SAASA,WAAAA,CAC5C,EAAE,KAAO,EAAA,UAAA,EAAY,QAAS,EAAA,EAC9B,GACA,EAAA;AACA,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,MAAM,QAAW,GAAA,CAAC,GAAG,KAAA,EAAO,EAAE,CAAA;AAE9B,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,GACnB;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,SAAA,EAAmB,OAAwB,KAAA;AAC/D,IAAM,MAAA,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA;AAC1B,IAAA,QAAA,CAAS,SAAS,CAAI,GAAA,OAAA;AACtB,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,GACnB;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,SAAsB,KAAA;AAC1C,IAAM,MAAA,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA;AAC1B,IAAS,QAAA,CAAA,MAAA,CAAO,WAAW,CAAC,CAAA;AAC5B,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,GACnB;AACA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,WACE,EAAA,IAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,MAAM,KAChB,qBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAK,KACP,EAAA,EAAA,UAAA;AAAA,IACC,IAAA;AAAA,IACA,CAAC,OAAA,KAAY,YAAa,CAAA,KAAA,EAAO,OAAO,CAAA;AAAA,IACxC,MAAM,aAAa,KAAK;AAAA,GAE5B,CACD,CAAA,sCACA,MAAO,EAAA,EAAA,GAAA,EAAU,SAAS,SAAW,EAAA,OAAA,EAAQ,WAAY,EAAA,IAAA,EAAK,MAAK,IAAK,EAAA,MAAA,EAAO,cAAW,KAAM,EAAA,IAAA,EAAK,UAAS,CACjH,CAAA;AAEJ,CAAC;;;;"}

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Stack } from '@grafana/ui';
 import '@grafana/data';
 
 const EditorStack = ({ children, wrap: wrapItems = true, ...props }) => {
   var _a, _b;
-  return /* @__PURE__ */ jsx(Stack, { wrap: wrapItems ? "wrap" : undefined, direction: (_a = props.direction) != null ? _a : "row", gap: (_b = props.gap) != null ? _b : 2, ...props, children });
+  return /* @__PURE__ */ React.createElement(Stack, { wrap: wrapItems ? "wrap" : undefined, direction: (_a = props.direction) != null ? _a : "row", gap: (_b = props.gap) != null ? _b : 2, ...props }, children);
 };
 
 export { EditorStack };

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

@@ -1 +1 @@
-{"version":3,"file":"EditorStack.js","sources":["../../../../src/components/QueryEditor/EditorStack.tsx"],"sourcesContent":["import { Stack } from '@grafana/ui';\nimport { type ThemeSpacingTokens } from '@grafana/data';\n\nexport type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';\nexport type AlignItems =\n  | 'stretch'\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'baseline'\n  | 'start'\n  | 'end'\n  | 'self-start'\n  | 'self-end';\n\ninterface StackProps {\n  children?: React.ReactNode;\n  direction?: Direction;\n  alignItems?: AlignItems;\n  wrap?: boolean;\n  gap?: ThemeSpacingTokens;\n}\n\nexport const EditorStack = ({ children, wrap: wrapItems = true, ...props }: StackProps) => {\n  return (\n    <Stack wrap={wrapItems ? 'wrap' : undefined} direction={props.direction ?? 'row'} gap={props.gap ?? 2} {...props}>\n      {children}\n    </Stack>\n  );\n};\n"],"names":[],"mappings":";;;;AAuBa,MAAA,WAAA,GAAc,CAAC,EAAE,QAAA,EAAU,MAAM,SAAY,GAAA,IAAA,EAAM,GAAG,KAAA,EAAwB,KAAA;AAvB3F,EAAA,IAAA,EAAA,EAAA,EAAA;AAwBE,EAAA,2BACG,KAAM,EAAA,EAAA,IAAA,EAAM,YAAY,MAAS,GAAA,SAAA,EAAW,YAAW,EAAM,GAAA,KAAA,CAAA,SAAA,KAAN,IAAmB,GAAA,EAAA,GAAA,KAAA,EAAO,MAAK,EAAM,GAAA,KAAA,CAAA,GAAA,KAAN,YAAa,CAAI,EAAA,GAAG,OACxG,QACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EditorStack.js","sources":["../../../../src/components/QueryEditor/EditorStack.tsx"],"sourcesContent":["import React from 'react';\nimport { Stack } from '@grafana/ui';\nimport { type ThemeSpacingTokens } from '@grafana/data';\n\nexport type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';\nexport type AlignItems =\n  | 'stretch'\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'baseline'\n  | 'start'\n  | 'end'\n  | 'self-start'\n  | 'self-end';\n\ninterface StackProps {\n  children?: React.ReactNode;\n  direction?: Direction;\n  alignItems?: AlignItems;\n  wrap?: boolean;\n  gap?: ThemeSpacingTokens;\n}\n\nexport const EditorStack = ({ children, wrap: wrapItems = true, ...props }: StackProps) => {\n  return (\n    <Stack wrap={wrapItems ? 'wrap' : undefined} direction={props.direction ?? 'row'} gap={props.gap ?? 2} {...props}>\n      {children}\n    </Stack>\n  );\n};\n"],"names":[],"mappings":";;;;AAwBa,MAAA,WAAA,GAAc,CAAC,EAAE,QAAA,EAAU,MAAM,SAAY,GAAA,IAAA,EAAM,GAAG,KAAA,EAAwB,KAAA;AAxB3F,EAAA,IAAA,EAAA,EAAA,EAAA;AAyBE,EAAA,2CACG,KAAM,EAAA,EAAA,IAAA,EAAM,YAAY,MAAS,GAAA,SAAA,EAAW,YAAW,EAAM,GAAA,KAAA,CAAA,SAAA,KAAN,IAAmB,GAAA,EAAA,GAAA,KAAA,EAAO,MAAK,EAAM,GAAA,KAAA,CAAA,GAAA,KAAN,YAAa,CAAI,EAAA,GAAG,SACxG,QACH,CAAA;AAEJ;;;;"}

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

@@ -1,11 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { css } from '@emotion/css';
 import { Switch } from '@grafana/ui';
-import 'react';
 
 const EditorSwitch = (props) => {
   const styles = getStyles();
-  return /* @__PURE__ */ jsx("div", { className: styles.switch, children: /* @__PURE__ */ jsx(Switch, { ...props }) });
+  return /* @__PURE__ */ React.createElement("div", { className: styles.switch }, /* @__PURE__ */ React.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 { 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,GAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,QACrB,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,CACrB,EAAA,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 React, { type ComponentProps } from 'react';\nimport { css } from '@emotion/css';\nimport { Switch } from '@grafana/ui';\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;;;;"}

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

@@ -1,7 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 
 const FlexItem = ({ grow, shrink }) => {
-  return /* @__PURE__ */ jsx("div", { style: { display: "block", flexGrow: grow, flexShrink: shrink } });
+  return /* @__PURE__ */ React.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":["interface 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":";;AAKO,MAAM,QAAW,GAAA,CAAC,EAAE,IAAA,EAAM,QAA4B,KAAA;AAC3D,EAAO,uBAAA,GAAA,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';\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":";;AAMO,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;;;;"}

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

@@ -1,6 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState } from 'react';
 import { css, cx } from '@emotion/css';
-import { useState } from 'react';
 import '@grafana/data';
 import { useStyles2, Select, SelectContainer as SelectContainer$1 } from '@grafana/ui';
 
@@ -12,24 +11,17 @@ function InlineSelect({ label: labelProp, ...props }) {
     ValueContainer,
     SingleValue: ValueContainer
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
-    labelProp && /* @__PURE__ */ jsxs("label", { className: styles.label, htmlFor: id, children: [
-      labelProp,
-      ":",
-      "\xA0"
-    ] }),
-    /* @__PURE__ */ jsx(Select, { openMenuOnFocus: true, inputId: id, ...props, components })
-  ] });
+  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 }));
 }
 const SelectContainer = (props) => {
   const { children } = props;
   const styles = useStyles2(getSelectStyles);
-  return /* @__PURE__ */ jsx(SelectContainer$1, { ...props, className: cx(props.className, styles.container), children });
+  return /* @__PURE__ */ React.createElement(SelectContainer$1, { ...props, className: cx(props.className, styles.container) }, children);
 };
 const ValueContainer = (props) => {
   const { className, children } = props;
   const styles = useStyles2(getSelectStyles);
-  return /* @__PURE__ */ jsx("div", { className: cx(className, styles.valueContainer), children });
+  return /* @__PURE__ */ React.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 { 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,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,IACpB,EAAA,QAAA,EAAA;AAAA,IAAA,SAAA,yBACE,OAAM,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,KAAA,EAAO,SAAS,EACtC,EAAA,QAAA,EAAA;AAAA,MAAA,SAAA;AAAA,MACA,GAAA;AAAA,MAAI;AAAA,KACP,EAAA,CAAA;AAAA,oBAEF,GAAA,CAAC,UAAO,eAAe,EAAA,IAAA,EAAC,SAAS,EAAK,EAAA,GAAG,OAAO,UAAwB,EAAA;AAAA,GAC1E,EAAA,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,GAAA,CAACA,iBAAqB,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAW,EAAG,CAAA,KAAA,CAAM,SAAW,EAAA,MAAA,CAAO,SAAS,CAAA,EAC5E,QACH,EAAA,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,GAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,WAAW,MAAO,CAAA,cAAc,GAAI,QAAS,EAAA,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 React, { useState } from 'react';\nimport { css, cx } from '@emotion/css';\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;;;;"}

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

@@ -1,7 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
+import React, { Children, isValidElement, cloneElement } from 'react';
 import { cx, css } from '@emotion/css';
 import { useStyles2 } from '@grafana/ui';
-import { Children, isValidElement, cloneElement } from 'react';
 
 const InputGroup = ({ children }) => {
   const styles = useStyles2(getStyles);
@@ -11,7 +10,7 @@ const InputGroup = ({ children }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ jsx("div", { className: styles.root, children: modifiedChildren });
+  return /* @__PURE__ */ React.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 { 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,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,MAAO,QAAiB,EAAA,gBAAA,EAAA,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 React, { Children, cloneElement, isValidElement, type ReactElement } from 'react';\nimport { css, cx } from '@emotion/css';\nimport { useStyles2 } from '@grafana/ui';\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;;;;"}

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

@@ -1,5 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useAsync } from 'react-use';
 import '@grafana/data';
 import { applyQueryDefaults } from './defaults.js';
@@ -69,48 +68,43 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
   const catalogsEnabled = db.disableCatalogs === false;
   const datasetsEnabled = !db.disableDatasets;
   const effectiveEnableDatasets = catalogsEnabled ? true : datasetsEnabled;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      QueryHeader,
-      {
-        db,
-        defaultDataset: defaultDataset || "",
-        enableDatasets: effectiveEnableDatasets,
-        enableCatalogs: catalogsEnabled,
-        onChange: onQueryHeaderChange,
-        onRunQuery,
-        onQueryRowChange: setQueryRowFilter,
-        queryRowFilter,
-        query: queryWithDefaults,
-        isQueryRunnable,
-        labels: (_g = datasource.getDB(datasource.id)) == null ? undefined : _g.labels
-      }
-    ),
-    /* @__PURE__ */ jsx(Space, { v: 0.5 }),
-    queryWithDefaults.editorMode !== EditorMode.Code && /* @__PURE__ */ jsx(
-      VisualEditor,
-      {
-        db,
-        query: queryWithDefaults,
-        onChange: (q) => onQueryChange(q, false),
-        queryRowFilter,
-        onValidate: setIsQueryRunnable,
-        range
-      }
-    ),
-    queryWithDefaults.editorMode === EditorMode.Code && /* @__PURE__ */ jsx(
-      RawEditor,
-      {
-        db,
-        query: queryWithDefaults,
-        queryToValidate,
-        onChange: onQueryChange,
-        onRunQuery,
-        onValidate: setIsQueryRunnable,
-        range
-      }
-    )
-  ] });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    QueryHeader,
+    {
+      db,
+      defaultDataset: defaultDataset || "",
+      enableDatasets: effectiveEnableDatasets,
+      enableCatalogs: catalogsEnabled,
+      onChange: onQueryHeaderChange,
+      onRunQuery,
+      onQueryRowChange: setQueryRowFilter,
+      queryRowFilter,
+      query: queryWithDefaults,
+      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(
+    VisualEditor,
+    {
+      db,
+      query: queryWithDefaults,
+      onChange: (q) => onQueryChange(q, false),
+      queryRowFilter,
+      onValidate: setIsQueryRunnable,
+      range
+    }
+  ), queryWithDefaults.editorMode === EditorMode.Code && /* @__PURE__ */ React.createElement(
+    RawEditor,
+    {
+      db,
+      query: queryWithDefaults,
+      queryToValidate,
+      onChange: onQueryChange,
+      onRunQuery,
+      onValidate: setIsQueryRunnable,
+      range
+    }
+  ));
 }
 const isQueryValid = (q) => {
   return Boolean(q.rawSql);

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

@@ -1 +1 @@
-{"version":3,"file":"QueryEditor.js","sources":["../../../../src/components/QueryEditor/QueryEditor.tsx"],"sourcesContent":["import { 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  const catalogsEnabled = db.disableCatalogs === false;\n  const datasetsEnabled = !db.disableDatasets;\n\n  // When catalogs are enabled, datasets MUST be enabled (they act as schema selector)\n  const effectiveEnableDatasets = catalogsEnabled ? true : datasetsEnabled;\n\n  return (\n    <>\n      <QueryHeader\n        db={db}\n        defaultDataset={defaultDataset || ''}\n        enableDatasets={effectiveEnableDatasets}\n        enableCatalogs={catalogsEnabled}\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  const catalogsEnabled = db.disableCatalogs === false;\n  const datasetsEnabled = !db.disableDatasets;\n\n  // When catalogs are enabled, datasets MUST be enabled (they act as schema selector)\n  const effectiveEnableDatasets = catalogsEnabled ? true : datasetsEnabled;\n\n  return (\n    <>\n      <QueryHeader\n        db={db}\n        defaultDataset={defaultDataset || ''}\n        enableDatasets={effectiveEnableDatasets}\n        enableCatalogs={catalogsEnabled}\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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"}