@grafana/scenes 6.5.1--canary.1077.13965250047.0 → 6.5.1--canary.1079.13965689803.0

package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersCombobox.js

@@ -1,16 +1,35 @@
 import React, { forwardRef, useState, useRef, useId, useMemo, useCallback, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { useStyles2, Spinner, Text } from '@grafana/ui';
-import { css, cx } from '@emotion/css';
+import { cx, css } from '@emotion/css';
 import { isMultiValueOperator } from '../AdHocFiltersVariable.js';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { LoadingOptionsPlaceholder, OptionsErrorPlaceholder, NoOptionsPlaceholder, DropdownItem, MultiValueApplyButton } from './DropdownItem.js';
-import { flattenOptionGroups, setupDropdownAccessibility, VIRTUAL_LIST_OVERSCAN, VIRTUAL_LIST_ITEM_HEIGHT_WITH_DESCRIPTION, VIRTUAL_LIST_ITEM_HEIGHT, generateFilterUpdatePayload, populateInputValueOnInputTypeSwitch, switchToNextInputType, switchInputType, generatePlaceholder, ERROR_STATE_DROPDOWN_WIDTH } from './utils.js';
+import { flattenOptionGroups, setupDropdownAccessibility, VIRTUAL_LIST_ITEM_HEIGHT_WITH_DESCRIPTION, VIRTUAL_LIST_ITEM_HEIGHT, VIRTUAL_LIST_OVERSCAN, generateFilterUpdatePayload, populateInputValueOnInputTypeSwitch, switchToNextInputType, switchInputType, generatePlaceholder, ERROR_STATE_DROPDOWN_WIDTH } from './utils.js';
 import { handleOptionGroups } from '../../utils.js';
 import { useFloatingInteractions, MAX_MENU_HEIGHT } from './useFloatingInteractions.js';
 import { MultiValuePill } from './MultiValuePill.js';
 import { getAdhocOptionSearcher } from '../getAdhocOptionSearcher.js';
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef, populateInputOnEdit }, parentRef) {
   var _a, _b, _c, _d;
   const [open, setOpen] = useState(false);
@@ -69,7 +88,6 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
         });
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   const handleLocalMultiValueChange = useCallback((selectedItem) => {
@@ -297,7 +315,6 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
             setInputType,
             handleChangeViewMode,
             refs.domReference.current,
-            // preventing focus on filter pill only when last filter for better backspace experience
             isLastFilter ? false : void 0
           );
           setActiveIndex(null);
@@ -388,202 +405,185 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
     }
   }, [activeIndex, rowVirtualizer]);
   const keyLabel = (_b = filter == null ? void 0 : filter.keyLabel) != null ? _b : filter == null ? void 0 : filter.key;
-  return /* @__PURE__ */ React.createElement("div", { className: styles.comboboxWrapper }, filter ? /* @__PURE__ */ React.createElement("div", { className: styles.pillWrapper }, (filter == null ? void 0 : filter.key) ? /* @__PURE__ */ React.createElement("div", { className: cx(styles.basePill, styles.keyPill) }, keyLabel) : null, (filter == null ? void 0 : filter.key) && (filter == null ? void 0 : filter.operator) && filterInputType !== "operator" ? /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      id: operatorIdentifier,
-      className: cx(
-        styles.basePill,
-        !filter.origin && styles.operatorPill,
-        filter.origin && styles.keyPill,
-        operatorIdentifier
-      ),
-      "aria-label": "Edit filter operator",
-      tabIndex: filter.origin ? -1 : 0,
-      onClick: (event) => {
-        if (filter.origin) {
-          handleChangeViewMode == null ? void 0 : handleChangeViewMode();
-          return;
-        }
-        event.stopPropagation();
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.comboboxWrapper
+  }, filter ? /* @__PURE__ */ React.createElement("div", {
+    className: styles.pillWrapper
+  }, (filter == null ? void 0 : filter.key) ? /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.basePill, styles.keyPill)
+  }, keyLabel) : null, (filter == null ? void 0 : filter.key) && (filter == null ? void 0 : filter.operator) && filterInputType !== "operator" ? /* @__PURE__ */ React.createElement("div", __spreadValues({
+    id: operatorIdentifier,
+    className: cx(
+      styles.basePill,
+      !filter.origin && styles.operatorPill,
+      filter.origin && styles.keyPill,
+      operatorIdentifier
+    ),
+    "aria-label": "Edit filter operator",
+    tabIndex: filter.origin ? -1 : 0,
+    onClick: (event) => {
+      if (filter.origin) {
+        handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+        return;
+      }
+      event.stopPropagation();
+      setInputValue("");
+      switchInputType("operator", setInputType, void 0, refs.domReference.current);
+    },
+    onKeyDown: (event) => {
+      if (filter.origin) {
+        return;
+      }
+      handleShiftTabInput(event, hasMultiValueOperator);
+      if (event.key === "Enter") {
         setInputValue("");
         switchInputType("operator", setInputType, void 0, refs.domReference.current);
-      },
-      onKeyDown: (event) => {
-        if (filter.origin) {
-          return;
-        }
-        handleShiftTabInput(event, hasMultiValueOperator);
-        if (event.key === "Enter") {
-          setInputValue("");
-          switchInputType("operator", setInputType, void 0, refs.domReference.current);
-        }
-      },
-      ...!filter.origin && { role: "button" }
-    },
-    filter.operator
-  ) : null, /* @__PURE__ */ React.createElement("div", { ref: multiValuePillWrapperRef }), isMultiValueEdit ? filterMultiValues.map((item, i) => /* @__PURE__ */ React.createElement(
-    MultiValuePill,
-    {
-      key: `${item.value}-${i}`,
-      item,
-      index: i,
-      handleRemoveMultiValue,
-      handleEditMultiValuePill
+      }
     }
-  )) : null) : null, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      ...getReferenceProps({
-        ref: refs.setReference,
-        onChange,
-        value: inputValue,
-        // dynamic placeholder to display operator and/or value in filter edit mode
-        placeholder: generatePlaceholder(filter, filterInputType, isMultiValueEdit, isAlwaysWip),
-        "aria-autocomplete": "list",
-        onKeyDown(event) {
-          if (!open) {
-            setOpen(true);
-            return;
-          }
-          if (filterInputType === "operator") {
-            handleShiftTabInput(event);
-          }
-          handleBackspaceInput(event, isMultiValueEdit);
-          handleTabInput(event, isMultiValueEdit);
-          handleEnterInput(event, isMultiValueEdit);
-        }
-      }),
-      className: cx(styles.inputStyle, { [styles.loadingInputPadding]: !optionsLoading }),
-      onClick: (event) => {
-        event.stopPropagation();
-        setOpen(true);
-      },
-      onFocus: () => {
+  }, !filter.origin && { role: "button" }), filter.operator) : null, /* @__PURE__ */ React.createElement("div", {
+    ref: multiValuePillWrapperRef
+  }), isMultiValueEdit ? filterMultiValues.map((item, i) => /* @__PURE__ */ React.createElement(MultiValuePill, {
+    key: `${item.value}-${i}`,
+    item,
+    index: i,
+    handleRemoveMultiValue,
+    handleEditMultiValuePill
+  })) : null) : null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, getReferenceProps({
+    ref: refs.setReference,
+    onChange,
+    value: inputValue,
+    placeholder: generatePlaceholder(filter, filterInputType, isMultiValueEdit, isAlwaysWip),
+    "aria-autocomplete": "list",
+    onKeyDown(event) {
+      if (!open) {
         setOpen(true);
+        return;
+      }
+      if (filterInputType === "operator") {
+        handleShiftTabInput(event);
       }
+      handleBackspaceInput(event, isMultiValueEdit);
+      handleTabInput(event, isMultiValueEdit);
+      handleEnterInput(event, isMultiValueEdit);
     }
-  ), optionsLoading ? /* @__PURE__ */ React.createElement(Spinner, { className: styles.loadingIndicator, inline: true }) : null, /* @__PURE__ */ React.createElement(FloatingPortal, null, open && /* @__PURE__ */ React.createElement(FloatingFocusManager, { context, initialFocus: -1, visuallyHiddenDismiss: true, modal: false }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        ...floatingStyles,
-        width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`,
-        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,
-      tabIndex: -1
+  })), {
+    className: cx(styles.inputStyle, { [styles.loadingInputPadding]: !optionsLoading }),
+    onClick: (event) => {
+      event.stopPropagation();
+      setOpen(true);
     },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
+    onFocus: () => {
+      setOpen(true);
+    }
+  })), optionsLoading ? /* @__PURE__ */ React.createElement(Spinner, {
+    className: styles.loadingIndicator,
+    inline: true
+  }) : null, /* @__PURE__ */ React.createElement(FloatingPortal, null, open && /* @__PURE__ */ React.createElement(FloatingFocusManager, {
+    context,
+    initialFocus: -1,
+    visuallyHiddenDismiss: true,
+    modal: false
+  }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    style: __spreadProps(__spreadValues({}, floatingStyles), {
+      width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`,
+      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,
+    tabIndex: -1
+  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    style: {
+      height: `${rowVirtualizer.getTotalSize() || VIRTUAL_LIST_ITEM_HEIGHT}px`
+    }
+  }, getFloatingProps()), {
+    tabIndex: -1
+  }), optionsLoading ? /* @__PURE__ */ React.createElement(LoadingOptionsPlaceholder, null) : optionsError ? /* @__PURE__ */ React.createElement(OptionsErrorPlaceholder, {
+    handleFetchOptions: () => handleFetchOptions(filterInputType)
+  }) : !filteredDropDownItems.length && (!allowCustomValue || filterInputType === "operator" || !inputValue) ? /* @__PURE__ */ React.createElement(NoOptionsPlaceholder, null) : rowVirtualizer.getVirtualItems().map((virtualItem) => {
+    var _a2;
+    const item = filteredDropDownItems[virtualItem.index];
+    const index = virtualItem.index;
+    if (item.options) {
+      return /* @__PURE__ */ React.createElement("div", {
+        key: `${item.label}+${index}`,
+        className: cx(styles.optionGroupLabel, styles.groupTopBorder),
         style: {
-          height: `${rowVirtualizer.getTotalSize() || VIRTUAL_LIST_ITEM_HEIGHT}px`
-          // fallback to 38px for loading/error/no options placeholders
-        },
-        ...getFloatingProps(),
-        tabIndex: -1
+          height: `${virtualItem.size}px`,
+          transform: `translateY(${virtualItem.start}px)`
+        }
+      }, /* @__PURE__ */ React.createElement(Text, {
+        weight: "bold",
+        variant: "bodySmall",
+        color: "secondary"
+      }, item.label));
+    }
+    const nextItem = filteredDropDownItems[virtualItem.index + 1];
+    const shouldAddBottomBorder = nextItem && !nextItem.group && !nextItem.options && item.group;
+    return /* @__PURE__ */ React.createElement(DropdownItem, __spreadProps(__spreadValues({}, getItemProps({
+      key: `${item.value}-${index}`,
+      ref(node) {
+        listRef.current[index] = node;
       },
-      optionsLoading ? /* @__PURE__ */ React.createElement(LoadingOptionsPlaceholder, null) : optionsError ? /* @__PURE__ */ React.createElement(OptionsErrorPlaceholder, { handleFetchOptions: () => handleFetchOptions(filterInputType) }) : !filteredDropDownItems.length && (!allowCustomValue || filterInputType === "operator" || !inputValue) ? /* @__PURE__ */ React.createElement(NoOptionsPlaceholder, null) : rowVirtualizer.getVirtualItems().map((virtualItem) => {
-        var _a2;
-        const item = filteredDropDownItems[virtualItem.index];
-        const index = virtualItem.index;
-        if (item.options) {
-          return /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              key: `${item.label}+${index}`,
-              className: cx(styles.optionGroupLabel, styles.groupTopBorder),
-              style: {
-                height: `${virtualItem.size}px`,
-                transform: `translateY(${virtualItem.start}px)`
-              }
-            },
-            /* @__PURE__ */ React.createElement(Text, { weight: "bold", variant: "bodySmall", color: "secondary" }, item.label)
+      onClick(event) {
+        var _a3;
+        if (filterInputType !== "value") {
+          event.stopPropagation();
+        }
+        if (isMultiValueEdit) {
+          event.preventDefault();
+          event.stopPropagation();
+          handleLocalMultiValueChange(item);
+          setInputValue("");
+          (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
+        } else {
+          model._updateFilter(
+            filter,
+            generateFilterUpdatePayload({
+              filterInputType,
+              item,
+              filter,
+              setFilterMultiValues,
+              onAddCustomValue
+            })
+          );
+          populateInputValueOnInputTypeSwitch({
+            populateInputOnEdit,
+            item,
+            filterInputType,
+            setInputValue,
+            filter
+          });
+          switchToNextInputType(
+            filterInputType,
+            setInputType,
+            handleChangeViewMode,
+            refs.domReference.current,
+            false
           );
         }
-        const nextItem = filteredDropDownItems[virtualItem.index + 1];
-        const shouldAddBottomBorder = nextItem && !nextItem.group && !nextItem.options && item.group;
-        return (
-          // key is included in getItemProps()
-          // eslint-disable-next-line react/jsx-key
-          /* @__PURE__ */ React.createElement(
-            DropdownItem,
-            {
-              ...getItemProps({
-                key: `${item.value}-${index}`,
-                ref(node) {
-                  listRef.current[index] = node;
-                },
-                onClick(event) {
-                  var _a3;
-                  if (filterInputType !== "value") {
-                    event.stopPropagation();
-                  }
-                  if (isMultiValueEdit) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    handleLocalMultiValueChange(item);
-                    setInputValue("");
-                    (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
-                  } else {
-                    model._updateFilter(
-                      filter,
-                      generateFilterUpdatePayload({
-                        filterInputType,
-                        item,
-                        filter,
-                        setFilterMultiValues,
-                        onAddCustomValue
-                      })
-                    );
-                    populateInputValueOnInputTypeSwitch({
-                      populateInputOnEdit,
-                      item,
-                      filterInputType,
-                      setInputValue,
-                      filter
-                    });
-                    switchToNextInputType(
-                      filterInputType,
-                      setInputType,
-                      handleChangeViewMode,
-                      refs.domReference.current,
-                      // explicitly preventing focus on filter pill due to a11y error
-                      false
-                    );
-                  }
-                }
-              }),
-              active: activeIndex === index,
-              addGroupBottomBorder: shouldAddBottomBorder,
-              style: {
-                height: `${virtualItem.size}px`,
-                transform: `translateY(${virtualItem.start}px)`
-              },
-              "aria-setsize": filteredDropDownItems.length,
-              "aria-posinset": virtualItem.index + 1,
-              isMultiValueEdit,
-              checked: filterMultiValues.some((val) => val.value === item.value)
-            },
-            /* @__PURE__ */ React.createElement("span", null, item.isCustom ? "Use custom value: " : "", " ", (_a2 = item.label) != null ? _a2 : item.value),
-            item.description ? /* @__PURE__ */ React.createElement("div", { className: styles.descriptionText }, item.description) : null
-          )
-        );
-      })
-    )
-  ), isMultiValueEdit && !optionsLoading && !optionsError && filteredDropDownItems.length ? /* @__PURE__ */ React.createElement(
-    MultiValueApplyButton,
-    {
-      onApply: () => {
-        handleMultiValueFilterCommit(model, filter, filterMultiValues);
+      }
+    })), {
+      active: activeIndex === index,
+      addGroupBottomBorder: shouldAddBottomBorder,
+      style: {
+        height: `${virtualItem.size}px`,
+        transform: `translateY(${virtualItem.start}px)`
       },
-      floatingElement: refs.floating.current,
-      maxOptionWidth,
-      menuHeight: Math.min(rowVirtualizer.getTotalSize(), MAX_MENU_HEIGHT)
-    }
-  ) : null))));
+      "aria-setsize": filteredDropDownItems.length,
+      "aria-posinset": virtualItem.index + 1,
+      isMultiValueEdit,
+      checked: filterMultiValues.some((val) => val.value === item.value)
+    }), /* @__PURE__ */ React.createElement("span", null, item.isCustom ? "Use custom value: " : "", " ", (_a2 = item.label) != null ? _a2 : item.value), item.description ? /* @__PURE__ */ React.createElement("div", {
+      className: styles.descriptionText
+    }, item.description) : null);
+  }))), isMultiValueEdit && !optionsLoading && !optionsError && filteredDropDownItems.length ? /* @__PURE__ */ React.createElement(MultiValueApplyButton, {
+    onApply: () => {
+      handleMultiValueFilterCommit(model, filter, filterMultiValues);
+    },
+    floatingElement: refs.floating.current,
+    maxOptionWidth,
+    menuHeight: Math.min(rowVirtualizer.getTotalSize(), MAX_MENU_HEIGHT)
+  }) : null))));
 });
 const getStyles = (theme) => ({
   comboboxWrapper: css({
@@ -595,7 +595,7 @@ const getStyles = (theme) => ({
     alignItems: "center",
     flexWrap: "wrap"
   }),
-  basePill: css({
+  basePill: css(__spreadProps(__spreadValues({
     display: "flex",
     alignItems: "center",
     background: theme.colors.action.disabledBackground,
@@ -604,10 +604,10 @@ const getStyles = (theme) => ({
     color: theme.colors.text.primary,
     overflow: "hidden",
     whiteSpace: "nowrap",
-    minHeight: theme.spacing(2.75),
-    ...theme.typography.bodySmall,
+    minHeight: theme.spacing(2.75)
+  }, theme.typography.bodySmall), {
     cursor: "pointer"
-  }),
+  })),
   keyPill: css({
     fontWeight: theme.typography.fontWeightBold,
     cursor: "default"
@@ -649,11 +649,10 @@ const getStyles = (theme) => ({
       borderTop: `1px solid ${theme.colors.border.weak}`
     }
   }),
-  descriptionText: css({
-    ...theme.typography.bodySmall,
+  descriptionText: css(__spreadProps(__spreadValues({}, theme.typography.bodySmall), {
     color: theme.colors.text.secondary,
     paddingTop: theme.spacing(0.5)
-  })
+  }))
 });
 
 export { AdHocCombobox };