@tanstack/react-router-devtools 0.0.1-beta.45 → 0.0.1-beta.55

package/build/esm/index.js

@@ -11,7 +11,6 @@
 import * as React from 'react';
 import React__default from 'react';
 import { routerContext, invariant, useRouterStore, last } from '@tanstack/react-router';
-import { formatDistanceStrict } from 'date-fns';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -78,11 +77,10 @@ const defaultTheme = {
   warning: '#ffb200'
 };
 const ThemeContext = /*#__PURE__*/React__default.createContext(defaultTheme);
-function ThemeProvider(_ref) {
-  let {
-    theme,
-    ...rest
-  } = _ref;
+function ThemeProvider({
+  theme,
+  ...rest
+}) {
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, _extends({
     value: theme
   }, rest));
@@ -111,12 +109,9 @@ function useMediaQuery(query) {
       const matcher = window.matchMedia(query);
 
       // Create our handler
-      const onChange = _ref => {
-        let {
-          matches
-        } = _ref;
-        return setIsMatch(matches);
-      };
+      const onChange = ({
+        matches
+      }) => setIsMatch(matches);
 
       // Listen for changes
       matcher.addListener(onChange);
@@ -132,31 +127,15 @@ function useMediaQuery(query) {
 
 const isServer$1 = typeof window === 'undefined';
 function getStatusColor(match, theme) {
-  return match.store.isFetching ? theme.active : match.store.status === 'error' ? theme.danger : match.store.status === 'success' ? theme.success : theme.gray;
+  return match.store.state.status === 'pending' ? theme.active : match.store.state.status === 'error' ? theme.danger : match.store.state.status === 'success' ? theme.success : theme.gray;
 }
-
-// export function getQueryStatusLabel(query: Query) {
-//   return query.state.isFetching
-//     ? 'fetching'
-//     : !query.getObserversCount()
-//     ? 'inactive'
-//     : query.isStale()
-//     ? 'stale'
-//     : 'fresh'
-// }
-
-function styled(type, newStyles, queries) {
-  if (queries === void 0) {
-    queries = {};
-  }
-  return /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-    let {
-      style,
-      ...rest
-    } = _ref;
+function styled(type, newStyles, queries = {}) {
+  return /*#__PURE__*/React__default.forwardRef(({
+    style,
+    ...rest
+  }, ref) => {
     const theme = useTheme();
-    const mediaStyles = Object.entries(queries).reduce((current, _ref2) => {
-      let [key, value] = _ref2;
+    const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       return useMediaQuery(key) ? {
         ...current,
@@ -223,33 +202,6 @@ function scheduleMicrotask(callback) {
     throw error;
   }));
 }
-function multiSortBy(arr, accessors) {
-  if (accessors === void 0) {
-    accessors = [d => d];
-  }
-  return arr.map((d, i) => [d, i]).sort((_ref3, _ref4) => {
-    let [a, ai] = _ref3;
-    let [b, bi] = _ref4;
-    for (const accessor of accessors) {
-      const ao = accessor(a);
-      const bo = accessor(b);
-      if (typeof ao === 'undefined') {
-        if (typeof bo === 'undefined') {
-          continue;
-        }
-        return 1;
-      }
-      if (ao === bo) {
-        continue;
-      }
-      return ao > bo ? 1 : -1;
-    }
-    return ai - bi;
-  }).map(_ref5 => {
-    let [d] = _ref5;
-    return d;
-  });
-}
 
 const Panel = styled('div', (_props, theme) => ({
   fontSize: 'clamp(12px, 1.5vw, 14px)',
@@ -308,38 +260,6 @@ const Button = styled('button', (props, theme) => ({
 const Code = styled('code', {
   fontSize: '.9em'
 });
-styled('input', (_props, theme) => ({
-  backgroundColor: theme.inputBackgroundColor,
-  border: 0,
-  borderRadius: '.2em',
-  color: theme.inputTextColor,
-  fontSize: '.9em',
-  lineHeight: `1.3`,
-  padding: '.3em .4em'
-}));
-styled('select', (_props, theme) => ({
-  display: `inline-block`,
-  fontSize: `.9em`,
-  fontFamily: `sans-serif`,
-  fontWeight: 'normal',
-  lineHeight: `1.3`,
-  padding: `.3em 1.5em .3em .5em`,
-  height: 'auto',
-  border: 0,
-  borderRadius: `.2em`,
-  appearance: `none`,
-  WebkitAppearance: 'none',
-  backgroundColor: theme.inputBackgroundColor,
-  backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
-  backgroundRepeat: `no-repeat`,
-  backgroundPosition: `right .55em center`,
-  backgroundSize: `.65em auto, 100%`,
-  color: theme.inputTextColor
-}), {
-  '(max-width: 500px)': {
-    display: 'none'
-  }
-});
 
 const Entry = styled('div', {
   fontFamily: 'Menlo, monospace',
@@ -376,20 +296,17 @@ const Info = styled('span', {
   color: 'grey',
   fontSize: '.7em'
 });
-const Expander = _ref => {
-  let {
-    expanded,
-    style = {}
-  } = _ref;
-  return /*#__PURE__*/React.createElement("span", {
-    style: {
-      display: 'inline-block',
-      transition: 'all .1s ease',
-      transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
-      ...style
-    }
-  }, "\u25B6");
-};
+const Expander = ({
+  expanded,
+  style = {}
+}) => /*#__PURE__*/React.createElement("span", {
+  style: {
+    display: 'inline-block',
+    transition: 'all .1s ease',
+    transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
+    ...style
+  }
+}, "\u25B6");
 /**
  * Chunk elements in the array by size
  *
@@ -409,19 +326,18 @@ function chunkArray(array, size) {
   }
   return result;
 }
-const DefaultRenderer = _ref2 => {
-  let {
-    handleEntry,
-    label,
-    value,
-    subEntries = [],
-    subEntryPages = [],
-    type,
-    expanded = false,
-    toggleExpanded,
-    pageSize,
-    renderer
-  } = _ref2;
+const DefaultRenderer = ({
+  handleEntry,
+  label,
+  value,
+  subEntries = [],
+  subEntryPages = [],
+  type,
+  expanded = false,
+  toggleExpanded,
+  pageSize,
+  renderer
+}) => {
   const [expandedPages, setExpandedPages] = React.useState([]);
   const [valueSnapshot, setValueSnapshot] = React.useState(undefined);
   const refreshValueSnapshot = () => {
@@ -454,14 +370,13 @@ const DefaultRenderer = _ref2 => {
 function isIterable(x) {
   return Symbol.iterator in x;
 }
-function Explorer(_ref3) {
-  let {
-    value,
-    defaultExpanded,
-    renderer = DefaultRenderer,
-    pageSize = 100,
-    ...rest
-  } = _ref3;
+function Explorer({
+  value,
+  defaultExpanded,
+  renderer = DefaultRenderer,
+  pageSize = 100,
+  ...rest
+}) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
   const toggleExpanded = React.useCallback(() => setExpanded(old => !old), []);
   let type = typeof value;
@@ -469,7 +384,7 @@ function Explorer(_ref3) {
   const makeProperty = sub => {
     const subDefaultExpanded = defaultExpanded === true ? {
       [sub.label]: true
-    } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
+    } : defaultExpanded?.[sub.label];
     return {
       ...sub,
       defaultExpanded: subDefaultExpanded
@@ -489,13 +404,10 @@ function Explorer(_ref3) {
     }));
   } else if (typeof value === 'object' && value !== null) {
     type = 'object';
-    subEntries = Object.entries(value).map(_ref4 => {
-      let [key, val] = _ref4;
-      return makeProperty({
-        label: key,
-        value: val
-      });
-    });
+    subEntries = Object.entries(value).map(([key, val]) => makeProperty({
+      label: key,
+      value: val
+    }));
   }
   const subEntryPages = chunkArray(subEntries, pageSize);
   return renderer({
@@ -545,16 +457,15 @@ function Logo(props) {
     }
   }, "ROUTER"));
 }
-function TanStackRouterDevtools(_ref) {
-  let {
-    initialIsOpen,
-    panelProps = {},
-    closeButtonProps = {},
-    toggleButtonProps = {},
-    position = 'bottom-left',
-    containerElement: Container = 'footer',
-    router
-  } = _ref;
+function TanStackRouterDevtools({
+  initialIsOpen,
+  panelProps = {},
+  closeButtonProps = {},
+  toggleButtonProps = {},
+  position = 'bottom-left',
+  containerElement: Container = 'footer',
+  router
+}) {
   const rootRef = React__default.useRef(null);
   const panelRef = React__default.useRef(null);
   const [isOpen, setIsOpen] = useLocalStorage('tanstackRouterDevtoolsOpen', initialIsOpen);
@@ -567,12 +478,12 @@ function TanStackRouterDevtools(_ref) {
 
     setIsResizing(true);
     const dragInfo = {
-      originalHeight: (panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
+      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
       pageY: startEvent.pageY
     };
     const run = moveEvent => {
       const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = (dragInfo == null ? void 0 : dragInfo.originalHeight) + delta;
+      const newHeight = dragInfo?.originalHeight + delta;
       setDevtoolsHeight(newHeight);
       if (newHeight < 70) {
         setIsOpen(false);
@@ -618,12 +529,10 @@ function TanStackRouterDevtools(_ref) {
   }, [isResolvedOpen]);
   React__default[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
     if (isResolvedOpen) {
-      var _rootRef$current, _rootRef$current$pare;
-      const previousValue = (_rootRef$current = rootRef.current) == null ? void 0 : (_rootRef$current$pare = _rootRef$current.parentElement) == null ? void 0 : _rootRef$current$pare.style.paddingBottom;
+      const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
       const run = () => {
-        var _panelRef$current, _rootRef$current2;
-        const containerHeight = (_panelRef$current = panelRef.current) == null ? void 0 : _panelRef$current.getBoundingClientRect().height;
-        if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.parentElement) {
+        const containerHeight = panelRef.current?.getBoundingClientRect().height;
+        if (rootRef.current?.parentElement) {
           rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
         }
       };
@@ -631,9 +540,8 @@ function TanStackRouterDevtools(_ref) {
       if (typeof window !== 'undefined') {
         window.addEventListener('resize', run);
         return () => {
-          var _rootRef$current3;
           window.removeEventListener('resize', run);
-          if ((_rootRef$current3 = rootRef.current) != null && _rootRef$current3.parentElement && typeof previousValue === 'string') {
+          if (rootRef.current?.parentElement && typeof previousValue === 'string') {
             rootRef.current.parentElement.style.paddingBottom = previousValue;
           }
         };
@@ -763,7 +671,6 @@ function TanStackRouterDevtools(_ref) {
   })) : null);
 }
 const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
-  var _Object$values, _Object$values$find, _router$store$current, _router$store$pending, _router$store$pending2, _last, _last2, _last3, _last4, _last5, _last6;
   const {
     isOpen = true,
     setIsOpen,
@@ -772,7 +679,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     ...panelProps
   } = props;
   const routerContextValue = React__default.useContext(routerContext);
-  const router = userRouter ?? (routerContextValue == null ? void 0 : routerContextValue.router);
+  const router = userRouter ?? routerContextValue?.router;
   invariant(router, 'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.');
   useRouterStore();
   const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
@@ -780,11 +687,22 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
   React__default.useEffect(() => {
     setActiveMatchId('');
   }, [activeRouteId]);
-  const activeMatch = ((_Object$values = Object.values(router.store.matchCache)) == null ? void 0 : (_Object$values$find = _Object$values.find(d => d.match.matchId === activeMatchId)) == null ? void 0 : _Object$values$find.match) ?? ((_router$store$current = router.store.currentMatches) == null ? void 0 : _router$store$current.find(d => d.routeId === activeRouteId));
-  const matchCacheValues = multiSortBy(Object.keys(router.store.matchCache).filter(key => {
-    const cacheEntry = router.store.matchCache[key];
-    return cacheEntry.gc > Date.now();
-  }).map(key => router.store.matchCache[key]), [d => d.match.store.isFetching ? -1 : 1, d => -d.match.store.updatedAt]);
+  const allMatches = React__default.useMemo(() => [...Object.values(router.store.state.currentMatches), ...Object.values(router.store.state.pendingMatches ?? [])], [router.store.state.currentMatches, router.store.state.pendingMatches]);
+  const activeMatch = allMatches?.find(d => d.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
+
+  // const matchCacheValues = multiSortBy(
+  //   Object.keys(router.store.state.matchCache)
+  //     .filter((key) => {
+  //       const cacheEntry = router.store.state.matchCache[key]!
+  //       return cacheEntry.gc > Date.now()
+  //     })
+  //     .map((key) => router.store.state.matchCache[key]!),
+  //   [
+  //     (d) => (d.match.store.state.isFetching ? -1 : 1),
+  //     (d) => -d.match.store.state.updatedAt!,
+  //   ],
+  // )
+
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React__default.createElement(Panel, _extends({
@@ -909,12 +827,12 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       top: 0,
       zIndex: 1
     }
-  }, "Active Matches"), router.store.currentMatches.map((match, i) => {
+  }, "Active Matches"), router.store.state.currentMatches.map((match, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: match.routeId || i,
+      key: match.route.id || i,
       role: "button",
-      "aria-label": `Open match details for ${match.routeId}`,
-      onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
+      "aria-label": `Open match details for ${match.route.id}`,
+      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
       style: {
         display: 'flex',
         borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
@@ -939,8 +857,8 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       style: {
         padding: '.5em'
       }
-    }, `${match.matchId}`));
-  }), (_router$store$pending = router.store.pendingMatches) != null && _router$store$pending.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    }, `${match.id}`));
+  }), router.store.state.pendingMatches?.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginTop: '2rem',
       padding: '.5em',
@@ -949,12 +867,12 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       top: 0,
       zIndex: 1
     }
-  }, "Pending Matches"), (_router$store$pending2 = router.store.pendingMatches) == null ? void 0 : _router$store$pending2.map((match, i) => {
+  }, "Pending Matches"), router.store.state.pendingMatches?.map((match, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: match.routeId || i,
+      key: match.route.id || i,
       role: "button",
-      "aria-label": `Open match details for ${match.routeId}`,
-      onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
+      "aria-label": `Open match details for ${match.route.id}`,
+      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
       style: {
         display: 'flex',
         borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
@@ -978,74 +896,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       style: {
         padding: '.5em'
       }
-    }, `${match.matchId}`));
-  })) : null, matchCacheValues.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      marginTop: '2rem',
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", null, "Match Cache"), /*#__PURE__*/React__default.createElement(Button, {
-    onClick: () => {
-      router.setStore(s => s.matchCache = {});
-    }
-  }, "Clear")), matchCacheValues.map((d, i) => {
-    const {
-      match,
-      gc
-    } = d;
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: match.matchId || i,
-      role: "button",
-      "aria-label": `Open match details for ${match.matchId}`,
-      onClick: () => setActiveMatchId(activeMatchId === match.matchId ? '' : match.matchId),
-      style: {
-        display: 'flex',
-        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-        cursor: 'pointer',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '.5rem',
-        gap: '.3rem'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '1.3rem',
-        height: '1.3rem',
-        background: getStatusColor(match, defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
-      }
-    }), /*#__PURE__*/React__default.createElement(Code, null, `${match.matchId}`)), /*#__PURE__*/React__default.createElement("span", {
-      style: {
-        fontSize: '.7rem',
-        opacity: '.5',
-        lineHeight: 1
-      }
-    }, "Expires", ' ', formatDistanceStrict(new Date(gc), new Date(), {
-      addSuffix: true
-    }))));
+    }, `${match.id}`));
   })) : null), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em',
@@ -1063,19 +914,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     style: {
       lineHeight: '1.8em'
     }
-  }, JSON.stringify(activeMatch.matchId, null, 2)))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     style: {
       opacity: '.5'
     }
-  }, "Status"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.store.status)), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, "Status"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.store.state.status)), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     style: {
       opacity: '.5'
     }
-  }, "Invalid"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.store.isInvalid.toString())), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "Last Updated"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.store.updatedAt ? new Date(activeMatch.store.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default.createElement("div", {
+  }, "Last Updated"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.store.state.updatedAt ? new Date(activeMatch.store.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       background: defaultTheme.backgroundAlt,
       padding: '.5em',
@@ -1089,15 +936,6 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       padding: '0.5em'
     }
   }, /*#__PURE__*/React__default.createElement(Button, {
-    type: "button",
-    onClick: () => {
-      activeMatch.invalidate();
-    },
-    style: {
-      background: defaultTheme.warning,
-      color: defaultTheme.inputTextColor
-    }
-  }, "Invalidate"), ' ', /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
     onClick: () => activeMatch.load(),
     style: {
@@ -1139,36 +977,13 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       bottom: 0,
       zIndex: 1
     }
-  }, "All Loader Data"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, Object.keys(((_last = last(router.store.currentMatches)) == null ? void 0 : _last.store.loaderData) || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
-    value: ((_last2 = last(router.store.currentMatches)) == null ? void 0 : _last2.store.loaderData) || {},
-    defaultExpanded: Object.keys(((_last3 = last(router.store.currentMatches)) == null ? void 0 : _last3.store.loaderData) || {}).reduce((obj, next) => {
-      obj[next] = {};
-      return obj;
-    }, {})
-  }) : /*#__PURE__*/React__default.createElement("em", {
-    style: {
-      opacity: 0.5
-    }
-  }, '{ }')), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1
-    }
   }, "Search Params"), /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em'
     }
-  }, Object.keys(((_last4 = last(router.store.currentMatches)) == null ? void 0 : _last4.store.search) || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
-    value: ((_last5 = last(router.store.currentMatches)) == null ? void 0 : _last5.store.search) || {},
-    defaultExpanded: Object.keys(((_last6 = last(router.store.currentMatches)) == null ? void 0 : _last6.store.search) || {}).reduce((obj, next) => {
+  }, Object.keys(last(router.store.state.currentMatches)?.store.state.search || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
+    value: last(router.store.state.currentMatches)?.store.state.search || {},
+    defaultExpanded: Object.keys(last(router.store.state.currentMatches)?.store.state.search || {}).reduce((obj, next) => {
       obj[next] = {};
       return obj;
     }, {})