@grafana/scenes 4.13.0 → 4.13.1--canary.711.8884688944.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/esm/variables/components/VariableValueSelect.js +13 -3
  2. package/dist/esm/variables/components/VariableValueSelect.js.map +1 -1
  3. package/dist/esm/variables/components/VariableValueSelectors.js +7 -20
  4. package/dist/esm/variables/components/VariableValueSelectors.js.map +1 -1
  5. package/dist/index.js +25 -29
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -2
package/dist/esm/variables/components/VariableValueSelect.js CHANGED
@@ -1,10 +1,12 @@
1
1
  import { isArray } from 'lodash';
2
2
  import React, { useMemo, useState, useEffect } from 'react';
3
- import { Select, MultiSelect } from '@grafana/ui';
3
+ import { useStyles2, Select, MultiSelect } from '@grafana/ui';
4
4
  import { selectors } from '@grafana/e2e-selectors';
5
+ import { css } from '@emotion/css';
5
6
 
6
7
  function VariableValueSelect({ model }) {
7
8
  const { value, key } = model.useState();
9
+ const styles = useStyles2(getStyles);
8
10
  const onInputChange = model.onSearchChange ? (value2, meta) => {
9
11
  if (meta.action === "input-change") {
10
12
  model.onSearchChange(value2);
@@ -23,7 +25,8 @@ function VariableValueSelect({ model }) {
23
25
  "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
24
26
  onChange: (newValue) => {
25
27
  model.changeValueTo(newValue.value, newValue.label);
26
- }
28
+ },
29
+ className: styles.overflow
27
30
  });
28
31
  }
29
32
  function VariableValueSelectMulti({ model }) {
@@ -40,6 +43,7 @@ function VariableValueSelectMulti({ model }) {
40
43
  }
41
44
  } : void 0;
42
45
  const placeholder = options.length > 0 ? "Select value" : "";
46
+ const styles = useStyles2(getStyles);
43
47
  return /* @__PURE__ */ React.createElement(MultiSelect, {
44
48
  id: key,
45
49
  placeholder,
@@ -63,7 +67,8 @@ function VariableValueSelectMulti({ model }) {
63
67
  model.changeValueTo([]);
64
68
  }
65
69
  setUncommittedValue(newValue.map((x) => x.value));
66
- }
70
+ },
71
+ className: styles.overflow
67
72
  });
68
73
  }
69
74
  function renderSelectForVariable(model) {
@@ -77,6 +82,11 @@ function renderSelectForVariable(model) {
77
82
  });
78
83
  }
79
84
  }
85
+ const getStyles = () => ({
86
+ overflow: css({
87
+ overflow: "hidden"
88
+ })
89
+ });
80
90
 
81
91
  export { VariableValueSelect, VariableValueSelectMulti, renderSelectForVariable };
82
92
  //# sourceMappingURL=VariableValueSelect.js.map
package/dist/esm/variables/components/VariableValueSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { InputActionMeta, MultiSelect, Select } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { MultiValueVariable } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n const { value, key } = model.useState();\n\n const onInputChange = model.onSearchChange\n ? (value: string, meta: InputActionMeta) => {\n if (meta.action === 'input-change') {\n model.onSearchChange!(value);\n }\n }\n : undefined;\n\n return (\n <Select<VariableValue>\n id={key}\n placeholder=\"Select value\"\n width=\"auto\"\n value={value}\n allowCustomValue\n virtualized\n tabSelectsValue={false}\n onInputChange={onInputChange}\n options={model.getOptionsForSelect()}\n data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`)}\n onChange={(newValue) => {\n model.changeValueTo(newValue.value!, newValue.label!);\n }}\n />\n );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n const options = model.getOptionsForSelect();\n\n // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n const [uncommittedValue, setUncommittedValue] = useState(arrayValue);\n\n // Detect value changes outside\n useEffect(() => {\n setUncommittedValue(arrayValue);\n }, [arrayValue]);\n\n const onInputChange = model.onSearchChange\n ? (value: string, meta: InputActionMeta) => {\n if (meta.action === 'input-change') {\n model.onSearchChange!(value);\n }\n }\n : undefined;\n\n const placeholder = options.length > 0 ? 'Select value' : '';\n\n return (\n <MultiSelect<VariableValueSingle>\n id={key}\n placeholder={placeholder}\n width=\"auto\"\n value={uncommittedValue}\n noMultiValueWrap={true}\n maxVisibleValues={maxVisibleValues ?? 5}\n tabSelectsValue={false}\n virtualized\n allowCustomValue\n options={model.getOptionsForSelect()}\n closeMenuOnSelect={false}\n isClearable={true}\n onInputChange={onInputChange}\n onBlur={() => {\n model.changeValueTo(uncommittedValue);\n }}\n data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`)}\n onChange={(newValue, action) => {\n if (action.action === 'clear' && noValueOnClear) {\n model.changeValueTo([]);\n }\n setUncommittedValue(newValue.map((x) => x.value!));\n }}\n />\n );\n}\n\nexport function renderSelectForVariable(model: MultiValueVariable) {\n if (model.state.isMulti) {\n return <VariableValueSelectMulti model={model} />;\n } else {\n return <VariableValueSelect model={model} />;\n }\n}\n"],"names":["value"],"mappings":"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"}
1
+ {"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { InputActionMeta, MultiSelect, Select, useStyles2 } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { MultiValueVariable } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { css } from '@emotion/css';\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n const { value, key } = model.useState();\n\n const styles = useStyles2(getStyles);\n const onInputChange = model.onSearchChange\n ? (value: string, meta: InputActionMeta) => {\n if (meta.action === 'input-change') {\n model.onSearchChange!(value);\n }\n }\n : undefined;\n\n return (\n <Select<VariableValue>\n id={key}\n placeholder=\"Select value\"\n width=\"auto\"\n value={value}\n allowCustomValue\n virtualized\n tabSelectsValue={false}\n onInputChange={onInputChange}\n options={model.getOptionsForSelect()}\n data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`)}\n onChange={(newValue) => {\n model.changeValueTo(newValue.value!, newValue.label!);\n }}\n className={styles.overflow}\n />\n );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n const options = model.getOptionsForSelect();\n\n // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n const [uncommittedValue, setUncommittedValue] = useState(arrayValue);\n\n // Detect value changes outside\n useEffect(() => {\n setUncommittedValue(arrayValue);\n }, [arrayValue]);\n\n const onInputChange = model.onSearchChange\n ? (value: string, meta: InputActionMeta) => {\n if (meta.action === 'input-change') {\n model.onSearchChange!(value);\n }\n }\n : undefined;\n\n const placeholder = options.length > 0 ? 'Select value' : '';\n\n const styles = useStyles2(getStyles);\n\n return (\n <MultiSelect<VariableValueSingle>\n id={key}\n placeholder={placeholder}\n width=\"auto\"\n value={uncommittedValue}\n noMultiValueWrap={true}\n maxVisibleValues={maxVisibleValues ?? 5}\n tabSelectsValue={false}\n virtualized\n allowCustomValue\n options={model.getOptionsForSelect()}\n closeMenuOnSelect={false}\n isClearable={true}\n onInputChange={onInputChange}\n onBlur={() => {\n model.changeValueTo(uncommittedValue);\n }}\n data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`)}\n onChange={(newValue, action) => {\n if (action.action === 'clear' && noValueOnClear) {\n model.changeValueTo([]);\n }\n setUncommittedValue(newValue.map((x) => x.value!));\n }}\n className={styles.overflow}\n />\n );\n}\n\nexport function renderSelectForVariable(model: MultiValueVariable) {\n if (model.state.isMulti) {\n return <VariableValueSelectMulti model={model} />;\n } else {\n return <VariableValueSelect model={model} />;\n }\n}\n\nconst getStyles = (() => ({\n overflow: css({\n overflow: 'hidden',\n })\n}));\n"],"names":["value"],"mappings":"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"}
package/dist/esm/variables/components/VariableValueSelectors.js CHANGED
@@ -3,7 +3,7 @@ import { VariableHide } from '@grafana/data';
3
3
  import { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase.js';
4
4
  import { sceneGraph } from '../../core/sceneGraph/index.js';
5
5
  import { ControlsLabel } from '../../utils/ControlsLabel.js';
6
- import { css } from '@emotion/css';
6
+ import { css, cx } from '@emotion/css';
7
7
  import { selectors } from '@grafana/e2e-selectors';
8
8
 
9
9
  class VariableValueSelectors extends SceneObjectBase {
@@ -22,22 +22,12 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
22
22
  if (state.hide === VariableHide.hideVariable && !showAlways) {
23
23
  return null;
24
24
  }
25
- if (layout === "vertical") {
26
- return /* @__PURE__ */ React.createElement("div", {
27
- className: verticalContainer,
28
- "data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
29
- }, /* @__PURE__ */ React.createElement(VariableLabel, {
30
- variable,
31
- layout
32
- }), /* @__PURE__ */ React.createElement(variable.Component, {
33
- model: variable
34
- }));
35
- }
36
25
  return /* @__PURE__ */ React.createElement("div", {
37
- className: containerStyle,
26
+ className: cx(containerStyle, { [verticalContainer]: layout === "vertical" }),
38
27
  "data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
39
28
  }, /* @__PURE__ */ React.createElement(VariableLabel, {
40
- variable
29
+ variable,
30
+ layout
41
31
  }), /* @__PURE__ */ React.createElement(variable.Component, {
42
32
  model: variable
43
33
  }));
@@ -53,18 +43,15 @@ function VariableLabel({ variable, layout }) {
53
43
  return /* @__PURE__ */ React.createElement(ControlsLabel, {
54
44
  htmlFor: elementId,
55
45
  isLoading: state.loading,
56
- onCancel: () => {
57
- var _a2;
58
- return (_a2 = variable.onCancel) == null ? void 0 : _a2.call(variable);
59
- },
46
+ onCancel: variable.onCancel,
60
47
  label: labelOrName,
61
48
  error: state.error,
62
49
  layout,
63
50
  description: (_b = state.description) != null ? _b : void 0
64
51
  });
65
52
  }
66
- const containerStyle = css({ display: "flex" });
67
- const verticalContainer = css({ display: "flex", flexDirection: "column" });
53
+ const containerStyle = css({ display: "flex", overflow: "hidden" });
54
+ const verticalContainer = css({ flexDirection: "column" });
68
55
 
69
56
  export { VariableValueSelectWrapper, VariableValueSelectors };
70
57
  //# sourceMappingURL=VariableValueSelectors.js.map
package/dist/esm/variables/components/VariableValueSelectors.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n const variables = sceneGraph.getVariables(model)!.useState();\n\n return (\n <>\n {variables.variables.map((variable) => (\n <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n ))}\n </>\n );\n}\n\ninterface VariableSelectProps {\n layout?: ControlsLayout;\n variable: SceneVariable;\n /** To override hide from VariableValueSelectByName */\n showAlways?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways }: VariableSelectProps) {\n const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n if (state.hide === VariableHide.hideVariable && !showAlways) {\n return null;\n }\n\n if (layout === 'vertical') {\n return (\n <div className={verticalContainer} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n <VariableLabel variable={variable} layout={layout} />\n <variable.Component model={variable} />\n </div>\n );\n }\n\n return (\n <div className={containerStyle} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n <VariableLabel variable={variable} />\n <variable.Component model={variable} />\n </div>\n );\n}\n\nfunction VariableLabel({ variable, layout }: VariableSelectProps) {\n const { state } = variable;\n\n if (variable.state.hide === VariableHide.hideLabel) {\n return null;\n }\n\n const elementId = `var-${state.key}`;\n const labelOrName = state.label ?? state.name;\n\n return (\n <ControlsLabel\n htmlFor={elementId}\n isLoading={state.loading}\n onCancel={() => variable.onCancel?.()}\n label={labelOrName}\n error={state.error}\n layout={layout}\n description={state.description ?? undefined}\n />\n );\n}\n\nconst containerStyle = css({ display: 'flex' });\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":"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"}
1
+ {"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css, cx } from '@emotion/css';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n const variables = sceneGraph.getVariables(model)!.useState();\n\n return (\n <>\n {variables.variables.map((variable) => (\n <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n ))}\n </>\n );\n}\n\ninterface VariableSelectProps {\n layout?: ControlsLayout;\n variable: SceneVariable;\n /** To override hide from VariableValueSelectByName */\n showAlways?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways }: VariableSelectProps) {\n const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n if (state.hide === VariableHide.hideVariable && !showAlways) {\n return null;\n }\n\n return (\n <div className={cx(containerStyle, { [verticalContainer]: layout === 'vertical' })} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n <VariableLabel variable={variable} layout={layout} />\n <variable.Component model={variable} />\n </div>\n );\n}\n\nfunction VariableLabel({ variable, layout }: VariableSelectProps) {\n const { state } = variable;\n\n if (variable.state.hide === VariableHide.hideLabel) {\n return null;\n }\n\n const elementId = `var-${state.key}`;\n const labelOrName = state.label ?? state.name;\n\n return (\n <ControlsLabel\n htmlFor={elementId}\n isLoading={state.loading}\n onCancel={variable.onCancel}\n label={labelOrName}\n error={state.error}\n layout={layout}\n description={state.description ?? undefined}\n />\n );\n}\n\nconst containerStyle = css({ display: 'flex', overflow: 'hidden' });\nconst verticalContainer = css({ flexDirection: 'column' });\n"],"names":[],"mappings":";;;;;;;;AAgBO,MAAM,+BAA+B,eAA6C,CAAA;AAEzF,CAAA;AAFa,sBAAA,CACG,SAAY,GAAA,8BAAA,CAAA;AAG5B,SAAS,8BAAA,CAA+B,EAAE,KAAA,EAAsD,EAAA;AAC9F,EAAA,MAAM,SAAY,GAAA,UAAA,CAAW,YAAa,CAAA,KAAK,EAAG,QAAS,EAAA,CAAA;AAE3D,EAAA,iEAEK,SAAU,CAAA,SAAA,CAAU,GAAI,CAAA,CAAC,6BACvB,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAA,IAA2B,GAAA,EAAK,SAAS,KAAM,CAAA,GAAA;AAAA,IAAK,QAAA;AAAA,IAAoB,MAAA,EAAQ,MAAM,KAAM,CAAA,MAAA;AAAA,GAAQ,CACtG,CACH,CAAA,CAAA;AAEJ,CAAA;AASO,SAAS,0BAA2B,CAAA,EAAE,QAAU,EAAA,MAAA,EAAQ,YAAmC,EAAA;AAChG,EAAA,MAAM,QAAQ,mBAAwC,CAAA,QAAA,EAAU,EAAE,yBAAA,EAA2B,MAAM,CAAA,CAAA;AAEnG,EAAA,IAAI,KAAM,CAAA,IAAA,KAAS,YAAa,CAAA,YAAA,IAAgB,CAAC,UAAY,EAAA;AAC3D,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,GAAG,cAAgB,EAAA,EAAE,CAAC,iBAAoB,GAAA,MAAA,KAAW,YAAY,CAAA;AAAA,IAAG,aAAa,EAAA,SAAA,CAAU,KAAM,CAAA,SAAA,CAAU,OAAQ,CAAA,WAAA;AAAA,GAAA,kBAChI,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,QAAA;AAAA,IAAoB,MAAA;AAAA,GAAgB,CAAA,kBAClD,KAAA,CAAA,aAAA,CAAA,QAAA,CAAS,SAAT,EAAA;AAAA,IAAmB,KAAO,EAAA,QAAA;AAAA,GAAU,CACvC,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,aAAc,CAAA,EAAE,QAAU,EAAA,MAAA,EAA+B,EAAA;AAtDlE,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAuDE,EAAM,MAAA,EAAE,OAAU,GAAA,QAAA,CAAA;AAElB,EAAA,IAAI,QAAS,CAAA,KAAA,CAAM,IAAS,KAAA,YAAA,CAAa,SAAW,EAAA;AAClD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,SAAA,GAAY,OAAO,KAAM,CAAA,GAAA,CAAA,CAAA,CAAA;AAC/B,EAAA,MAAM,WAAc,GAAA,CAAA,EAAA,GAAA,KAAA,CAAM,KAAN,KAAA,IAAA,GAAA,EAAA,GAAe,KAAM,CAAA,IAAA,CAAA;AAEzC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IACC,OAAS,EAAA,SAAA;AAAA,IACT,WAAW,KAAM,CAAA,OAAA;AAAA,IACjB,UAAU,QAAS,CAAA,QAAA;AAAA,IACnB,KAAO,EAAA,WAAA;AAAA,IACP,OAAO,KAAM,CAAA,KAAA;AAAA,IACb,MAAA;AAAA,IACA,WAAA,EAAA,CAAa,EAAM,GAAA,KAAA,CAAA,WAAA,KAAN,IAAqB,GAAA,EAAA,GAAA,KAAA,CAAA;AAAA,GACpC,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,iBAAiB,GAAI,CAAA,EAAE,SAAS,MAAQ,EAAA,QAAA,EAAU,UAAU,CAAA,CAAA;AAClE,MAAM,iBAAoB,GAAA,GAAA,CAAI,EAAE,aAAA,EAAe,UAAU,CAAA;;;;"}
package/dist/index.js CHANGED
@@ -2314,7 +2314,7 @@ class SceneTimeRangeCompare extends SceneObjectBase {
2314
2314
  SceneTimeRangeCompare.Component = SceneTimeRangeCompareRenderer;
2315
2315
  function SceneTimeRangeCompareRenderer({ model }) {
2316
2316
  var _a;
2317
- const styles = ui.useStyles2(getStyles$9);
2317
+ const styles = ui.useStyles2(getStyles$a);
2318
2318
  const { compareWith, compareOptions } = model.useState();
2319
2319
  const [previousCompare, setPreviousCompare] = React__default["default"].useState(compareWith);
2320
2320
  const previousValue = (_a = compareOptions.find(({ value: value2 }) => value2 === previousCompare)) != null ? _a : PREVIOUS_PERIOD_COMPARE_OPTION;
@@ -2354,7 +2354,7 @@ function SceneTimeRangeCompareRenderer({ model }) {
2354
2354
  isOpen: false
2355
2355
  }, previousValue.label));
2356
2356
  }
2357
- function getStyles$9(theme) {
2357
+ function getStyles$a(theme) {
2358
2358
  return {
2359
2359
  previewButton: css.css({
2360
2360
  "&:disabled": {
@@ -3035,7 +3035,7 @@ function LoadingIndicator(props) {
3035
3035
  }
3036
3036
 
3037
3037
  function ControlsLabel(props) {
3038
- const styles = ui.useStyles2(getStyles$8);
3038
+ const styles = ui.useStyles2(getStyles$9);
3039
3039
  const theme = ui.useTheme2();
3040
3040
  const isVertical = props.layout === "vertical";
3041
3041
  const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3098,7 +3098,7 @@ function ControlsLabel(props) {
3098
3098
  }
3099
3099
  return labelElement;
3100
3100
  }
3101
- const getStyles$8 = (theme) => ({
3101
+ const getStyles$9 = (theme) => ({
3102
3102
  horizontalLabel: css.css({
3103
3103
  background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
3104
3104
  display: `flex`,
@@ -3160,7 +3160,7 @@ function keyLabelToOption(key, label) {
3160
3160
  }
3161
3161
  function AdHocFilterRenderer({ filter, model }) {
3162
3162
  var _a, _b;
3163
- const styles = ui.useStyles2(getStyles$7);
3163
+ const styles = ui.useStyles2(getStyles$8);
3164
3164
  const [state, setState] = React.useState({});
3165
3165
  const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
3166
3166
  const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
@@ -3253,7 +3253,7 @@ function AdHocFilterRenderer({ filter, model }) {
3253
3253
  onClick: () => model._removeFilter(filter)
3254
3254
  }));
3255
3255
  }
3256
- const getStyles$7 = (theme) => ({
3256
+ const getStyles$8 = (theme) => ({
3257
3257
  field: css.css({
3258
3258
  marginBottom: 0
3259
3259
  }),
@@ -3547,7 +3547,7 @@ function renderExpression(builder, filters) {
3547
3547
  }
3548
3548
  function AdHocFiltersVariableRenderer({ model }) {
3549
3549
  const { filters, readOnly, addFilterButtonText } = model.useState();
3550
- const styles = ui.useStyles2(getStyles$6);
3550
+ const styles = ui.useStyles2(getStyles$7);
3551
3551
  return /* @__PURE__ */ React__default["default"].createElement("div", {
3552
3552
  className: styles.wrapper
3553
3553
  }, filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, {
@@ -3561,7 +3561,7 @@ function AdHocFiltersVariableRenderer({ model }) {
3561
3561
  addFilterButtonText
3562
3562
  }));
3563
3563
  }
3564
- const getStyles$6 = (theme) => ({
3564
+ const getStyles$7 = (theme) => ({
3565
3565
  wrapper: css.css({
3566
3566
  display: "flex",
3567
3567
  gap: theme.spacing(2),
@@ -6030,22 +6030,12 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
6030
6030
  if (state.hide === data.VariableHide.hideVariable && !showAlways) {
6031
6031
  return null;
6032
6032
  }
6033
- if (layout === "vertical") {
6034
- return /* @__PURE__ */ React__default["default"].createElement("div", {
6035
- className: verticalContainer,
6036
- "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
6037
- }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
6038
- variable,
6039
- layout
6040
- }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
6041
- model: variable
6042
- }));
6043
- }
6044
6033
  return /* @__PURE__ */ React__default["default"].createElement("div", {
6045
- className: containerStyle,
6034
+ className: css.cx(containerStyle, { [verticalContainer]: layout === "vertical" }),
6046
6035
  "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
6047
6036
  }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
6048
- variable
6037
+ variable,
6038
+ layout
6049
6039
  }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
6050
6040
  model: variable
6051
6041
  }));
@@ -6061,18 +6051,15 @@ function VariableLabel({ variable, layout }) {
6061
6051
  return /* @__PURE__ */ React__default["default"].createElement(ControlsLabel, {
6062
6052
  htmlFor: elementId,
6063
6053
  isLoading: state.loading,
6064
- onCancel: () => {
6065
- var _a2;
6066
- return (_a2 = variable.onCancel) == null ? void 0 : _a2.call(variable);
6067
- },
6054
+ onCancel: variable.onCancel,
6068
6055
  label: labelOrName,
6069
6056
  error: state.error,
6070
6057
  layout,
6071
6058
  description: (_b = state.description) != null ? _b : void 0
6072
6059
  });
6073
6060
  }
6074
- const containerStyle = css.css({ display: "flex" });
6075
- const verticalContainer = css.css({ display: "flex", flexDirection: "column" });
6061
+ const containerStyle = css.css({ display: "flex", overflow: "hidden" });
6062
+ const verticalContainer = css.css({ flexDirection: "column" });
6076
6063
 
6077
6064
  class VariableValueControl extends SceneObjectBase {
6078
6065
  }
@@ -6363,6 +6350,7 @@ class ConstantVariable extends SceneObjectBase {
6363
6350
 
6364
6351
  function VariableValueSelect({ model }) {
6365
6352
  const { value, key } = model.useState();
6353
+ const styles = ui.useStyles2(getStyles$6);
6366
6354
  const onInputChange = model.onSearchChange ? (value2, meta) => {
6367
6355
  if (meta.action === "input-change") {
6368
6356
  model.onSearchChange(value2);
@@ -6381,7 +6369,8 @@ function VariableValueSelect({ model }) {
6381
6369
  "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
6382
6370
  onChange: (newValue) => {
6383
6371
  model.changeValueTo(newValue.value, newValue.label);
6384
- }
6372
+ },
6373
+ className: styles.overflow
6385
6374
  });
6386
6375
  }
6387
6376
  function VariableValueSelectMulti({ model }) {
@@ -6398,6 +6387,7 @@ function VariableValueSelectMulti({ model }) {
6398
6387
  }
6399
6388
  } : void 0;
6400
6389
  const placeholder = options.length > 0 ? "Select value" : "";
6390
+ const styles = ui.useStyles2(getStyles$6);
6401
6391
  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
6402
6392
  id: key,
6403
6393
  placeholder,
@@ -6421,7 +6411,8 @@ function VariableValueSelectMulti({ model }) {
6421
6411
  model.changeValueTo([]);
6422
6412
  }
6423
6413
  setUncommittedValue(newValue.map((x) => x.value));
6424
- }
6414
+ },
6415
+ className: styles.overflow
6425
6416
  });
6426
6417
  }
6427
6418
  function renderSelectForVariable(model) {
@@ -6435,6 +6426,11 @@ function renderSelectForVariable(model) {
6435
6426
  });
6436
6427
  }
6437
6428
  }
6429
+ const getStyles$6 = () => ({
6430
+ overflow: css.css({
6431
+ overflow: "hidden"
6432
+ })
6433
+ });
6438
6434
 
6439
6435
  var __defProp$i = Object.defineProperty;
6440
6436
  var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;