@grafana/scenes 5.23.4 → 5.24.0--canary.960.11775742614.0

package/dist/index.js

@@ -1467,9 +1467,7 @@ class MultiValueVariable extends SceneObjectBase {
       return stateUpdate;
     }
     if (this.hasAllValue()) {
-      if (this.state.includeAll) {
-        stateUpdate.text = ALL_VARIABLE_TEXT;
-      } else {
+      if (!this.state.includeAll) {
         stateUpdate.value = options[0].value;
         stateUpdate.text = options[0].label;
         if (this.state.isMulti) {
@@ -2596,7 +2594,7 @@ function toSelectableValue$2(value, label) {
   };
 }
 function VariableValueSelect({ model }) {
-  const { value, text, key, options, includeAll, isReadOnly } = model.useState();
+  const { value, text, key, options, includeAll, isReadOnly, allowCustomValue } = model.useState();
   const [inputValue, setInputValue] = React.useState("");
   const [hasCustomValue, setHasCustomValue] = React.useState(false);
   const selectValue = toSelectableValue$2(value, String(text));
@@ -2628,7 +2626,7 @@ function VariableValueSelect({ model }) {
     disabled: isReadOnly,
     value: selectValue,
     inputValue,
-    allowCustomValue: true,
+    allowCustomValue: allowCustomValue != null ? allowCustomValue : true,
     virtualized: true,
     filterOption: filterNoOp$2,
     tabSelectsValue: false,
@@ -2646,7 +2644,7 @@ function VariableValueSelect({ model }) {
   });
 }
 function VariableValueSelectMulti({ model }) {
-  const { value, options, key, maxVisibleValues, noValueOnClear, includeAll, isReadOnly } = model.useState();
+  const { value, options, key, maxVisibleValues, noValueOnClear, includeAll, isReadOnly, allowCustomValue } = model.useState();
   const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
   const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
   const [inputValue, setInputValue] = React.useState("");
@@ -2681,7 +2679,7 @@ function VariableValueSelectMulti({ model }) {
     maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
     tabSelectsValue: false,
     virtualized: true,
-    allowCustomValue: true,
+    allowCustomValue: allowCustomValue != null ? allowCustomValue : true,
     toggleAllOptions: {
       enabled: true,
       optionsFilter: filterAll,
@@ -3067,7 +3065,6 @@ function GroupByVariableRenderer({ model }) {
     id: key,
     placeholder: "Select value",
     width: "auto",
-    allowCustomValue: true,
     inputValue,
     value: uncommittedValue,
     noMultiValueWrap: true,
@@ -3297,7 +3294,7 @@ function keyLabelToOption(key, label) {
 }
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const styles = ui.useStyles2(getStyles$e);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
@@ -3371,7 +3368,7 @@ function AdHocFilterRenderer({ filter, model }) {
   };
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, __spreadValues$D({
     virtualized: true,
-    allowCustomValue: true,
+    allowCustomValue: (_b = model.state.allowCustomValue) != null ? _b : true,
     isValidNewOption: (inputValue) => inputValue.trim().length > 0,
     allowCreateWhileLoading: true,
     formatCreateLabel: (inputValue) => `Use custom value: ${inputValue}`,
@@ -3417,7 +3414,7 @@ function AdHocFilterRenderer({ filter, model }) {
     disabled: model.state.readOnly,
     className: css.cx(styles.key, isKeysOpen ? styles.widthWhenOpen : void 0),
     width: "auto",
-    allowCustomValue: true,
+    allowCustomValue: (_c = model.state.allowCustomValue) != null ? _c : true,
     value: keyValue,
     placeholder: "Select label",
     options: handleOptionGroups(keys),
@@ -3470,7 +3467,7 @@ function AdHocFilterRenderer({ filter, model }) {
     if (filter.key) {
       const label = /* @__PURE__ */ React__default["default"].createElement(ControlsLabel, {
         layout: "vertical",
-        label: (_b = filter.key) != null ? _b : "",
+        label: (_d = filter.key) != null ? _d : "",
         onRemove: () => model._removeFilter(filter)
       });
       return /* @__PURE__ */ React__default["default"].createElement(ui.Field, {
@@ -3497,7 +3494,7 @@ function AdHocFilterRenderer({ filter, model }) {
     title: "Remove filter",
     className: styles.removeButton,
     icon: "times",
-    "data-testid": `AdHocFilter-remove-${(_c = filter.key) != null ? _c : ""}`,
+    "data-testid": `AdHocFilter-remove-${(_e = filter.key) != null ? _e : ""}`,
     onClick: () => model._removeFilter(filter)
   }));
 }
@@ -4160,7 +4157,7 @@ var __spreadValues$A = (a, b) => {
 };
 var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
 const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef, populateInputOnEdit }, parentRef) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState([]);
   const [optionsLoading, setOptionsLoading] = React.useState(false);
@@ -4171,6 +4168,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const styles = ui.useStyles2(getStyles$b);
   const [filterMultiValues, setFilterMultiValues] = React.useState([]);
   const [_, setForceRefresh] = React.useState({});
+  const allowCustomValue = (_a = model.state.allowCustomValue) != null ? _a : true;
   const multiValuePillWrapperRef = React.useRef(null);
   const hasMultiValueOperator = isMultiValueOperator((filter == null ? void 0 : filter.operator) || "");
   const isMultiValueEdit = hasMultiValueOperator && filterInputType === "value";
@@ -4283,7 +4281,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     [refs.domReference]
   );
   const filteredDropDownItems = flattenOptionGroups(handleOptionGroups(optionsSearcher(inputValue, filterInputType)));
-  if (filterInputType !== "operator" && inputValue) {
+  if (allowCustomValue && filterInputType !== "operator" && inputValue) {
     filteredDropDownItems.push({
       value: inputValue.trim(),
       label: inputValue.trim(),
@@ -4502,7 +4500,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       rowVirtualizer.scrollToIndex(activeIndex);
     }
   }, [activeIndex, rowVirtualizer]);
-  const keyLabel = (_a = filter == null ? void 0 : filter.keyLabel) != null ? _a : filter == null ? void 0 : filter.key;
+  const keyLabel = (_b = filter == null ? void 0 : filter.keyLabel) != null ? _b : filter == null ? void 0 : filter.key;
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.comboboxWrapper
   }, filter ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4560,6 +4558,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       setOpen(true);
     },
     onFocus: () => {
+      setActiveIndex(0);
       setOpen(true);
     }
   })), optionsLoading ? /* @__PURE__ */ React__default["default"].createElement(ui.Spinner, {
@@ -4573,7 +4572,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
     style: __spreadProps$o(__spreadValues$A({}, floatingStyles), {
       width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`,
-      transform: isMultiValueEdit ? `translate(${((_b = multiValuePillWrapperRef.current) == null ? void 0 : _b.getBoundingClientRect().left) || 0}px, ${(((_c = refs.domReference.current) == null ? void 0 : _c.getBoundingClientRect().bottom) || 0) + 10}px )` : floatingStyles.transform
+      transform: isMultiValueEdit ? `translate(${((_c = multiValuePillWrapperRef.current) == null ? void 0 : _c.getBoundingClientRect().left) || 0}px, ${(((_d = refs.domReference.current) == null ? void 0 : _d.getBoundingClientRect().bottom) || 0) + 10}px )` : floatingStyles.transform
     }),
     ref: refs.setFloating,
     className: styles.dropdownWrapper,
@@ -4586,7 +4585,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     tabIndex: -1
   }), optionsLoading ? /* @__PURE__ */ React__default["default"].createElement(LoadingOptionsPlaceholder, null) : optionsError ? /* @__PURE__ */ React__default["default"].createElement(OptionsErrorPlaceholder, {
     handleFetchOptions: () => handleFetchOptions(filterInputType)
-  }) : !filteredDropDownItems.length && (filterInputType === "operator" || !inputValue) ? /* @__PURE__ */ React__default["default"].createElement(NoOptionsPlaceholder, null) : rowVirtualizer.getVirtualItems().map((virtualItem) => {
+  }) : !filteredDropDownItems.length && (!allowCustomValue || filterInputType === "operator" || !inputValue) ? /* @__PURE__ */ React__default["default"].createElement(NoOptionsPlaceholder, null) : rowVirtualizer.getVirtualItems().map((virtualItem) => {
     var _a2;
     const item = filteredDropDownItems[virtualItem.index];
     const index = virtualItem.index;
@@ -8832,13 +8831,13 @@ function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel })
   }));
 }
 function VariableLabel({ variable, layout, hideLabel }) {
-  var _a;
+  var _a, _b;
   const { state } = variable;
   if (variable.state.hide === data.VariableHide.hideLabel || hideLabel) {
     return null;
   }
   const elementId = `var-${state.key}`;
-  const labelOrName = state.label || state.name;
+  const labelOrName = (_a = state.label) != null ? _a : state.name;
   return /* @__PURE__ */ React__default["default"].createElement(ControlsLabel, {
     htmlFor: elementId,
     isLoading: state.loading,
@@ -8849,7 +8848,7 @@ function VariableLabel({ variable, layout, hideLabel }) {
     label: labelOrName,
     error: state.error,
     layout,
-    description: (_a = state.description) != null ? _a : void 0
+    description: (_b = state.description) != null ? _b : void 0
   });
 }
 const containerStyle = css.css({ display: "flex" });