@tanstack/query-devtools 5.1.0 → 5.4.2

package/build/Devtools/{QHGCTHEZ.jsx → 7FRXYIEA.jsx}

@@ -8737,35 +8737,35 @@ var tokens = {
   },
   font: {
     size: {
-      "2xs": "0.625rem",
-      xs: "0.75rem",
-      sm: "0.875rem",
-      md: "1rem",
-      lg: "1.125rem",
-      xl: "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem",
-      "6xl": "3.75rem",
-      "7xl": "4.5rem",
-      "8xl": "6rem",
-      "9xl": "8rem"
+      "2xs": "calc(var(--tsqd-font-size) * 0.625)",
+      xs: "calc(var(--tsqd-font-size) * 0.75)",
+      sm: "calc(var(--tsqd-font-size) * 0.875)",
+      md: "var(--tsqd-font-size)",
+      lg: "calc(var(--tsqd-font-size) * 1.125)",
+      xl: "calc(var(--tsqd-font-size) * 1.25)",
+      "2xl": "calc(var(--tsqd-font-size) * 1.5)",
+      "3xl": "calc(var(--tsqd-font-size) * 1.875)",
+      "4xl": "calc(var(--tsqd-font-size) * 2.25)",
+      "5xl": "calc(var(--tsqd-font-size) * 3)",
+      "6xl": "calc(var(--tsqd-font-size) * 3.75)",
+      "7xl": "calc(var(--tsqd-font-size) * 4.5)",
+      "8xl": "calc(var(--tsqd-font-size) * 6)",
+      "9xl": "calc(var(--tsqd-font-size) * 8)"
     },
     lineHeight: {
-      xs: "1rem",
-      sm: "1.25rem",
-      md: "1.5rem",
-      lg: "1.75rem",
-      xl: "1.75rem",
-      "2xl": "2rem",
-      "3xl": "2.25rem",
-      "4xl": "2.5rem",
-      "5xl": "1",
-      "6xl": "1",
-      "7xl": "1",
-      "8xl": "1",
-      "9xl": "1"
+      xs: "calc(var(--tsqd-font-size) * 1)",
+      sm: "calc(var(--tsqd-font-size) * 1.25)",
+      md: "calc(var(--tsqd-font-size) * 1.5)",
+      lg: "calc(var(--tsqd-font-size) * 1.75)",
+      xl: "calc(var(--tsqd-font-size) * 2)",
+      "2xl": "calc(var(--tsqd-font-size) * 2.25)",
+      "3xl": "calc(var(--tsqd-font-size) * 2.5)",
+      "4xl": "calc(var(--tsqd-font-size) * 2.75)",
+      "5xl": "calc(var(--tsqd-font-size) * 3)",
+      "6xl": "calc(var(--tsqd-font-size) * 3.25)",
+      "7xl": "calc(var(--tsqd-font-size) * 3.5)",
+      "8xl": "calc(var(--tsqd-font-size) * 3.75)",
+      "9xl": "calc(var(--tsqd-font-size) * 4)"
     },
     weight: {
       thin: "100",
@@ -8790,55 +8790,55 @@ var tokens = {
   border: {
     radius: {
       none: "0px",
-      xs: "0.125rem",
-      sm: "0.25rem",
-      md: "0.375rem",
-      lg: "0.5rem",
-      xl: "0.75rem",
-      "2xl": "1rem",
-      "3xl": "1.5rem",
+      xs: "calc(var(--tsqd-font-size) * 0.125)",
+      sm: "calc(var(--tsqd-font-size) * 0.25)",
+      md: "calc(var(--tsqd-font-size) * 0.375)",
+      lg: "calc(var(--tsqd-font-size) * 0.5)",
+      xl: "calc(var(--tsqd-font-size) * 0.75)",
+      "2xl": "calc(var(--tsqd-font-size) * 1)",
+      "3xl": "calc(var(--tsqd-font-size) * 1.5)",
       full: "9999px"
     }
   },
   size: {
     0: "0px",
-    0.25: "0.0625rem",
-    0.5: "0.125rem",
-    1: "0.25rem",
-    1.5: "0.375rem",
-    2: "0.5rem",
-    2.5: "0.625rem",
-    3: "0.75rem",
-    3.5: "0.875rem",
-    4: "1rem",
-    4.5: "1.125rem",
-    5: "1.25rem",
-    5.5: "1.375rem",
-    6: "1.5rem",
-    6.5: "1.625rem",
-    7: "1.75rem",
-    8: "2rem",
-    9: "2.25rem",
-    10: "2.5rem",
-    11: "2.75rem",
-    12: "3rem",
-    14: "3.5rem",
-    16: "4rem",
-    20: "5rem",
-    24: "6rem",
-    28: "7rem",
-    32: "8rem",
-    36: "9rem",
-    40: "10rem",
-    44: "11rem",
-    48: "12rem",
-    52: "13rem",
-    56: "14rem",
-    60: "15rem",
-    64: "16rem",
-    72: "18rem",
-    80: "20rem",
-    96: "24rem"
+    0.25: "calc(var(--tsqd-font-size) * 0.0625)",
+    0.5: "calc(var(--tsqd-font-size) * 0.125)",
+    1: "calc(var(--tsqd-font-size) * 0.25)",
+    1.5: "calc(var(--tsqd-font-size) * 0.375)",
+    2: "calc(var(--tsqd-font-size) * 0.5)",
+    2.5: "calc(var(--tsqd-font-size) * 0.625)",
+    3: "calc(var(--tsqd-font-size) * 0.75)",
+    3.5: "calc(var(--tsqd-font-size) * 0.875)",
+    4: "calc(var(--tsqd-font-size) * 1)",
+    4.5: "calc(var(--tsqd-font-size) * 1.125)",
+    5: "calc(var(--tsqd-font-size) * 1.25)",
+    5.5: "calc(var(--tsqd-font-size) * 1.375)",
+    6: "calc(var(--tsqd-font-size) * 1.5)",
+    6.5: "calc(var(--tsqd-font-size) * 1.625)",
+    7: "calc(var(--tsqd-font-size) * 1.75)",
+    8: "calc(var(--tsqd-font-size) * 2)",
+    9: "calc(var(--tsqd-font-size) * 2.25)",
+    10: "calc(var(--tsqd-font-size) * 2.5)",
+    11: "calc(var(--tsqd-font-size) * 2.75)",
+    12: "calc(var(--tsqd-font-size) * 3)",
+    14: "calc(var(--tsqd-font-size) * 3.5)",
+    16: "calc(var(--tsqd-font-size) * 4)",
+    20: "calc(var(--tsqd-font-size) * 5)",
+    24: "calc(var(--tsqd-font-size) * 6)",
+    28: "calc(var(--tsqd-font-size) * 7)",
+    32: "calc(var(--tsqd-font-size) * 8)",
+    36: "calc(var(--tsqd-font-size) * 9)",
+    40: "calc(var(--tsqd-font-size) * 10)",
+    44: "calc(var(--tsqd-font-size) * 11)",
+    48: "calc(var(--tsqd-font-size) * 12)",
+    52: "calc(var(--tsqd-font-size) * 13)",
+    56: "calc(var(--tsqd-font-size) * 14)",
+    60: "calc(var(--tsqd-font-size) * 15)",
+    64: "calc(var(--tsqd-font-size) * 16)",
+    72: "calc(var(--tsqd-font-size) * 18)",
+    80: "calc(var(--tsqd-font-size) * 20)",
+    96: "calc(var(--tsqd-font-size) * 24)"
   },
   shadow: Shadow,
   zIndices: {
@@ -11507,8 +11507,8 @@ var stylesFactory = (theme) => {
     expanderButtonContainer: u`
       display: flex;
       align-items: center;
-      line-height: 1.125rem;
-      min-height: 1.125rem;
+      line-height: ${size2[4]};
+      min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
     expanderButton: u`
@@ -11516,7 +11516,7 @@ var stylesFactory = (theme) => {
       color: inherit;
       font: inherit;
       outline: inherit;
-      height: 1rem;
+      height: ${size2[5]};
       background: transparent;
       border: none;
       padding: 0;
@@ -11558,8 +11558,8 @@ var stylesFactory = (theme) => {
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
-      margin-bottom: ${size2[0.5]};
-      line-height: 1.125rem;
+      margin: ${size2[0.25]} 0px;
+      line-height: ${size2[4.5]};
       align-items: center;
     `,
     editableInput: u`
@@ -11659,8 +11659,9 @@ var Devtools = (props) => {
   const position = createMemo(() => {
     return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
   });
+  let transitionsContainerRef;
   createEffect(() => {
-    const root = document.querySelector(".tsqd-parent-container");
+    const root = transitionsContainerRef.parentElement;
     const height = props.localStore.height || DEFAULT_HEIGHT;
     const width = props.localStore.width || DEFAULT_WIDTH;
     const panelPosition = position();
@@ -11673,6 +11674,18 @@ var Devtools = (props) => {
       `${panelPosition === "left" ? "-" : ""}${width}px`
     );
   });
+  onMount(() => {
+    const onFocus = () => {
+      const root = transitionsContainerRef.parentElement;
+      const fontSize = getComputedStyle(root).fontSize;
+      root.style.setProperty("--tsqd-font-size", fontSize);
+    };
+    onFocus();
+    window.addEventListener("focus", onFocus);
+    onCleanup(() => {
+      window.removeEventListener("focus", onFocus);
+    });
+  });
   return <div
     class={clsx(
       u`
@@ -11698,6 +11711,7 @@ var Devtools = (props) => {
         `,
       "tsqd-transitions-container"
     )}
+    ref={transitionsContainerRef}
   >
     <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen()}><DevtoolsPanel
       localStore={props.localStore}
@@ -11864,6 +11878,7 @@ var DevtoolsPanel = (props) => {
 var ContentView = (props) => {
   setupQueryCacheSubscription();
   setupMutationCacheSubscription();
+  let containerRef;
   const theme = useTheme();
   const styles = createMemo(() => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -11941,6 +11956,11 @@ var ContentView = (props) => {
   const setDevtoolsPosition = (pos) => {
     props.setLocalStore("position", pos);
   };
+  const setComputedVariables = (el) => {
+    const computedStyle = getComputedStyle(containerRef);
+    const variable = computedStyle.getPropertyValue("--tsqd-font-size");
+    el.style.setProperty("--tsqd-font-size", variable);
+  };
   return <>
     <div
       class={clsx(
@@ -11951,6 +11971,7 @@ var ContentView = (props) => {
             `,
         "tsqd-queries-container"
       )}
+      ref={containerRef}
     >
       <div class={clsx(styles().row, "tsqd-header")}>
         <div class={styles().logoAndToggleContainer}>
@@ -12121,7 +12142,9 @@ var ContentView = (props) => {
                 "tsqd-action-settings"
               )}
             ><Settings /></index$d.Trigger>
-            <index$d.Portal><index$d.Content
+            <index$d.Portal
+              ref={(el) => setComputedVariables(el)}
+            ><index$d.Content
               class={clsx(styles().settingsMenu, "tsqd-settings-menu")}
             >
               <div
@@ -12141,7 +12164,9 @@ var ContentView = (props) => {
                   <span>Position</span>
                   <ChevronDown />
                 </index$d.SubTrigger>
-                <index$d.Portal><index$d.SubContent
+                <index$d.Portal
+                  ref={(el) => setComputedVariables(el)}
+                ><index$d.SubContent
                   class={clsx(
                     styles().settingsMenu,
                     "tsqd-settings-submenu"
@@ -12216,7 +12241,9 @@ var ContentView = (props) => {
                   <span>Theme</span>
                   <ChevronDown />
                 </index$d.SubTrigger>
-                <index$d.Portal><index$d.SubContent
+                <index$d.Portal
+                  ref={(el) => setComputedVariables(el)}
+                ><index$d.SubContent
                   class={clsx(
                     styles().settingsMenu,
                     "tsqd-settings-submenu"
@@ -12906,7 +12933,7 @@ var QueryDetails = () => {
     <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
     <div
       style={{
-        padding: "0.5rem"
+        padding: tokens.size[2]
       }}
       class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"
     ><Explorer
@@ -12919,7 +12946,7 @@ var QueryDetails = () => {
     <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
     <div
       style={{
-        padding: "0.5rem"
+        padding: tokens.size[2]
       }}
       class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
     ><Explorer
@@ -13010,7 +13037,7 @@ var MutationDetails = () => {
     <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Variables Details</div>
     <div
       style={{
-        padding: "0.5rem"
+        padding: tokens.size[2]
       }}
       class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
     ><Explorer
@@ -13021,7 +13048,7 @@ var MutationDetails = () => {
     <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Context Details</div>
     <div
       style={{
-        padding: "0.5rem"
+        padding: tokens.size[2]
       }}
       class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
     ><Explorer
@@ -13032,7 +13059,7 @@ var MutationDetails = () => {
     <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
     <div
       style={{
-        padding: "0.5rem"
+        padding: tokens.size[2]
       }}
       class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
     ><Explorer
@@ -13043,7 +13070,7 @@ var MutationDetails = () => {
     <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Mutations Explorer</div>
     <div
       style={{
-        padding: "0.5rem"
+        padding: tokens.size[2]
       }}
       class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
     ><Explorer
@@ -13216,7 +13243,7 @@ var stylesFactory2 = (theme) => {
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size2[14]};
       border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     "panel-position-bottom": u`
@@ -13224,7 +13251,7 @@ var stylesFactory2 = (theme) => {
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size2[14]};
       border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     "panel-position-right": u`
@@ -13556,6 +13583,8 @@ var stylesFactory2 = (theme) => {
           outline: 2px solid ${colors.blue[800]};
         }
         & svg {
+          width: ${tokens.size[3]};
+          height: ${tokens.size[3]};
           color: ${t2(colors.gray[500], colors.gray[400])};
         }
       }
@@ -13641,8 +13670,8 @@ var stylesFactory2 = (theme) => {
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[100], colors.darkGray[400])};
       border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
-      width: 1.625rem;
-      height: 1.625rem;
+      width: ${tokens.size[6.5]};
+      height: ${tokens.size[6.5]};
       justify-content: center;
       display: flex;
       align-items: center;