@grafana/scenes 4.6.1--canary.690.8648396229.0 → 4.7.0--canary.692.8683393495.0

package/dist/esm/core/SceneComponentWrapper.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -35,12 +35,13 @@ function SceneComponentWrapperWithoutMemo(_a) {
   var _b = _a, { model } = _b, otherProps = __objRest(_b, ["model"]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
-  const [activated, setActivated] = React.useState(false);
+  const [_, setValue] = useState(0);
   useEffect(() => {
-    setActivated(true);
-    return model.activate();
+    const unsub = model.activate();
+    setValue((prevState) => prevState + 1);
+    return unsub;
   }, [model]);
-  if (!activated) {
+  if (!model.isActive) {
     return null;
   }
   return /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, otherProps), {

package/dist/esm/core/SceneComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneComponentWrapper.js","sources":["../../../src/core/SceneComponentWrapper.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { SceneComponentProps, SceneObject } from './types';\n\nfunction SceneComponentWrapperWithoutMemo<T extends SceneObject>({ model, ...otherProps }: SceneComponentProps<T>) {\n  const Component = (model as any).constructor['Component'] ?? EmptyRenderer;\n  const [activated, setActivated] = React.useState(false);\n\n  useEffect(() => {\n    setActivated(true);\n    return model.activate();\n  }, [model]);\n\n  // By not rendering the component until the model is actiavted we make sure that parent models get activated before child models\n  // Otherwise child models would be activated before parents as that is the order of React mount effects.\n  // This also enables static logic to happen inside activate that can change state before the first render.\n  if (!activated) {\n    return null;\n  }\n\n  return <Component {...otherProps} model={model} />;\n}\n\nexport const SceneComponentWrapper = React.memo(SceneComponentWrapperWithoutMemo);\n\nfunction EmptyRenderer<T>(_: SceneComponentProps<T>): React.ReactElement | null {\n  return null;\n}\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAAS,iCAAwD,EAAkD,EAAA;AAAlD,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAJnE,KAAA,EAAA,GAIiE,EAAY,EAAA,UAAA,GAAA,SAAA,CAAZ,IAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAJnE,EAAAA,IAAAA,GAAAA,CAAAA;AAKE,EAAA,MAAM,aAAaA,GAAA,GAAA,KAAA,CAAc,WAAY,CAAA,WAAA,CAAA,KAA1B,OAAAA,GAA0C,GAAA,aAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,IAAA,OAAO,MAAM,QAAS,EAAA,CAAA;AAAA,GACxB,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAKV,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,4CAAc,UAAd,CAAA,EAAA;AAAA,IAA0B,KAAA;AAAA,GAAc,CAAA,CAAA,CAAA;AAClD,CAAA;AAEa,MAAA,qBAAA,GAAwB,KAAM,CAAA,IAAA,CAAK,gCAAgC,EAAA;AAEhF,SAAS,cAAiB,CAAsD,EAAA;AAC9E,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"SceneComponentWrapper.js","sources":["../../../src/core/SceneComponentWrapper.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { SceneComponentProps, SceneObject } from './types';\n\nfunction SceneComponentWrapperWithoutMemo<T extends SceneObject>({ model, ...otherProps }: SceneComponentProps<T>) {\n  const Component = (model as any).constructor['Component'] ?? EmptyRenderer;\n  const [_, setValue] = useState(0);\n\n  useEffect(() => {\n    const unsub = model.activate();\n    setValue((prevState) => prevState + 1);\n    return unsub;\n  }, [model]);\n\n  // By not rendering the component until the model is actiavted we make sure that parent models get activated before child models\n  // Otherwise child models would be activated before parents as that is the order of React mount effects.\n  // This also enables static logic to happen inside activate that can change state before the first render.\n  if (!model.isActive) {\n    return null;\n  }\n\n  return <Component {...otherProps} model={model} />;\n}\n\nexport const SceneComponentWrapper = React.memo(SceneComponentWrapperWithoutMemo);\n\nfunction EmptyRenderer<T>(_: SceneComponentProps<T>): React.ReactElement | null {\n  return null;\n}\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAAS,iCAAwD,EAAkD,EAAA;AAAlD,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAJnE,KAAA,EAAA,GAIiE,EAAY,EAAA,UAAA,GAAA,SAAA,CAAZ,IAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAJnE,EAAAA,IAAAA,GAAAA,CAAAA;AAKE,EAAA,MAAM,aAAaA,GAAA,GAAA,KAAA,CAAc,WAAY,CAAA,WAAA,CAAA,KAA1B,OAAAA,GAA0C,GAAA,aAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,CAAA,EAAG,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAEhC,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,KAAA,GAAQ,MAAM,QAAS,EAAA,CAAA;AAC7B,IAAS,QAAA,CAAA,CAAC,SAAc,KAAA,SAAA,GAAY,CAAC,CAAA,CAAA;AACrC,IAAO,OAAA,KAAA,CAAA;AAAA,GACT,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAKV,EAAI,IAAA,CAAC,MAAM,QAAU,EAAA;AACnB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,4CAAc,UAAd,CAAA,EAAA;AAAA,IAA0B,KAAA;AAAA,GAAc,CAAA,CAAA,CAAA;AAClD,CAAA;AAEa,MAAA,qBAAA,GAAwB,KAAM,CAAA,IAAA,CAAK,gCAAgC,EAAA;AAEhF,SAAS,cAAiB,CAAsD,EAAA;AAC9E,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

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

@@ -1,4 +1,5 @@
 import React, { useState, useMemo } from 'react';
+import { toSelectableValue } from './AdHocFiltersVariable.js';
 import { toOption } from '@grafana/data';
 import { useStyles2, Select, Field, Button } from '@grafana/ui';
 import { css } from '@emotion/css';
@@ -29,14 +30,17 @@ function AdHocFilterRenderer({ filter, model }) {
   const [state, setState] = useState({});
   const keyValue = useMemo(() => {
     if (filter.key !== "") {
-      if (state.keys) {
-        return state.keys.find((option) => option.value === filter.key);
+      if (model.state.defaultKeys) {
+        const matchingDefaultKey = model.state.defaultKeys.find((option) => option.value === filter.key);
+        if (matchingDefaultKey) {
+          return toSelectableValue(matchingDefaultKey);
+        }
       } else {
         return toOption(filter.key);
       }
     }
     return null;
-  }, [filter.key, state.keys]);
+  }, [filter.key, model.state.defaultKeys]);
   const valueValue = filter.value !== "" ? toOption(filter.value) : null;
   const valueSelect = /* @__PURE__ */ React.createElement(Select, {
     allowCustomValue: true,

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

@@ -1 +1 @@
-{"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { AdHocFiltersVariable } from './AdHocFiltersVariable';\nimport { AdHocVariableFilter, GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';\nimport { Button, Field, Select, useStyles2 } from '@grafana/ui';\nimport { css } from '@emotion/css';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\n\ninterface Props {\n  filter: AdHocVariableFilter;\n  model: AdHocFiltersVariable;\n}\n\nexport function AdHocFilterRenderer({ filter, model }: Props) {\n  const styles = useStyles2(getStyles);\n\n  // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n  // see https://github.com/grafana/grafana/issues/63558\n  // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n\n  const [state, setState] = useState<{\n    keys?: SelectableValue[];\n    values?: SelectableValue[];\n    isKeysLoading?: boolean;\n    isValuesLoading?: boolean;\n    isKeysOpen?: boolean;\n    isValuesOpen?: boolean;\n  }>({});\n\n  const keyValue = useMemo(() => {\n    if (filter.key !== '') {\n      if (state.keys) {\n        return state.keys.find(option => option.value === filter.key);\n      } else {\n        return toOption(filter.key);\n      }\n    }\n    return null;\n  }, [filter.key, state.keys])\n  const valueValue = filter.value !== '' ? toOption(filter.value) : null;\n\n  const valueSelect = (\n    <Select\n      allowCustomValue\n      formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={valueValue}\n      placeholder={'Select value'}\n      options={state.values}\n      onChange={(v) => model._updateFilter(filter, 'value', v.value)}\n      isOpen={state.isValuesOpen}\n      isLoading={state.isValuesLoading}\n      autoFocus={filter.key !== '' && filter.value === ''}\n      openMenuOnFocus={true}\n      onOpenMenu={async () => {\n        setState({ ...state, isValuesLoading: true });\n        const values = await model._getValuesFor(filter);\n        setState({ ...state, isValuesLoading: false, isValuesOpen: true, values });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isValuesOpen: false });\n      }}\n    />\n  );\n\n  const keySelect = (\n    <Select\n      // By changing the key, we reset the Select component,\n      // to ensure that the loaded values are shown after they are loaded\n      key={`${state.isValuesLoading ? 'loading' : 'loaded'}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={keyValue}\n      placeholder={'Select label'}\n      options={state.keys}\n      onChange={(v) => model._updateFilter(filter, 'key', v.value)}\n      autoFocus={filter.key === ''}\n      isOpen={state.isKeysOpen}\n      isLoading={state.isKeysLoading}\n      onOpenMenu={async () => {\n        setState({ ...state, isKeysLoading: true });\n        const keys = await model._getKeys(filter.key);\n        setState({ ...state, isKeysLoading: false, isKeysOpen: true, keys });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isKeysOpen: false });\n      }}\n      onBlur={() => {\n        if (filter.key === '') {\n          model._removeFilter(filter);\n        }\n      }}\n      openMenuOnFocus={true}\n    />\n  );\n\n  if (model.state.layout === 'vertical') {\n    if (filter.key) {\n      const label = (\n        <ControlsLabel layout=\"vertical\" label={filter.key ?? ''} onRemove={() => model._removeFilter(filter)} />\n      );\n\n      return (\n        <Field label={label} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {valueSelect}\n        </Field>\n      );\n    } else {\n      return (\n        <Field label={'Select label'} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {keySelect}\n        </Field>\n      );\n    }\n  }\n\n  return (\n    <div className={styles.wrapper} data-testid={`AdHocFilter-${filter.key}`}>\n      {keySelect}\n      <Select\n        value={filter.operator}\n        disabled={model.state.readOnly}\n        options={model._getOperators()}\n        width=\"auto\"\n        onChange={(v) => model._updateFilter(filter, 'operator', v.value)}\n      />\n      {valueSelect}\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Remove filter\"\n        title=\"Remove filter\"\n        className={styles.removeButton}\n        icon=\"times\"\n        data-testid={`AdHocFilter-remove-${filter.key ?? ''}`}\n        onClick={() => model._removeFilter(filter)}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  field: css({\n    marginBottom: 0,\n  }),\n  wrapper: css({\n    display: 'flex',\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      // Fix focus state zIndex issues\n      position: 'relative',\n      zIndex: 0,\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: 1,\n      },\n\n      '&:focus-within': {\n        zIndex: 2,\n      },\n    },\n  }),\n  widthWhenOpen: css({\n    minWidth: theme.spacing(16),\n  }),\n  removeButton: css({\n    paddingLeft: theme.spacing(3 / 2),\n    paddingRight: theme.spacing(3 / 2),\n    borderLeft: 'none',\n    // To not have button background and last select border intersect\n    position: 'relative',\n    left: '1px',\n  }),\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { AdHocFiltersVariable, toSelectableValue } from './AdHocFiltersVariable';\nimport { AdHocVariableFilter, GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';\nimport { Button, Field, Select, useStyles2 } from '@grafana/ui';\nimport { css } from '@emotion/css';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\n\ninterface Props {\n  filter: AdHocVariableFilter;\n  model: AdHocFiltersVariable;\n}\n\nexport function AdHocFilterRenderer({ filter, model }: Props) {\n  const styles = useStyles2(getStyles);\n\n  // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n  // see https://github.com/grafana/grafana/issues/63558\n  // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n\n  const [state, setState] = useState<{\n    keys?: SelectableValue[];\n    values?: SelectableValue[];\n    isKeysLoading?: boolean;\n    isValuesLoading?: boolean;\n    isKeysOpen?: boolean;\n    isValuesOpen?: boolean;\n  }>({});\n\n  const keyValue = useMemo(() => {\n    if (filter.key !== '') {\n      if (model.state.defaultKeys) {\n        const matchingDefaultKey = model.state.defaultKeys.find(option => option.value === filter.key);\n        if (matchingDefaultKey) {\n          return toSelectableValue(matchingDefaultKey);\n        }\n      } else {\n        return toOption(filter.key);\n      }\n    }\n    return null;\n  }, [filter.key, model.state.defaultKeys])\n  const valueValue = filter.value !== '' ? toOption(filter.value) : null;\n\n  const valueSelect = (\n    <Select\n      allowCustomValue\n      formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={valueValue}\n      placeholder={'Select value'}\n      options={state.values}\n      onChange={(v) => model._updateFilter(filter, 'value', v.value)}\n      isOpen={state.isValuesOpen}\n      isLoading={state.isValuesLoading}\n      autoFocus={filter.key !== '' && filter.value === ''}\n      openMenuOnFocus={true}\n      onOpenMenu={async () => {\n        setState({ ...state, isValuesLoading: true });\n        const values = await model._getValuesFor(filter);\n        setState({ ...state, isValuesLoading: false, isValuesOpen: true, values });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isValuesOpen: false });\n      }}\n    />\n  );\n\n  const keySelect = (\n    <Select\n      // By changing the key, we reset the Select component,\n      // to ensure that the loaded values are shown after they are loaded\n      key={`${state.isValuesLoading ? 'loading' : 'loaded'}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={keyValue}\n      placeholder={'Select label'}\n      options={state.keys}\n      onChange={(v) => model._updateFilter(filter, 'key', v.value)}\n      autoFocus={filter.key === ''}\n      isOpen={state.isKeysOpen}\n      isLoading={state.isKeysLoading}\n      onOpenMenu={async () => {\n        setState({ ...state, isKeysLoading: true });\n        const keys = await model._getKeys(filter.key);\n        setState({ ...state, isKeysLoading: false, isKeysOpen: true, keys });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isKeysOpen: false });\n      }}\n      onBlur={() => {\n        if (filter.key === '') {\n          model._removeFilter(filter);\n        }\n      }}\n      openMenuOnFocus={true}\n    />\n  );\n\n  if (model.state.layout === 'vertical') {\n    if (filter.key) {\n      const label = (\n        <ControlsLabel layout=\"vertical\" label={filter.key ?? ''} onRemove={() => model._removeFilter(filter)} />\n      );\n\n      return (\n        <Field label={label} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {valueSelect}\n        </Field>\n      );\n    } else {\n      return (\n        <Field label={'Select label'} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {keySelect}\n        </Field>\n      );\n    }\n  }\n\n  return (\n    <div className={styles.wrapper} data-testid={`AdHocFilter-${filter.key}`}>\n      {keySelect}\n      <Select\n        value={filter.operator}\n        disabled={model.state.readOnly}\n        options={model._getOperators()}\n        width=\"auto\"\n        onChange={(v) => model._updateFilter(filter, 'operator', v.value)}\n      />\n      {valueSelect}\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Remove filter\"\n        title=\"Remove filter\"\n        className={styles.removeButton}\n        icon=\"times\"\n        data-testid={`AdHocFilter-remove-${filter.key ?? ''}`}\n        onClick={() => model._removeFilter(filter)}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  field: css({\n    marginBottom: 0,\n  }),\n  wrapper: css({\n    display: 'flex',\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      // Fix focus state zIndex issues\n      position: 'relative',\n      zIndex: 0,\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: 1,\n      },\n\n      '&:focus-within': {\n        zIndex: 2,\n      },\n    },\n  }),\n  widthWhenOpen: css({\n    minWidth: theme.spacing(16),\n  }),\n  removeButton: css({\n    paddingLeft: theme.spacing(3 / 2),\n    paddingRight: theme.spacing(3 / 2),\n    borderLeft: 'none',\n    // To not have button background and last select border intersect\n    position: 'relative',\n    left: '1px',\n  }),\n});\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -161,12 +161,13 @@ function SceneComponentWrapperWithoutMemo(_a) {
   var _b = _a, { model } = _b, otherProps = __objRest$3(_b, ["model"]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
-  const [activated, setActivated] = React__default["default"].useState(false);
+  const [_, setValue] = React.useState(0);
   React.useEffect(() => {
-    setActivated(true);
-    return model.activate();
+    const unsub = model.activate();
+    setValue((prevState) => prevState + 1);
+    return unsub;
   }, [model]);
-  if (!activated) {
+  if (!model.isActive) {
     return null;
   }
   return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$r(__spreadValues$I({}, otherProps), {
@@ -3173,14 +3174,17 @@ function AdHocFilterRenderer({ filter, model }) {
   const [state, setState] = React.useState({});
   const keyValue = React.useMemo(() => {
     if (filter.key !== "") {
-      if (state.keys) {
-        return state.keys.find((option) => option.value === filter.key);
+      if (model.state.defaultKeys) {
+        const matchingDefaultKey = model.state.defaultKeys.find((option) => option.value === filter.key);
+        if (matchingDefaultKey) {
+          return toSelectableValue(matchingDefaultKey);
+        }
       } else {
         return data.toOption(filter.key);
       }
     }
     return null;
-  }, [filter.key, state.keys]);
+  }, [filter.key, model.state.defaultKeys]);
   const valueValue = filter.value !== "" ? data.toOption(filter.value) : null;
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
     allowCustomValue: true,