@grafana/scenes 5.14.4 → 5.14.6

package/CHANGELOG.md

@@ -2,12 +2,15 @@
 
 #### 🐛 Bug Fix
 
+- Add toggle all option to variable value select [#876](https://github.com/grafana/scenes/pull/876) ([@oscarkilhed](https://github.com/oscarkilhed))
+- Include isMulti and includeAll in LocalValueVariable [#900](https://github.com/grafana/scenes/pull/900) ([@oscarkilhed](https://github.com/oscarkilhed))
 - MultiValueVariabe: Change when value changed event is published [#896](https://github.com/grafana/scenes/pull/896) ([@mdvictor](https://github.com/mdvictor))
 - Demo: Demonstrate event traversal through scene graph [#848](https://github.com/grafana/scenes/pull/848) ([@darrenjaneczek](https://github.com/darrenjaneczek))
 
-#### Authors: 2
+#### Authors: 3
 
 - Darren Janeczek ([@darrenjaneczek](https://github.com/darrenjaneczek))
+- Oscar Kilhed ([@oscarkilhed](https://github.com/oscarkilhed))
 - Victor Marin ([@mdvictor](https://github.com/mdvictor))
 
 ---

package/dist/esm/variables/components/VariableValueSelect.js

@@ -1,6 +1,6 @@
 import { isArray } from 'lodash';
 import React, { useState, useMemo, useEffect } from 'react';
-import { Select, MultiSelect, useTheme2, getSelectStyles, useStyles2, Checkbox } from '@grafana/ui';
+import { Select, MultiSelect, useTheme2, getSelectStyles, useStyles2, Checkbox, ToggleAllState } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 import { cx, css } from '@emotion/css';
 import { getOptionSearcher } from './getOptionSearcher.js';
@@ -37,6 +37,16 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const filterNoOp = () => true;
+const filterAll = (v) => v.value !== "$__all";
+const determineToggleAllState = (selectedValues, options) => {
+  if (selectedValues.length === options.filter(filterAll).length) {
+    return ToggleAllState.allSelected;
+  } else if (selectedValues.length === 0 || selectedValues.length === 1 && selectedValues[0] && selectedValues[0].value === "$__all") {
+    return ToggleAllState.noneSelected;
+  } else {
+    return ToggleAllState.indeterminate;
+  }
+};
 function toSelectableValue(value, label) {
   return {
     value,
@@ -130,6 +140,11 @@ function VariableValueSelectMulti({ model }) {
     tabSelectsValue: false,
     virtualized: true,
     allowCustomValue: true,
+    toggleAllOptions: {
+      enabled: true,
+      optionsFilter: filterAll,
+      determineToggleAllState
+    },
     options: filteredOptions,
     closeMenuOnSelect: false,
     components: { Option: OptionWithCheckbox },
@@ -156,6 +171,7 @@ const OptionWithCheckbox = ({
   innerRef,
   isFocused,
   isSelected,
+  indeterminate,
   renderOptionLabel
 }) => {
   var _b;
@@ -172,6 +188,7 @@ const OptionWithCheckbox = ({
   }), /* @__PURE__ */ React.createElement("div", {
     className: optionStyles.checkbox
   }, /* @__PURE__ */ React.createElement(Checkbox, {
+    indeterminate,
     value: isSelected
   })), /* @__PURE__ */ React.createElement("div", {
     className: selectStyles.optionBody,

package/dist/esm/variables/components/VariableValueSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { RefCallback, useEffect, useMemo, useState } from 'react';\n\nimport { Checkbox, InputActionMeta, MultiSelect, Select, getSelectStyles, useStyles2, useTheme2 } 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 { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { getOptionSearcher } from './getOptionSearcher';\n\nconst filterNoOp = () => true;\n\nexport function toSelectableValue<T>(value: T, label?: string): SelectableValue<T> {\n  return {\n    value,\n    label: label ?? String(value),\n  };\n}\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, text, key, options, includeAll, isReadOnly } = model.useState();\n  const [inputValue, setInputValue] = useState('');\n  const [hasCustomValue, setHasCustomValue] = useState(false);\n  const selectValue = toSelectableValue(value, String(text));\n\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    return value;\n  };\n\n  const filteredOptions = optionSearcher(inputValue);\n\n  const onOpenMenu = () => {\n    if (hasCustomValue) {\n      setInputValue(String(text));\n    }\n  };\n\n  const onCloseMenu = () => {\n    setInputValue('');\n  };\n\n  return (\n    <Select<VariableValue>\n      id={key}\n      isValidNewOption={(inputValue) => inputValue.trim().length > 0}\n      placeholder=\"Select value\"\n      width=\"auto\"\n      disabled={isReadOnly}\n      value={selectValue}\n      inputValue={inputValue}\n      allowCustomValue\n      virtualized\n      filterOption={filterNoOp}\n      tabSelectsValue={false}\n      onInputChange={onInputChange}\n      onOpenMenu={onOpenMenu}\n      onCloseMenu={onCloseMenu}\n      options={filteredOptions}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`)}\n      onChange={(newValue) => {\n        model.changeValueTo(newValue.value!, newValue.label!);\n\n        if (hasCustomValue !== newValue.__isNew__) {\n          setHasCustomValue(newValue.__isNew__);\n        }\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, options, key, maxVisibleValues, noValueOnClear, includeAll, isReadOnly } = model.useState();\n  const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\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  const [inputValue, setInputValue] = useState('');\n\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(arrayValue);\n  }, [arrayValue]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    if (action === 'input-blur') {\n      setInputValue('');\n      return '';\n    }\n\n    return inputValue;\n  };\n\n  const placeholder = options.length > 0 ? 'Select value' : '';\n  const filteredOptions = optionSearcher(inputValue);\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      id={key}\n      placeholder={placeholder}\n      width=\"auto\"\n      inputValue={inputValue}\n      disabled={isReadOnly}\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\n      options={filteredOptions}\n      closeMenuOnSelect={false}\n      components={{ Option: OptionWithCheckbox }}\n      isClearable={true}\n      hideSelectedOptions={false}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue);\n      }}\n      filterOption={filterNoOp}\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\ninterface SelectMenuOptionProps<T> {\n  isDisabled: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  innerProps: JSX.IntrinsicElements['div'];\n  innerRef: RefCallback<HTMLDivElement>;\n  renderOptionLabel?: (value: SelectableValue<T>) => JSX.Element;\n  data: SelectableValue<T>;\n}\n\nexport const OptionWithCheckbox = ({\n  children,\n  data,\n  innerProps,\n  innerRef,\n  isFocused,\n  isSelected,\n  renderOptionLabel,\n}: React.PropsWithChildren<SelectMenuOptionProps<unknown>>) => {\n  // We are removing onMouseMove and onMouseOver from innerProps because they cause the whole\n  // list to re-render everytime the user hovers over an option. This is a performance issue.\n  // See https://github.com/JedWatson/react-select/issues/3128#issuecomment-451936743\n  const { onMouseMove, onMouseOver, ...rest } = innerProps;\n  const theme = useTheme2();\n  const selectStyles = getSelectStyles(theme);\n  const optionStyles = useStyles2(getOptionStyles);\n\n  return (\n    <div\n      ref={innerRef}\n      className={cx(selectStyles.option, isFocused && selectStyles.optionFocused)}\n      {...rest}\n      // TODO: use below selector once we update grafana dependencies to ^11.1.0\n      // data-testid={selectors.components.Select.option}\n      data-testid=\"data-testid Select option\"\n      title={data.title}\n    >\n      <div className={optionStyles.checkbox}>\n        <Checkbox value={isSelected} />\n      </div>\n      <div\n        className={selectStyles.optionBody}\n        data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(\n          data.label ?? String(data.value)\n        )}\n      >\n        <span>{children}</span>\n      </div>\n    </div>\n  );\n};\n\nOptionWithCheckbox.displayName = 'SelectMenuOptions';\n\nconst getOptionStyles = (theme: GrafanaTheme2) => ({\n  checkbox: css({\n    marginRight: theme.spacing(2),\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","inputValue"],"mappings":"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"}
+{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { RefCallback, useEffect, useMemo, useState } from 'react';\n\n//@ts-ignore\nimport { Checkbox, InputActionMeta, MultiSelect, Select, ToggleAllState, getSelectStyles, useStyles2, useTheme2 } 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 { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { getOptionSearcher } from './getOptionSearcher';\n\nconst filterNoOp = () => true;\n\nconst filterAll = (v: SelectableValue<VariableValueSingle>) => v.value !== '$__all'\n\nconst determineToggleAllState = (\n  selectedValues: Array<SelectableValue<VariableValueSingle>>,\n  options: Array<SelectableValue<VariableValueSingle>>\n) => {\n  if (selectedValues.length === options.filter(filterAll).length) {\n    return ToggleAllState.allSelected;\n  } else if (\n    selectedValues.length === 0 ||\n    (selectedValues.length === 1 && selectedValues[0] && selectedValues[0].value === '$__all')\n  ) {\n    return ToggleAllState.noneSelected;\n  } else {\n    return ToggleAllState.indeterminate;\n  }\n};\n\nexport function toSelectableValue<T>(value: T, label?: string): SelectableValue<T> {\n  return {\n    value,\n    label: label ?? String(value),\n  };\n}\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, text, key, options, includeAll, isReadOnly } = model.useState();\n  const [inputValue, setInputValue] = useState('');\n  const [hasCustomValue, setHasCustomValue] = useState(false);\n  const selectValue = toSelectableValue(value, String(text));\n\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    return value;\n  };\n\n  const filteredOptions = optionSearcher(inputValue);\n\n  const onOpenMenu = () => {\n    if (hasCustomValue) {\n      setInputValue(String(text));\n    }\n  };\n\n  const onCloseMenu = () => {\n    setInputValue('');\n  };\n\n  return (\n    <Select<VariableValue>\n      id={key}\n      isValidNewOption={(inputValue) => inputValue.trim().length > 0}\n      placeholder=\"Select value\"\n      width=\"auto\"\n      disabled={isReadOnly}\n      value={selectValue}\n      inputValue={inputValue}\n      allowCustomValue\n      virtualized\n      filterOption={filterNoOp}\n      tabSelectsValue={false}\n      onInputChange={onInputChange}\n      onOpenMenu={onOpenMenu}\n      onCloseMenu={onCloseMenu}\n      options={filteredOptions}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`)}\n      onChange={(newValue) => {\n        model.changeValueTo(newValue.value!, newValue.label!);\n\n        if (hasCustomValue !== newValue.__isNew__) {\n          setHasCustomValue(newValue.__isNew__);\n        }\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, options, key, maxVisibleValues, noValueOnClear, includeAll, isReadOnly } = model.useState();\n  const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\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  const [inputValue, setInputValue] = useState('');\n\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(arrayValue);\n  }, [arrayValue]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    if (action === 'input-blur') {\n      setInputValue('');\n      return '';\n    }\n\n    return inputValue;\n  };\n\n  const placeholder = options.length > 0 ? 'Select value' : '';\n  const filteredOptions = optionSearcher(inputValue);\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      id={key}\n      placeholder={placeholder}\n      width=\"auto\"\n      inputValue={inputValue}\n      disabled={isReadOnly}\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\n      //@ts-ignore\n      toggleAllOptions={{\n        enabled: true,\n        optionsFilter: filterAll,\n        determineToggleAllState: determineToggleAllState,\n      }}\n      options={filteredOptions}\n      closeMenuOnSelect={false}\n      components={{ Option: OptionWithCheckbox }}\n      isClearable={true}\n      hideSelectedOptions={false}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue);\n      }}\n      filterOption={filterNoOp}\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\ninterface SelectMenuOptionProps<T> {\n  isDisabled: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  innerProps: JSX.IntrinsicElements['div'];\n  innerRef: RefCallback<HTMLDivElement>;\n  renderOptionLabel?: (value: SelectableValue<T>) => JSX.Element;\n  data: SelectableValue<T>;\n  indeterminate: boolean; \n}\n\nexport const OptionWithCheckbox = ({\n  children,\n  data,\n  innerProps,\n  innerRef,\n  isFocused,\n  isSelected,\n  indeterminate,\n  renderOptionLabel,\n}: React.PropsWithChildren<SelectMenuOptionProps<unknown>>) => {\n  // We are removing onMouseMove and onMouseOver from innerProps because they cause the whole\n  // list to re-render everytime the user hovers over an option. This is a performance issue.\n  // See https://github.com/JedWatson/react-select/issues/3128#issuecomment-451936743\n  const { onMouseMove, onMouseOver, ...rest } = innerProps;\n  const theme = useTheme2();\n  const selectStyles = getSelectStyles(theme);\n  const optionStyles = useStyles2(getOptionStyles);\n\n  return (\n    <div\n      ref={innerRef}\n      className={cx(selectStyles.option, isFocused && selectStyles.optionFocused)}\n      {...rest}\n      // TODO: use below selector once we update grafana dependencies to ^11.1.0\n      // data-testid={selectors.components.Select.option}\n      data-testid=\"data-testid Select option\"\n      title={data.title}\n    >\n      <div className={optionStyles.checkbox}>\n        <Checkbox indeterminate={indeterminate} value={isSelected} />\n      </div>\n      <div\n        className={selectStyles.optionBody}\n        data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(\n          data.label ?? String(data.value)\n        )}\n      >\n        <span>{children}</span>\n      </div>\n    </div>\n  );\n};\n\nOptionWithCheckbox.displayName = 'SelectMenuOptions';\n\nconst getOptionStyles = (theme: GrafanaTheme2) => ({\n  checkbox: css({\n    marginRight: theme.spacing(2),\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","inputValue"],"mappings":"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"}

package/dist/esm/variables/variants/LocalValueVariable.js

@@ -26,9 +26,7 @@ class LocalValueVariable extends SceneObjectBase {
       type: "system",
       value: "",
       text: "",
-      name: "",
-      isMulti: true,
-      includeAll: true
+      name: ""
     }, initialState), {
       skipUrlSync: true
     }));

package/dist/esm/variables/variants/LocalValueVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalValueVariable.js","sources":["../../../../src/variables/variants/LocalValueVariable.ts"],"sourcesContent":["import { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneVariable, SceneVariableState, VariableValue } from '../types';\n\nexport interface LocalValueVariableState extends SceneVariableState {\n  value: VariableValue;\n  text: VariableValue;\n\n  // Indicate whether or not this variable is sourced from a multi-value variable.\n  // Introduces for a backwards compatibility with the old variable system, to properly support interpolation in SQL data sources.\n  isMulti?: boolean;\n  includeAll?: boolean;\n}\n\n/**\n * This is a special type of variable that is used for repeating panels and layouts to create a local scoped value for a variable\n * that exists in a ancestor SceneVariableSet.\n */\nexport class LocalValueVariable\n  extends SceneObjectBase<LocalValueVariableState>\n  implements SceneVariable<LocalValueVariableState>\n{\n  public constructor(initialState: Omit<Partial<LocalValueVariableState>, 'isMulti' | 'includeAll'>) {\n    super({\n      type: 'system',\n      value: '',\n      text: '',\n      name: '',\n      isMulti: true,\n      includeAll: true,\n      ...initialState,\n      skipUrlSync: true,\n    });\n  }\n\n  public getValue(): VariableValue {\n    return this.state.value;\n  }\n\n  public getValueText(): string {\n    return this.state.text.toString();\n  }\n\n  /**\n   * Checks the ancestor of our parent SceneVariableSet for loading state of a variable with the same name\n   * This function is unit tested from SceneVariableSet tests.\n   */\n  public isAncestorLoading(): boolean {\n    // Parent (SceneVariableSet) -> Parent (The object that has our parent set) -> Parent (scope we need to access our sets ancestor)\n    const ancestorScope = this.parent?.parent?.parent;\n    if (!ancestorScope) {\n      throw new Error('LocalValueVariable requires a parent SceneVariableSet that has an ancestor SceneVariableSet');\n    }\n\n    const set = sceneGraph.getVariables(ancestorScope);\n    const parentVar = sceneGraph.lookupVariable(this.state.name, ancestorScope);\n    if (set && parentVar) {\n      return set.isVariableLoadingOrWaitingToUpdate(parentVar);\n    }\n\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,2BACH,eAEV,CAAA;AAAA,EACS,YAAY,YAAgF,EAAA;AACjG,IAAM,KAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACJ,IAAM,EAAA,QAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,MACN,IAAM,EAAA,EAAA;AAAA,MACN,OAAS,EAAA,IAAA;AAAA,MACT,UAAY,EAAA,IAAA;AAAA,KAAA,EACT,YAPC,CAAA,EAAA;AAAA,MAQJ,WAAa,EAAA,IAAA;AAAA,KACd,CAAA,CAAA,CAAA;AAAA,GACH;AAAA,EAEO,QAA0B,GAAA;AAC/B,IAAA,OAAO,KAAK,KAAM,CAAA,KAAA,CAAA;AAAA,GACpB;AAAA,EAEO,YAAuB,GAAA;AAC5B,IAAO,OAAA,IAAA,CAAK,KAAM,CAAA,IAAA,CAAK,QAAS,EAAA,CAAA;AAAA,GAClC;AAAA,EAMO,iBAA6B,GAAA;AA/CtC,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAiDI,IAAA,MAAM,aAAgB,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA,CAAK,MAAL,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAa,WAAb,IAAqB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,CAAA;AAC3C,IAAA,IAAI,CAAC,aAAe,EAAA;AAClB,MAAM,MAAA,IAAI,MAAM,6FAA6F,CAAA,CAAA;AAAA,KAC/G;AAEA,IAAM,MAAA,GAAA,GAAM,UAAW,CAAA,YAAA,CAAa,aAAa,CAAA,CAAA;AACjD,IAAA,MAAM,YAAY,UAAW,CAAA,cAAA,CAAe,IAAK,CAAA,KAAA,CAAM,MAAM,aAAa,CAAA,CAAA;AAC1E,IAAA,IAAI,OAAO,SAAW,EAAA;AACpB,MAAO,OAAA,GAAA,CAAI,mCAAmC,SAAS,CAAA,CAAA;AAAA,KACzD;AAEA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AACF;;;;"}
+{"version":3,"file":"LocalValueVariable.js","sources":["../../../../src/variables/variants/LocalValueVariable.ts"],"sourcesContent":["import { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneVariable, SceneVariableState, VariableValue } from '../types';\n\nexport interface LocalValueVariableState extends SceneVariableState {\n  value: VariableValue;\n  text: VariableValue;\n\n  // Indicate whether or not this variable is sourced from a multi-value variable.\n  // Introduces for a backwards compatibility with the old variable system, to properly support interpolation in SQL data sources.\n  isMulti?: boolean;\n  includeAll?: boolean;\n}\n\n/**\n * This is a special type of variable that is used for repeating panels and layouts to create a local scoped value for a variable\n * that exists in a ancestor SceneVariableSet.\n */\nexport class LocalValueVariable\n  extends SceneObjectBase<LocalValueVariableState>\n  implements SceneVariable<LocalValueVariableState>\n{\n  public constructor(initialState: Partial<LocalValueVariableState>) {\n    super({\n      type: 'system',\n      value: '',\n      text: '',\n      name: '',\n      ...initialState,\n      skipUrlSync: true,\n    });\n  }\n\n  public getValue(): VariableValue {\n    return this.state.value;\n  }\n\n  public getValueText(): string {\n    return this.state.text.toString();\n  }\n\n  /**\n   * Checks the ancestor of our parent SceneVariableSet for loading state of a variable with the same name\n   * This function is unit tested from SceneVariableSet tests.\n   */\n  public isAncestorLoading(): boolean {\n    // Parent (SceneVariableSet) -> Parent (The object that has our parent set) -> Parent (scope we need to access our sets ancestor)\n    const ancestorScope = this.parent?.parent?.parent;\n    if (!ancestorScope) {\n      throw new Error('LocalValueVariable requires a parent SceneVariableSet that has an ancestor SceneVariableSet');\n    }\n\n    const set = sceneGraph.getVariables(ancestorScope);\n    const parentVar = sceneGraph.lookupVariable(this.state.name, ancestorScope);\n    if (set && parentVar) {\n      return set.isVariableLoadingOrWaitingToUpdate(parentVar);\n    }\n\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,2BACH,eAEV,CAAA;AAAA,EACS,YAAY,YAAgD,EAAA;AACjE,IAAM,KAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACJ,IAAM,EAAA,QAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,MACN,IAAM,EAAA,EAAA;AAAA,KAAA,EACH,YALC,CAAA,EAAA;AAAA,MAMJ,WAAa,EAAA,IAAA;AAAA,KACd,CAAA,CAAA,CAAA;AAAA,GACH;AAAA,EAEO,QAA0B,GAAA;AAC/B,IAAA,OAAO,KAAK,KAAM,CAAA,KAAA,CAAA;AAAA,GACpB;AAAA,EAEO,YAAuB,GAAA;AAC5B,IAAO,OAAA,IAAA,CAAK,KAAM,CAAA,IAAA,CAAK,QAAS,EAAA,CAAA;AAAA,GAClC;AAAA,EAMO,iBAA6B,GAAA;AA7CtC,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA+CI,IAAA,MAAM,aAAgB,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA,CAAK,MAAL,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAa,WAAb,IAAqB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,CAAA;AAC3C,IAAA,IAAI,CAAC,aAAe,EAAA;AAClB,MAAM,MAAA,IAAI,MAAM,6FAA6F,CAAA,CAAA;AAAA,KAC/G;AAEA,IAAM,MAAA,GAAA,GAAM,UAAW,CAAA,YAAA,CAAa,aAAa,CAAA,CAAA;AACjD,IAAA,MAAM,YAAY,UAAW,CAAA,cAAA,CAAe,IAAK,CAAA,KAAA,CAAM,MAAM,aAAa,CAAA,CAAA;AAC1E,IAAA,IAAI,OAAO,SAAW,EAAA;AACpB,MAAO,OAAA,GAAA,CAAI,mCAAmC,SAAS,CAAA,CAAA;AAAA,KACzD;AAEA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AACF;;;;"}

package/dist/index.d.ts

@@ -1655,7 +1655,7 @@ interface LocalValueVariableState extends SceneVariableState {
  * that exists in a ancestor SceneVariableSet.
  */
 declare class LocalValueVariable extends SceneObjectBase<LocalValueVariableState> implements SceneVariable<LocalValueVariableState> {
-    constructor(initialState: Omit<Partial<LocalValueVariableState>, 'isMulti' | 'includeAll'>);
+    constructor(initialState: Partial<LocalValueVariableState>);
     getValue(): VariableValue;
     getValueText(): string;
     /**

package/dist/index.js

@@ -2550,6 +2550,16 @@ var __objRest$4 = (source, exclude) => {
   return target;
 };
 const filterNoOp$2 = () => true;
+const filterAll = (v) => v.value !== "$__all";
+const determineToggleAllState = (selectedValues, options) => {
+  if (selectedValues.length === options.filter(filterAll).length) {
+    return ui.ToggleAllState.allSelected;
+  } else if (selectedValues.length === 0 || selectedValues.length === 1 && selectedValues[0] && selectedValues[0].value === "$__all") {
+    return ui.ToggleAllState.noneSelected;
+  } else {
+    return ui.ToggleAllState.indeterminate;
+  }
+};
 function toSelectableValue$2(value, label) {
   return {
     value,
@@ -2643,6 +2653,11 @@ function VariableValueSelectMulti({ model }) {
     tabSelectsValue: false,
     virtualized: true,
     allowCustomValue: true,
+    toggleAllOptions: {
+      enabled: true,
+      optionsFilter: filterAll,
+      determineToggleAllState
+    },
     options: filteredOptions,
     closeMenuOnSelect: false,
     components: { Option: OptionWithCheckbox },
@@ -2669,6 +2684,7 @@ const OptionWithCheckbox = ({
   innerRef,
   isFocused,
   isSelected,
+  indeterminate,
   renderOptionLabel
 }) => {
   var _b;
@@ -2685,6 +2701,7 @@ const OptionWithCheckbox = ({
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
     className: optionStyles.checkbox
   }, /* @__PURE__ */ React__default["default"].createElement(ui.Checkbox, {
+    indeterminate,
     value: isSelected
   })), /* @__PURE__ */ React__default["default"].createElement("div", {
     className: selectStyles.optionBody,
@@ -9192,9 +9209,7 @@ class LocalValueVariable extends SceneObjectBase {
       type: "system",
       value: "",
       text: "",
-      name: "",
-      isMulti: true,
-      includeAll: true
+      name: ""
     }, initialState), {
       skipUrlSync: true
     }));