@tanstack/query-devtools 5.0.0-beta.37 → 5.0.0-rc.10

package/build/Devtools/{H2EROWFU.jsx → 56YMBTAH.jsx}

@@ -9478,6 +9478,86 @@ var sortFns = {
 var convertRemToPixels = (rem) => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 };
+var updateNestedDataByPath = (oldData, updatePath2, value) => {
+  if (updatePath2.length === 0) {
+    return value;
+  }
+  if (oldData instanceof Map) {
+    const newData = new Map(oldData);
+    if (updatePath2.length === 1) {
+      newData.set(updatePath2[0], value);
+      return newData;
+    }
+    const [head, ...tail] = updatePath2;
+    newData.set(head, updateNestedDataByPath(newData.get(head), tail, value));
+    return newData;
+  }
+  if (oldData instanceof Set) {
+    const setAsArray = updateNestedDataByPath(
+      Array.from(oldData),
+      updatePath2,
+      value
+    );
+    return new Set(setAsArray);
+  }
+  if (Array.isArray(oldData)) {
+    const newData = [...oldData];
+    if (updatePath2.length === 1) {
+      newData[updatePath2[0]] = value;
+      return newData;
+    }
+    const [head, ...tail] = updatePath2;
+    newData[head] = updateNestedDataByPath(newData[head], tail, value);
+    return newData;
+  }
+  if (oldData instanceof Object) {
+    const newData = { ...oldData };
+    if (updatePath2.length === 1) {
+      newData[updatePath2[0]] = value;
+      return newData;
+    }
+    const [head, ...tail] = updatePath2;
+    newData[head] = updateNestedDataByPath(newData[head], tail, value);
+    return newData;
+  }
+  return oldData;
+};
+var deleteNestedDataByPath = (oldData, deletePath) => {
+  if (oldData instanceof Map) {
+    const newData = new Map(oldData);
+    if (deletePath.length === 1) {
+      newData.delete(deletePath[0]);
+      return newData;
+    }
+    const [head, ...tail] = deletePath;
+    newData.set(head, deleteNestedDataByPath(newData.get(head), tail));
+    return newData;
+  }
+  if (oldData instanceof Set) {
+    const setAsArray = deleteNestedDataByPath(Array.from(oldData), deletePath);
+    return new Set(setAsArray);
+  }
+  if (Array.isArray(oldData)) {
+    const newData = [...oldData];
+    if (deletePath.length === 1) {
+      return newData.filter((_, idx) => idx.toString() !== deletePath[0]);
+    }
+    const [head, ...tail] = deletePath;
+    newData[head] = deleteNestedDataByPath(newData[head], tail);
+    return newData;
+  }
+  if (oldData instanceof Object) {
+    const newData = { ...oldData };
+    if (deletePath.length === 1) {
+      delete newData[deletePath[0]];
+      return newData;
+    }
+    const [head, ...tail] = deletePath;
+    newData[head] = deleteNestedDataByPath(newData[head], tail);
+    return newData;
+  }
+  return oldData;
+};
 
 // src/icons/index.tsx
 function Search() {
@@ -9692,6 +9772,53 @@ function ErrorCopier() {
     stroke-linejoin="round"
   /></svg>;
 }
+function List() {
+  return <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#98A2B3"
+    stroke-width="2"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect class="list" width="20" height="20" y="2" x="2" rx="2" />
+    <line class="list-item" y1="7" y2="7" x1="6" x2="18" />
+    <line class="list-item" y2="12" y1="12" x1="6" x2="18" />
+    <line class="list-item" y1="17" y2="17" x1="6" x2="18" />
+  </svg>;
+}
+function Check(props) {
+  return <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#98A2B3"
+    stroke-width="2"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="2" y="2" width="20" height="20" rx="2" class="check" />
+    {props.checked && <g>
+      <line
+        transform="rotate(45 7.18873 14.6316)"
+        x1="3.56453"
+        y1="14.63158"
+        x2="10.81294"
+        y2="14.63158"
+        class="check"
+      />
+      <line
+        transform="rotate(-45 13.9674 11.5826)"
+        x1="6.02012"
+        y1="11.58263"
+        x2="21.91469"
+        y2="11.58263"
+        class="check"
+      />
+    </g>}
+  </svg>;
+}
 function TanstackLogo() {
   return <svg version="1.0" viewBox="0 0 633 633">
     <linearGradient
@@ -10408,6 +10535,17 @@ function TanstackLogo() {
   </svg>;
 }
 
+// src/Context.ts
+var QueryDevtoolsContext = createContext({
+  client: void 0,
+  onlineManager: void 0,
+  queryFlavor: "",
+  version: ""
+});
+function useQueryDevtoolsContext() {
+  return useContext(QueryDevtoolsContext);
+}
+
 // src/Explorer.tsx
 function chunkArray(array, size2) {
   if (size2 < 1)
@@ -10451,7 +10589,8 @@ var CopyButton = (props) => {
   const styles = getStyles();
   const [copyState, setCopyState] = createSignal("NoCopy");
   return <button
-    class={styles.copyButton}
+    class={styles.actionButton}
+    title="Copy object to clipboard"
     aria-label={`${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`}
     onClick={copyState() === "NoCopy" ? () => {
       navigator.clipboard.writeText(stringify(props.value)).then(
@@ -10476,11 +10615,58 @@ var CopyButton = (props) => {
     <Match when={copyState() === "ErrorCopy"}><ErrorCopier /></Match>
   </Switch></button>;
 };
+var ClearArrayButton = (props) => {
+  const styles = getStyles();
+  const queryClient = useQueryDevtoolsContext().client;
+  return <button
+    class={styles.actionButton}
+    title="Remove all items"
+    aria-label="Remove all items"
+    onClick={() => {
+      const oldData = props.activeQuery.state.data;
+      const newData = updateNestedDataByPath(oldData, props.dataPath, []);
+      queryClient.setQueryData(props.activeQuery.queryKey, newData);
+    }}
+  ><List /></button>;
+};
+var DeleteItemButton = (props) => {
+  const styles = getStyles();
+  const queryClient = useQueryDevtoolsContext().client;
+  return <button
+    class={clsx(styles.actionButton)}
+    title="Delete item"
+    aria-label="Delete item"
+    onClick={() => {
+      const oldData = props.activeQuery.state.data;
+      const newData = deleteNestedDataByPath(oldData, props.dataPath);
+      queryClient.setQueryData(props.activeQuery.queryKey, newData);
+    }}
+  ><Trash /></button>;
+};
+var ToggleValueButton = (props) => {
+  const styles = getStyles();
+  const queryClient = useQueryDevtoolsContext().client;
+  return <button
+    class={clsx(styles.actionButton)}
+    title="Toggle value"
+    aria-label="Toggle value"
+    onClick={() => {
+      const oldData = props.activeQuery.state.data;
+      const newData = updateNestedDataByPath(
+        oldData,
+        props.dataPath,
+        !props.value
+      );
+      queryClient.setQueryData(props.activeQuery.queryKey, newData);
+    }}
+  ><Check checked={props.value} /></button>;
+};
 function isIterable(x) {
   return Symbol.iterator in x;
 }
 function Explorer(props) {
   const styles = getStyles();
+  const queryClient = useQueryDevtoolsContext().client;
   const [expanded, setExpanded] = createSignal(
     (props.defaultExpanded || []).includes(props.label)
   );
@@ -10522,6 +10708,7 @@ function Explorer(props) {
     return typeof props.value;
   });
   const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
+  const currentDataPath = props.dataPath ?? [];
   return <div class={styles.entry}>
     <Show when={subEntryPages().length}>
       <div class={styles.expanderButtonContainer}>
@@ -10540,7 +10727,21 @@ function Explorer(props) {
             {subEntries().length > 1 ? `items` : `item`}
           </span>
         </button>
-        <Show when={props.copyable}><CopyButton value={props.value} /></Show>
+        <Show when={props.editable}><div class={styles.actions}>
+          <CopyButton value={props.value} />
+          <Show
+            when={props.itemsDeletable && props.activeQuery !== void 0}
+          ><DeleteItemButton
+            activeQuery={props.activeQuery}
+            dataPath={currentDataPath}
+          /></Show>
+          <Show
+            when={type() === "array" && props.activeQuery !== void 0}
+          ><ClearArrayButton
+            activeQuery={props.activeQuery}
+            dataPath={currentDataPath}
+          /></Show>
+        </div></Show>
       </div>
       <Show when={expanded()}>
         <Show when={subEntryPages().length === 1}><div class={styles.subEntry}><Key each={subEntries()} by={(item) => item.label}>{(entry) => {
@@ -10548,7 +10749,10 @@ function Explorer(props) {
             defaultExpanded={props.defaultExpanded}
             label={entry().label}
             value={entry().value}
-            copyable={props.copyable}
+            editable={props.editable}
+            dataPath={[...currentDataPath, entry().label]}
+            activeQuery={props.activeQuery}
+            itemsDeletable={type() === "array" || type() === "Iterable" || type() === "object"}
           />;
         }}</Key></div></Show>
         <Show when={subEntryPages().length > 1}><div class={styles.subEntry}><Index each={subEntryPages()}>{(entries3, index) => <div><div class={styles.entry}>
@@ -10570,22 +10774,55 @@ function Explorer(props) {
             defaultExpanded={props.defaultExpanded}
             label={entry().label}
             value={entry().value}
-            copyable={props.copyable}
+            editable={props.editable}
+            dataPath={[...currentDataPath, entry().label]}
+            activeQuery={props.activeQuery}
           />}</Key></div></Show>
         </div></div>}</Index></div></Show>
       </Show>
     </Show>
-    <Show when={subEntryPages().length === 0}><div
-      style={{
-        "line-height": "1.125rem"
-      }}
-    >
+    <Show when={subEntryPages().length === 0}><div class={styles.row}>
       <span class={styles.label}>
         {props.label}
         {":"}
       </span>
-      {" "}
-      <span class={styles.value}>{displayValue(props.value)}</span>
+      <Show
+        when={props.editable && props.activeQuery !== void 0 && (type() === "string" || type() === "number" || type() === "boolean")}
+        fallback={<span class={styles.value}>{displayValue(props.value)}</span>}
+      >
+        <Show
+          when={props.editable && props.activeQuery !== void 0 && (type() === "string" || type() === "number")}
+        ><input
+          type={type() === "number" ? "number" : "text"}
+          class={clsx(styles.value, styles.editableInput)}
+          value={props.value}
+          onChange={(changeEvent) => {
+            const oldData = props.activeQuery.state.data;
+            const newData = updateNestedDataByPath(
+              oldData,
+              currentDataPath,
+              type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value
+            );
+            queryClient.setQueryData(props.activeQuery.queryKey, newData);
+          }}
+        /></Show>
+        <Show when={type() === "boolean"}><span
+          class={clsx(styles.value, styles.actions, styles.editableInput)}
+        >
+          <ToggleValueButton
+            activeQuery={props.activeQuery}
+            dataPath={currentDataPath}
+            value={props.value}
+          />
+          {displayValue(props.value)}
+        </span></Show>
+      </Show>
+      <Show
+        when={props.editable && props.itemsDeletable && props.activeQuery !== void 0}
+      ><DeleteItemButton
+        activeQuery={props.activeQuery}
+        dataPath={currentDataPath}
+      /></Show>
     </div></Show>
   </div>;
 }
@@ -10625,6 +10862,7 @@ var getStyles = () => {
       align-items: center;
       line-height: 1.125rem;
       min-height: 1.125rem;
+      gap: ${size2[2]};
     `,
     expanderButton: u`
       cursor: pointer;
@@ -10662,8 +10900,32 @@ var getStyles = () => {
     `,
     value: u`
       color: ${colors.purple[400]};
+      flex-grow: 1;
+    `,
+    actions: u`
+      display: inline-flex;
+      gap: ${size2[2]};
+      align-items: center;
     `,
-    copyButton: u`
+    row: u`
+      display: inline-flex;
+      gap: ${size2[2]};
+      width: 100%;
+      margin-bottom: ${size2[0.5]};
+      line-height: 1.125rem;
+      align-items: center;
+    `,
+    editableInput: u`
+      border: none;
+      padding: ${size2[0.5]} ${size2[1]};
+      flex-grow: 1;
+      background-color: ${colors.gray[900]};
+
+      &:hover {
+        background-color: ${colors.gray[800]};
+      }
+    `,
+    actionButton: u`
       background-color: transparent;
       border: none;
       display: inline-flex;
@@ -10674,11 +10936,18 @@ var getStyles = () => {
       width: ${size2[3]};
       height: ${size2[3]};
       position: relative;
-      left: ${size2[2]};
       z-index: 1;
 
-      &:hover svg .copier {
-        stroke: ${colors.gray[500]} !important;
+      &:hover svg {
+        .copier,
+        .check,
+        .list {
+          stroke: ${colors.gray[500]} !important;
+        }
+
+        .list-item {
+          stroke: ${colors.gray[700]};
+        }
       }
 
       &:focus-visible {
@@ -10690,17 +10959,6 @@ var getStyles = () => {
   };
 };
 
-// src/Context.ts
-var QueryDevtoolsContext = createContext({
-  client: void 0,
-  onlineManager: void 0,
-  queryFlavor: "",
-  version: ""
-});
-function useQueryDevtoolsContext() {
-  return useContext(QueryDevtoolsContext);
-}
-
 // src/fonts.ts
 var loadFonts = () => {
   const link = document.createElement("link");
@@ -11628,7 +11886,8 @@ var QueryDetails = () => {
       label="Data"
       defaultExpanded={["Data"]}
       value={activeQueryStateData()}
-      copyable={true}
+      editable={true}
+      activeQuery={activeQuery()}
     /></div>
     <div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
     <div