@tanstack/router-devtools 0.0.1-beta.224 → 0.0.1-beta.226

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,10 +14,7 @@
14
14
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TanStackRouterDevtools = {}, global.React));
15
15
  })(this, (function (exports, React) { 'use strict';
16
16
 
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- function _interopNamespace(e) {
20
- if (e && e.__esModule) return e;
17
+ function _interopNamespaceDefault(e) {
21
18
  var n = Object.create(null);
22
19
  if (e) {
23
20
  Object.keys(e).forEach(function (k) {
@@ -30,12 +27,11 @@
30
27
  }
31
28
  });
32
29
  }
33
- n["default"] = e;
30
+ n.default = e;
34
31
  return Object.freeze(n);
35
32
  }
36
33
 
37
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
38
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
34
+ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
39
35
 
40
36
  function _extends() {
41
37
  _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -52,18 +48,23 @@
52
48
  return _extends.apply(this, arguments);
53
49
  }
54
50
 
51
+ var isProduction$1 = "development" === 'production';
55
52
  var prefix = 'Invariant failed';
56
53
  function invariant(condition, message) {
57
54
  if (condition) {
58
55
  return;
59
56
  }
57
+ if (isProduction$1) {
58
+ throw new Error(prefix);
59
+ }
60
60
  var provided = typeof message === 'function' ? message() : message;
61
61
  var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
62
62
  throw new Error(value);
63
63
  }
64
64
 
65
+ var isProduction = "development" === 'production';
65
66
  function warning(condition, message) {
66
- {
67
+ if (!isProduction) {
67
68
  if (condition) {
68
69
  return;
69
70
  }
@@ -124,6 +125,7 @@
124
125
  // ) => () => void
125
126
  // hydrateData: <T>(key: any) => T | undefined
126
127
  // }
128
+
127
129
  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
128
130
  if (typeof document !== 'undefined') {
129
131
  window.__TSR_ROUTER_CONTEXT__ = routerContext;
@@ -147,8 +149,8 @@
147
149
  }
148
150
  };
149
151
  function useLocalStorage(key, defaultValue) {
150
- const [value, setValue] = React__default["default"].useState();
151
- React__default["default"].useEffect(() => {
152
+ const [value, setValue] = React.useState();
153
+ React.useEffect(() => {
152
154
  const initialValue = getItem(key);
153
155
  if (typeof initialValue === 'undefined' || initialValue === null) {
154
156
  setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
@@ -156,7 +158,7 @@
156
158
  setValue(initialValue);
157
159
  }
158
160
  }, [defaultValue, key]);
159
- const setter = React__default["default"].useCallback(updater => {
161
+ const setter = React.useCallback(updater => {
160
162
  setValue(old => {
161
163
  let newVal = updater;
162
164
  if (typeof updater == 'function') {
@@ -184,22 +186,22 @@
184
186
  active: '#006bff',
185
187
  warning: '#ffb200'
186
188
  };
187
- const ThemeContext = /*#__PURE__*/React__default["default"].createContext(defaultTheme);
189
+ const ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
188
190
  function ThemeProvider({
189
191
  theme,
190
192
  ...rest
191
193
  }) {
192
- return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, _extends({
194
+ return /*#__PURE__*/React.createElement(ThemeContext.Provider, _extends({
193
195
  value: theme
194
196
  }, rest));
195
197
  }
196
198
  function useTheme() {
197
- return React__default["default"].useContext(ThemeContext);
199
+ return React.useContext(ThemeContext);
198
200
  }
199
201
 
200
202
  function useMediaQuery(query) {
201
203
  // Keep track of the preference in state, start with the current match
202
- const [isMatch, setIsMatch] = React__default["default"].useState(() => {
204
+ const [isMatch, setIsMatch] = React.useState(() => {
203
205
  if (typeof window !== 'undefined') {
204
206
  return window.matchMedia && window.matchMedia(query).matches;
205
207
  }
@@ -207,7 +209,7 @@
207
209
  });
208
210
 
209
211
  // Watch for changes
210
- React__default["default"].useEffect(() => {
212
+ React.useEffect(() => {
211
213
  if (typeof window !== 'undefined') {
212
214
  if (!window.matchMedia) {
213
215
  return;
@@ -243,7 +245,7 @@
243
245
  return getStatusColor(found, theme);
244
246
  }
245
247
  function styled(type, newStyles, queries = {}) {
246
- return /*#__PURE__*/React__default["default"].forwardRef(({
248
+ return /*#__PURE__*/React.forwardRef(({
247
249
  style,
248
250
  ...rest
249
251
  }, ref) => {
@@ -255,7 +257,7 @@
255
257
  ...(typeof value === 'function' ? value(rest, theme) : value)
256
258
  } : current;
257
259
  }, {});
258
- return /*#__PURE__*/React__default["default"].createElement(type, {
260
+ return /*#__PURE__*/React.createElement(type, {
259
261
  ...rest,
260
262
  style: {
261
263
  ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
@@ -267,9 +269,9 @@
267
269
  });
268
270
  }
269
271
  function useIsMounted() {
270
- const mountedRef = React__default["default"].useRef(false);
271
- const isMounted = React__default["default"].useCallback(() => mountedRef.current, []);
272
- React__default["default"][isServer$1 ? 'useEffect' : 'useLayoutEffect'](() => {
272
+ const mountedRef = React.useRef(false);
273
+ const isMounted = React.useCallback(() => mountedRef.current, []);
274
+ React[isServer$1 ? 'useEffect' : 'useLayoutEffect'](() => {
273
275
  mountedRef.current = true;
274
276
  return () => {
275
277
  mountedRef.current = false;
@@ -295,8 +297,8 @@
295
297
  */
296
298
  function useSafeState(initialState) {
297
299
  const isMounted = useIsMounted();
298
- const [state, setState] = React__default["default"].useState(initialState);
299
- const safeSetState = React__default["default"].useCallback(value => {
300
+ const [state, setState] = React.useState(initialState);
301
+ const safeSetState = React.useCallback(value => {
300
302
  scheduleMicrotask(() => {
301
303
  if (isMounted()) {
302
304
  setState(value);
@@ -331,7 +333,6 @@
331
333
  // flexDirection: 'column',
332
334
  }
333
335
  });
334
-
335
336
  const ActivePanel = styled('div', () => ({
336
337
  flex: '1 1 500px',
337
338
  display: 'flex',
@@ -545,7 +546,7 @@
545
546
 
546
547
  const isServer = typeof window === 'undefined';
547
548
  function Logo(props) {
548
- return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
549
+ return /*#__PURE__*/React.createElement("div", _extends({}, props, {
549
550
  style: {
550
551
  ...(props.style ?? {}),
551
552
  display: 'flex',
@@ -555,11 +556,11 @@
555
556
  fontWeight: 'bolder',
556
557
  lineHeight: '1'
557
558
  }
558
- }), /*#__PURE__*/React__default["default"].createElement("div", {
559
+ }), /*#__PURE__*/React.createElement("div", {
559
560
  style: {
560
561
  letterSpacing: '-0.05rem'
561
562
  }
562
- }, "TANSTACK"), /*#__PURE__*/React__default["default"].createElement("div", {
563
+ }, "TANSTACK"), /*#__PURE__*/React.createElement("div", {
563
564
  style: {
564
565
  backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))',
565
566
  // @ts-ignore
@@ -582,8 +583,8 @@
582
583
  containerElement: Container = 'footer',
583
584
  router
584
585
  }) {
585
- const rootRef = React__default["default"].useRef(null);
586
- const panelRef = React__default["default"].useRef(null);
586
+ const rootRef = React.useRef(null);
587
+ const panelRef = React.useRef(null);
587
588
  const [isOpen, setIsOpen] = useLocalStorage('tanstackRouterDevtoolsOpen', initialIsOpen);
588
589
  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage('tanstackRouterDevtoolsHeight', null);
589
590
  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
@@ -615,13 +616,13 @@
615
616
  document.addEventListener('mousemove', run);
616
617
  document.addEventListener('mouseup', unsub);
617
618
  };
618
- React__default["default"].useEffect(() => {
619
+ React.useEffect(() => {
619
620
  setIsResolvedOpen(isOpen ?? false);
620
621
  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
621
622
 
622
623
  // Toggle panel visibility before/after transition (depending on direction).
623
624
  // Prevents focusing in a closed panel.
624
- React__default["default"].useEffect(() => {
625
+ React.useEffect(() => {
625
626
  const ref = panelRef.current;
626
627
  if (ref) {
627
628
  const handlePanelTransitionStart = () => {
@@ -643,7 +644,7 @@
643
644
  }
644
645
  return;
645
646
  }, [isResolvedOpen]);
646
- React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => {
647
+ React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
647
648
  if (isResolvedOpen) {
648
649
  const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
649
650
  const run = () => {
@@ -682,12 +683,12 @@
682
683
 
683
684
  // Do not render on the server
684
685
  if (!isMounted()) return null;
685
- return /*#__PURE__*/React__default["default"].createElement(Container, {
686
+ return /*#__PURE__*/React.createElement(Container, {
686
687
  ref: rootRef,
687
688
  className: "TanStackRouterDevtools"
688
- }, /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
689
+ }, /*#__PURE__*/React.createElement(ThemeProvider, {
689
690
  theme: defaultTheme
690
- }, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _extends({
691
+ }, /*#__PURE__*/React.createElement(TanStackRouterDevtoolsPanel, _extends({
691
692
  ref: panelRef
692
693
  }, otherPanelProps, {
693
694
  router: router,
@@ -723,7 +724,7 @@
723
724
  isOpen: isResolvedOpen,
724
725
  setIsOpen: setIsOpen,
725
726
  handleDragStart: e => handleDragStart(panelRef.current, e)
726
- })), isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement(Button, _extends({
727
+ })), isResolvedOpen ? /*#__PURE__*/React.createElement(Button, _extends({
727
728
  type: "button",
728
729
  "aria-label": "Close TanStack Router Devtools"
729
730
  }, otherCloseButtonProps, {
@@ -747,7 +748,7 @@
747
748
  }),
748
749
  ...closeButtonStyle
749
750
  }
750
- }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement("button", _extends({
751
+ }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _extends({
751
752
  type: "button"
752
753
  }, otherToggleButtonProps, {
753
754
  "aria-label": "Open TanStack Router Devtools",
@@ -782,7 +783,7 @@
782
783
  }),
783
784
  ...toggleButtonStyle
784
785
  }
785
- }), /*#__PURE__*/React__default["default"].createElement(Logo, {
786
+ }), /*#__PURE__*/React.createElement(Logo, {
786
787
  "aria-hidden": true
787
788
  })) : null);
788
789
  }
@@ -795,7 +796,7 @@
795
796
  const router = useRouter();
796
797
  const matches = router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches;
797
798
  const match = router.state.matches.find(d => d.routeId === route.id);
798
- return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
799
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
799
800
  role: "button",
800
801
  "aria-label": `Open match details for ${route.id}`,
801
802
  onClick: () => {
@@ -810,7 +811,7 @@
810
811
  alignItems: 'center',
811
812
  background: route.id === activeRouteId ? 'rgba(255,255,255,.1)' : undefined
812
813
  }
813
- }, isRoot ? null : /*#__PURE__*/React__default["default"].createElement("div", {
814
+ }, isRoot ? null : /*#__PURE__*/React.createElement("div", {
814
815
  style: {
815
816
  flex: '0 0 auto',
816
817
  width: '.7rem',
@@ -824,7 +825,7 @@
824
825
  background: getRouteStatusColor(matches, route, defaultTheme),
825
826
  opacity: match ? 1 : 0.3
826
827
  }
827
- }), /*#__PURE__*/React__default["default"].createElement(Code, {
828
+ }), /*#__PURE__*/React.createElement(Code, {
828
829
  style: {
829
830
  flex: '1 0 auto',
830
831
  display: 'flex',
@@ -834,25 +835,25 @@
834
835
  opacity: match ? 1 : 0.7,
835
836
  fontSize: '0.7rem'
836
837
  }
837
- }, /*#__PURE__*/React__default["default"].createElement("span", null, route.path || trimPath(route.id), " "), match ? /*#__PURE__*/React__default["default"].createElement("span", {
838
+ }, /*#__PURE__*/React.createElement("span", null, route.path || trimPath(route.id), " "), match ? /*#__PURE__*/React.createElement("span", {
838
839
  style: {
839
840
  opacity: 0.3
840
841
  }
841
- }, match.id) : null)), route.children?.length ? /*#__PURE__*/React__default["default"].createElement("div", {
842
+ }, match.id) : null)), route.children?.length ? /*#__PURE__*/React.createElement("div", {
842
843
  style: {
843
844
  marginLeft: isRoot ? 0 : '1rem',
844
845
  borderLeft: isRoot ? '' : `solid 1px ${defaultTheme.grayAlt}`
845
846
  }
846
847
  }, [...route.children].sort((a, b) => {
847
848
  return a.rank - b.rank;
848
- }).map(r => /*#__PURE__*/React__default["default"].createElement(RouteComp, {
849
+ }).map(r => /*#__PURE__*/React.createElement(RouteComp, {
849
850
  key: r.id,
850
851
  route: r,
851
852
  activeRouteId: activeRouteId,
852
853
  setActiveRouteId: setActiveRouteId
853
854
  }))) : null);
854
855
  }
855
- const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
856
+ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
856
857
  const {
857
858
  isOpen = true,
858
859
  setIsOpen,
@@ -868,7 +869,7 @@
868
869
 
869
870
  const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
870
871
  const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
871
- const activeMatch = React__default["default"].useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]);
872
+ const activeMatch = React.useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]);
872
873
  const hasSearch = Object.keys(router.state.location.search || {}).length;
873
874
 
874
875
  // const preloadMatches = matches.filter((match) => {
@@ -886,12 +887,12 @@
886
887
  // return () => clearInterval(interval)
887
888
  // }, [router])
888
889
 
889
- return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
890
+ return /*#__PURE__*/React.createElement(ThemeProvider, {
890
891
  theme: defaultTheme
891
- }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
892
+ }, /*#__PURE__*/React.createElement(Panel, _extends({
892
893
  ref: ref,
893
894
  className: "TanStackRouterDevtoolsPanel"
894
- }, panelProps), /*#__PURE__*/React__default["default"].createElement("style", {
895
+ }, panelProps), /*#__PURE__*/React.createElement("style", {
895
896
  dangerouslySetInnerHTML: {
896
897
  __html: `
897
898
 
@@ -937,7 +938,7 @@
937
938
 
938
939
  `
939
940
  }
940
- }), /*#__PURE__*/React__default["default"].createElement("div", {
941
+ }), /*#__PURE__*/React.createElement("div", {
941
942
  style: {
942
943
  position: 'absolute',
943
944
  left: 0,
@@ -949,7 +950,7 @@
949
950
  zIndex: 100000
950
951
  },
951
952
  onMouseDown: handleDragStart
952
- }), /*#__PURE__*/React__default["default"].createElement("div", {
953
+ }), /*#__PURE__*/React.createElement("div", {
953
954
  style: {
954
955
  flex: '1 1 500px',
955
956
  minHeight: '40%',
@@ -959,7 +960,7 @@
959
960
  display: 'flex',
960
961
  flexDirection: 'column'
961
962
  }
962
- }, /*#__PURE__*/React__default["default"].createElement("div", {
963
+ }, /*#__PURE__*/React.createElement("div", {
963
964
  style: {
964
965
  display: 'flex',
965
966
  justifyContent: 'start',
@@ -968,27 +969,27 @@
968
969
  alignItems: 'center',
969
970
  background: defaultTheme.backgroundAlt
970
971
  }
971
- }, /*#__PURE__*/React__default["default"].createElement(Logo, {
972
+ }, /*#__PURE__*/React.createElement(Logo, {
972
973
  "aria-hidden": true
973
- }), /*#__PURE__*/React__default["default"].createElement("div", {
974
+ }), /*#__PURE__*/React.createElement("div", {
974
975
  style: {
975
976
  fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
976
977
  fontWeight: 'bold'
977
978
  }
978
- }, /*#__PURE__*/React__default["default"].createElement("span", {
979
+ }, /*#__PURE__*/React.createElement("span", {
979
980
  style: {
980
981
  fontWeight: 100
981
982
  }
982
- }, "Devtools"))), /*#__PURE__*/React__default["default"].createElement("div", {
983
+ }, "Devtools"))), /*#__PURE__*/React.createElement("div", {
983
984
  style: {
984
985
  overflowY: 'auto',
985
986
  flex: '1'
986
987
  }
987
- }, /*#__PURE__*/React__default["default"].createElement("div", {
988
+ }, /*#__PURE__*/React.createElement("div", {
988
989
  style: {
989
990
  padding: '.5em'
990
991
  }
991
- }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
992
+ }, /*#__PURE__*/React.createElement(Explorer, {
992
993
  label: "Router",
993
994
  value: router,
994
995
  defaultExpanded: {
@@ -998,7 +999,7 @@
998
999
  filterSubEntries: subEntries => {
999
1000
  return subEntries.filter(d => typeof d.value !== 'function');
1000
1001
  }
1001
- })))), /*#__PURE__*/React__default["default"].createElement("div", {
1002
+ })))), /*#__PURE__*/React.createElement("div", {
1002
1003
  style: {
1003
1004
  flex: '1 1 500px',
1004
1005
  minHeight: '40%',
@@ -1008,12 +1009,12 @@
1008
1009
  display: 'flex',
1009
1010
  flexDirection: 'column'
1010
1011
  }
1011
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1012
+ }, /*#__PURE__*/React.createElement("div", {
1012
1013
  style: {
1013
1014
  flex: '1 1 auto',
1014
1015
  overflowY: 'auto'
1015
1016
  }
1016
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1017
+ }, /*#__PURE__*/React.createElement("div", {
1017
1018
  style: {
1018
1019
  padding: '.5em',
1019
1020
  background: defaultTheme.backgroundAlt,
@@ -1025,30 +1026,30 @@
1025
1026
  gap: '.5rem',
1026
1027
  fontWeight: 'bold'
1027
1028
  }
1028
- }, "Pathname", ' ', router.state.location.maskedLocation ? /*#__PURE__*/React__default["default"].createElement("div", {
1029
+ }, "Pathname", ' ', router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("div", {
1029
1030
  style: {
1030
1031
  padding: '.1rem .5rem',
1031
1032
  background: defaultTheme.warning,
1032
1033
  color: 'black',
1033
1034
  borderRadius: '.5rem'
1034
1035
  }
1035
- }, "Masked") : null), /*#__PURE__*/React__default["default"].createElement("div", {
1036
+ }, "Masked") : null), /*#__PURE__*/React.createElement("div", {
1036
1037
  style: {
1037
1038
  padding: '.5rem',
1038
1039
  display: 'flex',
1039
1040
  gap: '.5rem',
1040
1041
  alignItems: 'center'
1041
1042
  }
1042
- }, /*#__PURE__*/React__default["default"].createElement("code", {
1043
+ }, /*#__PURE__*/React.createElement("code", {
1043
1044
  style: {
1044
1045
  opacity: 0.6
1045
1046
  }
1046
- }, router.state.location.pathname), router.state.location.maskedLocation ? /*#__PURE__*/React__default["default"].createElement("code", {
1047
+ }, router.state.location.pathname), router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("code", {
1047
1048
  style: {
1048
1049
  color: defaultTheme.warning,
1049
1050
  fontWeight: 'bold'
1050
1051
  }
1051
- }, router.state.location.maskedLocation.pathname) : null), /*#__PURE__*/React__default["default"].createElement("div", {
1052
+ }, router.state.location.maskedLocation.pathname) : null), /*#__PURE__*/React.createElement("div", {
1052
1053
  style: {
1053
1054
  padding: '.5em',
1054
1055
  background: defaultTheme.backgroundAlt,
@@ -1060,7 +1061,7 @@
1060
1061
  gap: '.5rem',
1061
1062
  fontWeight: 'bold'
1062
1063
  }
1063
- }, /*#__PURE__*/React__default["default"].createElement("button", {
1064
+ }, /*#__PURE__*/React.createElement("button", {
1064
1065
  type: "button",
1065
1066
  onClick: () => {
1066
1067
  setShowMatches(false);
@@ -1074,7 +1075,7 @@
1074
1075
  color: 'inherit',
1075
1076
  cursor: 'pointer'
1076
1077
  }
1077
- }, "Routes"), "/", /*#__PURE__*/React__default["default"].createElement("button", {
1078
+ }, "Routes"), "/", /*#__PURE__*/React.createElement("button", {
1078
1079
  type: "button",
1079
1080
  onClick: () => {
1080
1081
  setShowMatches(true);
@@ -1088,13 +1089,13 @@
1088
1089
  color: 'inherit',
1089
1090
  cursor: 'pointer'
1090
1091
  }
1091
- }, "Matches")), !showMatches ? /*#__PURE__*/React__default["default"].createElement(RouteComp, {
1092
+ }, "Matches")), !showMatches ? /*#__PURE__*/React.createElement(RouteComp, {
1092
1093
  route: router.routeTree,
1093
1094
  isRoot: true,
1094
1095
  activeRouteId: activeRouteId,
1095
1096
  setActiveRouteId: setActiveRouteId
1096
- }) : /*#__PURE__*/React__default["default"].createElement("div", null, (router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches).map((match, i) => {
1097
- return /*#__PURE__*/React__default["default"].createElement("div", {
1097
+ }) : /*#__PURE__*/React.createElement("div", null, (router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches).map((match, i) => {
1098
+ return /*#__PURE__*/React.createElement("div", {
1098
1099
  key: match.routeId || i,
1099
1100
  role: "button",
1100
1101
  "aria-label": `Open match details for ${match.routeId}`,
@@ -1106,7 +1107,7 @@
1106
1107
  alignItems: 'center',
1107
1108
  background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
1108
1109
  }
1109
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1110
+ }, /*#__PURE__*/React.createElement("div", {
1110
1111
  style: {
1111
1112
  flex: '0 0 auto',
1112
1113
  width: '1.3rem',
@@ -1119,13 +1120,13 @@
1119
1120
  borderRadius: '.25rem',
1120
1121
  transition: 'all .2s ease-out'
1121
1122
  }
1122
- }), /*#__PURE__*/React__default["default"].createElement(Code, {
1123
+ }), /*#__PURE__*/React.createElement(Code, {
1123
1124
  style: {
1124
1125
  padding: '.5em',
1125
1126
  fontSize: '0.7rem'
1126
1127
  }
1127
1128
  }, `${match.id}`));
1128
- })))), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
1129
+ })))), activeMatch ? /*#__PURE__*/React.createElement(ActivePanel, null, /*#__PURE__*/React.createElement("div", {
1129
1130
  style: {
1130
1131
  padding: '.5em',
1131
1132
  background: defaultTheme.backgroundAlt,
@@ -1134,23 +1135,23 @@
1134
1135
  bottom: 0,
1135
1136
  zIndex: 1
1136
1137
  }
1137
- }, "Match Details"), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
1138
+ }, "Match Details"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
1138
1139
  style: {
1139
1140
  opacity: '.5'
1140
1141
  }
1141
- }, "ID"), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(Code, {
1142
+ }, "ID"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Code, {
1142
1143
  style: {
1143
1144
  lineHeight: '1.8em'
1144
1145
  }
1145
- }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
1146
+ }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
1146
1147
  style: {
1147
1148
  opacity: '.5'
1148
1149
  }
1149
- }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
1150
+ }, "Status"), /*#__PURE__*/React.createElement("td", null, activeMatch.status)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
1150
1151
  style: {
1151
1152
  opacity: '.5'
1152
1153
  }
1153
- }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
1154
+ }, "Last Updated"), /*#__PURE__*/React.createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
1154
1155
  style: {
1155
1156
  background: defaultTheme.backgroundAlt,
1156
1157
  padding: '.5em',
@@ -1159,15 +1160,15 @@
1159
1160
  bottom: 0,
1160
1161
  zIndex: 1
1161
1162
  }
1162
- }, "Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", {
1163
+ }, "Loader Data"), /*#__PURE__*/React.createElement("div", {
1163
1164
  style: {
1164
1165
  padding: '.5em'
1165
1166
  }
1166
- }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
1167
+ }, /*#__PURE__*/React.createElement(Explorer, {
1167
1168
  label: "loaderData",
1168
1169
  value: activeMatch.loaderData,
1169
1170
  defaultExpanded: {}
1170
- }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
1171
+ }))) : null, /*#__PURE__*/React.createElement("div", {
1171
1172
  style: {
1172
1173
  background: defaultTheme.backgroundAlt,
1173
1174
  padding: '.5em',
@@ -1176,15 +1177,15 @@
1176
1177
  bottom: 0,
1177
1178
  zIndex: 1
1178
1179
  }
1179
- }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
1180
+ }, "Explorer"), /*#__PURE__*/React.createElement("div", {
1180
1181
  style: {
1181
1182
  padding: '.5em'
1182
1183
  }
1183
- }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
1184
+ }, /*#__PURE__*/React.createElement(Explorer, {
1184
1185
  label: "Match",
1185
1186
  value: activeMatch,
1186
1187
  defaultExpanded: {}
1187
- }))) : null, hasSearch ? /*#__PURE__*/React__default["default"].createElement("div", {
1188
+ }))) : null, hasSearch ? /*#__PURE__*/React.createElement("div", {
1188
1189
  style: {
1189
1190
  flex: '1 1 500px',
1190
1191
  minHeight: '40%',
@@ -1194,7 +1195,7 @@
1194
1195
  display: 'flex',
1195
1196
  flexDirection: 'column'
1196
1197
  }
1197
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1198
+ }, /*#__PURE__*/React.createElement("div", {
1198
1199
  style: {
1199
1200
  padding: '.5em',
1200
1201
  background: defaultTheme.backgroundAlt,
@@ -1204,11 +1205,11 @@
1204
1205
  zIndex: 1,
1205
1206
  fontWeight: 'bold'
1206
1207
  }
1207
- }, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", {
1208
+ }, "Search Params"), /*#__PURE__*/React.createElement("div", {
1208
1209
  style: {
1209
1210
  padding: '.5em'
1210
1211
  }
1211
- }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
1212
+ }, /*#__PURE__*/React.createElement(Explorer, {
1212
1213
  value: router.state.location.search || {},
1213
1214
  defaultExpanded: Object.keys(router.state.location.search || {}).reduce((obj, next) => {
1214
1215
  obj[next] = {};
@@ -1220,7 +1221,5 @@
1220
1221
  exports.TanStackRouterDevtools = TanStackRouterDevtools;
1221
1222
  exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
1222
1223
 
1223
- Object.defineProperty(exports, '__esModule', { value: true });
1224
-
1225
1224
  }));
1226
1225
  //# sourceMappingURL=index.development.js.map