@grafana/plugin-ui 0.15.0 → 0.16.0-dsconfig.a155abe

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

@@ -1 +1 @@
-{"version":3,"file":"DataSourcePicker.js","sources":["../../../../src/components/DataSourcePicker/DataSourcePicker.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { HorizontalGroup, Select } from '@grafana/ui';\nimport { type DataSourceInstanceSettings, type SelectableValue } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { isUnsignedPluginSignature, PluginSignatureBadge } from '../Plugins/PluginSignatureBadge';\nimport { getDataSourceSrv, type DataSourceSrv } from '@grafana/runtime';\n\nexport interface Props {\n  onChange: (ds: DataSourceInstanceSettings) => void;\n  current: string | null;\n  hideTextValue?: boolean;\n  onBlur?: () => void;\n  autoFocus?: boolean;\n  openMenuOnFocus?: boolean;\n  placeholder?: string;\n  tracing?: boolean;\n  mixed?: boolean;\n  dashboard?: boolean;\n  metrics?: boolean;\n  annotations?: boolean;\n  variables?: boolean;\n  pluginId?: string;\n  noDefault?: boolean;\n}\n\nexport interface State {\n  error?: string;\n}\n\nexport class DataSourcePicker extends PureComponent<Props, State> {\n  dataSourceSrv: DataSourceSrv = getDataSourceSrv();\n\n  static defaultProps: Partial<Props> = {\n    autoFocus: false,\n    openMenuOnFocus: false,\n    placeholder: 'Select datasource',\n  };\n\n  state: State = {};\n\n  constructor(props: Props) {\n    super(props);\n  }\n\n  componentDidMount() {\n    const { current } = this.props;\n    const dsSettings = this.dataSourceSrv.getInstanceSettings(current!);\n    if (!dsSettings) {\n      this.setState({ error: 'Could not find data source ' + current });\n    }\n  }\n\n  onChange = (item: SelectableValue<string>) => {\n    const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value!);\n\n    if (dsSettings) {\n      this.props.onChange(dsSettings);\n      this.setState({ error: undefined });\n    }\n  };\n\n  private getCurrentValue(): SelectableValue<string> {\n    const { current, hideTextValue, noDefault } = this.props;\n\n    if (!current && noDefault) {\n      return {\n        label: 'No datasources found',\n      };\n    }\n\n    const ds = this.dataSourceSrv.getInstanceSettings(current!);\n\n    if (ds) {\n      return {\n        label: ds.name.substr(0, 37),\n        value: ds.name,\n        imgUrl: ds.meta.info.logos.small,\n        hideText: hideTextValue,\n        meta: ds.meta,\n      };\n    }\n\n    return {\n      label: (current ?? 'no name') + ' - not found',\n      value: (current ?? 'no name') + ' - not found',\n      imgUrl: '',\n      hideText: hideTextValue,\n    };\n  }\n\n  getDataSourceOptions(): Array<SelectableValue<string>> {\n    const options: Array<SelectableValue<string>> = this.dataSourceSrv.getList().map((ds) => ({\n      value: ds.uid,\n      label: ds.name,\n      imgUrl: ds.meta.info.logos.small,\n      meta: ds.meta,\n    }));\n\n    return options;\n  }\n\n  render() {\n    const { autoFocus, onBlur, openMenuOnFocus, placeholder } = this.props;\n    const { error } = this.state;\n    const options = this.getDataSourceOptions();\n    const value = this.getCurrentValue();\n\n    return (\n      <div aria-label={selectors.components.DataSourcePicker.container}>\n        <Select\n          className=\"ds-picker select-container\"\n          isMulti={false}\n          isClearable={false}\n          backspaceRemovesValue={false}\n          onChange={this.onChange}\n          options={options}\n          autoFocus={autoFocus}\n          onBlur={onBlur}\n          openMenuOnFocus={openMenuOnFocus}\n          maxMenuHeight={500}\n          placeholder={placeholder}\n          noOptionsMessage=\"No datasources found\"\n          value={value}\n          invalid={!!error}\n          getOptionLabel={(o) => {\n            if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {\n              return (\n                <HorizontalGroup align=\"center\" justify=\"space-between\">\n                  <span>{o.label}</span> <PluginSignatureBadge status={o.meta.signature} />\n                </HorizontalGroup>\n              );\n            }\n            return o.label || '';\n          }}\n        />\n      </div>\n    );\n  }\n}\n"],"names":["PureComponent"],"mappings":"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"}
+{"version":3,"file":"DataSourcePicker.js","sources":["../../../../src/components/DataSourcePicker/DataSourcePicker.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { HorizontalGroup, Select } from '@grafana/ui';\nimport { type DataSourceInstanceSettings, type SelectableValue } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { isUnsignedPluginSignature, PluginSignatureBadge } from '../Plugins/PluginSignatureBadge';\nimport { getDataSourceSrv, type DataSourceSrv } from '@grafana/runtime';\n\nexport interface Props {\n  onChange: (ds: DataSourceInstanceSettings) => void;\n  current: string | null;\n  hideTextValue?: boolean;\n  onBlur?: () => void;\n  autoFocus?: boolean;\n  openMenuOnFocus?: boolean;\n  placeholder?: string;\n  tracing?: boolean;\n  mixed?: boolean;\n  dashboard?: boolean;\n  metrics?: boolean;\n  annotations?: boolean;\n  variables?: boolean;\n  pluginId?: string;\n  noDefault?: boolean;\n}\n\nexport interface State {\n  error?: string;\n}\n\nexport class DataSourcePicker extends PureComponent<Props, State> {\n  dataSourceSrv: DataSourceSrv = getDataSourceSrv();\n\n  static defaultProps: Partial<Props> = {\n    autoFocus: false,\n    openMenuOnFocus: false,\n    placeholder: 'Select datasource',\n  };\n\n  state: State = {};\n\n  constructor(props: Props) {\n    super(props);\n  }\n\n  componentDidMount() {\n    const { current } = this.props;\n    const dsSettings = this.dataSourceSrv.getInstanceSettings(current!);\n    if (!dsSettings) {\n      this.setState({ error: 'Could not find data source ' + current });\n    }\n  }\n\n  onChange = (item: SelectableValue<string>) => {\n    const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value!);\n\n    if (dsSettings) {\n      this.props.onChange(dsSettings);\n      this.setState({ error: undefined });\n    }\n  };\n\n  private getCurrentValue(): SelectableValue<string> {\n    const { current, hideTextValue, noDefault } = this.props;\n\n    if (!current && noDefault) {\n      return {\n        label: 'No datasources found',\n      };\n    }\n\n    const ds = this.dataSourceSrv.getInstanceSettings(current!);\n\n    if (ds) {\n      return {\n        label: ds.name.substr(0, 37),\n        value: ds.name,\n        imgUrl: ds.meta.info.logos.small,\n        hideText: hideTextValue,\n        meta: ds.meta,\n      };\n    }\n\n    return {\n      label: (current ?? 'no name') + ' - not found',\n      value: (current ?? 'no name') + ' - not found',\n      imgUrl: '',\n      hideText: hideTextValue,\n    };\n  }\n\n  getDataSourceOptions(): Array<SelectableValue<string>> {\n    const options: Array<SelectableValue<string>> = this.dataSourceSrv.getList().map((ds) => ({\n      value: ds.uid,\n      label: ds.name,\n      imgUrl: ds.meta.info.logos.small,\n      meta: ds.meta,\n    }));\n\n    return options;\n  }\n\n  render() {\n    const { autoFocus, onBlur, openMenuOnFocus, placeholder } = this.props;\n    const { error } = this.state;\n    const options = this.getDataSourceOptions();\n    const value = this.getCurrentValue();\n\n    return (\n      <div aria-label={selectors.components.DataSourcePicker.container}>\n        <Select\n          className=\"ds-picker select-container\"\n          isMulti={false}\n          isClearable={false}\n          backspaceRemovesValue={false}\n          onChange={this.onChange}\n          options={options}\n          autoFocus={autoFocus}\n          onBlur={onBlur}\n          openMenuOnFocus={openMenuOnFocus}\n          maxMenuHeight={500}\n          placeholder={placeholder}\n          noOptionsMessage=\"No datasources found\"\n          value={value}\n          invalid={!!error}\n          getOptionLabel={(o) => {\n            if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {\n              return (\n                <HorizontalGroup align=\"center\" justify=\"space-between\">\n                  <span>{o.label}</span> <PluginSignatureBadge status={o.meta.signature} />\n                </HorizontalGroup>\n              );\n            }\n            return o.label || '';\n          }}\n        />\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/DatePicker/DatePicker.js

@@ -1,9 +1,9 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { memo } from 'react';
 import Calendar from 'react-calendar';
 import { useTheme2, ClickOutsideWrapper, Icon } from '@grafana/ui';
 import { getStyles, getBodyStyles } from './styles.js';
 
-const DatePicker = reactExports.memo((props) => {
+const DatePicker = memo((props) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
   const { isOpen, onClose } = props;
@@ -13,7 +13,7 @@ const DatePicker = reactExports.memo((props) => {
   return /* @__PURE__ */ React.createElement(ClickOutsideWrapper, { useCapture: true, includeButtonPress: false, onClick: onClose }, /* @__PURE__ */ React.createElement("div", { className: styles.modal, "data-testid": "date-picker" }, /* @__PURE__ */ React.createElement(Body, { ...props })));
 });
 DatePicker.displayName = "DatePicker";
-const Body = reactExports.memo(({ value, onChange }) => {
+const Body = memo(({ value, onChange }) => {
   const theme = useTheme2();
   const styles = getBodyStyles(theme);
   return /* @__PURE__ */ React.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport Calendar from 'react-calendar';\nimport { useTheme2, ClickOutsideWrapper, Icon } from '@grafana/ui';\nimport { getStyles, getBodyStyles } from './styles';\n\nexport interface DatePickerProps {\n  isOpen?: boolean;\n  onClose: () => void;\n  onChange: (value: Date) => void;\n  value?: Date;\n}\n\nexport const DatePicker = memo<DatePickerProps>((props) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme);\n  const { isOpen, onClose } = props;\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <ClickOutsideWrapper useCapture={true} includeButtonPress={false} onClick={onClose}>\n      <div className={styles.modal} data-testid=\"date-picker\">\n        <Body {...props} />\n      </div>\n    </ClickOutsideWrapper>\n  );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nconst Body = memo<DatePickerProps>(({ value, onChange }) => {\n  const theme = useTheme2();\n  const styles = getBodyStyles(theme);\n\n  return (\n    <Calendar\n      className={styles.body}\n      tileClassName={styles.title}\n      value={value || new Date()}\n      nextLabel={<Icon name=\"angle-right\" />}\n      prevLabel={<Icon name=\"angle-left\" />}\n      onChange={(ev: any) => {\n        if (!Array.isArray(ev)) {\n          onChange(ev);\n        }\n      }}\n      locale=\"en\"\n    />\n  );\n});\n\nBody.displayName = 'Body';\n"],"names":["memo"],"mappings":";;;;;AAYa,MAAA,UAAA,GAAaA,iBAAsB,CAAA,CAAC,KAAU,KAAA;AACzD,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAC9B,EAAM,MAAA,EAAE,MAAQ,EAAA,OAAA,EAAY,GAAA,KAAA;AAE5B,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,uBAAoB,UAAY,EAAA,IAAA,EAAM,oBAAoB,KAAO,EAAA,OAAA,EAAS,2BACxE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,KAAA,EAAO,eAAY,aACxC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAM,GAAG,KAAA,EAAO,CACnB,CACF,CAAA;AAEJ,CAAC;AAED,UAAA,CAAW,WAAc,GAAA,YAAA;AAEzB,MAAM,OAAOA,iBAAsB,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AAC1D,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,cAAc,KAAK,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,eAAe,MAAO,CAAA,KAAA;AAAA,MACtB,KAAA,EAAO,KAAS,oBAAA,IAAI,IAAK,EAAA;AAAA,MACzB,SAAW,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,aAAc,EAAA,CAAA;AAAA,MACpC,SAAW,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,YAAa,EAAA,CAAA;AAAA,MACnC,QAAA,EAAU,CAAC,EAAY,KAAA;AACrB,QAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,EAAE,CAAG,EAAA;AACtB,UAAA,QAAA,CAAS,EAAE,CAAA;AAAA;AACb,OACF;AAAA,MACA,MAAO,EAAA;AAAA;AAAA,GACT;AAEJ,CAAC,CAAA;AAED,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport Calendar from 'react-calendar';\nimport { useTheme2, ClickOutsideWrapper, Icon } from '@grafana/ui';\nimport { getStyles, getBodyStyles } from './styles';\n\nexport interface DatePickerProps {\n  isOpen?: boolean;\n  onClose: () => void;\n  onChange: (value: Date) => void;\n  value?: Date;\n}\n\nexport const DatePicker = memo<DatePickerProps>((props) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme);\n  const { isOpen, onClose } = props;\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <ClickOutsideWrapper useCapture={true} includeButtonPress={false} onClick={onClose}>\n      <div className={styles.modal} data-testid=\"date-picker\">\n        <Body {...props} />\n      </div>\n    </ClickOutsideWrapper>\n  );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nconst Body = memo<DatePickerProps>(({ value, onChange }) => {\n  const theme = useTheme2();\n  const styles = getBodyStyles(theme);\n\n  return (\n    <Calendar\n      className={styles.body}\n      tileClassName={styles.title}\n      value={value || new Date()}\n      nextLabel={<Icon name=\"angle-right\" />}\n      prevLabel={<Icon name=\"angle-left\" />}\n      onChange={(ev: any) => {\n        if (!Array.isArray(ev)) {\n          onChange(ev);\n        }\n      }}\n      locale=\"en\"\n    />\n  );\n});\n\nBody.displayName = 'Body';\n"],"names":[],"mappings":";;;;;AAYa,MAAA,UAAA,GAAa,IAAsB,CAAA,CAAC,KAAU,KAAA;AACzD,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAC9B,EAAM,MAAA,EAAE,MAAQ,EAAA,OAAA,EAAY,GAAA,KAAA;AAE5B,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,uBAAoB,UAAY,EAAA,IAAA,EAAM,oBAAoB,KAAO,EAAA,OAAA,EAAS,2BACxE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,KAAA,EAAO,eAAY,aACxC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAM,GAAG,KAAA,EAAO,CACnB,CACF,CAAA;AAEJ,CAAC;AAED,UAAA,CAAW,WAAc,GAAA,YAAA;AAEzB,MAAM,OAAO,IAAsB,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AAC1D,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,cAAc,KAAK,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,eAAe,MAAO,CAAA,KAAA;AAAA,MACtB,KAAA,EAAO,KAAS,oBAAA,IAAI,IAAK,EAAA;AAAA,MACzB,SAAW,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,aAAc,EAAA,CAAA;AAAA,MACpC,SAAW,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,YAAa,EAAA,CAAA;AAAA,MACnC,QAAA,EAAU,CAAC,EAAY,KAAA;AACrB,QAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,EAAE,CAAG,EAAA;AACtB,UAAA,QAAA,CAAS,EAAE,CAAA;AAAA;AACb,OACF;AAAA,MACA,MAAO,EAAA;AAAA;AAAA,GACT;AAEJ,CAAC,CAAA;AAED,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}

package/dist/esm/components/DatePickerWithInput/DatePickerWithInput.js

@@ -1,4 +1,4 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { useState } from 'react';
 import { Input } from '@grafana/ui';
 import { DatePicker } from '../DatePicker/DatePicker.js';
 import { getStyles } from './styles.js';
@@ -7,7 +7,7 @@ import { cx } from '@emotion/css';
 const formatDate = (date) => date.toISOString().split("T")[0];
 const DatePickerWithInput = (props) => {
   const { value, onChange, className, ...rest } = props;
-  const [open, setOpen] = reactExports.useState(false);
+  const [open, setOpen] = useState(false);
   const styles = getStyles();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     Input,

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerWithInput.js","sources":["../../../../src/components/DatePickerWithInput/DatePickerWithInput.tsx"],"sourcesContent":["import React, { type ComponentProps, useState } from 'react';\nimport { Input } from '@grafana/ui';\nimport { DatePicker } from '../DatePicker/DatePicker';\nimport { getStyles } from './styles';\nimport { cx } from '@emotion/css';\n\nexport const formatDate = (date: Date) => date.toISOString().split('T')[0];\n\nexport interface DatePickerWithInputProps extends Omit<ComponentProps<typeof Input>, 'ref' | 'value' | 'onChange'> {\n  value?: Date;\n  onChange: (value: Date) => void;\n}\n\nexport const DatePickerWithInput = (props: DatePickerWithInputProps) => {\n  const { value, onChange, className, ...rest } = props;\n  const [open, setOpen] = useState(false);\n  const styles = getStyles();\n\n  return (\n    <>\n      <Input\n        type=\"date\"\n        placeholder=\"Date\"\n        value={formatDate(value || new Date())}\n        onClick={() => setOpen(true)}\n        onChange={() => {}}\n        className={cx(styles.input, className)}\n        {...rest}\n      />\n      <DatePicker isOpen={open} value={value} onChange={(ev: any) => onChange(ev)} onClose={() => setOpen(false)} />\n    </>\n  );\n};\n"],"names":["useState"],"mappings":";;;;;;AAMa,MAAA,UAAA,GAAa,CAAC,IAAe,KAAA,IAAA,CAAK,aAAc,CAAA,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC;AAO5D,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAA,MAAM,EAAE,KAAO,EAAA,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAChD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,sBAAS,KAAK,CAAA;AACtC,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,MAAA;AAAA,MACL,WAAY,EAAA,MAAA;AAAA,MACZ,KAAO,EAAA,UAAA,CAAW,KAAS,oBAAA,IAAI,MAAM,CAAA;AAAA,MACrC,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAC3B,UAAU,MAAM;AAAA,OAAC;AAAA,MACjB,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MACpC,GAAG;AAAA;AAAA,qBAEL,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,MAAQ,EAAA,IAAA,EAAM,OAAc,QAAU,EAAA,CAAC,EAAY,KAAA,QAAA,CAAS,EAAE,CAAG,EAAA,OAAA,EAAS,MAAM,OAAQ,CAAA,KAAK,GAAG,CAC9G,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DatePickerWithInput.js","sources":["../../../../src/components/DatePickerWithInput/DatePickerWithInput.tsx"],"sourcesContent":["import React, { type ComponentProps, useState } from 'react';\nimport { Input } from '@grafana/ui';\nimport { DatePicker } from '../DatePicker/DatePicker';\nimport { getStyles } from './styles';\nimport { cx } from '@emotion/css';\n\nexport const formatDate = (date: Date) => date.toISOString().split('T')[0];\n\nexport interface DatePickerWithInputProps extends Omit<ComponentProps<typeof Input>, 'ref' | 'value' | 'onChange'> {\n  value?: Date;\n  onChange: (value: Date) => void;\n}\n\nexport const DatePickerWithInput = (props: DatePickerWithInputProps) => {\n  const { value, onChange, className, ...rest } = props;\n  const [open, setOpen] = useState(false);\n  const styles = getStyles();\n\n  return (\n    <>\n      <Input\n        type=\"date\"\n        placeholder=\"Date\"\n        value={formatDate(value || new Date())}\n        onClick={() => setOpen(true)}\n        onChange={() => {}}\n        className={cx(styles.input, className)}\n        {...rest}\n      />\n      <DatePicker isOpen={open} value={value} onChange={(ev: any) => onChange(ev)} onClose={() => setOpen(false)} />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAMa,MAAA,UAAA,GAAa,CAAC,IAAe,KAAA,IAAA,CAAK,aAAc,CAAA,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC;AAO5D,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAA,MAAM,EAAE,KAAO,EAAA,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAChD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,MAAA;AAAA,MACL,WAAY,EAAA,MAAA;AAAA,MACZ,KAAO,EAAA,UAAA,CAAW,KAAS,oBAAA,IAAI,MAAM,CAAA;AAAA,MACrC,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAC3B,UAAU,MAAM;AAAA,OAAC;AAAA,MACjB,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MACpC,GAAG;AAAA;AAAA,qBAEL,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,MAAQ,EAAA,IAAA,EAAM,OAAc,QAAU,EAAA,CAAC,EAAY,KAAA,QAAA,CAAS,EAAE,CAAG,EAAA,OAAA,EAAS,MAAM,OAAQ,CAAA,KAAK,GAAG,CAC9G,CAAA;AAEJ;;;;"}

package/dist/esm/components/DebounceInput/DebounceInput.js

@@ -1,13 +1,13 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { useState, useEffect } from 'react';
 import { Input } from '@grafana/ui';
 import { useDebounce } from '../../hooks/useDebounce.js';
 
 const DebounceInput = (props) => {
   const { delay, onDebounce, value, ...rest } = props;
-  const [input, setInput] = reactExports.useState(value);
+  const [input, setInput] = useState(value);
   const debouncedInput = useDebounce(input, delay);
-  reactExports.useEffect(() => onDebounce(debouncedInput), [debouncedInput]);
-  reactExports.useEffect(() => setInput(value), [value]);
+  useEffect(() => onDebounce(debouncedInput), [debouncedInput]);
+  useEffect(() => setInput(value), [value]);
   return /* @__PURE__ */ React.createElement(Input, { onChange: (ev) => setInput(ev.currentTarget.value), value: input, ...rest });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"DebounceInput.js","sources":["../../../../src/components/DebounceInput/DebounceInput.tsx"],"sourcesContent":["import React, { type ComponentProps, useState, useEffect } from 'react';\nimport { Input } from '@grafana/ui';\nimport { useDebounce } from '../../hooks/useDebounce';\n\nexport interface DebounceInputProps extends Omit<ComponentProps<typeof Input>, 'ref'> {\n  value: string;\n  onDebounce: (debouncedInput?: string) => void;\n  delay?: number;\n}\n\nexport const DebounceInput = (props: DebounceInputProps) => {\n  const { delay, onDebounce, value, ...rest } = props;\n  const [input, setInput] = useState(value);\n\n  const debouncedInput = useDebounce(input, delay);\n\n  // TODO: We should fix this\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => onDebounce(debouncedInput), [debouncedInput]);\n  useEffect(() => setInput(value), [value]);\n\n  return <Input onChange={(ev) => setInput(ev.currentTarget.value)} value={input} {...rest} />;\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAUa,MAAA,aAAA,GAAgB,CAAC,KAA8B,KAAA;AAC1D,EAAA,MAAM,EAAE,KAAO,EAAA,UAAA,EAAY,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAC9C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,sBAAS,KAAK,CAAA;AAExC,EAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,KAAA,EAAO,KAAK,CAAA;AAI/C,EAAAC,sBAAA,CAAU,MAAM,UAAW,CAAA,cAAc,CAAG,EAAA,CAAC,cAAc,CAAC,CAAA;AAC5D,EAAAA,sBAAA,CAAU,MAAM,QAAS,CAAA,KAAK,CAAG,EAAA,CAAC,KAAK,CAAC,CAAA;AAExC,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,QAAU,EAAA,CAAC,EAAO,KAAA,QAAA,CAAS,EAAG,CAAA,aAAA,CAAc,KAAK,CAAA,EAAG,KAAO,EAAA,KAAA,EAAQ,GAAG,IAAM,EAAA,CAAA;AAC5F;;;;"}
+{"version":3,"file":"DebounceInput.js","sources":["../../../../src/components/DebounceInput/DebounceInput.tsx"],"sourcesContent":["import React, { type ComponentProps, useState, useEffect } from 'react';\nimport { Input } from '@grafana/ui';\nimport { useDebounce } from '../../hooks/useDebounce';\n\nexport interface DebounceInputProps extends Omit<ComponentProps<typeof Input>, 'ref'> {\n  value: string;\n  onDebounce: (debouncedInput?: string) => void;\n  delay?: number;\n}\n\nexport const DebounceInput = (props: DebounceInputProps) => {\n  const { delay, onDebounce, value, ...rest } = props;\n  const [input, setInput] = useState(value);\n\n  const debouncedInput = useDebounce(input, delay);\n\n  // TODO: We should fix this\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => onDebounce(debouncedInput), [debouncedInput]);\n  useEffect(() => setInput(value), [value]);\n\n  return <Input onChange={(ev) => setInput(ev.currentTarget.value)} value={input} {...rest} />;\n};\n"],"names":[],"mappings":";;;;AAUa,MAAA,aAAA,GAAgB,CAAC,KAA8B,KAAA;AAC1D,EAAA,MAAM,EAAE,KAAO,EAAA,UAAA,EAAY,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAC9C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,KAAK,CAAA;AAExC,EAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,KAAA,EAAO,KAAK,CAAA;AAI/C,EAAA,SAAA,CAAU,MAAM,UAAW,CAAA,cAAc,CAAG,EAAA,CAAC,cAAc,CAAC,CAAA;AAC5D,EAAA,SAAA,CAAU,MAAM,QAAS,CAAA,KAAK,CAAG,EAAA,CAAC,KAAK,CAAC,CAAA;AAExC,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,QAAU,EAAA,CAAC,EAAO,KAAA,QAAA,CAAS,EAAG,CAAA,aAAA,CAAc,KAAK,CAAA,EAAG,KAAO,EAAA,KAAA,EAAQ,GAAG,IAAM,EAAA,CAAA;AAC5F;;;;"}

package/dist/esm/components/Plugins/PluginSignatureBadge.js

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

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

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

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

@@ -1,12 +1,12 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Select } from '@grafana/ui';
 import '@grafana/data';
 import './types.js';
 
 const CatalogSelector = ({ db, inputId, value, onChange }) => {
-  const [catalogs, setCatalogs] = reactExports.useState([]);
-  const [isLoading, setIsLoading] = reactExports.useState(false);
-  const loadCatalogs = reactExports.useCallback(async () => {
+  const [catalogs, setCatalogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const loadCatalogs = useCallback(async () => {
     if (!db.catalogs) {
       return;
     }
@@ -25,7 +25,7 @@ const CatalogSelector = ({ db, inputId, value, onChange }) => {
       setIsLoading(false);
     }
   }, [db]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     loadCatalogs();
   }, [db, loadCatalogs]);
   const handleChange = (selectable) => {

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

@@ -1 +1 @@
-{"version":3,"file":"CatalogSelector.js","sources":["../../../../src/components/QueryEditor/CatalogSelector.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Select } from '@grafana/ui';\nimport { type SelectableValue } from '@grafana/data';\nimport { type DB } from './types';\n\nexport interface CatalogSelectorProps {\n  db: DB;\n  inputId?: string;\n  value: string | null;\n  onChange: (catalog: string | null) => void;\n}\n\nexport const CatalogSelector = ({ db, inputId, value, onChange }: CatalogSelectorProps) => {\n  const [catalogs, setCatalogs] = useState<Array<SelectableValue<string>>>([]);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const loadCatalogs = useCallback(async () => {\n    if (!db.catalogs) {\n      return;\n    }\n\n    setIsLoading(true);\n    try {\n      const catalogList = await db.catalogs();\n      const catalogOptions = catalogList.map((catalog) => ({\n        label: catalog,\n        value: catalog,\n      }));\n      setCatalogs(catalogOptions);\n    } catch (error) {\n      console.error('Error loading catalogs:', error);\n      setCatalogs([]);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [db]);\n\n  useEffect(() => {\n    loadCatalogs();\n  }, [db, loadCatalogs]);\n\n  const handleChange = (selectable: SelectableValue<string>) => {\n    onChange(selectable?.value || null);\n  };\n\n  const selectedValue = catalogs.find((catalog) => catalog.value === value) || null;\n\n  return (\n    <Select\n      inputId={inputId}\n      options={catalogs}\n      value={selectedValue}\n      onChange={handleChange}\n      isLoading={isLoading}\n      placeholder=\"Select catalog\"\n      isClearable\n      allowCustomValue\n      menuShouldPortal={true}\n    />\n  );\n};\n"],"names":["useState","useCallback","useEffect"],"mappings":";;;;;AAYO,MAAM,kBAAkB,CAAC,EAAE,IAAI,OAAS,EAAA,KAAA,EAAO,UAAqC,KAAA;AACzF,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAA,qBAAA,CAAyC,EAAE,CAAA;AAC3E,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,sBAAS,KAAK,CAAA;AAEhD,EAAM,MAAA,YAAA,GAAeC,yBAAY,YAAY;AAC3C,IAAI,IAAA,CAAC,GAAG,QAAU,EAAA;AAChB,MAAA;AAAA;AAGF,IAAA,YAAA,CAAa,IAAI,CAAA;AACjB,IAAI,IAAA;AACF,MAAM,MAAA,WAAA,GAAc,MAAM,EAAA,CAAG,QAAS,EAAA;AACtC,MAAA,MAAM,cAAiB,GAAA,WAAA,CAAY,GAAI,CAAA,CAAC,OAAa,MAAA;AAAA,QACnD,KAAO,EAAA,OAAA;AAAA,QACP,KAAO,EAAA;AAAA,OACP,CAAA,CAAA;AACF,MAAA,WAAA,CAAY,cAAc,CAAA;AAAA,aACnB,KAAO,EAAA;AACd,MAAQ,OAAA,CAAA,KAAA,CAAM,2BAA2B,KAAK,CAAA;AAC9C,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA,KACd,SAAA;AACA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA;AACpB,GACF,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAAC,sBAAA,CAAU,MAAM;AACd,IAAa,YAAA,EAAA;AAAA,GACZ,EAAA,CAAC,EAAI,EAAA,YAAY,CAAC,CAAA;AAErB,EAAM,MAAA,YAAA,GAAe,CAAC,UAAwC,KAAA;AAC5D,IAAS,QAAA,CAAA,CAAA,UAAA,IAAA,IAAA,GAAA,SAAA,GAAA,UAAA,CAAY,UAAS,IAAI,CAAA;AAAA,GACpC;AAEA,EAAM,MAAA,aAAA,GAAgB,SAAS,IAAK,CAAA,CAAC,YAAY,OAAQ,CAAA,KAAA,KAAU,KAAK,CAAK,IAAA,IAAA;AAE7E,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,OAAS,EAAA,QAAA;AAAA,MACT,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,YAAA;AAAA,MACV,SAAA;AAAA,MACA,WAAY,EAAA,gBAAA;AAAA,MACZ,WAAW,EAAA,IAAA;AAAA,MACX,gBAAgB,EAAA,IAAA;AAAA,MAChB,gBAAkB,EAAA;AAAA;AAAA,GACpB;AAEJ;;;;"}
+{"version":3,"file":"CatalogSelector.js","sources":["../../../../src/components/QueryEditor/CatalogSelector.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Select } from '@grafana/ui';\nimport { type SelectableValue } from '@grafana/data';\nimport { type DB } from './types';\n\nexport interface CatalogSelectorProps {\n  db: DB;\n  inputId?: string;\n  value: string | null;\n  onChange: (catalog: string | null) => void;\n}\n\nexport const CatalogSelector = ({ db, inputId, value, onChange }: CatalogSelectorProps) => {\n  const [catalogs, setCatalogs] = useState<Array<SelectableValue<string>>>([]);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const loadCatalogs = useCallback(async () => {\n    if (!db.catalogs) {\n      return;\n    }\n\n    setIsLoading(true);\n    try {\n      const catalogList = await db.catalogs();\n      const catalogOptions = catalogList.map((catalog) => ({\n        label: catalog,\n        value: catalog,\n      }));\n      setCatalogs(catalogOptions);\n    } catch (error) {\n      console.error('Error loading catalogs:', error);\n      setCatalogs([]);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [db]);\n\n  useEffect(() => {\n    loadCatalogs();\n  }, [db, loadCatalogs]);\n\n  const handleChange = (selectable: SelectableValue<string>) => {\n    onChange(selectable?.value || null);\n  };\n\n  const selectedValue = catalogs.find((catalog) => catalog.value === value) || null;\n\n  return (\n    <Select\n      inputId={inputId}\n      options={catalogs}\n      value={selectedValue}\n      onChange={handleChange}\n      isLoading={isLoading}\n      placeholder=\"Select catalog\"\n      isClearable\n      allowCustomValue\n      menuShouldPortal={true}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAYO,MAAM,kBAAkB,CAAC,EAAE,IAAI,OAAS,EAAA,KAAA,EAAO,UAAqC,KAAA;AACzF,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAyC,EAAE,CAAA;AAC3E,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAM,MAAA,YAAA,GAAe,YAAY,YAAY;AAC3C,IAAI,IAAA,CAAC,GAAG,QAAU,EAAA;AAChB,MAAA;AAAA;AAGF,IAAA,YAAA,CAAa,IAAI,CAAA;AACjB,IAAI,IAAA;AACF,MAAM,MAAA,WAAA,GAAc,MAAM,EAAA,CAAG,QAAS,EAAA;AACtC,MAAA,MAAM,cAAiB,GAAA,WAAA,CAAY,GAAI,CAAA,CAAC,OAAa,MAAA;AAAA,QACnD,KAAO,EAAA,OAAA;AAAA,QACP,KAAO,EAAA;AAAA,OACP,CAAA,CAAA;AACF,MAAA,WAAA,CAAY,cAAc,CAAA;AAAA,aACnB,KAAO,EAAA;AACd,MAAQ,OAAA,CAAA,KAAA,CAAM,2BAA2B,KAAK,CAAA;AAC9C,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA,KACd,SAAA;AACA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA;AACpB,GACF,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,SAAA,CAAU,MAAM;AACd,IAAa,YAAA,EAAA;AAAA,GACZ,EAAA,CAAC,EAAI,EAAA,YAAY,CAAC,CAAA;AAErB,EAAM,MAAA,YAAA,GAAe,CAAC,UAAwC,KAAA;AAC5D,IAAS,QAAA,CAAA,CAAA,UAAA,IAAA,IAAA,GAAA,SAAA,GAAA,UAAA,CAAY,UAAS,IAAI,CAAA;AAAA,GACpC;AAEA,EAAM,MAAA,aAAA,GAAgB,SAAS,IAAK,CAAA,CAAC,YAAY,OAAQ,CAAA,KAAA,KAAU,KAAK,CAAK,IAAA,IAAA;AAE7E,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,OAAS,EAAA,QAAA;AAAA,MACT,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,YAAA;AAAA,MACV,SAAA;AAAA,MACA,WAAY,EAAA,gBAAA;AAAA,MACZ,WAAW,EAAA,IAAA;AAAA,MACX,gBAAgB,EAAA,IAAA;AAAA,MAChB,gBAAkB,EAAA;AAAA;AAAA,GACpB;AAEJ;;;;"}

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

@@ -1,9 +1,9 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { useRef, useEffect } from 'react';
 import { Modal, Icon, Button } from '@grafana/ui';
 
 function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }) {
-  const buttonRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
+  const buttonRef = useRef(null);
+  useEffect(() => {
     var _a;
     if (isOpen) {
       (_a = buttonRef.current) == null ? undefined : _a.focus();

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmModal.js","sources":["../../../../src/components/QueryEditor/ConfirmModal.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport { Button, Icon, Modal } from '@grafana/ui';\n\ntype ConfirmModalProps = {\n  isOpen: boolean;\n  onCancel?: () => void;\n  onDiscard?: () => void;\n  onCopy?: () => void;\n};\nexport function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmModalProps) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Moved from grafana/ui\n  useEffect(() => {\n    // for some reason autoFocus property did no work on this button, but this does\n    if (isOpen) {\n      buttonRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  return (\n    <Modal\n      title={\n        <div className=\"modal-header-title\">\n          <Icon name=\"exclamation-triangle\" size=\"lg\" />\n          <span className=\"p-l-1\">Warning</span>\n        </div>\n      }\n      onDismiss={onCancel}\n      isOpen={isOpen}\n    >\n      <p>\n        Builder mode does not display changes made in code. The query builder will display the last changes you made in\n        builder mode.\n      </p>\n      <p>Do you want to copy your code to the clipboard?</p>\n      <Modal.ButtonRow>\n        <Button type=\"button\" variant=\"secondary\" onClick={onCancel} fill=\"outline\">\n          Cancel\n        </Button>\n        <Button variant=\"destructive\" type=\"button\" onClick={onDiscard} ref={buttonRef}>\n          Discard code and switch\n        </Button>\n        <Button variant=\"primary\" onClick={onCopy}>\n          Copy code and switch\n        </Button>\n      </Modal.ButtonRow>\n    </Modal>\n  );\n}\n"],"names":["useRef","useEffect"],"mappings":";;;AAUO,SAAS,aAAa,EAAE,MAAA,EAAQ,QAAU,EAAA,SAAA,EAAW,QAA6B,EAAA;AACvF,EAAM,MAAA,SAAA,GAAYA,oBAA0B,IAAI,CAAA;AAGhD,EAAAC,sBAAA,CAAU,MAAM;AAdlB,IAAA,IAAA,EAAA;AAgBI,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,SAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AACrB,GACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,oBAAA,EAAA,sCACZ,IAAK,EAAA,EAAA,IAAA,EAAK,sBAAuB,EAAA,IAAA,EAAK,MAAK,CAC5C,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAK,SAAU,EAAA,OAAA,EAAA,EAAQ,SAAO,CACjC,CAAA;AAAA,MAEF,SAAW,EAAA,QAAA;AAAA,MACX;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,WAAE,+HAGH,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,WAAE,iDAA+C,CAAA;AAAA,oBACjD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,SAAN,EAAA,IAAA,sCACE,MAAO,EAAA,EAAA,IAAA,EAAK,QAAS,EAAA,OAAA,EAAQ,aAAY,OAAS,EAAA,QAAA,EAAU,IAAK,EAAA,SAAA,EAAA,EAAU,QAE5E,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAQ,eAAc,IAAK,EAAA,QAAA,EAAS,OAAS,EAAA,SAAA,EAAW,KAAK,SAAW,EAAA,EAAA,yBAEhF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,OAAQ,EAAA,SAAA,EAAU,OAAS,EAAA,MAAA,EAAA,EAAQ,sBAE3C,CACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ConfirmModal.js","sources":["../../../../src/components/QueryEditor/ConfirmModal.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport { Button, Icon, Modal } from '@grafana/ui';\n\ntype ConfirmModalProps = {\n  isOpen: boolean;\n  onCancel?: () => void;\n  onDiscard?: () => void;\n  onCopy?: () => void;\n};\nexport function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmModalProps) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Moved from grafana/ui\n  useEffect(() => {\n    // for some reason autoFocus property did no work on this button, but this does\n    if (isOpen) {\n      buttonRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  return (\n    <Modal\n      title={\n        <div className=\"modal-header-title\">\n          <Icon name=\"exclamation-triangle\" size=\"lg\" />\n          <span className=\"p-l-1\">Warning</span>\n        </div>\n      }\n      onDismiss={onCancel}\n      isOpen={isOpen}\n    >\n      <p>\n        Builder mode does not display changes made in code. The query builder will display the last changes you made in\n        builder mode.\n      </p>\n      <p>Do you want to copy your code to the clipboard?</p>\n      <Modal.ButtonRow>\n        <Button type=\"button\" variant=\"secondary\" onClick={onCancel} fill=\"outline\">\n          Cancel\n        </Button>\n        <Button variant=\"destructive\" type=\"button\" onClick={onDiscard} ref={buttonRef}>\n          Discard code and switch\n        </Button>\n        <Button variant=\"primary\" onClick={onCopy}>\n          Copy code and switch\n        </Button>\n      </Modal.ButtonRow>\n    </Modal>\n  );\n}\n"],"names":[],"mappings":";;;AAUO,SAAS,aAAa,EAAE,MAAA,EAAQ,QAAU,EAAA,SAAA,EAAW,QAA6B,EAAA;AACvF,EAAM,MAAA,SAAA,GAAY,OAA0B,IAAI,CAAA;AAGhD,EAAA,SAAA,CAAU,MAAM;AAdlB,IAAA,IAAA,EAAA;AAgBI,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,SAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AACrB,GACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,oBAAA,EAAA,sCACZ,IAAK,EAAA,EAAA,IAAA,EAAK,sBAAuB,EAAA,IAAA,EAAK,MAAK,CAC5C,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAK,SAAU,EAAA,OAAA,EAAA,EAAQ,SAAO,CACjC,CAAA;AAAA,MAEF,SAAW,EAAA,QAAA;AAAA,MACX;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,WAAE,+HAGH,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,WAAE,iDAA+C,CAAA;AAAA,oBACjD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,SAAN,EAAA,IAAA,sCACE,MAAO,EAAA,EAAA,IAAA,EAAK,QAAS,EAAA,OAAA,EAAQ,aAAY,OAAS,EAAA,QAAA,EAAU,IAAK,EAAA,SAAA,EAAA,EAAU,QAE5E,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAQ,eAAc,IAAK,EAAA,QAAA,EAAS,OAAS,EAAA,SAAA,EAAW,KAAK,SAAW,EAAA,EAAA,yBAEhF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,OAAQ,EAAA,SAAA,EAAU,OAAS,EAAA,MAAA,EAAA,EAAQ,sBAE3C,CACF;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { useEffect } from 'react';
 import { useAsync } from 'react-use';
 import '@grafana/data';
 import { Select } from '@grafana/ui';
@@ -25,7 +25,7 @@ const DatasetSelector = ({
     const datasets = await db.datasets(catalog);
     return datasets.map(toOption);
   }, [catalog]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (!applyDefault) {
       return;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"DatasetSelector.js","sources":["../../../../src/components/QueryEditor/DatasetSelector.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\nimport { Select } from '@grafana/ui';\n\nimport { type DB, type ResourceSelectorProps, toOption } from './types';\n\ninterface DatasetSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset?: string;\n  catalog?: string; // When provided, fetch schemas instead of datasets\n  value: string | null;\n  applyDefault?: boolean;\n  disabled?: boolean;\n  onChange: (v: SelectableValue) => void;\n  inputId?: string;\n  enableCatalogs?: boolean;\n  'data-testid'?: string;\n}\n\nexport const DatasetSelector = ({\n  db,\n  dataset,\n  catalog,\n  value,\n  onChange,\n  disabled,\n  className,\n  applyDefault,\n  inputId,\n  enableCatalogs,\n  'data-testid': dataTestId,\n}: DatasetSelectorProps) => {\n  const state = useAsync(async () => {\n    // If a default dataset is provided, use it\n    if (dataset) {\n      onChange(toOption(dataset));\n      return [toOption(dataset)];\n    }\n\n    // Fetch datasets - when catalog is provided, db.datasets(catalog) returns schemas for that catalog\n    const datasets = await db.datasets(catalog);\n    return datasets.map(toOption);\n  }, [catalog]);\n\n  useEffect(() => {\n    if (!applyDefault) {\n      return;\n    }\n    // Set default dataset when values are fetched\n    if (!value) {\n      if (state.value && state.value[0]) {\n        onChange(state.value[0]);\n      }\n    } else {\n      if (state.value && state.value.find((v) => v.value === value) === undefined) {\n        // if value is set and newly fetched values does not contain selected value\n        if (state.value.length > 0) {\n          onChange(state.value[0]);\n        }\n      }\n    }\n  }, [state.value, value, applyDefault, onChange]);\n\n  return (\n    <Select\n      inputId={inputId}\n      className={className}\n      aria-label=\"Dataset selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      disabled={disabled}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      data-testid={dataTestId}\n      placeholder={enableCatalogs ? 'Select schema' : 'Select dataset'}\n    />\n  );\n};\n"],"names":["useEffect"],"mappings":";;;;;;AAqBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,EAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAe,EAAA;AACjB,CAA4B,KAAA;AAC1B,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AAEjC,IAAA,IAAI,OAAS,EAAA;AACX,MAAS,QAAA,CAAA,QAAA,CAAS,OAAO,CAAC,CAAA;AAC1B,MAAO,OAAA,CAAC,QAAS,CAAA,OAAO,CAAC,CAAA;AAAA;AAI3B,IAAA,MAAM,QAAW,GAAA,MAAM,EAAG,CAAA,QAAA,CAAS,OAAO,CAAA;AAC1C,IAAO,OAAA,QAAA,CAAS,IAAI,QAAQ,CAAA;AAAA,GAC9B,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAAA,sBAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,YAAc,EAAA;AACjB,MAAA;AAAA;AAGF,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAA,IAAI,KAAM,CAAA,KAAA,IAAS,KAAM,CAAA,KAAA,CAAM,CAAC,CAAG,EAAA;AACjC,QAAS,QAAA,CAAA,KAAA,CAAM,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA;AACzB,KACK,MAAA;AACL,MAAI,IAAA,KAAA,CAAM,KAAS,IAAA,KAAA,CAAM,KAAM,CAAA,IAAA,CAAK,CAAC,CAAA,KAAM,CAAE,CAAA,KAAA,KAAU,KAAK,CAAA,KAAM,SAAW,EAAA;AAE3E,QAAI,IAAA,KAAA,CAAM,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC1B,UAAS,QAAA,CAAA,KAAA,CAAM,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA;AACzB;AACF;AACF,KACC,CAAC,KAAA,CAAM,OAAO,KAAO,EAAA,YAAA,EAAc,QAAQ,CAAC,CAAA;AAE/C,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,kBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,aAAa,EAAA,UAAA;AAAA,MACb,WAAA,EAAa,iBAAiB,eAAkB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}
+{"version":3,"file":"DatasetSelector.js","sources":["../../../../src/components/QueryEditor/DatasetSelector.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\nimport { Select } from '@grafana/ui';\n\nimport { type DB, type ResourceSelectorProps, toOption } from './types';\n\ninterface DatasetSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset?: string;\n  catalog?: string; // When provided, fetch schemas instead of datasets\n  value: string | null;\n  applyDefault?: boolean;\n  disabled?: boolean;\n  onChange: (v: SelectableValue) => void;\n  inputId?: string;\n  enableCatalogs?: boolean;\n  'data-testid'?: string;\n}\n\nexport const DatasetSelector = ({\n  db,\n  dataset,\n  catalog,\n  value,\n  onChange,\n  disabled,\n  className,\n  applyDefault,\n  inputId,\n  enableCatalogs,\n  'data-testid': dataTestId,\n}: DatasetSelectorProps) => {\n  const state = useAsync(async () => {\n    // If a default dataset is provided, use it\n    if (dataset) {\n      onChange(toOption(dataset));\n      return [toOption(dataset)];\n    }\n\n    // Fetch datasets - when catalog is provided, db.datasets(catalog) returns schemas for that catalog\n    const datasets = await db.datasets(catalog);\n    return datasets.map(toOption);\n  }, [catalog]);\n\n  useEffect(() => {\n    if (!applyDefault) {\n      return;\n    }\n    // Set default dataset when values are fetched\n    if (!value) {\n      if (state.value && state.value[0]) {\n        onChange(state.value[0]);\n      }\n    } else {\n      if (state.value && state.value.find((v) => v.value === value) === undefined) {\n        // if value is set and newly fetched values does not contain selected value\n        if (state.value.length > 0) {\n          onChange(state.value[0]);\n        }\n      }\n    }\n  }, [state.value, value, applyDefault, onChange]);\n\n  return (\n    <Select\n      inputId={inputId}\n      className={className}\n      aria-label=\"Dataset selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      disabled={disabled}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      data-testid={dataTestId}\n      placeholder={enableCatalogs ? 'Select schema' : 'Select dataset'}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,EAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAe,EAAA;AACjB,CAA4B,KAAA;AAC1B,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AAEjC,IAAA,IAAI,OAAS,EAAA;AACX,MAAS,QAAA,CAAA,QAAA,CAAS,OAAO,CAAC,CAAA;AAC1B,MAAO,OAAA,CAAC,QAAS,CAAA,OAAO,CAAC,CAAA;AAAA;AAI3B,IAAA,MAAM,QAAW,GAAA,MAAM,EAAG,CAAA,QAAA,CAAS,OAAO,CAAA;AAC1C,IAAO,OAAA,QAAA,CAAS,IAAI,QAAQ,CAAA;AAAA,GAC9B,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,YAAc,EAAA;AACjB,MAAA;AAAA;AAGF,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAA,IAAI,KAAM,CAAA,KAAA,IAAS,KAAM,CAAA,KAAA,CAAM,CAAC,CAAG,EAAA;AACjC,QAAS,QAAA,CAAA,KAAA,CAAM,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA;AACzB,KACK,MAAA;AACL,MAAI,IAAA,KAAA,CAAM,KAAS,IAAA,KAAA,CAAM,KAAM,CAAA,IAAA,CAAK,CAAC,CAAA,KAAM,CAAE,CAAA,KAAA,KAAU,KAAK,CAAA,KAAM,SAAW,EAAA;AAE3E,QAAI,IAAA,KAAA,CAAM,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC1B,UAAS,QAAA,CAAA,KAAA,CAAM,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA;AACzB;AACF;AACF,KACC,CAAC,KAAA,CAAM,OAAO,KAAO,EAAA,YAAA,EAAc,QAAQ,CAAC,CAAA;AAE/C,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,kBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,aAAa,EAAA,UAAA;AAAA,MACb,WAAA,EAAa,iBAAiB,eAAkB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { forwardRef } from 'react';
 import { Button } from '@grafana/ui';
 import { EditorStack } from './EditorStack.js';
 
-const EditorList = reactExports.forwardRef(function EditorList2({ items, renderItem, onChange }, ref) {
+const EditorList = forwardRef(function EditorList2({ items, renderItem, onChange }, ref) {
   const onAddItem = () => {
     const newItems = [...items, {}];
     onChange(newItems);

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

@@ -1 +1 @@
-{"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":["forwardRef","EditorList"],"mappings":";;;;AAWa,MAAA,UAAA,GAAaA,wBAAW,SAASC,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;;;;"}
+{"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 React from '../../_virtual/index.js';
+import React from 'react';
 import { css } from '@emotion/css';
 import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,10 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { useState } from 'react';
 import { css, cx } from '@emotion/css';
 import '@grafana/data';
 import { useStyles2, Select, SelectContainer as SelectContainer$1 } from '@grafana/ui';
 
 function InlineSelect({ label: labelProp, ...props }) {
-  const [id] = reactExports.useState(() => Math.random().toString(16).slice(2));
+  const [id] = useState(() => Math.random().toString(16).slice(2));
   const styles = useStyles2(getSelectStyles);
   const components = {
     SelectContainer,

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

@@ -1 +1 @@
-{"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 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":["useState","BaseSelectContainer"],"mappings":";;;;;AAiBO,SAAS,aAAgB,EAAE,KAAA,EAAO,SAAW,EAAA,GAAG,OAA+B,EAAA;AACpF,EAAA,MAAM,CAAC,EAAE,CAAI,GAAAA,qBAAA,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,6BACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,KAAO,EAAA,OAAA,EAAS,MACtC,SACA,EAAA,GAAA,EAAI,MACP,CAAA,kBAED,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,SAAS,EAAK,EAAA,GAAG,KAAO,EAAA,UAAA,EAAwB,CAC1D,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,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,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 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 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,6BACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,KAAO,EAAA,OAAA,EAAS,MACtC,SACA,EAAA,GAAA,EAAI,MACP,CAAA,kBAED,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,SAAS,EAAK,EAAA,GAAG,KAAO,EAAA,UAAA,EAAwB,CAC1D,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,12 +1,12 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { Children, isValidElement, cloneElement } from 'react';
 import { cx, css } from '@emotion/css';
 import { useStyles2 } from '@grafana/ui';
 
 const InputGroup = ({ children }) => {
   const styles = useStyles2(getStyles);
-  const modifiedChildren = reactExports.Children.map(children, (child) => {
-    if (reactExports.isValidElement(child) && child.props.invalid) {
-      return reactExports.cloneElement(child, { className: cx(child.props.className, styles.invalidChild) });
+  const modifiedChildren = Children.map(children, (child) => {
+    if (isValidElement(child) && child.props.invalid) {
+      return cloneElement(child, { className: cx(child.props.className, styles.invalidChild) });
     }
     return child;
   });

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

@@ -1 +1 @@
-{"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":["Children","isValidElement","cloneElement"],"mappings":";;;;AAUO,MAAM,UAAa,GAAA,CAAC,EAAE,QAAA,EAAgC,KAAA;AAC3D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAInC,EAAA,MAAM,gBAAmB,GAAAA,qBAAA,CAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AACzD,IAAA,IAAIC,2BAAe,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,MAAM,OAAS,EAAA;AAChD,MAAO,OAAAC,yBAAA,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 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,4 +1,4 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useAsync } from 'react-use';
 import '@grafana/data';
 import { applyQueryDefaults } from './defaults.js';
@@ -12,7 +12,7 @@ import { Space } from './Space.js';
 
 function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range, language = "sql" }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [isQueryRunnable, setIsQueryRunnable] = reactExports.useState(true);
+  const [isQueryRunnable, setIsQueryRunnable] = useState(true);
   const db = datasource.getDB();
   const defaultDataset = datasource.dataset;
   const { loading, error } = useAsync(async () => {
@@ -23,21 +23,21 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range, langua
     };
   }, [datasource]);
   const queryWithDefaults = applyQueryDefaults(query);
-  const [queryRowFilter, setQueryRowFilter] = reactExports.useState({
+  const [queryRowFilter, setQueryRowFilter] = useState({
     filter: !!((_a = queryWithDefaults.sql) == null ? undefined : _a.whereString),
     group: !!((_d = (_c = (_b = queryWithDefaults.sql) == null ? undefined : _b.groupBy) == null ? undefined : _c[0]) == null ? undefined : _d.property.name),
     order: !!((_f = (_e = queryWithDefaults.sql) == null ? undefined : _e.orderBy) == null ? undefined : _f.property.name),
     preview: true
   });
-  const [queryToValidate, setQueryToValidate] = reactExports.useState(queryWithDefaults);
-  reactExports.useEffect(() => {
+  const [queryToValidate, setQueryToValidate] = useState(queryWithDefaults);
+  useEffect(() => {
     return () => {
       if (datasource.getDB(datasource.id).dispose !== undefined) {
         datasource.getDB(datasource.id).dispose();
       }
     };
   }, [datasource]);
-  const processQuery = reactExports.useCallback(
+  const processQuery = useCallback(
     (q) => {
       if (isQueryValid(q) && onRunQuery) {
         onRunQuery();

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';\nimport type { SqlLanguage } from 'sql-formatter';\n\ninterface Props extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {\n  language?: SqlLanguage;\n}\n\nexport function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range, language = 'sql' }: 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          language={language}\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          language={language}\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":["useState","useEffect","useCallback","_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';\nimport type { SqlLanguage } from 'sql-formatter';\n\ninterface Props extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {\n  language?: SqlLanguage;\n}\n\nexport function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range, language = 'sql' }: 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          language={language}\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          language={language}\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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"}

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

@@ -1,4 +1,4 @@
-import React, { r as reactExports } from '../../_virtual/index.js';
+import React, { useState, useId, useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import '@grafana/data';
 import { ConfirmModal } from './ConfirmModal.js';
@@ -35,12 +35,12 @@ function QueryHeader({
 }) {
   const { editorMode } = query;
   const [_, copyToClipboard] = useCopyToClipboard();
-  const [showConfirm, setShowConfirm] = reactExports.useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
   const toRawSql = getRawSqlFn(db);
-  const htmlId = reactExports.useId();
+  const htmlId = useId();
   const catalogsEnabled = enableCatalogs != null ? enableCatalogs : db.disableCatalogs === false;
   const effectiveEnableDatasets = catalogsEnabled ? true : enableDatasets;
-  const onEditorModeChange = reactExports.useCallback(
+  const onEditorModeChange = useCallback(
     (newEditorMode) => {
       if (editorMode === EditorMode.Code) {
         setShowConfirm(true);