@grafana/scenes 6.51.0--canary.1316.20309633325.0 → 6.51.0

package/dist/index.js

@@ -15,11 +15,11 @@ var ui = require('@grafana/ui');
 var e2eSelectors = require('@grafana/e2e-selectors');
 var css = require('@emotion/css');
 var uFuzzy = require('@leeoniya/ufuzzy');
-var reactUse = require('react-use');
 var react$1 = require('@floating-ui/react');
 var reactVirtual = require('@tanstack/react-virtual');
 var react = require('@emotion/react');
 require('react-dom');
+var reactUse = require('react-use');
 var operators = require('rxjs/operators');
 var ReactGridLayout = require('react-grid-layout');
 var BarChartPanelCfg_types_gen = require('@grafana/schema/dist/esm/raw/composable/barchart/panelcfg/x/BarChartPanelCfg_types.gen');
@@ -4614,9 +4614,6 @@ const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlways
     }
     return ((_a = filter.valueLabels) == null ? void 0 : _a[0]) || "";
   }
-  if (isAlwaysWip && filterInputType === "operator") {
-    return "";
-  }
   return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;
 };
 const populateInputValueOnInputTypeSwitch = ({
@@ -4805,8 +4802,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
   isAlwaysWip,
   handleChangeViewMode,
   focusOnWipInputRef,
-  populateInputOnEdit,
-  onInputClick
+  populateInputOnEdit
 }, parentRef) {
   var _a, _b, _c;
   const [open, setOpen] = React.useState(false);
@@ -5289,7 +5285,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       className: css.cx(styles.inputStyle, { [styles.loadingInputPadding]: !optionsLoading }),
       onClick: (event) => {
         event.stopPropagation();
-        onInputClick == null ? void 0 : onInputClick();
         setOpen(true);
       },
       onFocus: () => {
@@ -5751,100 +5746,53 @@ const getStyles$d = (theme) => ({
   ...getNonApplicablePillStyles(theme)
 });
 
-const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller, onInputClick }, parentRef) {
+const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller }, parentRef) {
   const { wip } = controller.useState();
   React.useLayoutEffect(() => {
     if (!wip) {
       controller.addWip();
     }
   }, [wip]);
-  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef, onInputClick });
+  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef });
 });
 
-const MAX_VISIBLE_FILTERS = 5;
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  var _a;
-  const { originFilters, filters, readOnly, collapsible, valueRecommendations } = controller.useState();
+  const { originFilters, filters, readOnly, valueRecommendations } = controller.useState();
   const styles = ui.useStyles2(getStyles$c);
-  const theme = ui.useTheme2();
-  const [collapsed, setCollapsed] = React.useState(true);
-  const [wrapperRef, { height: wrapperHeight }] = reactUse.useMeasure();
-  const clearAll = () => {
-    var _a2;
-    (_a2 = controller.clearAll) == null ? void 0 : _a2.call(controller);
-  };
   const focusOnWipInputRef = React.useRef();
-  const singleLineThreshold = theme.spacing.gridSize * 5;
-  const isMultiLine = collapsible && wrapperHeight > singleLineThreshold;
-  const handleCollapseToggle = (event) => {
-    event.stopPropagation();
-    if (collapsible) {
-      setCollapsed(true);
-    }
-  };
-  const handleExpand = () => {
-    var _a2, _b;
-    if (!collapsible) {
-      (_a2 = focusOnWipInputRef.current) == null ? void 0 : _a2.call(focusOnWipInputRef);
-      return;
-    }
-    if (collapsed) {
-      setCollapsed(false);
-    } else {
-      (_b = focusOnWipInputRef.current) == null ? void 0 : _b.call(focusOnWipInputRef);
-    }
-  };
-  const visibleOriginFilters = (_a = originFilters == null ? void 0 : originFilters.filter((f) => f.origin)) != null ? _a : [];
-  const visibleFilters = filters.filter((f) => !f.hidden);
-  const allFilters = [...visibleOriginFilters, ...visibleFilters];
-  const totalFiltersCount = allFilters.length;
-  const shouldCollapse = collapsible && collapsed && totalFiltersCount > 0;
-  const filtersToRender = shouldCollapse ? allFilters.slice(0, MAX_VISIBLE_FILTERS) : allFilters;
-  React.useEffect(() => {
-    if (collapsible && totalFiltersCount === 0 && collapsed) {
-      setCollapsed(false);
-    }
-  }, [collapsible, totalFiltersCount, collapsed]);
-  const showCollapseButton = collapsible && isMultiLine && !collapsed;
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
-      ref: wrapperRef,
-      className: css.cx(styles.comboboxWrapper, {
-        [styles.comboboxFocusOutline]: !readOnly,
-        [styles.collapsed]: shouldCollapse,
-        [styles.clickableCollapsed]: shouldCollapse
-      }),
-      onClick: handleExpand
+      className: css.cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
+      onClick: () => {
+        var _a;
+        (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
+      }
     },
     /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "filter", className: styles.filterIcon, size: "lg" }),
     valueRecommendations && /* @__PURE__ */ React__default.default.createElement(valueRecommendations.Component, { model: valueRecommendations }),
-    filtersToRender.map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
+    originFilters == null ? void 0 : originFilters.map(
+      (filter, index) => filter.origin ? /* @__PURE__ */ React__default.default.createElement(
+        AdHocFilterPill,
+        {
+          key: `${index}-${filter.key}`,
+          filter,
+          controller,
+          focusOnWipInputRef: focusOnWipInputRef.current
+        }
+      ) : null
+    ),
+    filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
       AdHocFilterPill,
       {
-        key: `${filter.origin ? "origin-" : ""}${index}-${filter.key}`,
+        key: `${index}-${filter.key}`,
         filter,
         controller,
         readOnly: readOnly || filter.readOnly,
         focusOnWipInputRef: focusOnWipInputRef.current
       }
     )),
-    !readOnly && !shouldCollapse ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null,
-    /* @__PURE__ */ React__default.default.createElement("div", { className: styles.rightControls }, showCollapseButton && /* @__PURE__ */ React__default.default.createElement(
-      ui.Button,
-      {
-        className: styles.collapseButton,
-        fill: "text",
-        onClick: handleCollapseToggle,
-        "aria-label": i18n.t(
-          "grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse-filters",
-          "Collapse filters"
-        ),
-        "aria-expanded": !collapsed
-      },
-      i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse", "Collapse"),
-      /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "angle-up", size: "md" })
-    ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.clearAllButton }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "times", size: "md", onClick: clearAll })), shouldCollapse && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, totalFiltersCount > MAX_VISIBLE_FILTERS && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.moreIndicator }, "(+", totalFiltersCount - MAX_VISIBLE_FILTERS, ")"), /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "angle-down", className: styles.dropdownIndicator })))
+    !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null
   );
 });
 const getStyles$c = (theme) => ({
@@ -5860,8 +5808,7 @@ const getStyles$c = (theme) => ({
     borderRadius: theme.shape.radius.default,
     paddingInline: theme.spacing(1),
     paddingBlock: theme.spacing(0.5),
-    flexGrow: 1,
-    width: "100%"
+    flexGrow: 1
   }),
   comboboxFocusOutline: css.css({
     "&:focus-within": {
@@ -5877,48 +5824,6 @@ const getStyles$c = (theme) => ({
   filterIcon: css.css({
     color: theme.colors.text.secondary,
     alignSelf: "center"
-  }),
-  collapsed: css.css({
-    flexWrap: "nowrap",
-    overflow: "hidden"
-  }),
-  clickableCollapsed: css.css({
-    cursor: "pointer",
-    "&:hover": {
-      borderColor: theme.colors.border.medium
-    }
-  }),
-  rightControls: css.css({
-    display: "flex",
-    alignItems: "center",
-    marginLeft: "auto",
-    flexShrink: 0
-  }),
-  moreIndicator: css.css({
-    color: theme.colors.text.secondary,
-    whiteSpace: "nowrap"
-  }),
-  dropdownIndicator: css.css({
-    color: theme.colors.text.secondary,
-    flexShrink: 0
-  }),
-  collapseButton: css.css({
-    color: theme.colors.text.secondary,
-    padding: 0,
-    fontSize: theme.typography.bodySmall.fontSize,
-    border: "none",
-    "&:hover": {
-      background: "transparent",
-      color: theme.colors.text.primary
-    }
-  }),
-  clearAllButton: css.css({
-    fontSize: theme.typography.bodySmall.fontSize,
-    cursor: "pointer",
-    color: theme.colors.text.secondary,
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
   })
 });
 
@@ -6023,7 +5928,6 @@ class AdHocFiltersVariableController {
       supportsMultiValueOperators: state.supportsMultiValueOperators,
       onAddCustomValue: state.onAddCustomValue,
       wip: state._wip,
-      collapsible: state.collapsible,
       valueRecommendations: this.model.getRecommendations(),
       drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled
     };
@@ -6061,9 +5965,6 @@ class AdHocFiltersVariableController {
   restoreOriginalFilter(filter) {
     this.model.restoreOriginalFilter(filter);
   }
-  clearAll() {
-    this.model.clearAll();
-  }
   startProfile(name) {
     const queryController = getQueryController(this.model);
     queryController == null ? void 0 : queryController.startProfile(name);
@@ -6295,18 +6196,6 @@ class AdHocFiltersVariable extends SceneObjectBase {
       this._updateFilter(filter, original);
     }
   }
-  /**
-   * Clear all user-added filters and restore origin filters to their original values.
-   */
-  clearAll() {
-    var _a;
-    (_a = this.state.originFilters) == null ? void 0 : _a.forEach((filter) => {
-      if (filter.restorable) {
-        this.restoreOriginalFilter(filter);
-      }
-    });
-    this.setState({ filters: [] });
-  }
   getValue(fieldPath) {
     if (fieldPath === ORIGIN_FILTERS_KEY) {
       const originFilters = this.state.originFilters;
@@ -7175,7 +7064,6 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
-  var _a, _b;
   const {
     value,
     text,
@@ -7196,10 +7084,10 @@ function GroupByVariableRenderer({ model }) {
     const arrayValue = lodash.isArray(value) ? value : [value];
     const arrayText = lodash.isArray(text) ? text : [text];
     return arrayValue.map((value2, idx) => {
-      var _a2;
+      var _a;
       return {
         value: value2,
-        label: String((_a2 = arrayText[idx]) != null ? _a2 : value2)
+        label: String((_a = arrayText[idx]) != null ? _a : value2)
       };
     });
   }, [value, text]);
@@ -7230,8 +7118,7 @@ function GroupByVariableRenderer({ model }) {
     () => handleOptionGroups(optionSearcher(inputValue).map(toSelectableValue)),
     [optionSearcher, inputValue]
   );
-  const WideInputWrapper = (children) => /* @__PURE__ */ React__default.default.createElement("div", { className: styles.selectWrapper }, children);
-  const select = isMulti ? /* @__PURE__ */ React__default.default.createElement(ConditionalWrapper, { condition: (_a = model.state.wideInput) != null ? _a : false, wrapper: WideInputWrapper }, /* @__PURE__ */ React__default.default.createElement(
+  const select = isMulti ? /* @__PURE__ */ React__default.default.createElement(
     ui.MultiSelect,
     {
       "aria-label": i18n.t(
@@ -7301,7 +7188,7 @@ function GroupByVariableRenderer({ model }) {
         setIsOptionsOpen(false);
       }
     }
-  )) : /* @__PURE__ */ React__default.default.createElement(ConditionalWrapper, { condition: (_b = model.state.wideInput) != null ? _b : false, wrapper: WideInputWrapper }, /* @__PURE__ */ React__default.default.createElement(
+  ) : /* @__PURE__ */ React__default.default.createElement(
     ui.Select,
     {
       "aria-label": i18n.t(
@@ -7315,6 +7202,7 @@ function GroupByVariableRenderer({ model }) {
         "Group by label"
       ),
       width: "auto",
+      className: css.cx(drilldownRecommendationsEnabled && styles.selectStylesInWrapper),
       inputValue,
       value: uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null,
       allowCustomValue,
@@ -7358,19 +7246,12 @@ function GroupByVariableRenderer({ model }) {
         setIsOptionsOpen(false);
       }
     }
-  ));
+  );
   if (!recommendations) {
     return select;
   }
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.recommendations }, /* @__PURE__ */ React__default.default.createElement(recommendations.Component, { model: recommendations })), select);
 }
-const ConditionalWrapper = ({
-  condition,
-  wrapper,
-  children
-}) => {
-  return condition ? wrapper(children) : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, children);
-};
 const filterNoOp = () => true;
 function WideMenu(props) {
   return /* @__PURE__ */ React__default.default.createElement(components.Menu, { ...props }, /* @__PURE__ */ React__default.default.createElement("div", { style: { minWidth: "220px" } }, props.children));
@@ -7387,22 +7268,6 @@ function toSelectableValue(input) {
   return result;
 }
 const getStyles$a = (theme) => ({
-  selectWrapper: css.css({
-    display: "flex",
-    minWidth: 0,
-    width: "100%"
-  }),
-  // Fix for noMultiValueWrap grid layout - prevent pills from stretching
-  // when the select is full width. The grid layout uses gridAutoFlow: column
-  // which stretches items by default.
-  fullWidthMultiSelect: css.css({
-    width: "100%",
-    // Target the value container (has data-testid) which uses grid layout
-    "& [data-testid]": {
-      gridAutoColumns: "max-content",
-      justifyItems: "start"
-    }
-  }),
   wrapper: css.css({
     display: "flex"
   }),
@@ -10413,31 +10278,22 @@ function toMetricFindValues(valueProp, textProp) {
           const value = fieldValue(indices.value);
           const text = fieldValue(indices.text);
           const expandable = fieldValue(indices.expandable);
-          if (!indices.properties.length) {
-            metrics.push({
-              value: value || text,
-              text: text || value,
-              expandable
-            });
-            continue;
-          }
           const properties = {};
           for (const p of indices.properties) {
             properties[p.name] = fieldValue(p.index);
           }
-          metrics.push({
-            value: value || valueProp || text || textProp,
-            text: text || textProp || value || valueProp,
-            properties,
-            expandable
-          });
+          const result = { value, text, properties };
+          if (expandable !== void 0) {
+            result.expandable = Boolean(expandable);
+          }
+          metrics.push(result);
         }
       }
       return metrics;
     })
   );
 }
-function findFieldsIndices(frames) {
+function findFieldsIndices(frames, valueProp, textProp) {
   const indices = {
     value: -1,
     text: -1,
@@ -10449,17 +10305,11 @@ function findFieldsIndices(frames) {
       const field = frame.fields[index];
       const fieldName = data.getFieldDisplayName(field, frame, frames).toLowerCase();
       if (field.type === data.FieldType.string) {
-        if (fieldName === "value") {
-          if (indices.value === -1) {
-            indices.value = index;
-          }
-          continue;
+        if (fieldName === "value" && indices.value === -1) {
+          indices.value = index;
         }
-        if (fieldName === "text") {
-          if (indices.text === -1) {
-            indices.text = index;
-          }
-          continue;
+        if (fieldName === "text" && indices.text === -1) {
+          indices.text = index;
         }
         indices.properties.push({ name: fieldName, index });
         continue;
@@ -10471,17 +10321,20 @@ function findFieldsIndices(frames) {
   }
   return indices;
 }
-function validateIndices(indices, valueProp, textProp) {
+function validateIndices(indices) {
   const hasNoValueOrText = indices.value === -1 && indices.text === -1;
-  if (hasNoValueOrText && !indices.properties.length) {
+  if (!indices.properties.length) {
     throw new Error("Couldn't find any field of type string in the results");
   }
-  if (hasNoValueOrText && indices.properties.length === 1) {
+  if (hasNoValueOrText) {
     indices.value = indices.properties[0].index;
-    indices.properties = [];
+    indices.text = indices.properties[0].index;
+  }
+  if (indices.value === -1 && indices.text !== -1) {
+    indices.value = indices.text;
   }
-  if (hasNoValueOrText && indices.properties.length && true && true) {
-    throw new Error("Properties found in series but missing valueProp and textProp");
+  if (indices.text === -1 && indices.value !== -1) {
+    indices.text = indices.value;
   }
   return indices;
 }
@@ -16954,7 +16807,7 @@ function __variableDynamicImportRuntime0__(path) {
   switch (path) {
     case '../locales/cs-CZ/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DPdlSPjz.js'); });
     case '../locales/de-DE/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-BHIE4ld0.js'); });
-    case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DrGXYYn6.js'); });
+    case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-C9F_2hih.js'); });
     case '../locales/es-ES/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-D4tq59Dc.js'); });
     case '../locales/fr-FR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-Ce77KCbO.js'); });
     case '../locales/hu-HU/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DMYCnFop.js'); });