@grafana/scenes 5.9.1 → 5.9.2--canary.830.10452071184.0

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

@@ -0,0 +1,387 @@
+import React, { forwardRef, useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
+import { useFloating, autoUpdate, offset, flip, size, useRole, useDismiss, useListNavigation, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useStyles2 } from '@grafana/ui';
+import { cx, css } from '@emotion/css';
+import { flushSync } from 'react-dom';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { DropdownItem } from './DropdownItem.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 }, parentRef) {
+  var _a;
+  const [open, setOpen] = useState(false);
+  const [options, setOptions] = useState([]);
+  const [optionsLoading, setOptionsLoading] = useState(false);
+  const [optionsError, setOptionsError] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [filterInputType, setInputType] = useState(!isAlwaysWip ? "value" : "key");
+  const styles = useStyles2(getStyles2);
+  const listRef = useRef([]);
+  const { _wip } = model.useState();
+  const handleResetWip = useCallback(() => {
+    if (isAlwaysWip) {
+      model._addWip();
+      setInputType("key");
+      setInputValue("");
+    }
+  }, [model, isAlwaysWip]);
+  const onOpenChange = useCallback(
+    (nextOpen, _, reason) => {
+      setOpen(nextOpen);
+      if (["outside-press", "escape-key"].includes(reason || "")) {
+        handleResetWip();
+        handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      }
+    },
+    [handleChangeViewMode, handleResetWip]
+  );
+  const filterToUse = filter || _wip;
+  const operatorIdentifier = `${(_a = filterToUse == null ? void 0 : filterToUse.key) != null ? _a : ""}-operator`;
+  const { refs, floatingStyles, context } = useFloating({
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange,
+    placement: "bottom-start",
+    middleware: [
+      offset(10),
+      flip({ padding: 10 }),
+      size({
+        apply({ availableHeight, elements }) {
+          elements.floating.style.maxHeight = `${availableHeight > 300 ? 300 : availableHeight}px`;
+        },
+        padding: 10
+      })
+    ]
+  });
+  const role = useRole(context, { role: "listbox" });
+  const dismiss = useDismiss(context, {
+    outsidePress: (event) => {
+      return !event.currentTarget.classList.contains(
+        operatorIdentifier
+      );
+    }
+  });
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    virtual: true,
+    loop: true
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);
+  useImperativeHandle(parentRef, () => () => {
+    var _a2;
+    return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+  }, [refs.domReference]);
+  function onChange(event) {
+    const value = event.target.value;
+    setInputValue(value);
+    setActiveIndex(0);
+  }
+  const filteredDropDownItems = options.filter(
+    (item) => {
+      var _a2, _b;
+      return (_b = (_a2 = item.label) != null ? _a2 : item.value) == null ? void 0 : _b.toLocaleLowerCase().startsWith(inputValue.toLowerCase());
+    }
+  );
+  const flushSyncInputType = useCallback((inputType) => {
+    flushSync(() => {
+      setInputType(inputType);
+    });
+  }, []);
+  useEffect(() => {
+    if (isAlwaysWip && !_wip) {
+      model._addWip();
+    }
+  }, [_wip]);
+  useEffect(() => {
+    if (!isAlwaysWip && refs.domReference.current) {
+      setInputType("value");
+      setInputValue("");
+      refs.domReference.current.focus();
+    }
+  }, []);
+  const handleFetchOptions = useCallback(
+    async (inputType) => {
+      setOptionsError(false);
+      setOptionsLoading(true);
+      setOptions([]);
+      let options2 = [];
+      try {
+        if (inputType === "key") {
+          options2 = await model._getKeys(null);
+        } else if (inputType === "operator") {
+          options2 = model._getOperators();
+        } else if (inputType === "value") {
+          options2 = await model._getValuesFor(filterToUse);
+        }
+        setOptions(options2);
+      } catch (e) {
+        setOptionsError(true);
+      }
+      setOptionsLoading(false);
+    },
+    [filterToUse, model]
+  );
+  const handleBackspaceInput = useCallback(
+    (event) => {
+      if (event.key === "Backspace" && !inputValue && filterInputType === "key") {
+        model._removeLastFilter();
+        handleFetchOptions(filterInputType);
+      }
+    },
+    [inputValue, filterInputType]
+  );
+  const handleTabInput = useCallback((event) => {
+    if (event.key === "Tab" && !event.shiftKey) {
+      handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      handleResetWip();
+    }
+  }, []);
+  const handleShiftTabInput = useCallback((event) => {
+    if (event.key === "Tab" && event.shiftKey) {
+      handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      handleResetWip();
+    }
+  }, []);
+  const handleEnterInput = useCallback(
+    (event) => {
+      var _a2;
+      if (event.key === "Enter" && activeIndex != null) {
+        if (filterInputType !== "value" && !filteredDropDownItems[activeIndex]) {
+          return;
+        }
+        let dropdownItem = filteredDropDownItems[activeIndex];
+        if (filterInputType === "value" && !filteredDropDownItems[activeIndex]) {
+          if (!inputValue.trim()) {
+            return;
+          }
+          dropdownItem = { value: inputValue };
+        }
+        model._updateFilter(filterToUse, filterInputType, dropdownItem);
+        setInputValue("");
+        setActiveIndex(0);
+        if (filterInputType === "key") {
+          flushSyncInputType("operator");
+        } else if (filterInputType === "operator") {
+          flushSyncInputType("value");
+        } else if (filterInputType === "value") {
+          flushSyncInputType("key");
+          handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+        }
+        (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+      }
+    },
+    [activeIndex, filterToUse, filterInputType, filteredDropDownItems, model]
+  );
+  useEffect(() => {
+    if (open) {
+      handleFetchOptions(filterInputType);
+    }
+  }, [open, filterInputType]);
+  const rowVirtualizer = useVirtualizer({
+    count: filteredDropDownItems.length,
+    getScrollElement: () => refs.floating.current,
+    estimateSize: () => 38,
+    overscan: 5
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.comboboxWrapper
+  }, filterToUse ? /* @__PURE__ */ React.createElement("div", {
+    className: styles.pillWrapper
+  }, (filterToUse == null ? void 0 : filterToUse.key) ? /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.basePill, styles.keyPill)
+  }, filterToUse.key) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && filterInputType !== "operator" ? /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.basePill, styles.operatorPill, operatorIdentifier),
+    role: "button",
+    "aria-label": "Edit filter operator",
+    tabIndex: 0,
+    onClick: (event) => {
+      var _a2;
+      event.stopPropagation();
+      flushSyncInputType("operator");
+      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+    },
+    onKeyDown: (event) => {
+      var _a2;
+      handleShiftTabInput(event);
+      if (event.key === "Enter") {
+        flushSyncInputType("operator");
+        (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+      }
+    }
+  }, filterToUse.operator) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && (filterToUse == null ? void 0 : filterToUse.value) && !["operator", "value"].includes(filterInputType) ? /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.basePill, styles.valuePill)
+  }, filterToUse.value) : null) : null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, getReferenceProps({
+    ref: refs.setReference,
+    onChange,
+    value: inputValue,
+    placeholder: !isAlwaysWip ? filterInputType === "operator" ? `${filterToUse[filterInputType]} ${filterToUse.value || ""}` : filterToUse[filterInputType] : "Filter by label values",
+    "aria-autocomplete": "list",
+    onKeyDown(event) {
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      if (filterInputType === "operator") {
+        handleShiftTabInput(event);
+      }
+      handleBackspaceInput(event);
+      handleTabInput(event);
+      handleEnterInput(event);
+    }
+  })), {
+    className: styles.inputStyle,
+    onClick: (event) => {
+      event.stopPropagation();
+      setOpen(true);
+    },
+    onFocus: () => {
+      setActiveIndex(0);
+      setOpen(true);
+    }
+  })), /* @__PURE__ */ React.createElement(FloatingPortal, null, open && /* @__PURE__ */ React.createElement(FloatingFocusManager, {
+    context,
+    initialFocus: -1,
+    visuallyHiddenDismiss: true
+  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, getFloatingProps({
+    ref: refs.setFloating,
+    style: __spreadProps(__spreadValues({}, floatingStyles), {
+      overflowY: "auto",
+      zIndex: 1
+    })
+  })), {
+    className: styles.dropdownWrapper
+  }), optionsLoading ? /* @__PURE__ */ React.createElement(LoadingOptionsPlaceholder, null) : optionsError ? /* @__PURE__ */ React.createElement(OptionsErrorPlaceholder, {
+    handleFetchOptions: () => handleFetchOptions(filterInputType)
+  }) : !filteredDropDownItems.length && filterInputType !== "value" ? /* @__PURE__ */ React.createElement(NoOptionsPlaceholder, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, rowVirtualizer.getVirtualItems().map((virtualItem) => {
+    var _a2;
+    const item = filteredDropDownItems[virtualItem.index];
+    const index = virtualItem.index;
+    return /* @__PURE__ */ React.createElement(DropdownItem, __spreadProps(__spreadValues({}, getItemProps({
+      key: `${item.value}-${index}`,
+      ref(node) {
+        listRef.current[index] = node;
+      },
+      onClick(event) {
+        var _a3;
+        if (filterInputType !== "value") {
+          event.stopPropagation();
+        }
+        model._updateFilter(filterToUse, filterInputType, item);
+        setInputValue("");
+        if (filterInputType === "key") {
+          flushSyncInputType("operator");
+        } else if (filterInputType === "operator") {
+          flushSyncInputType("value");
+        } else if (filterInputType === "value") {
+          flushSyncInputType("key");
+          handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+        }
+        (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
+      }
+    })), {
+      active: activeIndex === index
+    }), (_a2 = item.label) != null ? _a2 : item.value);
+  }), filterInputType === "value" && inputValue ? /* @__PURE__ */ React.createElement(DropdownItem, __spreadProps(__spreadValues({}, getItemProps({
+    key: "__custom_value_list_item",
+    ref(node) {
+      listRef.current[filteredDropDownItems.length ? filteredDropDownItems.length + 1 : 0] = node;
+    },
+    onClick() {
+      var _a2;
+      model._updateFilter(filterToUse, filterInputType, { value: inputValue });
+      setInputValue("");
+      flushSyncInputType("key");
+      handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+    }
+  })), {
+    active: activeIndex === (filteredDropDownItems.length ? filteredDropDownItems.length + 1 : 0)
+  }), "Use custom value: ", inputValue) : null)))));
+});
+const LoadingOptionsPlaceholder = () => {
+  return /* @__PURE__ */ React.createElement(DropdownItem, {
+    active: false
+  }, "Loading options...");
+};
+const NoOptionsPlaceholder = () => {
+  return /* @__PURE__ */ React.createElement(DropdownItem, {
+    active: false
+  }, "No options found");
+};
+const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
+  return /* @__PURE__ */ React.createElement(DropdownItem, {
+    active: false,
+    onClick: handleFetchOptions
+  }, "Error. Click to try again!");
+};
+const getStyles2 = (theme) => ({
+  comboboxWrapper: css({
+    display: "flex",
+    flexWrap: "nowrap"
+  }),
+  pillWrapper: css({
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap"
+  }),
+  basePill: css(__spreadProps(__spreadValues({
+    display: "flex",
+    alignItems: "center",
+    background: theme.colors.action.disabledBackground,
+    border: `1px solid ${theme.colors.border.weak}`,
+    padding: theme.spacing(0.125, 1, 0.125, 1),
+    color: theme.colors.text.primary,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    minHeight: "22px"
+  }, theme.typography.bodySmall), {
+    cursor: "pointer"
+  })),
+  keyPill: css({
+    fontWeight: theme.typography.fontWeightBold,
+    cursor: "default"
+  }),
+  operatorPill: css({
+    "&:hover": {
+      background: theme.colors.action.hover
+    }
+  }),
+  valuePill: css({
+    background: theme.colors.action.selected
+  }),
+  dropdownWrapper: css({
+    backgroundColor: theme.colors.background.primary,
+    color: theme.colors.text.primary,
+    boxShadow: theme.shadows.z2
+  }),
+  inputStyle: css({
+    paddingBlock: 0,
+    "&:focus": {
+      outline: "none"
+    }
+  })
+});
+
+export { AdHocCombobox };
+//# sourceMappingURL=AdHocFiltersCombobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdHocFiltersCombobox.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersCombobox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport {\n  autoUpdate,\n  size,\n  flip,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  UseFloatingOptions,\n} from '@floating-ui/react';\nimport { useStyles2 } from '@grafana/ui';\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { flushSync } from 'react-dom';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { DropdownItem } from './DropdownItem';\n\ninterface AdHocComboboxProps {\n  filter?: AdHocFilterWithLabels;\n  isAlwaysWip?: boolean;\n  model: AdHocFiltersVariable;\n  handleChangeViewMode?: () => void;\n}\n\ntype AdHocInputType = 'key' | 'operator' | 'value';\n\nexport const AdHocCombobox = forwardRef(function AdHocCombobox(\n  { filter, model, isAlwaysWip, handleChangeViewMode }: AdHocComboboxProps,\n  parentRef\n) {\n  const [open, setOpen] = useState(false);\n\n  const [options, setOptions] = useState<Array<SelectableValue<string>>>([]);\n  const [optionsLoading, setOptionsLoading] = useState<boolean>(false);\n  const [optionsError, setOptionsError] = useState<boolean>(false);\n  const [inputValue, setInputValue] = useState('');\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [filterInputType, setInputType] = useState<AdHocInputType>(!isAlwaysWip ? 'value' : 'key');\n  const styles = useStyles2(getStyles2);\n\n  const listRef = useRef<Array<HTMLElement | null>>([]);\n  const { _wip } = model.useState();\n\n  const handleResetWip = useCallback(() => {\n    if (isAlwaysWip) {\n      model._addWip();\n      setInputType('key');\n      setInputValue('');\n    }\n  }, [model, isAlwaysWip]);\n\n  const onOpenChange = useCallback<NonNullable<UseFloatingOptions['onOpenChange']>>(\n    (nextOpen, _, reason) => {\n      setOpen(nextOpen);\n      // change from filter edit mode to filter view mode when clicked\n      //   outside input or dropdown\n      if (['outside-press', 'escape-key'].includes(reason || '')) {\n        handleResetWip();\n        handleChangeViewMode?.();\n      }\n    },\n    [handleChangeViewMode, handleResetWip]\n  );\n\n  const filterToUse = filter || _wip;\n\n  const operatorIdentifier = `${filterToUse?.key ?? ''}-operator`;\n\n  const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange,\n    placement: 'bottom-start',\n    middleware: [\n      offset(10),\n      flip({ padding: 10 }),\n      size({\n        apply({ availableHeight, elements }) {\n          // limit the maxHeight of dropdown\n          elements.floating.style.maxHeight = `${availableHeight > 300 ? 300 : availableHeight}px`;\n        },\n        padding: 10,\n      }),\n    ],\n  });\n\n  const role = useRole(context, { role: 'listbox' });\n  const dismiss = useDismiss(context, {\n    // if outside click lands on operator pill, then ignore outside click\n    outsidePress: (event) => {\n      return !(event as unknown as React.MouseEvent<HTMLElement, MouseEvent>).currentTarget.classList.contains(\n        operatorIdentifier\n      );\n    },\n  });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    virtual: true,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);\n\n  // pass ability to focus on input element back to parent\n  useImperativeHandle(parentRef, () => () => refs.domReference.current?.focus(), [refs.domReference]);\n\n  function onChange(event: React.ChangeEvent<HTMLInputElement>) {\n    // // part of POC for seamless filter parser\n    // if (filterInputType === 'key') {\n    //   const lastChar = event.target.value.slice(-1);\n    //   if (['=', '!', '<', '>'].includes(lastChar)) {\n    //     const key = event.target.value.slice(0, -1);\n    //     const optionIndex = options.findIndex((option) => option.value === key);\n    //     if (optionIndex >= 0) {\n    //       model._updateFilter(filterToUse!, filterInputType, options[optionIndex]);\n    //       setInputValue(lastChar);\n    //     }\n    //     flushSync(() => {\n    //       setInputType('operator');\n    //     });\n    //     refs.domReference.current?.focus();\n    //     return;\n    //   }\n    // }\n    // if (filterInputType === 'operator') {\n    //   const lastChar = event.target.value.slice(-1);\n    //   if (/\\w/.test(lastChar)) {\n    //     const operator = event.target.value.slice(0, -1);\n    //     if (!/\\w/.test(operator)) {\n    //       const optionIndex = options.findIndex((option) => option.value === operator);\n    //       if (optionIndex >= 0) {\n    //         model._updateFilter(filterToUse!, filterInputType, options[optionIndex]);\n    //         setInputValue(lastChar);\n    //       }\n    //       flushSync(() => {\n    //         setInputType('value');\n    //       });\n    //       refs.domReference.current?.focus();\n    //       return;\n    //     }\n    //   }\n    // }\n\n    const value = event.target.value;\n    setInputValue(value);\n    setActiveIndex(0);\n  }\n\n  const filteredDropDownItems = options.filter((item) =>\n    (item.label ?? item.value)?.toLocaleLowerCase().startsWith(inputValue.toLowerCase())\n  );\n\n  const flushSyncInputType = useCallback((inputType: AdHocInputType) => {\n    flushSync(() => {\n      setInputType(inputType);\n    });\n  }, []);\n\n  // when combobox is in wip mode then check and add _wip if its missing\n  //    needed on first render and when _wip is reset on filter value commit\n  useEffect(() => {\n    if (isAlwaysWip && !_wip) {\n      model._addWip();\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [_wip]);\n\n  // when not in wip mode this is the point of switching from view to edit mode\n  //    and in this case we default to 'value' input type and focus input\n  useEffect(() => {\n    if (!isAlwaysWip && refs.domReference.current) {\n      setInputType('value');\n      setInputValue('');\n\n      refs.domReference.current.focus();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleFetchOptions = useCallback(\n    async (inputType: AdHocInputType) => {\n      setOptionsError(false);\n      setOptionsLoading(true);\n      setOptions([]);\n      let options: Array<SelectableValue<string>> = [];\n      try {\n        if (inputType === 'key') {\n          options = await model._getKeys(null);\n        } else if (inputType === 'operator') {\n          options = model._getOperators();\n        } else if (inputType === 'value') {\n          options = await model._getValuesFor(filterToUse!);\n        }\n        setOptions(options);\n      } catch (e) {\n        setOptionsError(true);\n      }\n      setOptionsLoading(false);\n    },\n    [filterToUse, model]\n  );\n\n  const handleBackspaceInput = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'Backspace' && !inputValue && filterInputType === 'key') {\n        model._removeLastFilter();\n        handleFetchOptions(filterInputType);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [inputValue, filterInputType]\n  );\n\n  const handleTabInput = useCallback((event: React.KeyboardEvent) => {\n    // change filter to view mode when navigating away with Tab key\n    //  this is needed because useDismiss only reacts to mousedown\n    if (event.key === 'Tab' && !event.shiftKey) {\n      handleChangeViewMode?.();\n      handleResetWip();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleShiftTabInput = useCallback((event: React.KeyboardEvent) => {\n    if (event.key === 'Tab' && event.shiftKey) {\n      handleChangeViewMode?.();\n      handleResetWip();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleEnterInput = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter' && activeIndex != null) {\n        // dropDownItems[activeIndex] can be undefined if we entering custom value only\n        //  therefore adding a guard for other filterInputTypes\n        if (filterInputType !== 'value' && !filteredDropDownItems[activeIndex]) {\n          return;\n        }\n\n        let dropdownItem = filteredDropDownItems[activeIndex];\n\n        // if we entering value and match no items in dropdown then\n        //   allow to enter current input value\n        if (filterInputType === 'value' && !filteredDropDownItems[activeIndex]) {\n          // prevent from adding empty value\n          if (!inputValue.trim()) {\n            return;\n          }\n          dropdownItem = { value: inputValue };\n        }\n\n        model._updateFilter(filterToUse!, filterInputType, dropdownItem);\n        setInputValue('');\n        setActiveIndex(0);\n\n        if (filterInputType === 'key') {\n          flushSyncInputType('operator');\n        } else if (filterInputType === 'operator') {\n          flushSyncInputType('value');\n        } else if (filterInputType === 'value') {\n          flushSyncInputType('key');\n\n          handleChangeViewMode?.();\n        }\n\n        refs.domReference.current?.focus();\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeIndex, filterToUse, filterInputType, filteredDropDownItems, model]\n  );\n\n  useEffect(() => {\n    if (open) {\n      handleFetchOptions(filterInputType);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, filterInputType]);\n\n  const rowVirtualizer = useVirtualizer({\n    count: filteredDropDownItems.length,\n    getScrollElement: () => refs.floating.current,\n    estimateSize: () => 38,\n    overscan: 5,\n  });\n\n  return (\n    <div className={styles.comboboxWrapper}>\n      {filterToUse ? (\n        <div className={styles.pillWrapper}>\n          {filterToUse?.key ? <div className={cx(styles.basePill, styles.keyPill)}>{filterToUse.key}</div> : null}\n          {filterToUse?.key && filterToUse?.operator && filterInputType !== 'operator' ? (\n            <div\n              className={cx(styles.basePill, styles.operatorPill, operatorIdentifier)}\n              role=\"button\"\n              aria-label=\"Edit filter operator\"\n              tabIndex={0}\n              onClick={(event) => {\n                event.stopPropagation();\n                flushSyncInputType('operator');\n\n                refs.domReference.current?.focus();\n              }}\n              onKeyDown={(event) => {\n                handleShiftTabInput(event);\n                if (event.key === 'Enter') {\n                  flushSyncInputType('operator');\n                  refs.domReference.current?.focus();\n                }\n              }}\n            >\n              {filterToUse.operator}\n            </div>\n          ) : null}\n          {filterToUse?.key &&\n          filterToUse?.operator &&\n          filterToUse?.value &&\n          !['operator', 'value'].includes(filterInputType) ? (\n            <div className={cx(styles.basePill, styles.valuePill)}>{filterToUse.value}</div>\n          ) : null}\n        </div>\n      ) : null}\n\n      <input\n        {...getReferenceProps({\n          ref: refs.setReference,\n          onChange,\n          value: inputValue,\n          // dynamic placeholder to display operator and/or value in filter edit mode\n          placeholder: !isAlwaysWip\n            ? filterInputType === 'operator'\n              ? `${filterToUse![filterInputType]} ${filterToUse!.value || ''}`\n              : filterToUse![filterInputType]\n            : 'Filter by label values',\n          'aria-autocomplete': 'list',\n          onKeyDown(event) {\n            if (!open) {\n              setOpen(true);\n              return;\n            }\n            if (filterInputType === 'operator') {\n              handleShiftTabInput(event);\n            }\n            handleBackspaceInput(event);\n            handleTabInput(event);\n            handleEnterInput(event);\n          },\n        })}\n        className={styles.inputStyle}\n        onClick={(event) => {\n          event.stopPropagation();\n          setOpen(true);\n        }}\n        onFocus={() => {\n          setActiveIndex(0);\n          setOpen(true);\n        }}\n      />\n      <FloatingPortal>\n        {open && (\n          <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss>\n            <div\n              {...getFloatingProps({\n                ref: refs.setFloating,\n                style: {\n                  ...floatingStyles,\n                  overflowY: 'auto',\n                  zIndex: 1,\n                },\n              })}\n              className={styles.dropdownWrapper}\n            >\n              {optionsLoading ? (\n                <LoadingOptionsPlaceholder />\n              ) : optionsError ? (\n                <OptionsErrorPlaceholder handleFetchOptions={() => handleFetchOptions(filterInputType)} />\n              ) : !filteredDropDownItems.length && filterInputType !== 'value' ? (\n                <NoOptionsPlaceholder />\n              ) : (\n                <>\n                  {rowVirtualizer.getVirtualItems().map((virtualItem) => {\n                    const item = filteredDropDownItems[virtualItem.index];\n                    const index = virtualItem.index;\n\n                    return (\n                      // key is included in getItemProps()\n                      // eslint-disable-next-line react/jsx-key\n                      <DropdownItem\n                        {...getItemProps({\n                          key: `${item.value!}-${index}`,\n                          ref(node) {\n                            listRef.current[index] = node;\n                          },\n                          onClick(event) {\n                            if (filterInputType !== 'value') {\n                              event.stopPropagation();\n                            }\n                            model._updateFilter(filterToUse!, filterInputType, item);\n                            setInputValue('');\n\n                            if (filterInputType === 'key') {\n                              flushSyncInputType('operator');\n                            } else if (filterInputType === 'operator') {\n                              flushSyncInputType('value');\n                            } else if (filterInputType === 'value') {\n                              flushSyncInputType('key');\n                              handleChangeViewMode?.();\n                            }\n\n                            refs.domReference.current?.focus();\n                          },\n                        })}\n                        active={activeIndex === index}\n                      >\n                        {item.label ?? item.value}\n                      </DropdownItem>\n                    );\n                  })}\n                  {filterInputType === 'value' && inputValue ? (\n                    <DropdownItem\n                      {...getItemProps({\n                        key: '__custom_value_list_item',\n                        ref(node) {\n                          listRef.current[filteredDropDownItems.length ? filteredDropDownItems.length + 1 : 0] = node;\n                        },\n                        onClick() {\n                          model._updateFilter(filterToUse!, filterInputType, { value: inputValue });\n                          setInputValue('');\n\n                          flushSyncInputType('key');\n\n                          handleChangeViewMode?.();\n                          refs.domReference.current?.focus();\n                        },\n                      })}\n                      active={activeIndex === (filteredDropDownItems.length ? filteredDropDownItems.length + 1 : 0)}\n                    >\n                      Use custom value: {inputValue}\n                    </DropdownItem>\n                  ) : null}\n                </>\n              )}\n            </div>\n          </FloatingFocusManager>\n        )}\n      </FloatingPortal>\n    </div>\n  );\n});\n\nconst LoadingOptionsPlaceholder = () => {\n  return <DropdownItem active={false}>Loading options...</DropdownItem>;\n};\n\nconst NoOptionsPlaceholder = () => {\n  return <DropdownItem active={false}>No options found</DropdownItem>;\n};\n\nconst OptionsErrorPlaceholder = ({ handleFetchOptions }: { handleFetchOptions: () => void }) => {\n  return (\n    <DropdownItem active={false} onClick={handleFetchOptions}>\n      Error. Click to try again!\n    </DropdownItem>\n  );\n};\n\nconst getStyles2 = (theme: GrafanaTheme2) => ({\n  comboboxWrapper: css({\n    display: 'flex',\n    flexWrap: 'nowrap',\n  }),\n  pillWrapper: css({\n    display: 'flex',\n    alignItems: 'center',\n    whiteSpace: 'nowrap',\n  }),\n  basePill: css({\n    display: 'flex',\n    alignItems: 'center',\n    background: theme.colors.action.disabledBackground,\n    border: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(0.125, 1, 0.125, 1),\n    color: theme.colors.text.primary,\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    minHeight: '22px',\n    ...theme.typography.bodySmall,\n    cursor: 'pointer',\n  }),\n  keyPill: css({\n    fontWeight: theme.typography.fontWeightBold,\n    cursor: 'default',\n  }),\n  operatorPill: css({\n    '&:hover': {\n      background: theme.colors.action.hover,\n    },\n  }),\n  valuePill: css({\n    background: theme.colors.action.selected,\n  }),\n  dropdownWrapper: css({\n    backgroundColor: theme.colors.background.primary,\n    color: theme.colors.text.primary,\n    boxShadow: theme.shadows.z2,\n  }),\n  inputStyle: css({\n    paddingBlock: 0,\n    '&:focus': {\n      outline: 'none',\n    },\n  }),\n});\n"],"names":["AdHocCombobox","_a","options"],"mappings":"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"}

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

@@ -0,0 +1,113 @@
+import { css } from '@emotion/css';
+import { useStyles2, IconButton } from '@grafana/ui';
+import React, { useState, useRef, useCallback } from 'react';
+import { flushSync } from 'react-dom';
+import { AdHocCombobox } from './AdHocFiltersCombobox.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));
+function AdHocFiltersComboboxEditSwitch({
+  filter,
+  model
+}) {
+  const styles = useStyles2(getStyles);
+  const [viewMode, setViewMode] = useState(true);
+  const pillWrapperRef = useRef(null);
+  const handleChangeViewMode = useCallback((event) => {
+    var _a;
+    event == null ? void 0 : event.stopPropagation();
+    let viewMode2 = false;
+    flushSync(() => {
+      setViewMode((mode) => {
+        viewMode2 = mode;
+        return !mode;
+      });
+    });
+    if (!viewMode2) {
+      (_a = pillWrapperRef.current) == null ? void 0 : _a.focus();
+    }
+  }, []);
+  if (viewMode) {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: styles.combinedFilterPill,
+      onClick: handleChangeViewMode,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          handleChangeViewMode();
+        }
+      },
+      role: "button",
+      "aria-label": `Edit filter with key ${filter.key}`,
+      tabIndex: 0,
+      ref: pillWrapperRef
+    }, /* @__PURE__ */ React.createElement("span", null, filter.key, " ", filter.operator, " ", filter.value), /* @__PURE__ */ React.createElement(IconButton, {
+      onClick: (e) => {
+        e.stopPropagation();
+        model._removeFilter(filter);
+      },
+      onKeyDownCapture: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          model._removeFilter(filter);
+        }
+      },
+      name: "times",
+      size: "md",
+      className: styles.removeButton,
+      tooltip: `Remove filter with key ${filter.key}`
+    }));
+  }
+  return /* @__PURE__ */ React.createElement(AdHocCombobox, {
+    filter,
+    model,
+    handleChangeViewMode
+  });
+}
+const getStyles = (theme) => ({
+  combinedFilterPill: css(__spreadProps(__spreadValues({
+    display: "flex",
+    alignItems: "center",
+    background: theme.colors.action.selected,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`,
+    padding: theme.spacing(0.125, 0, 0.125, 1),
+    color: theme.colors.text.primary,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    minHeight: "22px"
+  }, theme.typography.bodySmall), {
+    fontWeight: theme.typography.fontWeightBold,
+    cursor: "pointer",
+    "&:hover": {
+      background: theme.colors.action.hover
+    }
+  })),
+  removeButton: css({
+    marginInline: theme.spacing(0.5),
+    cursor: "pointer",
+    "&:hover": {
+      color: theme.colors.text.primary
+    }
+  })
+});
+
+export { AdHocFiltersComboboxEditSwitch };
+//# sourceMappingURL=AdHocFiltersComboboxEditSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdHocFiltersComboboxEditSwitch.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxEditSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, IconButton } from '@grafana/ui';\nimport React, { useState, useRef, useCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\n\nexport function AdHocFiltersComboboxEditSwitch({\n  filter,\n  model,\n}: {\n  filter: AdHocFilterWithLabels;\n  model: AdHocFiltersVariable;\n}) {\n  const styles = useStyles2(getStyles);\n  const [viewMode, setViewMode] = useState(true);\n  const pillWrapperRef = useRef<HTMLDivElement>(null);\n\n  const handleChangeViewMode = useCallback((event?: React.MouseEvent) => {\n    event?.stopPropagation();\n    let viewMode = false;\n    flushSync(() => {\n      setViewMode((mode) => {\n        viewMode = mode;\n        return !mode;\n      });\n    });\n    if (!viewMode) {\n      pillWrapperRef.current?.focus();\n    }\n  }, []);\n\n  if (viewMode) {\n    return (\n      <div\n        className={styles.combinedFilterPill}\n        onClick={handleChangeViewMode}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            handleChangeViewMode();\n          }\n        }}\n        role=\"button\"\n        aria-label={`Edit filter with key ${filter.key}`}\n        tabIndex={0}\n        ref={pillWrapperRef}\n      >\n        <span>\n          {filter.key} {filter.operator} {filter.value}\n        </span>\n        <IconButton\n          onClick={(e) => {\n            e.stopPropagation();\n            model._removeFilter(filter);\n          }}\n          onKeyDownCapture={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              e.stopPropagation();\n              model._removeFilter(filter);\n            }\n          }}\n          name=\"times\"\n          size=\"md\"\n          className={styles.removeButton}\n          tooltip={`Remove filter with key ${filter.key}`}\n        />\n      </div>\n    );\n  }\n\n  return <AdHocCombobox filter={filter} model={model} handleChangeViewMode={handleChangeViewMode} />;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  combinedFilterPill: css({\n    display: 'flex',\n    alignItems: 'center',\n    background: theme.colors.action.selected,\n    borderRadius: theme.shape.radius.default,\n    border: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(0.125, 0, 0.125, 1),\n    color: theme.colors.text.primary,\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    minHeight: '22px',\n    ...theme.typography.bodySmall,\n    fontWeight: theme.typography.fontWeightBold,\n    cursor: 'pointer',\n\n    '&:hover': {\n      background: theme.colors.action.hover,\n    },\n  }),\n  removeButton: css({\n    marginInline: theme.spacing(0.5),\n    cursor: 'pointer',\n    '&:hover': {\n      color: theme.colors.text.primary,\n    },\n  }),\n});\n"],"names":["viewMode"],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+import { css } from '@emotion/css';
+import { useStyles2, Icon } from '@grafana/ui';
+import React, { memo, useRef } from 'react';
+import { AdHocCombobox } from './AdHocFiltersCombobox.js';
+import { AdHocFiltersComboboxEditSwitch } from './AdHocFiltersComboboxEditSwitch.js';
+
+const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer2({
+  model
+}) {
+  const { filters } = model.useState();
+  const styles = useStyles2(getStyles);
+  const focusOnInputRef = useRef();
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.comboboxWrapper,
+    onClick: () => {
+      var _a;
+      (_a = focusOnInputRef.current) == null ? void 0 : _a.call(focusOnInputRef);
+    }
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: "filter",
+    className: styles.filterIcon,
+    size: "lg"
+  }), filters.map((filter, index) => /* @__PURE__ */ React.createElement(AdHocFiltersComboboxEditSwitch, {
+    key: index,
+    filter,
+    model
+  })), /* @__PURE__ */ React.createElement(AdHocCombobox, {
+    model,
+    isAlwaysWip: true,
+    ref: focusOnInputRef
+  }));
+});
+const getStyles = (theme) => ({
+  comboboxWrapper: css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: theme.spacing(1),
+    rowGap: theme.spacing(0.5),
+    minHeight: theme.spacing(4),
+    backgroundColor: theme.components.input.background,
+    border: `1px solid ${theme.colors.border.strong}`,
+    borderRadius: theme.shape.radius.default,
+    paddingInline: theme.spacing(1),
+    paddingBlock: theme.spacing(0.5),
+    flexGrow: 1,
+    "&:focus-within": {
+      outline: "2px dotted transparent",
+      outlineOffset: "2px",
+      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
+      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
+      transitionDuration: "0.2s",
+      transitionProperty: "outline, outline-offset, box-shadow"
+    }
+  }),
+  filterIcon: css({
+    color: theme.colors.text.secondary,
+    alignSelf: "center"
+  })
+});
+
+export { AdHocFiltersComboboxRenderer };
+//# sourceMappingURL=AdHocFiltersComboboxRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdHocFiltersComboboxRenderer.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\nimport React, { memo, useRef } from 'react';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { AdHocFiltersComboboxEditSwitch } from './AdHocFiltersComboboxEditSwitch';\n\nexport const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({\n  model,\n}: {\n  model: AdHocFiltersVariable;\n}) {\n  const { filters } = model.useState();\n  const styles = useStyles2(getStyles);\n  const focusOnInputRef = useRef<() => void>();\n\n  return (\n    <div\n      className={styles.comboboxWrapper}\n      onClick={() => {\n        focusOnInputRef.current?.();\n      }}\n    >\n      <Icon name=\"filter\" className={styles.filterIcon} size=\"lg\" />\n\n      {filters.map((filter, index) => (\n        <AdHocFiltersComboboxEditSwitch key={index} filter={filter} model={model} />\n      ))}\n\n      <AdHocCombobox model={model} isAlwaysWip ref={focusOnInputRef} />\n    </div>\n  );\n});\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  comboboxWrapper: css({\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: theme.spacing(1),\n    rowGap: theme.spacing(0.5),\n    minHeight: theme.spacing(4),\n    backgroundColor: theme.components.input.background,\n    border: `1px solid ${theme.colors.border.strong}`,\n    borderRadius: theme.shape.radius.default,\n    paddingInline: theme.spacing(1),\n    paddingBlock: theme.spacing(0.5),\n    flexGrow: 1,\n\n    '&:focus-within': {\n      outline: '2px dotted transparent',\n      outlineOffset: '2px',\n      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n      transitionDuration: '0.2s',\n      transitionProperty: 'outline, outline-offset, box-shadow',\n    },\n  }),\n  filterIcon: css({\n    color: theme.colors.text.secondary,\n    alignSelf: 'center',\n  }),\n});\n"],"names":["AdHocFiltersComboboxRenderer"],"mappings":";;;;;;AAQa,MAAA,4BAAA,GAA+B,IAAK,CAAA,SAASA,6BAA6B,CAAA;AAAA,EACrF,KAAA;AACF,CAEG,EAAA;AACD,EAAA,MAAM,EAAE,OAAA,EAAY,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACnC,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AACnC,EAAA,MAAM,kBAAkB,MAAmB,EAAA,CAAA;AAE3C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,MAAO,CAAA,eAAA;AAAA,IAClB,SAAS,MAAM;AApBrB,MAAA,IAAA,EAAA,CAAA;AAqBQ,MAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAhB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,eAAA,CAAA,CAAA;AAAA,KACF;AAAA,GAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAK,EAAA,QAAA;AAAA,IAAS,WAAW,MAAO,CAAA,UAAA;AAAA,IAAY,IAAK,EAAA,IAAA;AAAA,GAAK,GAE3D,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,0BACnB,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA;AAAA,IAA+B,GAAK,EAAA,KAAA;AAAA,IAAO,MAAA;AAAA,IAAgB,KAAA;AAAA,GAAc,CAC3E,mBAEA,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,KAAA;AAAA,IAAc,WAAW,EAAA,IAAA;AAAA,IAAC,GAAK,EAAA,eAAA;AAAA,GAAiB,CACjE,CAAA,CAAA;AAEJ,CAAC,EAAA;AAED,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,iBAAiB,GAAI,CAAA;AAAA,IACnB,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IACzB,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,eAAA,EAAiB,KAAM,CAAA,UAAA,CAAW,KAAM,CAAA,UAAA;AAAA,IACxC,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,MAAA,CAAA,CAAA;AAAA,IACzC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,IACjC,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC9B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC/B,QAAU,EAAA,CAAA;AAAA,IAEV,gBAAkB,EAAA;AAAA,MAChB,OAAS,EAAA,wBAAA;AAAA,MACT,aAAe,EAAA,KAAA;AAAA,MACf,SAAA,EAAW,aAAa,KAAM,CAAA,MAAA,CAAO,WAAW,MAAuB,CAAA,cAAA,EAAA,KAAA,CAAM,OAAO,OAAQ,CAAA,IAAA,CAAA,CAAA;AAAA,MAC5F,wBAA0B,EAAA,CAAA,8BAAA,CAAA;AAAA,MAC1B,kBAAoB,EAAA,MAAA;AAAA,MACpB,kBAAoB,EAAA,qCAAA;AAAA,KACtB;AAAA,GACD,CAAA;AAAA,EACD,YAAY,GAAI,CAAA;AAAA,IACd,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA;AACH,CAAA,CAAA;;;;"}