@grafana/scenes 5.34.0--canary.1004.12360255549.0 → 6.0.0--canary.979.12373078054.0

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.d.ts CHANGED
@@ -1,16 +1,15 @@
1
1
  import * as _grafana_data from '@grafana/data';
2
- import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeRange, DataQueryRequest, DataSourceGetTagKeysOptions, DataSourceGetTagValuesOptions, DataTransformContext, DataFrame, UrlQueryMap, PanelPlugin, EventBus, DataQuery as DataQuery$1, DataSourceApi, Registry, RegistryItem, ScopedVars, AdHocVariableFilter, SelectableValue, MetricFindValue, GetTagResponse, VariableRefresh as VariableRefresh$1, VariableSort, EventFilterOptions, AnnotationEvent, AnnotationQuery, DataTransformerConfig, PanelMenuItem, FieldConfigSource, PanelModel, AbsoluteTimeRange, InterpolateFunction, IconName as IconName$1, PageLayoutType, FieldConfig, FieldType, FieldValueMatcherConfig, ScopedVar, RawTimeRange } from '@grafana/data';
2
+ import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeRange, DataQueryRequest, DataSourceGetTagKeysOptions, DataSourceGetTagValuesOptions, DataTransformContext, DataFrame, EventBus, IconName, PageLayoutType, UrlQueryMap, PanelPlugin, DataQuery as DataQuery$1, DataSourceApi, Registry, RegistryItem, ScopedVars, AdHocVariableFilter, SelectableValue, MetricFindValue, GetTagResponse, VariableRefresh as VariableRefresh$1, VariableSort, EventFilterOptions, AnnotationEvent, AnnotationQuery, DataTransformerConfig, PanelMenuItem, FieldConfigSource, PanelModel, AbsoluteTimeRange, InterpolateFunction, FieldConfig, FieldType, FieldValueMatcherConfig, ScopedVar, RawTimeRange } from '@grafana/data';
3
3
  import * as React$1 from 'react';
4
- import React__default, { CSSProperties, ComponentType } from 'react';
4
+ import React__default, { ComponentType, CSSProperties } from 'react';
5
5
  import * as rxjs from 'rxjs';
6
6
  import { Observable, Unsubscribable, MonoTypeOperatorFunction, Subscription, ReplaySubject } from 'rxjs';
7
7
  import * as _grafana_schema from '@grafana/schema';
8
8
  import { VariableType, VariableHide, TimeZone, DataTopic, DataQuery, DataSourceRef, VariableRefresh, LoadingState, DashboardCursorSync, MatcherConfig, TableFieldOptions } from '@grafana/schema';
9
9
  import { LocationService, VariableInterpolation } from '@grafana/runtime';
10
10
  import { Location } from 'history';
11
- import { PanelContext, IconName } from '@grafana/ui';
11
+ import { PanelContext, IconName as IconName$1 } from '@grafana/ui';
12
12
  import ReactGridLayout from 'react-grid-layout';
13
- import { RouteComponentProps } from 'react-router-dom';
14
13
  import { Options, FieldConfig as FieldConfig$1 } from '@grafana/schema/dist/esm/raw/composable/barchart/panelcfg/x/BarChartPanelCfg_types.gen';
15
14
  import { Options as Options$1 } from '@grafana/schema/dist/esm/raw/composable/bargauge/panelcfg/x/BarGaugePanelCfg_types.gen';
16
15
  import { Options as Options$2 } from '@grafana/schema/dist/esm/raw/composable/datagrid/panelcfg/x/DatagridPanelCfg_types.gen';
@@ -352,28 +351,6 @@ interface SceneUrlSyncOptions {
352
351
  createBrowserHistorySteps?: boolean;
353
352
  }
354
353
 
355
- /**
356
- *
357
- * @param path Url to append query params to
358
- * @param searchObject Query params of the URL
359
- * @param preserveParams Query params to preserve
360
- * @returns Url with query params
361
- */
362
- declare function getUrlWithAppState(path: string, searchObject: UrlQueryMap, preserveParams?: string[]): string;
363
-
364
- interface RuntimePanelPluginOptions {
365
- /**
366
- * Please specify a pluginId that is unlikely to collide with other plugins.
367
- */
368
- pluginId: string;
369
- plugin: PanelPlugin;
370
- }
371
- /**
372
- * Provides a way to register runtime panel plugins.
373
- * Please use a pluginId that is unlikely to collide with other plugins.
374
- */
375
- declare function registerRuntimePanelPlugin({ pluginId, plugin }: RuntimePanelPluginOptions): void;
376
-
377
354
  declare abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState> implements SceneObject<TState> {
378
355
  private _isActive;
379
356
  private _state;
@@ -470,6 +447,124 @@ declare abstract class SceneObjectBase<TState extends SceneObjectState = SceneOb
470
447
  */
471
448
  declare function useSceneObjectState<TState extends SceneObjectState>(model: SceneObject<TState>, options?: UseStateHookOptions): TState;
472
449
 
450
+ interface EmbeddedSceneState extends SceneObjectState {
451
+ /**
452
+ * The main content of the scene (usually a SceneFlexLayout)
453
+ */
454
+ body: SceneObject;
455
+ /**
456
+ * Top row of variable selectors, filters, time pickers and custom actions.
457
+ */
458
+ controls?: SceneObject[];
459
+ /**
460
+ * For interoperability (used from EmbeddedSceneWithContext)
461
+ */
462
+ context?: SceneObject;
463
+ }
464
+ declare class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {
465
+ static Component: typeof EmbeddedSceneRenderer;
466
+ constructor(state: EmbeddedSceneState);
467
+ }
468
+ declare function EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>): React__default.JSX.Element;
469
+
470
+ interface SceneRouteMatch<Params extends {
471
+ [K in keyof Params]?: string;
472
+ } = {}> {
473
+ params: Params;
474
+ isExact: boolean;
475
+ path: string;
476
+ url: string;
477
+ }
478
+ interface SceneAppState extends SceneObjectState {
479
+ pages: SceneAppPageLike[];
480
+ name?: string;
481
+ urlSyncOptions?: SceneUrlSyncOptions;
482
+ }
483
+ interface SceneAppRoute {
484
+ path: string;
485
+ page?: SceneAppPageLike;
486
+ drilldown?: SceneAppDrilldownView;
487
+ }
488
+ interface SceneAppPageState extends SceneObjectState {
489
+ /** Page title or tab label */
490
+ title: string;
491
+ /** Page subTitle */
492
+ subTitle?: string | React.ReactNode;
493
+ /**
494
+ * Customize title rendering.
495
+ * Please return an unstyled h1 tag here + any additional elements you need.
496
+ **/
497
+ renderTitle?: (title: string) => React.ReactNode;
498
+ /** For an image before title */
499
+ titleImg?: string;
500
+ /** For an icon before title or tab label */
501
+ titleIcon?: IconName;
502
+ /** For a tab label suffix */
503
+ tabSuffix?: ComponentType<{
504
+ className?: string;
505
+ }>;
506
+ url: string;
507
+ routePath?: string;
508
+ /** Array of scene object to be rendered at the top right of the page, inline with the page title */
509
+ controls?: SceneObject[];
510
+ hideFromBreadcrumbs?: boolean;
511
+ tabs?: SceneAppPageLike[];
512
+ getScene?: (routeMatch: SceneRouteMatch) => EmbeddedScene;
513
+ drilldowns?: SceneAppDrilldownView[];
514
+ getParentPage?: () => SceneAppPageLike;
515
+ preserveUrlKeys?: string[];
516
+ /**
517
+ * The current initialized scene, this is set by the framework after scene url initialization
518
+ **/
519
+ initializedScene?: SceneObject;
520
+ /**
521
+ * Function that returns a fallback scene app page,
522
+ * to be rendered when url does not match current page exactly or any of tabs or drilldowns.
523
+ */
524
+ getFallbackPage?: () => SceneAppPageLike;
525
+ layout?: PageLayoutType;
526
+ }
527
+ interface SceneAppPageLike extends SceneObject<SceneAppPageState>, DataRequestEnricher {
528
+ initializeScene(scene: SceneObject): void;
529
+ /**
530
+ * @internal. Please don't call this from plugin code.
531
+ * Will call the state.getScene function with the current routeMatch and will cache the resulting Scene using the routeMatch.url as key.
532
+ */
533
+ getScene(routeMatch: SceneRouteMatch): EmbeddedScene;
534
+ /**
535
+ * @internal. Please don't call this from plugin code.
536
+ * Get drilldown scene. Will call the drilldown.getPage function with the current routeMatch and will cache the resulting page using the routeMatch.url as key.
537
+ */
538
+ getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch): SceneAppPageLike;
539
+ }
540
+ interface SceneAppDrilldownView {
541
+ routePath: string;
542
+ defaultRoute?: boolean;
543
+ getPage: (routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) => SceneAppPageLike;
544
+ }
545
+
546
+ /**
547
+ *
548
+ * @param path Url to append query params to
549
+ * @param searchObject Query params of the URL
550
+ * @param preserveParams Query params to preserve
551
+ * @returns Url with query params
552
+ */
553
+ declare function getUrlWithAppState(path: string, searchObject: UrlQueryMap, preserveParams?: string[]): string;
554
+
555
+ interface RuntimePanelPluginOptions {
556
+ /**
557
+ * Please specify a pluginId that is unlikely to collide with other plugins.
558
+ */
559
+ pluginId: string;
560
+ plugin: PanelPlugin;
561
+ }
562
+ /**
563
+ * Provides a way to register runtime panel plugins.
564
+ * Please use a pluginId that is unlikely to collide with other plugins.
565
+ */
566
+ declare function registerRuntimePanelPlugin({ pluginId, plugin }: RuntimePanelPluginOptions): void;
567
+
473
568
  declare function cloneSceneObjectState<TState extends SceneObjectState>(sceneState: TState, withState?: Partial<TState>): TState;
474
569
 
475
570
  declare abstract class RuntimeDataSource<TQuery extends DataQuery$1 = DataQuery$1> extends DataSourceApi<TQuery> {
@@ -631,9 +726,7 @@ declare class AdHocFiltersVariable extends SceneObjectBase<AdHocFiltersVariableS
631
726
  private _dataSourceSrv;
632
727
  protected _urlSync: AdHocFiltersVariableUrlSyncHandler;
633
728
  constructor(state: Partial<AdHocFiltersVariableState>);
634
- setState(update: Partial<AdHocFiltersVariableState>, options?: {
635
- skipPublish?: boolean;
636
- }): void;
729
+ setState(update: Partial<AdHocFiltersVariableState>): void;
637
730
  getValue(): VariableValue | undefined;
638
731
  _updateFilter(filter: AdHocFilterWithLabels, update: Partial<AdHocFilterWithLabels>): void;
639
732
  _removeFilter(filter: AdHocFilterWithLabels): void;
@@ -1712,26 +1805,6 @@ interface UrlSyncContextProviderProps extends SceneUrlSyncOptions {
1712
1805
  */
1713
1806
  declare function UrlSyncContextProvider({ children, scene, updateUrlOnInit, createBrowserHistorySteps, }: UrlSyncContextProviderProps): React$1.ReactNode;
1714
1807
 
1715
- interface EmbeddedSceneState extends SceneObjectState {
1716
- /**
1717
- * The main content of the scene (usually a SceneFlexLayout)
1718
- */
1719
- body: SceneObject;
1720
- /**
1721
- * Top row of variable selectors, filters, time pickers and custom actions.
1722
- */
1723
- controls?: SceneObject[];
1724
- /**
1725
- * For interoperability (used from EmbeddedSceneWithContext)
1726
- */
1727
- context?: SceneObject;
1728
- }
1729
- declare class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {
1730
- static Component: typeof EmbeddedSceneRenderer;
1731
- constructor(state: EmbeddedSceneState);
1732
- }
1733
- declare function EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>): React__default.JSX.Element;
1734
-
1735
1808
  declare function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>): React__default.JSX.Element;
1736
1809
 
1737
1810
  interface VizPanelMenuState extends SceneObjectState {
@@ -1901,7 +1974,7 @@ declare class SceneCanvasText extends SceneObjectBase<SceneCanvasTextState> {
1901
1974
  }
1902
1975
 
1903
1976
  interface ToolbarButtonState extends SceneObjectState {
1904
- icon: IconName;
1977
+ icon: IconName$1;
1905
1978
  onClick: () => void;
1906
1979
  }
1907
1980
  declare class SceneToolbarButton extends SceneObjectBase<ToolbarButtonState> {
@@ -2257,82 +2330,6 @@ declare class SplitLayout extends SceneObjectBase<SplitLayoutState> {
2257
2330
  isDraggable(): boolean;
2258
2331
  }
2259
2332
 
2260
- interface SceneRouteMatch<Params extends {
2261
- [K in keyof Params]?: string;
2262
- } = {}> {
2263
- params: Params;
2264
- isExact: boolean;
2265
- path: string;
2266
- url: string;
2267
- }
2268
- interface SceneAppState extends SceneObjectState {
2269
- pages: SceneAppPageLike[];
2270
- name?: string;
2271
- urlSyncOptions?: SceneUrlSyncOptions;
2272
- }
2273
- interface SceneAppRoute {
2274
- path: string;
2275
- page?: SceneAppPageLike;
2276
- drilldown?: SceneAppDrilldownView;
2277
- }
2278
- interface SceneAppPageState extends SceneObjectState {
2279
- /** Page title or tab label */
2280
- title: string;
2281
- /** Page subTitle */
2282
- subTitle?: string | React.ReactNode;
2283
- /**
2284
- * Customize title rendering.
2285
- * Please return an unstyled h1 tag here + any additional elements you need.
2286
- **/
2287
- renderTitle?: (title: string) => React.ReactNode;
2288
- /** For an image before title */
2289
- titleImg?: string;
2290
- /** For an icon before title or tab label */
2291
- titleIcon?: IconName$1;
2292
- /** For a tab label suffix */
2293
- tabSuffix?: ComponentType<{
2294
- className?: string;
2295
- }>;
2296
- url: string;
2297
- routePath?: string;
2298
- /** Array of scene object to be rendered at the top right of the page, inline with the page title */
2299
- controls?: SceneObject[];
2300
- hideFromBreadcrumbs?: boolean;
2301
- tabs?: SceneAppPageLike[];
2302
- getScene?: (routeMatch: SceneRouteMatch) => EmbeddedScene;
2303
- drilldowns?: SceneAppDrilldownView[];
2304
- getParentPage?: () => SceneAppPageLike;
2305
- preserveUrlKeys?: string[];
2306
- /**
2307
- * The current initialized scene, this is set by the framework after scene url initialization
2308
- **/
2309
- initializedScene?: SceneObject;
2310
- /**
2311
- * Function that returns a fallback scene app page,
2312
- * to be rendered when url does not match current page exactly or any of tabs or drilldowns.
2313
- */
2314
- getFallbackPage?: () => SceneAppPageLike;
2315
- layout?: PageLayoutType;
2316
- }
2317
- interface SceneAppPageLike extends SceneObject<SceneAppPageState>, DataRequestEnricher {
2318
- initializeScene(scene: SceneObject): void;
2319
- /**
2320
- * @internal. Please don't call this from plugin code.
2321
- * Will call the state.getScene function with the current routeMatch and will cache the resulting Scene using the routeMatch.url as key.
2322
- */
2323
- getScene(routeMatch: SceneRouteMatch): EmbeddedScene;
2324
- /**
2325
- * @internal. Please don't call this from plugin code.
2326
- * Get drilldown scene. Will call the drilldown.getPage function with the current routeMatch and will cache the resulting page using the routeMatch.url as key.
2327
- */
2328
- getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch): SceneAppPageLike;
2329
- }
2330
- interface SceneAppDrilldownView {
2331
- routePath: string;
2332
- defaultRoute?: boolean;
2333
- getPage: (routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) => SceneAppPageLike;
2334
- }
2335
-
2336
2333
  /**
2337
2334
  * Responsible for top level pages routing
2338
2335
  */
@@ -2360,10 +2357,7 @@ declare class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements
2360
2357
  getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch<{}>): SceneAppPageLike;
2361
2358
  enrichDataRequest(source: SceneObject): Partial<_grafana_data.DataQueryRequest<_grafana_data.DataQuery>> | null;
2362
2359
  }
2363
- interface SceneAppPageRendererProps extends SceneComponentProps<SceneAppPage> {
2364
- routeProps: RouteComponentProps;
2365
- }
2366
- declare function SceneAppPageRenderer({ model, routeProps }: SceneAppPageRendererProps): React__default.JSX.Element;
2360
+ declare function SceneAppPageRenderer({ model }: SceneComponentProps<SceneAppPage>): React__default.JSX.Element;
2367
2361
 
2368
2362
  interface SceneReactObjectState<TProps = {}> extends SceneObjectState {
2369
2363
  /**
@@ -2383,7 +2377,7 @@ interface SceneReactObjectState<TProps = {}> extends SceneObjectState {
2383
2377
  * A utility object that can be used to render any React component or ReactNode
2384
2378
  */
2385
2379
  declare class SceneReactObject<TProps = {}> extends SceneObjectBase<SceneReactObjectState<TProps>> {
2386
- static Component: ({ model }: SceneComponentProps<SceneReactObject>) => string | number | true | Iterable<React__default.ReactNode> | React__default.JSX.Element | null;
2380
+ static Component: ({ model }: SceneComponentProps<SceneReactObject>) => string | number | true | React__default.JSX.Element | Iterable<React__default.ReactNode> | null;
2387
2381
  }
2388
2382
 
2389
2383
  type StandardFieldConfigInterface<T, C, Prefix extends string> = {
@@ -2727,7 +2721,7 @@ interface ControlsLabelProps {
2727
2721
  description?: string;
2728
2722
  isLoading?: boolean;
2729
2723
  error?: string;
2730
- icon?: IconName$1;
2724
+ icon?: IconName;
2731
2725
  layout?: ControlsLayout;
2732
2726
  onCancel?: () => void;
2733
2727
  onRemove?: () => void;
package/dist/index.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var React = require('react');
6
5
  var reactRouterDom = require('react-router-dom');
7
6
  var data = require('@grafana/data');
8
7
  var runtime = require('@grafana/runtime');
8
+ var React = require('react');
9
9
  var rxjs = require('rxjs');
10
10
  var uuid = require('uuid');
11
11
  var lodash = require('lodash');
@@ -72,8 +72,24 @@ function getUrlWithAppState(path, searchObject, preserveParams) {
72
72
  }
73
73
  return data.urlUtil.renderUrl(data.locationUtil.assureBaseUrl(path), paramsCopy);
74
74
  }
75
- function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
76
- return React__default["default"].createElement(sceneObject.Component, { model: sceneObject, routeProps });
75
+ function useSceneRouteMatch(path) {
76
+ const params = reactRouterDom.useParams();
77
+ const location = reactRouterDom.useLocation();
78
+ const isExact = reactRouterDom.matchPath(
79
+ {
80
+ path,
81
+ caseSensitive: false,
82
+ end: true
83
+ },
84
+ location.pathname
85
+ );
86
+ const match = {
87
+ params,
88
+ isExact: isExact !== null,
89
+ path: location.pathname,
90
+ url: location.pathname
91
+ };
92
+ return match;
77
93
  }
78
94
 
79
95
  var __defProp$P = Object.defineProperty;
@@ -5062,14 +5078,14 @@ class AdHocFiltersVariable extends SceneObjectBase {
5062
5078
  patchGetAdhocFilters(this);
5063
5079
  }
5064
5080
  }
5065
- setState(update, options) {
5081
+ setState(update) {
5066
5082
  let filterExpressionChanged = false;
5067
5083
  if (update.filters && update.filters !== this.state.filters && !update.filterExpression) {
5068
5084
  update.filterExpression = renderExpression(this.state.expressionBuilder, update.filters);
5069
5085
  filterExpressionChanged = update.filterExpression !== this.state.filterExpression;
5070
5086
  }
5071
5087
  super.setState(update);
5072
- if (filterExpressionChanged && (options == null ? void 0 : options.skipPublish) !== true) {
5088
+ if (filterExpressionChanged) {
5073
5089
  this.publishEvent(new SceneVariableValueChangedEvent(this), true);
5074
5090
  }
5075
5091
  }
@@ -12438,11 +12454,12 @@ SceneApp.Component = ({ model }) => {
12438
12454
  const { pages } = model.useState();
12439
12455
  return /* @__PURE__ */ React__default["default"].createElement(SceneAppContext.Provider, {
12440
12456
  value: model
12441
- }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, pages.map((page) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
12457
+ }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, pages.map((page) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
12442
12458
  key: page.state.url,
12443
- exact: false,
12444
- path: page.state.url,
12445
- render: (props) => renderSceneComponentWithRouteProps(page, props)
12459
+ path: page.state.routePath,
12460
+ element: /* @__PURE__ */ React__default["default"].createElement(page.Component, {
12461
+ model: page
12462
+ })
12446
12463
  }))));
12447
12464
  };
12448
12465
  const SceneAppContext = React.createContext(null);
@@ -12695,11 +12712,12 @@ function getStyles(theme) {
12695
12712
  };
12696
12713
  }
12697
12714
 
12698
- function SceneAppPageView({ page, routeProps }) {
12715
+ function SceneAppPageView({ page }) {
12716
+ const routeMatch = useSceneRouteMatch(page.state.url);
12699
12717
  const containerPage = getParentPageIfTab(page);
12700
12718
  const containerState = containerPage.useState();
12701
12719
  const params = useAppQueryParams();
12702
- const scene = page.getScene(routeProps.match);
12720
+ const scene = page.getScene(routeMatch);
12703
12721
  const appContext = React.useContext(SceneAppContext);
12704
12722
  const isInitialized = containerState.initializedScene === scene;
12705
12723
  const { layout } = page.state;
@@ -12784,8 +12802,12 @@ function getParentBreadcrumbs(parent, params, searchObject) {
12784
12802
  }
12785
12803
  return void 0;
12786
12804
  }
12787
- function SceneAppDrilldownViewRender({ drilldown, parent, routeProps }) {
12788
- return renderSceneComponentWithRouteProps(parent.getDrilldownPage(drilldown, routeProps.match), routeProps);
12805
+ function SceneAppDrilldownViewRender({ drilldown, parent }) {
12806
+ const routeMatch = useSceneRouteMatch(drilldown.routePath);
12807
+ const page = parent.getDrilldownPage(drilldown, routeMatch);
12808
+ return /* @__PURE__ */ React__default["default"].createElement(page.Component, {
12809
+ model: page
12810
+ });
12789
12811
  }
12790
12812
 
12791
12813
  class SceneAppPage extends SceneObjectBase {
@@ -12833,42 +12855,40 @@ class SceneAppPage extends SceneObjectBase {
12833
12855
  }
12834
12856
  }
12835
12857
  SceneAppPage.Component = SceneAppPageRenderer;
12836
- function SceneAppPageRenderer({ model, routeProps }) {
12837
- var _a, _b;
12858
+ function SceneAppPageRenderer({ model }) {
12838
12859
  const { tabs, drilldowns } = model.useState();
12839
12860
  const routes = [];
12861
+ routes.push(getFallbackRoute(model));
12840
12862
  if (tabs && tabs.length > 0) {
12841
12863
  for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
12842
12864
  const tab = tabs[tabIndex];
12843
12865
  if (tabIndex === 0) {
12844
- routes.push(
12845
- /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
12846
- exact: true,
12847
- key: model.state.url,
12848
- path: (_a = model.state.routePath) != null ? _a : model.state.url,
12849
- render: (props) => renderSceneComponentWithRouteProps(tab, props)
12866
+ routes.push(/* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
12867
+ key: model.state.routePath,
12868
+ path: "",
12869
+ element: /* @__PURE__ */ React__default["default"].createElement(tab.Component, {
12870
+ model: tab
12850
12871
  })
12851
- );
12872
+ }));
12852
12873
  }
12853
12874
  routes.push(
12854
12875
  /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
12855
- exact: true,
12856
12876
  key: tab.state.url,
12857
- path: (_b = tab.state.routePath) != null ? _b : tab.state.url,
12858
- render: (props) => renderSceneComponentWithRouteProps(tab, props)
12877
+ path: tab.state.routePath,
12878
+ element: /* @__PURE__ */ React__default["default"].createElement(tab.Component, {
12879
+ model: tab
12880
+ })
12859
12881
  })
12860
12882
  );
12861
12883
  if (tab.state.drilldowns) {
12862
12884
  for (const drilldown of tab.state.drilldowns) {
12863
12885
  routes.push(
12864
12886
  /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
12865
- exact: false,
12866
12887
  key: drilldown.routePath,
12867
12888
  path: drilldown.routePath,
12868
- render: (props) => /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
12889
+ element: /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
12869
12890
  drilldown,
12870
- parent: tab,
12871
- routeProps: props
12891
+ parent: tab
12872
12892
  })
12873
12893
  })
12874
12894
  );
@@ -12881,51 +12901,39 @@ function SceneAppPageRenderer({ model, routeProps }) {
12881
12901
  routes.push(
12882
12902
  /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
12883
12903
  key: drilldown.routePath,
12884
- exact: false,
12885
12904
  path: drilldown.routePath,
12886
- render: (props) => /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
12905
+ Component: () => /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
12887
12906
  drilldown,
12888
- parent: model,
12889
- routeProps: props
12907
+ parent: model
12890
12908
  })
12891
12909
  })
12892
12910
  );
12893
12911
  }
12894
12912
  }
12895
- if (!tabs && isCurrentPageRouteMatch(model, routeProps.match)) {
12896
- return /* @__PURE__ */ React__default["default"].createElement(SceneAppPageView, {
12897
- page: model,
12898
- routeProps
12899
- });
12913
+ if (!tabs) {
12914
+ routes.push(/* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
12915
+ key: "home route",
12916
+ path: "/",
12917
+ element: /* @__PURE__ */ React__default["default"].createElement(SceneAppPageView, {
12918
+ page: model
12919
+ })
12920
+ }));
12900
12921
  }
12901
- routes.push(getFallbackRoute(model, routeProps));
12902
- return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, routes);
12922
+ return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, routes);
12903
12923
  }
12904
- function getFallbackRoute(page, routeProps) {
12924
+ function getFallbackRoute(page) {
12905
12925
  return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
12906
12926
  key: "fallback route",
12907
- render: (props) => {
12927
+ path: "*",
12928
+ Component: () => {
12908
12929
  var _a, _b, _c;
12909
12930
  const fallbackPage = (_c = (_b = (_a = page.state).getFallbackPage) == null ? void 0 : _b.call(_a)) != null ? _c : getDefaultFallbackPage();
12910
12931
  return /* @__PURE__ */ React__default["default"].createElement(SceneAppPageView, {
12911
- page: fallbackPage,
12912
- routeProps
12932
+ page: fallbackPage
12913
12933
  });
12914
12934
  }
12915
12935
  });
12916
12936
  }
12917
- function isCurrentPageRouteMatch(page, match) {
12918
- if (!match.isExact) {
12919
- return false;
12920
- }
12921
- if (match.url === page.state.url) {
12922
- return true;
12923
- }
12924
- if (page.parent instanceof SceneAppPage && page.parent.state.tabs[0] === page && page.parent.state.url === match.url) {
12925
- return true;
12926
- }
12927
- return false;
12928
- }
12929
12937
  function getDefaultFallbackPage() {
12930
12938
  return new SceneAppPage({
12931
12939
  url: "",