@tanstack/react-query-devtools 4.15.1 → 4.16.0

package/build/umd/index.development.js

@@ -2006,7 +2006,7 @@
   var registerCustom = function (transformer, name) {
       return CustomTransformerRegistry.register(__assign({ name: name }, transformer));
   };
-  var SuperJSON = {
+  var superjson = {
       stringify: stringify,
       parse: parse,
       serialize: serialize,
@@ -2124,7 +2124,7 @@
   const displayValue = (value, beautify = false) => {
     const {
       json
-    } = SuperJSON.serialize(value);
+    } = superjson.serialize(value);
     return JSON.stringify(json, null, beautify ? 2 : undefined);
   }; // Sorting functions
 
@@ -2375,6 +2375,36 @@
     border: 'none',
     padding: 0
   });
+  const CopyButton = ({
+    value
+  }) => {
+    const [copyState, setCopyState] = React__namespace.useState('NoCopy');
+    return /*#__PURE__*/React__namespace.createElement("button", {
+      onClick: copyState === 'NoCopy' ? () => {
+        navigator.clipboard.writeText(superjson.stringify(value)).then(() => {
+          setCopyState('SuccessCopy');
+          setTimeout(() => {
+            setCopyState('NoCopy');
+          }, 1500);
+        }, err => {
+          console.error('Failed to copy: ', err);
+          setCopyState('ErrorCopy');
+          setTimeout(() => {
+            setCopyState('NoCopy');
+          }, 1500);
+        });
+      } : undefined,
+      style: {
+        cursor: 'pointer',
+        color: 'inherit',
+        font: 'inherit',
+        outline: 'inherit',
+        background: 'transparent',
+        border: 'none',
+        padding: 0
+      }
+    }, copyState === 'NoCopy' ? /*#__PURE__*/React__namespace.createElement(Copier, null) : copyState === 'SuccessCopy' ? /*#__PURE__*/React__namespace.createElement(CopiedCopier, null) : /*#__PURE__*/React__namespace.createElement(ErrorCopier, null));
+  };
   const Value = styled('span', (_props, theme) => ({
     color: theme.danger
   }));
@@ -2399,6 +2429,68 @@
     }
   }, "\u25B6");
 
+  const Copier = () => /*#__PURE__*/React__namespace.createElement("span", {
+    "aria-label": "Copy object to clipboard",
+    title: "Copy object to clipboard",
+    style: {
+      paddingLeft: '1em'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("svg", {
+    height: "12",
+    viewBox: "0 0 16 12",
+    width: "10"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"
+  })));
+
+  const ErrorCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
+    "aria-label": "Failed copying to clipboard",
+    title: "Failed copying to clipboard",
+    style: {
+      paddingLeft: '1em',
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("svg", {
+    height: "12",
+    viewBox: "0 0 16 12",
+    width: "10",
+    display: "block"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "red",
+    d: "M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+  })), /*#__PURE__*/React__namespace.createElement("span", {
+    style: {
+      color: 'red',
+      fontSize: '12px',
+      paddingLeft: '4px',
+      position: 'relative',
+      top: '2px'
+    }
+  }, "See console"));
+
+  const CopiedCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
+    "aria-label": "Object copied to clipboard",
+    title: "Object copied to clipboard",
+    style: {
+      paddingLeft: '1em',
+      display: 'inline-block',
+      verticalAlign: 'middle'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("svg", {
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    display: "block"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "green",
+    d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+  })));
+
   /**
    * Chunk elements in the array by size
    *
@@ -2428,6 +2520,7 @@
     subEntryPages = [],
     type,
     expanded = false,
+    copyable = false,
     toggleExpanded,
     pageSize
   }) => {
@@ -2438,7 +2531,9 @@
       onClick: () => toggleExpanded()
     }, /*#__PURE__*/React__namespace.createElement(Expander, {
       expanded: expanded
-    }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
+    }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), copyable ? /*#__PURE__*/React__namespace.createElement(CopyButton, {
+      value: value
+    }) : null, expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
       key: index
     }, /*#__PURE__*/React__namespace.createElement(Entry, null, /*#__PURE__*/React__namespace.createElement(LabelButton, {
       onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
@@ -2456,6 +2551,7 @@
     defaultExpanded,
     renderer = DefaultRenderer,
     pageSize = 100,
+    copyable = false,
     ...rest
   }) {
     const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
@@ -2497,13 +2593,15 @@
       handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _extends({
         key: entry.label,
         value: value,
-        renderer: renderer
+        renderer: renderer,
+        copyable: copyable
       }, rest, entry)),
       type,
       subEntries,
       subEntryPages,
       value,
       expanded,
+      copyable,
       toggleExpanded,
       pageSize,
       ...rest
@@ -3180,7 +3278,8 @@
     }, /*#__PURE__*/React__namespace.createElement(Explorer, {
       label: "Data",
       value: activeQueryState.data,
-      defaultExpanded: {}
+      defaultExpanded: {},
+      copyable: true
     })), /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         background: defaultTheme.backgroundAlt,