@tanstack/router-devtools-core 1.114.29 → 1.114.32

package/dist/cjs/FloatingTanStackRouterDevtools.cjs

@@ -59,7 +59,7 @@ function FloatingTanStackRouterDevtools({
     setIsResolvedOpen(isOpen() ?? false);
   });
   solidJs.createEffect(() => {
-    var _a, _b;
+    var _a, _b, _c;
     if (isResolvedOpen()) {
       const previousValue = (_b = (_a = rootEl()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.paddingBottom;
       const run = () => {
@@ -88,6 +88,15 @@ function FloatingTanStackRouterDevtools({
           }
         };
       }
+    } else {
+      if ((_c = rootEl()) == null ? void 0 : _c.parentElement) {
+        setRootEl((prev) => {
+          if (prev == null ? void 0 : prev.parentElement) {
+            prev.parentElement.removeAttribute("style");
+          }
+          return prev;
+        });
+      }
     }
     return;
   });

package/dist/cjs/FloatingTanStackRouterDevtools.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingTanStackRouterDevtools.cjs","sources":["../../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: Accessor<AnyRouter>\n  routerState: Accessor<any>\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n  routerState,\n  shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n  // eslint-disable-next-line prefer-const\n  let panelRef: HTMLDivElement | undefined = undefined\n\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n  const [isResizing, setIsResizing] = createSignal(false)\n  const isMounted = useIsMounted()\n  const styles = useStyles()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: any,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  const isButtonClosed = isOpen() ?? false\n\n  createEffect(() => {\n    setIsResolvedOpen(isOpen() ?? false)\n  })\n\n  createEffect(() => {\n    if (isResolvedOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef!.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    }\n    return\n  })\n\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n    style?: Record<string, any>\n  }\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    onClick: onToggleClick,\n    class: toggleButtonClassName,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n  const basePanelClass = createMemo(() => {\n    return cx(\n      styles().devtoolsPanelContainer,\n      styles().devtoolsPanelContainerVisibility(!!isOpen()),\n      styles().devtoolsPanelContainerResizing(isResizing),\n      styles().devtoolsPanelContainerAnimation(\n        isResolvedOpen(),\n        resolvedHeight() + 16,\n      ),\n    )\n  })\n\n  const basePanelStyle = createMemo(() => {\n    return {\n      height: `${resolvedHeight()}px`,\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      ...(panelStyle || {}),\n    }\n  })\n\n  const buttonStyle = createMemo(() => {\n    return cx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(position),\n      styles().mainCloseBtnAnimation(!!isOpen()),\n      toggleButtonClassName,\n    )\n  })\n\n  return (\n    <Dynamic\n      component={Container}\n      ref={setRootEl}\n      class=\"TanStackRouterDevtools\"\n    >\n      <DevtoolsOnCloseContext.Provider\n        value={{\n          onCloseClick: onCloseClick ?? (() => {}),\n        }}\n      >\n        {/* {router() ? ( */}\n        <BaseTanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          routerState={routerState}\n          className={basePanelClass}\n          style={basePanelStyle}\n          isOpen={isResolvedOpen()}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef, e)}\n          shadowDOMTarget={shadowDOMTarget}\n        />\n        {/* ) : (\n          <p>No router</p>\n        )} */}\n      </DevtoolsOnCloseContext.Provider>\n\n      <button\n        type=\"button\"\n        {...otherToggleButtonProps}\n        aria-label=\"Open TanStack Router Devtools\"\n        onClick={(e) => {\n          setIsOpen(true)\n          onToggleClick && onToggleClick(e)\n        }}\n        class={buttonStyle()}\n      >\n        <div class={styles().mainCloseBtnIconContainer}>\n          <div class={styles().mainCloseBtnIconOuter}>\n            <TanStackLogo />\n          </div>\n          <div class={styles().mainCloseBtnIconInner}>\n            <TanStackLogo />\n          </div>\n        </div>\n        <div class={styles().mainCloseBtnDivider}>-</div>\n        <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n      </button>\n    </Dynamic>\n  )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"names":["FloatingTanStackRouterDevtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","Container","router","routerState","shadowDOMTarget","rootEl","setRootEl","createSignal","panelRef","undefined","isOpen","setIsOpen","useLocalStorage","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","useIsMounted","styles","useStyles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","unsub","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","createMemo","basePanelClass","cx","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","Dynamic","component","ref","children","DevtoolsOnCloseContext","Provider","value","BaseTanStackRouterDevtoolsPanel","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","TanStackLogo","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"mappings":"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"}
+{"version":3,"file":"FloatingTanStackRouterDevtools.cjs","sources":["../../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: Accessor<AnyRouter>\n  routerState: Accessor<any>\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n  routerState,\n  shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n  // eslint-disable-next-line prefer-const\n  let panelRef: HTMLDivElement | undefined = undefined\n\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n  const [isResizing, setIsResizing] = createSignal(false)\n  const isMounted = useIsMounted()\n  const styles = useStyles()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: any,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  const isButtonClosed = isOpen() ?? false\n\n  createEffect(() => {\n    setIsResolvedOpen(isOpen() ?? false)\n  })\n\n  createEffect(() => {\n    if (isResolvedOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef!.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n    style?: Record<string, any>\n  }\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    onClick: onToggleClick,\n    class: toggleButtonClassName,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n  const basePanelClass = createMemo(() => {\n    return cx(\n      styles().devtoolsPanelContainer,\n      styles().devtoolsPanelContainerVisibility(!!isOpen()),\n      styles().devtoolsPanelContainerResizing(isResizing),\n      styles().devtoolsPanelContainerAnimation(\n        isResolvedOpen(),\n        resolvedHeight() + 16,\n      ),\n    )\n  })\n\n  const basePanelStyle = createMemo(() => {\n    return {\n      height: `${resolvedHeight()}px`,\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      ...(panelStyle || {}),\n    }\n  })\n\n  const buttonStyle = createMemo(() => {\n    return cx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(position),\n      styles().mainCloseBtnAnimation(!!isOpen()),\n      toggleButtonClassName,\n    )\n  })\n\n  return (\n    <Dynamic\n      component={Container}\n      ref={setRootEl}\n      class=\"TanStackRouterDevtools\"\n    >\n      <DevtoolsOnCloseContext.Provider\n        value={{\n          onCloseClick: onCloseClick ?? (() => {}),\n        }}\n      >\n        {/* {router() ? ( */}\n        <BaseTanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          routerState={routerState}\n          className={basePanelClass}\n          style={basePanelStyle}\n          isOpen={isResolvedOpen()}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef, e)}\n          shadowDOMTarget={shadowDOMTarget}\n        />\n        {/* ) : (\n          <p>No router</p>\n        )} */}\n      </DevtoolsOnCloseContext.Provider>\n\n      <button\n        type=\"button\"\n        {...otherToggleButtonProps}\n        aria-label=\"Open TanStack Router Devtools\"\n        onClick={(e) => {\n          setIsOpen(true)\n          onToggleClick && onToggleClick(e)\n        }}\n        class={buttonStyle()}\n      >\n        <div class={styles().mainCloseBtnIconContainer}>\n          <div class={styles().mainCloseBtnIconOuter}>\n            <TanStackLogo />\n          </div>\n          <div class={styles().mainCloseBtnIconInner}>\n            <TanStackLogo />\n          </div>\n        </div>\n        <div class={styles().mainCloseBtnDivider}>-</div>\n        <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n      </button>\n    </Dynamic>\n  )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"names":["FloatingTanStackRouterDevtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","Container","router","routerState","shadowDOMTarget","rootEl","setRootEl","createSignal","panelRef","undefined","isOpen","setIsOpen","useLocalStorage","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","useIsMounted","styles","useStyles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","unsub","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","createMemo","basePanelClass","cx","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","Dynamic","component","ref","children","DevtoolsOnCloseContext","Provider","value","BaseTanStackRouterDevtoolsPanel","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","TanStackLogo","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"mappings":"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"}

package/dist/esm/FloatingTanStackRouterDevtools.js

@@ -57,7 +57,7 @@ function FloatingTanStackRouterDevtools({
     setIsResolvedOpen(isOpen() ?? false);
   });
   createEffect(() => {
-    var _a, _b;
+    var _a, _b, _c;
     if (isResolvedOpen()) {
       const previousValue = (_b = (_a = rootEl()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.paddingBottom;
       const run = () => {
@@ -86,6 +86,15 @@ function FloatingTanStackRouterDevtools({
           }
         };
       }
+    } else {
+      if ((_c = rootEl()) == null ? void 0 : _c.parentElement) {
+        setRootEl((prev) => {
+          if (prev == null ? void 0 : prev.parentElement) {
+            prev.parentElement.removeAttribute("style");
+          }
+          return prev;
+        });
+      }
     }
     return;
   });

package/dist/esm/FloatingTanStackRouterDevtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingTanStackRouterDevtools.js","sources":["../../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: Accessor<AnyRouter>\n  routerState: Accessor<any>\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n  routerState,\n  shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n  // eslint-disable-next-line prefer-const\n  let panelRef: HTMLDivElement | undefined = undefined\n\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n  const [isResizing, setIsResizing] = createSignal(false)\n  const isMounted = useIsMounted()\n  const styles = useStyles()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: any,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  const isButtonClosed = isOpen() ?? false\n\n  createEffect(() => {\n    setIsResolvedOpen(isOpen() ?? false)\n  })\n\n  createEffect(() => {\n    if (isResolvedOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef!.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    }\n    return\n  })\n\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n    style?: Record<string, any>\n  }\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    onClick: onToggleClick,\n    class: toggleButtonClassName,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n  const basePanelClass = createMemo(() => {\n    return cx(\n      styles().devtoolsPanelContainer,\n      styles().devtoolsPanelContainerVisibility(!!isOpen()),\n      styles().devtoolsPanelContainerResizing(isResizing),\n      styles().devtoolsPanelContainerAnimation(\n        isResolvedOpen(),\n        resolvedHeight() + 16,\n      ),\n    )\n  })\n\n  const basePanelStyle = createMemo(() => {\n    return {\n      height: `${resolvedHeight()}px`,\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      ...(panelStyle || {}),\n    }\n  })\n\n  const buttonStyle = createMemo(() => {\n    return cx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(position),\n      styles().mainCloseBtnAnimation(!!isOpen()),\n      toggleButtonClassName,\n    )\n  })\n\n  return (\n    <Dynamic\n      component={Container}\n      ref={setRootEl}\n      class=\"TanStackRouterDevtools\"\n    >\n      <DevtoolsOnCloseContext.Provider\n        value={{\n          onCloseClick: onCloseClick ?? (() => {}),\n        }}\n      >\n        {/* {router() ? ( */}\n        <BaseTanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          routerState={routerState}\n          className={basePanelClass}\n          style={basePanelStyle}\n          isOpen={isResolvedOpen()}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef, e)}\n          shadowDOMTarget={shadowDOMTarget}\n        />\n        {/* ) : (\n          <p>No router</p>\n        )} */}\n      </DevtoolsOnCloseContext.Provider>\n\n      <button\n        type=\"button\"\n        {...otherToggleButtonProps}\n        aria-label=\"Open TanStack Router Devtools\"\n        onClick={(e) => {\n          setIsOpen(true)\n          onToggleClick && onToggleClick(e)\n        }}\n        class={buttonStyle()}\n      >\n        <div class={styles().mainCloseBtnIconContainer}>\n          <div class={styles().mainCloseBtnIconOuter}>\n            <TanStackLogo />\n          </div>\n          <div class={styles().mainCloseBtnIconInner}>\n            <TanStackLogo />\n          </div>\n        </div>\n        <div class={styles().mainCloseBtnDivider}>-</div>\n        <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n      </button>\n    </Dynamic>\n  )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"names":["FloatingTanStackRouterDevtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","Container","router","routerState","shadowDOMTarget","rootEl","setRootEl","createSignal","panelRef","undefined","isOpen","setIsOpen","useLocalStorage","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","useIsMounted","styles","useStyles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","unsub","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","createMemo","basePanelClass","cx","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","Dynamic","component","ref","children","DevtoolsOnCloseContext","Provider","value","BaseTanStackRouterDevtoolsPanel","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","TanStackLogo","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"mappings":"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"}
+{"version":3,"file":"FloatingTanStackRouterDevtools.js","sources":["../../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: Accessor<AnyRouter>\n  routerState: Accessor<any>\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n  routerState,\n  shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n  // eslint-disable-next-line prefer-const\n  let panelRef: HTMLDivElement | undefined = undefined\n\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n  const [isResizing, setIsResizing] = createSignal(false)\n  const isMounted = useIsMounted()\n  const styles = useStyles()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: any,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  const isButtonClosed = isOpen() ?? false\n\n  createEffect(() => {\n    setIsResolvedOpen(isOpen() ?? false)\n  })\n\n  createEffect(() => {\n    if (isResolvedOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef!.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n    style?: Record<string, any>\n  }\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    onClick: onToggleClick,\n    class: toggleButtonClassName,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n  const basePanelClass = createMemo(() => {\n    return cx(\n      styles().devtoolsPanelContainer,\n      styles().devtoolsPanelContainerVisibility(!!isOpen()),\n      styles().devtoolsPanelContainerResizing(isResizing),\n      styles().devtoolsPanelContainerAnimation(\n        isResolvedOpen(),\n        resolvedHeight() + 16,\n      ),\n    )\n  })\n\n  const basePanelStyle = createMemo(() => {\n    return {\n      height: `${resolvedHeight()}px`,\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      ...(panelStyle || {}),\n    }\n  })\n\n  const buttonStyle = createMemo(() => {\n    return cx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(position),\n      styles().mainCloseBtnAnimation(!!isOpen()),\n      toggleButtonClassName,\n    )\n  })\n\n  return (\n    <Dynamic\n      component={Container}\n      ref={setRootEl}\n      class=\"TanStackRouterDevtools\"\n    >\n      <DevtoolsOnCloseContext.Provider\n        value={{\n          onCloseClick: onCloseClick ?? (() => {}),\n        }}\n      >\n        {/* {router() ? ( */}\n        <BaseTanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          routerState={routerState}\n          className={basePanelClass}\n          style={basePanelStyle}\n          isOpen={isResolvedOpen()}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef, e)}\n          shadowDOMTarget={shadowDOMTarget}\n        />\n        {/* ) : (\n          <p>No router</p>\n        )} */}\n      </DevtoolsOnCloseContext.Provider>\n\n      <button\n        type=\"button\"\n        {...otherToggleButtonProps}\n        aria-label=\"Open TanStack Router Devtools\"\n        onClick={(e) => {\n          setIsOpen(true)\n          onToggleClick && onToggleClick(e)\n        }}\n        class={buttonStyle()}\n      >\n        <div class={styles().mainCloseBtnIconContainer}>\n          <div class={styles().mainCloseBtnIconOuter}>\n            <TanStackLogo />\n          </div>\n          <div class={styles().mainCloseBtnIconInner}>\n            <TanStackLogo />\n          </div>\n        </div>\n        <div class={styles().mainCloseBtnDivider}>-</div>\n        <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n      </button>\n    </Dynamic>\n  )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"names":["FloatingTanStackRouterDevtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","Container","router","routerState","shadowDOMTarget","rootEl","setRootEl","createSignal","panelRef","undefined","isOpen","setIsOpen","useLocalStorage","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","useIsMounted","styles","useStyles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","unsub","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","createMemo","basePanelClass","cx","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","Dynamic","component","ref","children","DevtoolsOnCloseContext","Provider","value","BaseTanStackRouterDevtoolsPanel","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","TanStackLogo","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-devtools-core",
-  "version": "1.114.29",
+  "version": "1.114.32",
   "description": "Modern and scalable routing for Web applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -60,7 +60,7 @@
     "tiny-invariant": "^1.3.3",
     "csstype": "^3.0.10",
     "solid-js": ">=1.9.5",
-    "@tanstack/router-core": "^1.114.29"
+    "@tanstack/router-core": "^1.114.32"
   },
   "peerDependenciesMeta": {
     "csstype": {

package/src/FloatingTanStackRouterDevtools.tsx

@@ -161,6 +161,16 @@ export function FloatingTanStackRouterDevtools({
           }
         }
       }
+    } else {
+      // Reset padding when devtools are closed
+      if (rootEl()?.parentElement) {
+        setRootEl((prev) => {
+          if (prev?.parentElement) {
+            prev.parentElement.removeAttribute('style')
+          }
+          return prev
+        })
+      }
     }
     return
   })