@tanstack/react-query-devtools 4.15.1 → 4.16.0

package/build/lib/index.prod.mjs

@@ -422,6 +422,36 @@ const ExpandButton = styled('button', {
   border: 'none',
   padding: 0
 });
+const CopyButton = ({
+  value
+}) => {
+  const [copyState, setCopyState] = React.useState('NoCopy');
+  return /*#__PURE__*/React.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.createElement(Copier, null) : copyState === 'SuccessCopy' ? /*#__PURE__*/React.createElement(CopiedCopier, null) : /*#__PURE__*/React.createElement(ErrorCopier, null));
+};
 const Value = styled('span', (_props, theme) => ({
   color: theme.danger
 }));
@@ -446,6 +476,68 @@ const Expander = ({
   }
 }, "\u25B6");
 
+const Copier = () => /*#__PURE__*/React.createElement("span", {
+  "aria-label": "Copy object to clipboard",
+  title: "Copy object to clipboard",
+  style: {
+    paddingLeft: '1em'
+  }
+}, /*#__PURE__*/React.createElement("svg", {
+  height: "12",
+  viewBox: "0 0 16 12",
+  width: "10"
+}, /*#__PURE__*/React.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.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.createElement("span", {
+  "aria-label": "Failed copying to clipboard",
+  title: "Failed copying to clipboard",
+  style: {
+    paddingLeft: '1em',
+    display: 'flex',
+    alignItems: 'center'
+  }
+}, /*#__PURE__*/React.createElement("svg", {
+  height: "12",
+  viewBox: "0 0 16 12",
+  width: "10",
+  display: "block"
+}, /*#__PURE__*/React.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.createElement("span", {
+  style: {
+    color: 'red',
+    fontSize: '12px',
+    paddingLeft: '4px',
+    position: 'relative',
+    top: '2px'
+  }
+}, "See console"));
+
+const CopiedCopier = () => /*#__PURE__*/React.createElement("span", {
+  "aria-label": "Object copied to clipboard",
+  title: "Object copied to clipboard",
+  style: {
+    paddingLeft: '1em',
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  }
+}, /*#__PURE__*/React.createElement("svg", {
+  height: "16",
+  viewBox: "0 0 16 16",
+  width: "16",
+  display: "block"
+}, /*#__PURE__*/React.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
  *
@@ -475,6 +567,7 @@ const DefaultRenderer = ({
   subEntryPages = [],
   type,
   expanded = false,
+  copyable = false,
   toggleExpanded,
   pageSize
 }) => {
@@ -485,7 +578,9 @@ const DefaultRenderer = ({
     onClick: () => toggleExpanded()
   }, /*#__PURE__*/React.createElement(Expander, {
     expanded: expanded
-  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
+  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), copyable ? /*#__PURE__*/React.createElement(CopyButton, {
+    value: value
+  }) : null, expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
     key: index
   }, /*#__PURE__*/React.createElement(Entry, null, /*#__PURE__*/React.createElement(LabelButton, {
     onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
@@ -503,6 +598,7 @@ function Explorer({
   defaultExpanded,
   renderer = DefaultRenderer,
   pageSize = 100,
+  copyable = false,
   ...rest
 }) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
@@ -544,13 +640,15 @@ function Explorer({
     handleEntry: entry => /*#__PURE__*/React.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
@@ -1227,7 +1325,8 @@ const ActiveQuery = ({
   }, /*#__PURE__*/React.createElement(Explorer, {
     label: "Data",
     value: activeQueryState.data,
-    defaultExpanded: {}
+    defaultExpanded: {},
+    copyable: true
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       background: defaultTheme.backgroundAlt,