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

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

@@ -1,35 +1,16 @@
 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 { cx, css } from '@emotion/css';
+import { css, cx } 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_ITEM_HEIGHT_WITH_DESCRIPTION, VIRTUAL_LIST_ITEM_HEIGHT, VIRTUAL_LIST_OVERSCAN, generateFilterUpdatePayload, populateInputValueOnInputTypeSwitch, switchToNextInputType, switchInputType, generatePlaceholder, ERROR_STATE_DROPDOWN_WIDTH } from './utils.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 { 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);
@@ -88,6 +69,7 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
         });
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   const handleLocalMultiValueChange = useCallback((selectedItem) => {
@@ -315,6 +297,7 @@ 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);
@@ -405,185 +388,202 @@ 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", __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") {
+  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();
         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
     }
-  }, !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) {
+  )) : 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: () => {
         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);
+  ), 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
     },
-    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),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
         style: {
-          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;
+          height: `${rowVirtualizer.getTotalSize() || VIRTUAL_LIST_ITEM_HEIGHT}px`
+          // fallback to 38px for loading/error/no options placeholders
+        },
+        ...getFloatingProps(),
+        tabIndex: -1
       },
-      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
+      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)
           );
         }
-      }
-    })), {
-      active: activeIndex === index,
-      addGroupBottomBorder: shouldAddBottomBorder,
-      style: {
-        height: `${virtualItem.size}px`,
-        transform: `translateY(${virtualItem.start}px)`
+        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);
       },
-      "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))));
+      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(__spreadProps(__spreadValues({
+  basePill: css({
     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,10 +649,11 @@ const getStyles = (theme) => ({
       borderTop: `1px solid ${theme.colors.border.weak}`
     }
   }),
-  descriptionText: css(__spreadProps(__spreadValues({}, theme.typography.bodySmall), {
+  descriptionText: css({
+    ...theme.typography.bodySmall,
     color: theme.colors.text.secondary,
     paddingTop: theme.spacing(0.5)
-  }))
+  })
 });
 
 export { AdHocCombobox };