@grafana/scenes 6.49.1--canary.1313.20102090431.0 → 6.50.0--canary.1315.20135305834.0

package/dist/index.js

@@ -15,8 +15,10 @@ var ui = require('@grafana/ui');
 var e2eSelectors = require('@grafana/e2e-selectors');
 var css = require('@emotion/css');
 var uFuzzy = require('@leeoniya/ufuzzy');
+var react = require('@emotion/react');
+require('react-dom');
 var reactUse = require('react-use');
-var react = require('@floating-ui/react');
+var react$1 = require('@floating-ui/react');
 var reactVirtual = require('@tanstack/react-virtual');
 var operators = require('rxjs/operators');
 var ReactGridLayout = require('react-grid-layout');
@@ -2915,6 +2917,158 @@ function findActiveGroupByVariablesByUid(dsUid) {
   return void 0;
 }
 
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+
+function _defineProperty(e, r, t) {
+  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
+
+// ==============================
+// NO OP
+// ==============================
+
+var noop = function noop() {};
+
+// ==============================
+// Get Style Props
+// ==============================
+
+var getStyleProps = function getStyleProps(props, name, classNamesState) {
+  var cx = props.cx,
+    getStyles = props.getStyles,
+    getClassNames = props.getClassNames,
+    className = props.className;
+  return {
+    css: getStyles(name, props),
+    className: cx(classNamesState !== null && classNamesState !== void 0 ? classNamesState : {}, getClassNames(name, props), className)
+  };
+};
+var options = {
+  get passive() {
+    return true;
+  }
+};
+// check for SSR
+var w = typeof window !== 'undefined' ? window : {};
+if (w.addEventListener && w.removeEventListener) {
+  w.addEventListener('p', noop, options);
+  w.removeEventListener('p', noop, false);
+}
+var Menu = function Menu(props) {
+  var children = props.children,
+    innerRef = props.innerRef,
+    innerProps = props.innerProps;
+  return react.jsx("div", _extends({}, getStyleProps(props, 'menu', {
+    menu: true
+  }), {
+    ref: innerRef
+  }, innerProps), children);
+};
+var Menu$1 = Menu;
+
+var _templateObject;
+
+// ==============================
+// Dropdown & Clear Icons
+// ==============================
+process.env.NODE_ENV === "production" ? {
+  } : {
+  };
+
+// ==============================
+// Loading
+// ==============================
+
+react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0%, 80%, 100% { opacity: 0; }\n  40% { opacity: 1; }\n"])));
+var spacingStyle = {
+  gridArea: '1 / 2',
+  font: 'inherit',
+  minWidth: '2px',
+  border: 0,
+  margin: 0,
+  outline: 0,
+  padding: 0
+};
+({
+  '&:after': _objectSpread2({
+    content: 'attr(data-value) " "',
+    visibility: 'hidden',
+    whiteSpace: 'pre'
+  }, spacingStyle)
+});
+
+var components = {
+  Menu: Menu$1};
+
 const REGEXP_NON_ASCII = /[^ -~]/m;
 const REGEXP_ONLY_SYMBOLS = /^[\x21-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]+$/m;
 const outOfOrderLimit = 5;
@@ -3749,6 +3903,7 @@ function GroupByVariableRenderer({ model }) {
       isLoading: isFetchingOptions,
       components: {
         Option: OptionWithCheckbox,
+        Menu: WideMenu,
         ...hasDefaultValue ? {
           IndicatorsContainer: () => /* @__PURE__ */ React__default.default.createElement(DefaultGroupByCustomIndicatorContainer, { model })
         } : {},
@@ -3772,6 +3927,7 @@ function GroupByVariableRenderer({ model }) {
           model.changeValueTo([], void 0, true);
         }
         setUncommittedValue(newValue);
+        setInputValue("");
       },
       onOpenMenu: async () => {
         const profiler = getInteractionTracker(model);
@@ -3815,6 +3971,7 @@ function GroupByVariableRenderer({ model }) {
       hideSelectedOptions: false,
       noValueOnClear: true,
       isLoading: isFetchingOptions,
+      components: { Menu: WideMenu },
       onInputChange,
       onChange: (newValue, action) => {
         if (action.action === "clear") {
@@ -3845,6 +4002,9 @@ function GroupByVariableRenderer({ model }) {
   );
 }
 const filterNoOp$1 = () => true;
+function WideMenu(props) {
+  return /* @__PURE__ */ React__default.default.createElement(components.Menu, { ...props }, /* @__PURE__ */ React__default.default.createElement("div", { style: { minWidth: "220px" } }, props.children));
+}
 function toSelectableValue$1(input) {
   const { label, value, group } = input;
   const result = {
@@ -6528,15 +6688,15 @@ const useFloatingInteractions = ({
   listRef,
   disabledIndicesRef
 }) => {
-  const { refs, floatingStyles, context } = react.useFloating({
-    whileElementsMounted: react.autoUpdate,
+  const { refs, floatingStyles, context } = react$1.useFloating({
+    whileElementsMounted: react$1.autoUpdate,
     open,
     onOpenChange,
     placement: "bottom-start",
     middleware: [
-      react.offset(10),
-      react.flip({ padding: 10 }),
-      react.size({
+      react$1.offset(10),
+      react$1.flip({ padding: 10 }),
+      react$1.size({
         apply({ availableHeight, availableWidth, elements }) {
           elements.floating.style.maxHeight = `${Math.min(MAX_MENU_HEIGHT, availableHeight)}px`;
           elements.floating.style.maxWidth = `${availableWidth}px`;
@@ -6546,8 +6706,8 @@ const useFloatingInteractions = ({
     ],
     strategy: "fixed"
   });
-  const role = react.useRole(context, { role: "listbox" });
-  const dismiss = react.useDismiss(context, {
+  const role = react$1.useRole(context, { role: "listbox" });
+  const dismiss = react$1.useDismiss(context, {
     // if outside click lands on operator pill, then ignore outside click
     outsidePress: (event) => {
       var _a;
@@ -6564,7 +6724,7 @@ const useFloatingInteractions = ({
       return true;
     }
   });
-  const listNav = react.useListNavigation(context, {
+  const listNav = react$1.useListNavigation(context, {
     listRef,
     activeIndex,
     onNavigate: setActiveIndex,
@@ -6572,7 +6732,7 @@ const useFloatingInteractions = ({
     loop: true,
     disabledIndices: disabledIndicesRef.current
   });
-  const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions([role, dismiss, listNav]);
+  const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([role, dismiss, listNav]);
   return {
     refs,
     floatingStyles,
@@ -7178,7 +7338,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
         setOpen(true);
       }
     }
-  ), optionsLoading ? /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { className: styles.loadingIndicator, inline: true }) : null, /* @__PURE__ */ React__default.default.createElement(react.FloatingPortal, null, open && /* @__PURE__ */ React__default.default.createElement(react.FloatingFocusManager, { context, initialFocus: -1, visuallyHiddenDismiss: true, modal: true }, /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+  ), optionsLoading ? /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { className: styles.loadingIndicator, inline: true }) : null, /* @__PURE__ */ React__default.default.createElement(react$1.FloatingPortal, null, open && /* @__PURE__ */ React__default.default.createElement(react$1.FloatingFocusManager, { context, initialFocus: -1, visuallyHiddenDismiss: true, modal: true }, /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
       style: {
@@ -12837,7 +12997,7 @@ function isSceneGridLayout(child) {
 }
 
 function SceneGridLayoutRenderer({ model }) {
-  const { children, isDraggable, isResizable } = model.useState();
+  const { children, isLazy, isDraggable, isResizable } = model.useState();
   const [outerDivRef, { width, height }] = reactUse.useMeasure();
   const ref = React.useRef(null);
   React.useEffect(() => {
@@ -12883,6 +13043,7 @@ function SceneGridLayoutRenderer({ model }) {
             grid: model,
             layoutItem: gridItem,
             index,
+            isLazy,
             totalCount: layout.length
           }
         ))
@@ -12899,10 +13060,25 @@ const gridWrapperClass = css.css({
 });
 const GridItemWrapper = React__default.default.forwardRef((props, ref) => {
   var _a;
-  const { grid, layoutItem, index, totalCount, style, onLoad, onChange, children, ...divProps } = props;
+  const { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children, ...divProps } = props;
   const sceneChild = grid.getSceneLayoutChild(layoutItem.i);
   const className = (_a = sceneChild.getClassName) == null ? void 0 : _a.call(sceneChild);
   const innerContent = /* @__PURE__ */ React__default.default.createElement(sceneChild.Component, { model: sceneChild, key: sceneChild.state.key });
+  if (isLazy) {
+    return /* @__PURE__ */ React__default.default.createElement(
+      LazyLoader,
+      {
+        ...divProps,
+        key: sceneChild.state.key,
+        "data-griditem-key": sceneChild.state.key,
+        className: css.cx(className, props.className),
+        style,
+        ref
+      },
+      innerContent,
+      children
+    );
+  }
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
     {