@grafana/scenes 4.27.0--canary.776.9400928706.0 → 4.28.0

package/dist/index.js

@@ -2765,7 +2765,7 @@ class CustomAllValue {
   }
 }
 
-function getOptionSearcher(options, includeAll, value, text) {
+function getOptionSearcher(options, includeAll) {
   const ufuzzy = new uFuzzy__default["default"]();
   let allOptions = options;
   const haystack = [];
@@ -2773,12 +2773,6 @@ function getOptionSearcher(options, includeAll, value, text) {
   if (includeAll) {
     allOptions = [{ value: ALL_VARIABLE_VALUE, label: ALL_VARIABLE_TEXT }, ...allOptions];
   }
-  if (!Array.isArray(value)) {
-    const current = options.find((x) => x.value === value);
-    if (!current) {
-      allOptions = [{ value, label: String(text) }, ...allOptions];
-    }
-  }
   return (search) => {
     if (search === "") {
       if (allOptions.length > limit) {
@@ -2841,14 +2835,21 @@ var __objRest$3 = (source, exclude) => {
     }
   return target;
 };
-const filterNoOp$1 = () => true;
+const filterNoOp$2 = () => true;
+function toSelectableValue$1(value, label) {
+  return {
+    value,
+    label: label != null ? label : String(value)
+  };
+}
 function VariableValueSelect({ model }) {
   const { value, text, key, options, includeAll } = model.useState();
   const [inputValue, setInputValue] = React.useState("");
   const [hasCustomValue, setHasCustomValue] = React.useState(false);
+  const selectValue = toSelectableValue$1(value, String(text));
   const optionSearcher = React.useMemo(
-    () => getOptionSearcher(options, includeAll, value, text),
-    [options, includeAll, value, text]
+    () => getOptionSearcher(options, includeAll),
+    [options, includeAll]
   );
   const onInputChange = (value2, { action }) => {
     if (action === "input-change") {
@@ -2871,13 +2872,14 @@ function VariableValueSelect({ model }) {
   };
   return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
     id: key,
+    isValidNewOption: (inputValue2) => inputValue2.trim().length > 0,
     placeholder: "Select value",
     width: "auto",
-    value,
+    value: selectValue,
     inputValue,
     allowCustomValue: true,
     virtualized: true,
-    filterOption: filterNoOp$1,
+    filterOption: filterNoOp$2,
     tabSelectsValue: false,
     onInputChange,
     onOpenMenu,
@@ -2893,13 +2895,13 @@ function VariableValueSelect({ model }) {
   });
 }
 function VariableValueSelectMulti({ model }) {
-  const { value, text, options, key, maxVisibleValues, noValueOnClear, includeAll } = model.useState();
+  const { value, options, key, maxVisibleValues, noValueOnClear, includeAll } = model.useState();
   const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
   const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
   const [inputValue, setInputValue] = React.useState("");
   const optionSearcher = React.useMemo(
-    () => getOptionSearcher(options, includeAll, value, text),
-    [options, includeAll, value, text]
+    () => getOptionSearcher(options, includeAll),
+    [options, includeAll]
   );
   React.useEffect(() => {
     setUncommittedValue(arrayValue);
@@ -2940,7 +2942,7 @@ function VariableValueSelectMulti({ model }) {
     onBlur: () => {
       model.changeValueTo(uncommittedValue);
     },
-    filterOption: filterNoOp$1,
+    filterOption: filterNoOp$2,
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
@@ -3197,8 +3199,8 @@ function GroupByVariableRenderer({ model }) {
   const [inputValue, setInputValue] = React.useState("");
   const [uncommittedValue, setUncommittedValue] = React.useState(values);
   const optionSearcher = React.useMemo(
-    () => getOptionSearcher(options, includeAll, value, text),
-    [options, includeAll, value, text]
+    () => getOptionSearcher(options, includeAll),
+    [options, includeAll]
   );
   React.useEffect(() => {
     setUncommittedValue(values);
@@ -3230,7 +3232,7 @@ function GroupByVariableRenderer({ model }) {
     tabSelectsValue: false,
     virtualized: true,
     options: filteredOptions,
-    filterOption: filterNoOp,
+    filterOption: filterNoOp$1,
     closeMenuOnSelect: false,
     isOpen: isOptionsOpen,
     isClearable: true,
@@ -3261,7 +3263,7 @@ function GroupByVariableRenderer({ model }) {
     }
   });
 }
-const filterNoOp = () => true;
+const filterNoOp$1 = () => true;
 
 function LoadingIndicator(props) {
   return /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
@@ -3376,12 +3378,20 @@ const getStyles$9 = (theme) => ({
   })
 });
 
+function selectableValueToVariableValueOption(value) {
+  var _a;
+  return {
+    label: (_a = value.label) != null ? _a : String(value.value),
+    value: value.value
+  };
+}
 function keyLabelToOption(key, label) {
   return key !== "" ? {
     value: key,
     label: label || key
   } : null;
 }
+const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
   const styles = ui.useStyles2(getStyles$8);
@@ -3391,9 +3401,23 @@ function AdHocFilterRenderer({ filter, model }) {
   const [isValuesLoading, setIsValuesLoading] = React.useState(false);
   const [isKeysOpen, setIsKeysOpen] = React.useState(false);
   const [isValuesOpen, setIsValuesOpen] = React.useState(false);
+  const [valueInputValue, setValueInputValue] = React.useState("");
+  const [valueHasCustomValue, setValueHasCustomValue] = React.useState(false);
   const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
   const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
+  const optionSearcher = React.useMemo(
+    () => getOptionSearcher(values.map(selectableValueToVariableValueOption), void 0),
+    [values]
+  );
+  const onValueInputChange = (value, { action }) => {
+    if (action === "input-change") {
+      setValueInputValue(value);
+    }
+    return value;
+  };
+  const filteredValueOptions = optionSearcher(valueInputValue);
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
+    virtualized: true,
     allowCustomValue: true,
     isValidNewOption: (inputValue) => inputValue.trim().length > 0,
     allowCreateWhileLoading: true,
@@ -3402,22 +3426,35 @@ function AdHocFilterRenderer({ filter, model }) {
     className: css.cx(styles.value, isKeysOpen ? styles.widthWhenOpen : void 0),
     width: "auto",
     value: valueValue,
+    filterOption: filterNoOp,
     placeholder: "Select value",
-    options: values,
-    onChange: (v) => model._updateFilter(filter, "value", v),
+    options: filteredValueOptions,
+    inputValue: valueInputValue,
+    onInputChange: onValueInputChange,
+    onChange: (v) => {
+      model._updateFilter(filter, "value", v);
+      if (valueHasCustomValue !== v.__isNew__) {
+        setValueHasCustomValue(v.__isNew__);
+      }
+    },
     isOpen: isValuesOpen && !isValuesLoading,
     isLoading: isValuesLoading,
     autoFocus: filter.key !== "" && filter.value === "",
     openMenuOnFocus: true,
     onOpenMenu: async () => {
+      var _a2;
       setIsValuesLoading(true);
       setIsValuesOpen(true);
       const values2 = await model._getValuesFor(filter);
       setIsValuesLoading(false);
       setValues(values2);
+      if (valueHasCustomValue) {
+        setValueInputValue((_a2 = valueValue == null ? void 0 : valueValue.label) != null ? _a2 : "");
+      }
     },
     onCloseMenu: () => {
       setIsValuesOpen(false);
+      setValueInputValue("");
     }
   });
   const keySelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
@@ -6378,7 +6415,7 @@ function VariableValueSelectorsRenderer({ model }) {
     layout: model.state.layout
   })));
 }
-function VariableValueSelectWrapper({ variable, layout, showAlways }) {
+function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel }) {
   const state = useSceneObjectState(variable, { shouldActivateOrKeepAlive: true });
   if (state.hide === data.VariableHide.hideVariable && !showAlways) {
     return null;
@@ -6389,7 +6426,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
       "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
     }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
       variable,
-      layout
+      layout,
+      hideLabel
     }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
       model: variable
     }));
@@ -6398,15 +6436,16 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
     className: containerStyle,
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
   }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
-    variable
+    variable,
+    hideLabel
   }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
     model: variable
   }));
 }
-function VariableLabel({ variable, layout }) {
+function VariableLabel({ variable, layout, hideLabel }) {
   var _a, _b;
   const { state } = variable;
-  if (variable.state.hide === data.VariableHide.hideLabel) {
+  if (variable.state.hide === data.VariableHide.hideLabel || hideLabel) {
     return null;
   }
   const elementId = `var-${state.key}`;