@grafana/scenes 4.16.0 → 4.17.1

package/dist/index.js

@@ -145,7 +145,7 @@ var __spreadValues$I = (a, b) => {
   return a;
 };
 var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-var __objRest$3 = (source, exclude) => {
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$I.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -158,7 +158,7 @@ var __objRest$3 = (source, exclude) => {
   return target;
 };
 function SceneComponentWrapperWithoutMemo(_a) {
-  var _b = _a, { model } = _b, otherProps = __objRest$3(_b, ["model"]);
+  var _b = _a, { model } = _b, otherProps = __objRest$4(_b, ["model"]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
   const [_, setValue] = React.useState(0);
@@ -2874,9 +2874,161 @@ var __spreadValues$z = (a, b) => {
   return a;
 };
 var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+var __objRest$3 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$z.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$z)
+    for (var prop of __getOwnPropSymbols$z(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$z.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function VariableValueSelect({ model }) {
+  const { value, key } = model.useState();
+  const onInputChange = model.onSearchChange ? (value2, meta) => {
+    if (meta.action === "input-change") {
+      model.onSearchChange(value2);
+    }
+  } : void 0;
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
+    id: key,
+    placeholder: "Select value",
+    width: "auto",
+    value,
+    allowCustomValue: true,
+    virtualized: true,
+    tabSelectsValue: false,
+    onInputChange,
+    options: model.getOptionsForSelect(),
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
+    onChange: (newValue) => {
+      model.changeValueTo(newValue.value, newValue.label);
+    }
+  });
+}
+function VariableValueSelectMulti({ model }) {
+  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
+  const options = model.getOptionsForSelect();
+  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
+  const [inputValue, setInputValue] = React.useState("");
+  React.useEffect(() => {
+    setUncommittedValue(arrayValue);
+  }, [arrayValue]);
+  const onInputChange = (value2, { action }) => {
+    if (action === "input-change") {
+      setInputValue(value2);
+      if (model.onSearchChange) {
+        model.onSearchChange(value2);
+      }
+      return value2;
+    }
+    if (action === "input-blur") {
+      setInputValue("");
+      return "";
+    }
+    return inputValue;
+  };
+  const placeholder = options.length > 0 ? "Select value" : "";
+  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
+    id: key,
+    placeholder,
+    width: "auto",
+    inputValue,
+    value: uncommittedValue,
+    noMultiValueWrap: true,
+    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
+    tabSelectsValue: false,
+    virtualized: true,
+    allowCustomValue: true,
+    options: model.getOptionsForSelect(),
+    closeMenuOnSelect: false,
+    components: { Option: OptionWithCheckbox },
+    isClearable: true,
+    hideSelectedOptions: false,
+    onInputChange,
+    onBlur: () => {
+      model.changeValueTo(uncommittedValue);
+    },
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
+    onChange: (newValue, action) => {
+      if (action.action === "clear" && noValueOnClear) {
+        model.changeValueTo([]);
+      }
+      setUncommittedValue(newValue.map((x) => x.value));
+    }
+  });
+}
+const OptionWithCheckbox = ({
+  children,
+  data,
+  innerProps,
+  innerRef,
+  isFocused,
+  isSelected,
+  renderOptionLabel
+}) => {
+  const _a = innerProps, rest = __objRest$3(_a, ["onMouseMove", "onMouseOver"]);
+  const theme = ui.useTheme2();
+  const selectStyles = ui.getSelectStyles(theme);
+  const optionStyles = ui.useStyles2(getOptionStyles);
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$n(__spreadValues$z({
+    ref: innerRef,
+    className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
+  }, rest), {
+    "aria-label": "Select option",
+    title: data.title
+  }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: optionStyles.checkbox
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Checkbox, {
+    value: isSelected
+  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: selectStyles.optionBody
+  }, /* @__PURE__ */ React__default["default"].createElement("span", null, children)));
+};
+OptionWithCheckbox.displayName = "SelectMenuOptions";
+const getOptionStyles = (theme) => ({
+  checkbox: css.css({
+    marginRight: theme.spacing(2)
+  })
+});
+function renderSelectForVariable(model) {
+  if (model.state.isMulti) {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectMulti, {
+      model
+    });
+  } else {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
+      model
+    });
+  }
+}
+
+var __defProp$y = Object.defineProperty;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
+var __hasOwnProp$y = Object.prototype.hasOwnProperty;
+var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$y = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$y.call(b, prop))
+      __defNormalProp$y(a, prop, b[prop]);
+  if (__getOwnPropSymbols$y)
+    for (var prop of __getOwnPropSymbols$y(b)) {
+      if (__propIsEnum$y.call(b, prop))
+        __defNormalProp$y(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadProps$n(__spreadValues$z({
+    super(__spreadProps$m(__spreadValues$y({
       isMulti: true,
       name: "",
       value: [],
@@ -2980,21 +3132,32 @@ function GroupByVariableRenderer({ model }) {
   const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
   const [isFetchingOptions, setIsFetchingOptions] = React.useState(false);
   const [isOptionsOpen, setIsOptionsOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
   const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
   React.useEffect(() => {
     setUncommittedValue(arrayValue);
   }, [arrayValue]);
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
+  const onInputChange = (value2, { action }) => {
+    if (action === "input-change") {
+      setInputValue(value2);
+      if (model.onSearchChange) {
+        model.onSearchChange(value2);
+      }
+      return value2;
     }
-  } : void 0;
+    if (action === "input-blur") {
+      setInputValue("");
+      return "";
+    }
+    return inputValue;
+  };
   const placeholder = "Select value";
   return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
     "data-testid": `GroupBySelect-${key}`,
     id: key,
     placeholder,
     width: "auto",
+    inputValue,
     value: uncommittedValue,
     noMultiValueWrap: true,
     maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
@@ -3005,7 +3168,9 @@ function GroupByVariableRenderer({ model }) {
     closeMenuOnSelect: false,
     isOpen: isOptionsOpen,
     isClearable: true,
+    hideSelectedOptions: false,
     isLoading: isFetchingOptions,
+    components: { Option: OptionWithCheckbox },
     onInputChange,
     onBlur: () => {
       model.changeValueTo(uncommittedValue);
@@ -3141,25 +3306,6 @@ const getStyles$8 = (theme) => ({
   })
 });
 
-var __defProp$y = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
-var __hasOwnProp$y = Object.prototype.hasOwnProperty;
-var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$y = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$y.call(b, prop))
-      __defNormalProp$y(a, prop, b[prop]);
-  if (__getOwnPropSymbols$y)
-    for (var prop of __getOwnPropSymbols$y(b)) {
-      if (__propIsEnum$y.call(b, prop))
-        __defNormalProp$y(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 function keyLabelToOption(key, label) {
   return key !== "" ? {
     value: key,
@@ -3169,7 +3315,12 @@ function keyLabelToOption(key, label) {
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
   const styles = ui.useStyles2(getStyles$7);
-  const [state, setState] = React.useState({});
+  const [keys, setKeys] = React.useState([]);
+  const [values, setValues] = React.useState([]);
+  const [isKeysLoading, setIsKeysLoading] = React.useState(false);
+  const [isValuesLoading, setIsValuesLoading] = React.useState(false);
+  const [isKeysOpen, setIsKeysOpen] = React.useState(false);
+  const [isValuesOpen, setIsValuesOpen] = React.useState(false);
   const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
   const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
@@ -3177,44 +3328,48 @@ function AdHocFilterRenderer({ filter, model }) {
     allowCreateWhileLoading: true,
     formatCreateLabel: (inputValue) => `Use custom value: ${inputValue}`,
     disabled: model.state.readOnly,
-    className: state.isKeysOpen ? styles.widthWhenOpen : void 0,
+    className: isKeysOpen ? styles.widthWhenOpen : void 0,
     width: "auto",
     value: valueValue,
     placeholder: "Select value",
-    options: state.values,
+    options: values,
     onChange: (v) => model._updateFilter(filter, "value", v),
-    isOpen: state.isValuesOpen,
-    isLoading: state.isValuesLoading,
+    isOpen: isValuesOpen && !isValuesLoading,
+    isLoading: isValuesLoading,
     autoFocus: filter.key !== "" && filter.value === "",
     openMenuOnFocus: true,
     onOpenMenu: async () => {
-      setState(__spreadProps$m(__spreadValues$y({}, state), { isValuesLoading: true, isValuesOpen: true }));
-      const values = await model._getValuesFor(filter);
-      setState(__spreadProps$m(__spreadValues$y({}, state), { isValuesLoading: false, values }));
+      setIsValuesLoading(true);
+      setIsValuesOpen(true);
+      const values2 = await model._getValuesFor(filter);
+      setIsValuesLoading(false);
+      setValues(values2);
     },
     onCloseMenu: () => {
-      setState(__spreadProps$m(__spreadValues$y({}, state), { isValuesOpen: false }));
+      setIsValuesOpen(false);
     }
   });
   const keySelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
-    key: `${state.isValuesLoading ? "loading" : "loaded"}`,
+    key: `${isValuesLoading ? "loading" : "loaded"}`,
     disabled: model.state.readOnly,
-    className: state.isKeysOpen ? styles.widthWhenOpen : void 0,
+    className: isKeysOpen ? styles.widthWhenOpen : void 0,
     width: "auto",
     value: keyValue,
     placeholder: "Select label",
-    options: state.keys,
+    options: keys,
     onChange: (v) => model._updateFilter(filter, "key", v),
     autoFocus: filter.key === "",
-    isOpen: state.isKeysOpen,
-    isLoading: state.isKeysLoading,
+    isOpen: isKeysOpen && !isKeysLoading,
+    isLoading: isKeysLoading,
     onOpenMenu: async () => {
-      setState(__spreadProps$m(__spreadValues$y({}, state), { isKeysLoading: true }));
-      const keys = await model._getKeys(filter.key);
-      setState(__spreadProps$m(__spreadValues$y({}, state), { isKeysLoading: false, isKeysOpen: true, keys }));
+      setIsKeysOpen(true);
+      setIsKeysLoading(true);
+      const keys2 = await model._getKeys(filter.key);
+      setIsKeysLoading(false);
+      setKeys(keys2);
     },
     onCloseMenu: () => {
-      setState(__spreadProps$m(__spreadValues$y({}, state), { isKeysOpen: false }));
+      setIsKeysOpen(false);
     },
     onBlur: () => {
       if (filter.key === "") {
@@ -6371,81 +6526,6 @@ class ConstantVariable extends SceneObjectBase {
   }
 }
 
-function VariableValueSelect({ model }) {
-  const { value, key } = model.useState();
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
-    }
-  } : void 0;
-  return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
-    id: key,
-    placeholder: "Select value",
-    width: "auto",
-    value,
-    allowCustomValue: true,
-    virtualized: true,
-    tabSelectsValue: false,
-    onInputChange,
-    options: model.getOptionsForSelect(),
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
-    onChange: (newValue) => {
-      model.changeValueTo(newValue.value, newValue.label);
-    }
-  });
-}
-function VariableValueSelectMulti({ model }) {
-  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
-  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
-  const options = model.getOptionsForSelect();
-  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
-  React.useEffect(() => {
-    setUncommittedValue(arrayValue);
-  }, [arrayValue]);
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
-    }
-  } : void 0;
-  const placeholder = options.length > 0 ? "Select value" : "";
-  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
-    id: key,
-    placeholder,
-    width: "auto",
-    value: uncommittedValue,
-    noMultiValueWrap: true,
-    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
-    tabSelectsValue: false,
-    virtualized: true,
-    allowCustomValue: true,
-    options: model.getOptionsForSelect(),
-    closeMenuOnSelect: false,
-    isClearable: true,
-    onInputChange,
-    onBlur: () => {
-      model.changeValueTo(uncommittedValue);
-    },
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
-    onChange: (newValue, action) => {
-      if (action.action === "clear" && noValueOnClear) {
-        model.changeValueTo([]);
-      }
-      setUncommittedValue(newValue.map((x) => x.value));
-    }
-  });
-}
-function renderSelectForVariable(model) {
-  if (model.state.isMulti) {
-    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectMulti, {
-      model
-    });
-  } else {
-    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
-      model
-    });
-  }
-}
-
 var __defProp$i = Object.defineProperty;
 var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
 var __hasOwnProp$i = Object.prototype.hasOwnProperty;