@tanstack/router-devtools 0.0.1-alpha.0

package/build/cjs/packages/react-location-devtools/src/devtools.js

@@ -0,0 +1,614 @@
+/**
+ * react-location-devtools
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var reactRouter = require('@tanstack/react-router');
+var useLocalStorage = require('./useLocalStorage.js');
+var utils = require('./utils.js');
+var styledComponents = require('./styledComponents.js');
+var theme = require('./theme.js');
+var Explorer = require('./Explorer.js');
+var Logo = require('./Logo.js');
+var index = require('../../../node_modules/date-fns/esm/formatDistanceStrict/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const _excluded = ["style"],
+      _excluded2 = ["style", "onClick"],
+      _excluded3 = ["style", "onClick"],
+      _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "useRouter"],
+      _excluded5 = ["listeners", "buildLocation", "mount", "update", "buildNext", "navigate", "cancelMatches", "loadLocation", "cleanPreloadCache", "loadRoute", "matchRoutes", "resolveMatches", "loadMatches", "invalidateRoute", "getOutletElement", "resolvePath", "matchRoute", "buildLinkInfo", "__experimental__createSnapshot", "stringifySearch", "parseSearch", "destroy", "defaultPendingElement", "rootMatch"],
+      _excluded6 = ["abortController", "resolve", "notify", "elementsPromise", "importPromise", "loaderPromise", "pendingMinPromise", "pendingTimeout", "cancel", "startPending", "cancelPending", "setParentMatch", "load", "router", "element", "errorElement", "pendingElement", "dataPromise", "onExit"];
+const isServer = typeof window === 'undefined';
+function ReactLocationDevtools(_ref) {
+  let {
+    initialIsOpen,
+    panelProps = {},
+    closeButtonProps = {},
+    toggleButtonProps = {},
+    position = 'bottom-left',
+    containerElement: Container = 'footer',
+    useRouter: useRouterImpl = reactRouter.useRouter
+  } = _ref;
+  const rootRef = React__default["default"].useRef(null);
+  const panelRef = React__default["default"].useRef(null);
+  const [isOpen, setIsOpen] = useLocalStorage["default"]('reactLocationDevtoolsOpen', initialIsOpen);
+  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('reactLocationDevtoolsHeight', null);
+  const [isResolvedOpen, setIsResolvedOpen] = utils.useSafeState(false);
+  const [isResizing, setIsResizing] = utils.useSafeState(false);
+  const isMounted = utils.useIsMounted();
+
+  const _handleDragStart = (panelElement, startEvent) => {
+    var _panelElement$getBoun;
+
+    if (startEvent.button !== 0) return; // Only allow left click for drag
+
+    setIsResizing(true);
+    const dragInfo = {
+      originalHeight: (_panelElement$getBoun = panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) != null ? _panelElement$getBoun : 0,
+      pageY: startEvent.pageY
+    };
+
+    const run = moveEvent => {
+      const delta = dragInfo.pageY - moveEvent.pageY;
+      const newHeight = (dragInfo == null ? void 0 : dragInfo.originalHeight) + delta;
+      setDevtoolsHeight(newHeight);
+
+      if (newHeight < 70) {
+        setIsOpen(false);
+      } else {
+        setIsOpen(true);
+      }
+    };
+
+    const unsub = () => {
+      setIsResizing(false);
+      document.removeEventListener('mousemove', run);
+      document.removeEventListener('mouseUp', unsub);
+    };
+
+    document.addEventListener('mousemove', run);
+    document.addEventListener('mouseup', unsub);
+  };
+
+  React__default["default"].useEffect(() => {
+    setIsResolvedOpen(isOpen != null ? isOpen : false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
+  // Prevents focusing in a closed panel.
+
+  React__default["default"].useEffect(() => {
+    const ref = panelRef.current;
+
+    if (ref) {
+      const handlePanelTransitionStart = () => {
+        if (ref && isResolvedOpen) {
+          ref.style.visibility = 'visible';
+        }
+      };
+
+      const handlePanelTransitionEnd = () => {
+        if (ref && !isResolvedOpen) {
+          ref.style.visibility = 'hidden';
+        }
+      };
+
+      ref.addEventListener('transitionstart', handlePanelTransitionStart);
+      ref.addEventListener('transitionend', handlePanelTransitionEnd);
+      return () => {
+        ref.removeEventListener('transitionstart', handlePanelTransitionStart);
+        ref.removeEventListener('transitionend', handlePanelTransitionEnd);
+      };
+    }
+  }, [isResolvedOpen]);
+  React__default["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 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) {
+          rootRef.current.parentElement.style.paddingBottom = containerHeight + "px";
+        }
+      };
+
+      run();
+
+      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') {
+            rootRef.current.parentElement.style.paddingBottom = previousValue;
+          }
+        };
+      }
+    }
+  }, [isResolvedOpen]);
+
+  const {
+    style: panelStyle = {}
+  } = panelProps,
+        otherPanelProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(panelProps, _excluded);
+
+  const {
+    style: closeButtonStyle = {},
+    onClick: onCloseClick
+  } = closeButtonProps,
+        otherCloseButtonProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
+
+  const {
+    style: toggleButtonStyle = {},
+    onClick: onToggleClick
+  } = toggleButtonProps,
+        otherToggleButtonProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(toggleButtonProps, _excluded3); // Do not render on the server
+
+
+  if (!isMounted()) return null;
+  return /*#__PURE__*/React__default["default"].createElement(Container, {
+    ref: rootRef,
+    className: "ReactLocationDevtools"
+  }, /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
+    theme: theme.defaultTheme
+  }, /*#__PURE__*/React__default["default"].createElement(ReactLocationDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
+    ref: panelRef
+  }, otherPanelProps, {
+    useRouter: useRouterImpl,
+    style: _rollupPluginBabelHelpers["extends"]({
+      position: 'fixed',
+      bottom: '0',
+      right: '0',
+      zIndex: 99999,
+      width: '100%',
+      height: devtoolsHeight != null ? devtoolsHeight : 500,
+      maxHeight: '90%',
+      boxShadow: '0 0 20px rgba(0,0,0,.3)',
+      borderTop: "1px solid " + theme.defaultTheme.gray,
+      transformOrigin: 'top',
+      // visibility will be toggled after transitions, but set initial state here
+      visibility: isOpen ? 'visible' : 'hidden'
+    }, panelStyle, isResizing ? {
+      transition: "none"
+    } : {
+      transition: "all .2s ease"
+    }, isResolvedOpen ? {
+      opacity: 1,
+      pointerEvents: 'all',
+      transform: "translateY(0) scale(1)"
+    } : {
+      opacity: 0,
+      pointerEvents: 'none',
+      transform: "translateY(15px) scale(1.02)"
+    }),
+    isOpen: isResolvedOpen,
+    setIsOpen: setIsOpen,
+    handleDragStart: e => _handleDragStart(panelRef.current, e)
+  })), isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({
+    type: "button",
+    "aria-label": "Close TanStack Location Devtools"
+  }, otherCloseButtonProps, {
+    onClick: e => {
+      setIsOpen(false);
+      onCloseClick && onCloseClick(e);
+    },
+    style: _rollupPluginBabelHelpers["extends"]({
+      position: 'fixed',
+      zIndex: 99999,
+      margin: '.5em',
+      bottom: 0
+    }, position === 'top-right' ? {
+      right: '0'
+    } : position === 'top-left' ? {
+      left: '0'
+    } : position === 'bottom-right' ? {
+      right: '0'
+    } : {
+      left: '0'
+    }, closeButtonStyle)
+  }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button"
+  }, otherToggleButtonProps, {
+    "aria-label": "Open TanStack Location Devtools",
+    onClick: e => {
+      setIsOpen(true);
+      onToggleClick && onToggleClick(e);
+    },
+    style: _rollupPluginBabelHelpers["extends"]({
+      background: 'none',
+      border: 0,
+      padding: 0,
+      position: 'fixed',
+      zIndex: 99999,
+      display: 'inline-flex',
+      fontSize: '1.5em',
+      margin: '.5em',
+      cursor: 'pointer',
+      width: 'fit-content'
+    }, position === 'top-right' ? {
+      top: '0',
+      right: '0'
+    } : position === 'top-left' ? {
+      top: '0',
+      left: '0'
+    } : position === 'bottom-right' ? {
+      bottom: '0',
+      right: '0'
+    } : {
+      bottom: '0',
+      left: '0'
+    }, toggleButtonStyle)
+  }), /*#__PURE__*/React__default["default"].createElement(Logo["default"], {
+    "aria-hidden": true
+  })) : null);
+}
+const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function ReactLocationDevtoolsPanel(props, ref) {
+  var _router$state$matches, _router$state$pending;
+
+  const {
+    isOpen = true,
+    handleDragStart,
+    useRouter
+  } = props,
+        panelProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(props, _excluded4);
+
+  const router = useRouter();
+  const [activeMatchId, setActiveRouteId] = useLocalStorage["default"]('reactLocationDevtoolsActiveRouteId', '');
+  const activeMatch = (_router$state$matches = router.state.matches) == null ? void 0 : _router$state$matches.find(d => d.id === activeMatchId);
+  return /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
+    theme: theme.defaultTheme
+  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: "ReactLocationDevtoolsPanel"
+  }, panelProps), /*#__PURE__*/React__default["default"].createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: "\n\n            .ReactLocationDevtoolsPanel * {\n              scrollbar-color: " + theme.defaultTheme.backgroundAlt + " " + theme.defaultTheme.gray + ";\n            }\n\n            .ReactLocationDevtoolsPanel *::-webkit-scrollbar, .ReactLocationDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactLocationDevtoolsPanel *::-webkit-scrollbar-track, .ReactLocationDevtoolsPanel scrollbar-track {\n              background: " + theme.defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactLocationDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactLocationDevtoolsPanel scrollbar-thumb {\n              background: " + theme.defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + theme.defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactLocationDevtoolsPanel table {\n              width: 100%;\n            }\n\n            .ReactLocationDevtoolsPanel table tr {\n              border-bottom: 2px dotted rgba(255, 255, 255, .2);\n            }\n\n            .ReactLocationDevtoolsPanel table tr:last-child {\n              border-bottom: none\n            }\n\n            .ReactLocationDevtoolsPanel table td {\n              padding: .25rem .5rem;\n              border-right: 2px dotted rgba(255, 255, 255, .05);\n            }\n\n            .ReactLocationDevtoolsPanel table td:last-child {\n              border-right: none\n            }\n\n          "
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '4px',
+      marginBottom: '-4px',
+      cursor: 'row-resize',
+      zIndex: 100000
+    },
+    onMouseDown: handleDragStart
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      flex: '1 1 500px',
+      minHeight: '40%',
+      maxHeight: '100%',
+      overflow: 'auto',
+      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Logo["default"], {
+    "aria-hidden": true,
+    style: {
+      marginRight: '.5em'
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginRight: 'auto',
+      fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
+      fontWeight: 'bold'
+    }
+  }, "TanStack Location", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      fontWeight: 100
+    }
+  }, "Devtools")), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      overflowY: 'auto',
+      flex: '1'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
+    label: "Router",
+    value: (() => {
+      const rest = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(router, _excluded5);
+
+      return rest;
+    })(),
+    defaultExpanded: {}
+  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      flex: '1 1 500px',
+      minHeight: '40%',
+      maxHeight: '100%',
+      overflow: 'auto',
+      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
+    value: router.state.loaderData,
+    defaultExpanded: Object.keys(router.state.loaderData).reduce((obj, next) => {
+      obj[next] = {};
+      return obj;
+    }, {})
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      flex: '1 1 500px',
+      minHeight: '40%',
+      maxHeight: '100%',
+      overflow: 'auto',
+      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Current Matches"), router.state.matches.map((match, i) => {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: match.id || i,
+      role: "button",
+      "aria-label": "Open match details for " + match.id,
+      onClick: () => setActiveRouteId(activeMatchId === match.id ? '' : match.id),
+      style: {
+        display: 'flex',
+        borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
+        cursor: 'pointer',
+        alignItems: 'center',
+        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        flex: '0 0 auto',
+        width: '1.3rem',
+        height: '1.3rem',
+        marginLeft: '.25rem',
+        background: utils.getStatusColor(match, theme.defaultTheme),
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: 'bold',
+        borderRadius: '.25rem',
+        transition: 'all .2s ease-out'
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
+      style: {
+        padding: '.5em'
+      }
+    }, "" + match.id));
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginTop: '2rem',
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Pending Matches"), (_router$state$pending = router.state.pending) == null ? void 0 : _router$state$pending.matches.map((match, i) => {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: match.id || i,
+      role: "button",
+      "aria-label": "Open match details for " + match.id,
+      onClick: () => setActiveRouteId(activeMatchId === match.id ? '' : match.id),
+      style: {
+        display: 'flex',
+        borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
+        cursor: 'pointer',
+        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        flex: '0 0 auto',
+        width: '1.3rem',
+        height: '1.3rem',
+        marginLeft: '.25rem',
+        background: utils.getStatusColor(match, theme.defaultTheme),
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: 'bold',
+        borderRadius: '.25rem',
+        transition: 'all .2s ease-out'
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
+      style: {
+        padding: '.5em'
+      }
+    }, "" + match.id));
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginTop: '2rem',
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Preloading Matches"), Object.keys(router.preloadCache).filter(key => {
+    return router.preloadCache[key].expiresAt > Date.now();
+  }).map((key, i) => {
+    const {
+      match,
+      expiresAt
+    } = router.preloadCache[key];
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: match.id || i,
+      role: "button",
+      "aria-label": "Open match details for " + match.id,
+      onClick: () => setActiveRouteId(activeMatchId === match.id ? '' : match.id),
+      style: {
+        display: 'flex',
+        borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
+        cursor: 'pointer',
+        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '.5rem',
+        gap: '.3rem'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '.5rem'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        flex: '0 0 auto',
+        width: '1.3rem',
+        height: '1.3rem',
+        background: utils.getStatusColor(match, theme.defaultTheme),
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: 'bold',
+        borderRadius: '.25rem',
+        transition: 'all .2s ease-out'
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, null, "" + match.id)), /*#__PURE__*/React__default["default"].createElement("span", {
+      style: {
+        opacity: '.5'
+      }
+    }, "Expires", ' ', index["default"](new Date(), new Date(expiresAt), {
+      addSuffix: true
+    }))));
+  })), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "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", {
+    style: {
+      opacity: '.5'
+    }
+  }, "ID"), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
+    style: {
+      lineHeight: '1.8em'
+    }
+  }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      opacity: '.5'
+    }
+  }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      opacity: '.5'
+    }
+  }, "Pending"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.isPending.toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      opacity: '.5'
+    }
+  }, "Invalid"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.isInvalid.toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      opacity: '.5'
+    }
+  }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      background: theme.defaultTheme.backgroundAlt,
+      padding: '.5em',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Actions"), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '0.5em'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
+    type: "button",
+    onClick: () => {
+      router.invalidateRoute(activeMatch);
+      router.notify();
+    },
+    style: {
+      background: theme.defaultTheme.warning,
+      color: theme.defaultTheme.inputTextColor
+    }
+  }, "Invalidate"), ' ', /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
+    type: "button",
+    onClick: () => router.reload(),
+    style: {
+      background: theme.defaultTheme.gray
+    }
+  }, "Reload")), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      background: theme.defaultTheme.backgroundAlt,
+      padding: '.5em',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
+    label: "Match",
+    value: (() => {
+      const rest = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(activeMatch, _excluded6);
+
+      return rest;
+    })(),
+    defaultExpanded: {}
+  }))) : null));
+});
+
+exports.ReactLocationDevtools = ReactLocationDevtools;
+exports.ReactLocationDevtoolsPanel = ReactLocationDevtoolsPanel;
+//# sourceMappingURL=devtools.js.map