sanity-plugin-documents-pane 1.0.6 → 1.0.9

package/lib/Debug.js

@@ -20,13 +20,4 @@ function Debug(_ref) {
     space: 4
   }, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Label, null, "Params")), /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Code, null, JSON.stringify(params)))));
 }
-
-Debug.propTypes = {
-  params: PropTypes.object,
-  query: PropTypes.string
-};
-Debug.defaultProps = {
-  params: {},
-  query: ""
-};
 //# sourceMappingURL=Debug.js.map

package/lib/Debug.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Debug.tsx"],"names":["Debug","query","params","JSON","stringify","propTypes","PropTypes","object","string","defaultProps"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,KAAT,OAAgC;AAAA,MAAhBC,KAAgB,QAAhBA,KAAgB;AAAA,MAATC,MAAS,QAATA,MAAS;AAC7C,sBACE,yEACE,6BAAC,SAAD;AAAO,IAAA,KAAK,EAAE;AAAd,kBACE,6BAAC,OAAD,qBAAK,6BAAC,SAAD,gBAAL,CADF,eAEE,6BAAC,OAAD,qBACE,6BAAC,QAAD,QAAOD,KAAP,CADF,CAFF,CADF,eAOE,6BAAC,SAAD;AAAO,IAAA,KAAK,EAAE;AAAd,kBACE,6BAAC,OAAD,qBAAK,6BAAC,SAAD,iBAAL,CADF,eAEE,6BAAC,OAAD,qBACE,6BAAC,QAAD,QAAOE,IAAI,CAACC,SAAL,CAAeF,MAAf,CAAP,CADF,CAFF,CAPF,CADF;AAgBD;;AAEDF,KAAK,CAACK,SAAN,GAAkB;AAChBH,EAAAA,MAAM,EAAEI,SAAS,CAACC,MADF;AAEhBN,EAAAA,KAAK,EAAEK,SAAS,CAACE;AAFD,CAAlB;AAKAR,KAAK,CAACS,YAAN,GAAqB;AACnBP,EAAAA,MAAM,EAAE,EADW;AAEnBD,EAAAA,KAAK;AAFc,CAArB","sourcesContent":["import React from 'react'\nimport {Code, Box, Label, Stack} from '@sanity/ui'\n\nexport default function Debug({query, params}) {\n  return (\n    <>\n      <Stack space={4}>\n        <Box><Label>Query</Label></Box>\n        <Box>\n          <Code>{query}</Code>\n        </Box>\n      </Stack>\n      <Stack space={4}>\n        <Box><Label>Params</Label></Box>\n        <Box>\n          <Code>{JSON.stringify(params)}</Code>\n        </Box>\n      </Stack>\n    </>\n  )\n}\n\nDebug.propTypes = {\n  params: PropTypes.object,\n  query: PropTypes.string,\n}\n\nDebug.defaultProps = {\n  params: {},\n  query: ``,\n}\n"],"file":"Debug.js"}
+{"version":3,"file":"Debug.js","names":["Debug","query","params","JSON","stringify"],"sources":["../src/Debug.tsx"],"sourcesContent":["import React from 'react'\nimport {Code, Box, Label, Stack} from '@sanity/ui'\n\nexport default function Debug({query, params}: {query: string; params: {[key: string]: string}}) {\n  return (\n    <>\n      <Stack space={4}>\n        <Box>\n          <Label>Query</Label>\n        </Box>\n        <Box>\n          <Code>{query}</Code>\n        </Box>\n      </Stack>\n      <Stack space={4}>\n        <Box>\n          <Label>Params</Label>\n        </Box>\n        <Box>\n          <Code>{JSON.stringify(params)}</Code>\n        </Box>\n      </Stack>\n    </>\n  )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,KAAT,OAAkF;EAAA,IAAlEC,KAAkE,QAAlEA,KAAkE;EAAA,IAA3DC,MAA2D,QAA3DA,MAA2D;EAC/F,oBACE,yEACE,6BAAC,SAAD;IAAO,KAAK,EAAE;EAAd,gBACE,6BAAC,OAAD,qBACE,6BAAC,SAAD,gBADF,CADF,eAIE,6BAAC,OAAD,qBACE,6BAAC,QAAD,QAAOD,KAAP,CADF,CAJF,CADF,eASE,6BAAC,SAAD;IAAO,KAAK,EAAE;EAAd,gBACE,6BAAC,OAAD,qBACE,6BAAC,SAAD,iBADF,CADF,eAIE,6BAAC,OAAD,qBACE,6BAAC,QAAD,QAAOE,IAAI,CAACC,SAAL,CAAeF,MAAf,CAAP,CADF,CAJF,CATF,CADF;AAoBD"}

package/lib/Documents.js

@@ -5,76 +5,61 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Documents;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _reactQuery = require("react-query");
+var _react = _interopRequireWildcard(require("react"));
 
 var _ui = require("@sanity/ui");
 
-var _deskTool = require("@sanity/desk-tool");
+var _paths = require("@sanity/util/paths");
 
-var _RouterContext = require("@sanity/state-router/lib/RouterContext");
+var _deskTool = require("@sanity/desk-tool");
 
 var _preview = _interopRequireDefault(require("part:@sanity/base/preview"));
 
 var _schema = _interopRequireDefault(require("part:@sanity/base/schema"));
 
-var _client = _interopRequireDefault(require("part:@sanity/base/client"));
-
 var _Debug = _interopRequireDefault(require("./Debug"));
 
 var _Feedback = _interopRequireDefault(require("./Feedback"));
 
+var _useListeningQuery2 = _interopRequireDefault(require("./hooks/useListeningQuery"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var client = _client.default.withConfig({
-  apiVersion: "2021-05-19"
-});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function Documents(props) {
   var query = props.query,
       params = props.params,
-      debug = props.debug,
-      _rev = props._rev;
-
-  var _useQuery = (0, _reactQuery.useQuery)(['useDocuments', {
-    props
-  }], () => client.fetch(query, params)),
-      isLoading = _useQuery.isLoading,
-      error = _useQuery.error,
-      data = _useQuery.data;
-
-  var routerContext = _react.default.useContext(_RouterContext.RouterContext);
+      debug = props.debug;
 
   var _usePaneRouter = (0, _deskTool.usePaneRouter)(),
       routerPanesState = _usePaneRouter.routerPanesState,
-      groupIndex = _usePaneRouter.groupIndex;
-
-  var openDocumentInSidePane = _react.default.useCallback((id, type) => {
-    var newPane = [{
-      id: id,
-      params: {
-        type
-      }
-    }];
-    var panes = [routerPanesState[0], routerPanesState[1], newPane];
-    var href = routerContext.resolvePathFromState({
-      panes
+      groupIndex = _usePaneRouter.groupIndex,
+      handleEditReference = _usePaneRouter.handleEditReference;
+
+  var _useListeningQuery = (0, _useListeningQuery2.default)(query, params),
+      loading = _useListeningQuery.loading,
+      error = _useListeningQuery.error,
+      data = _useListeningQuery.data;
+
+  var handleClick = (0, _react.useCallback)((id, type) => {
+    var _routerPanesState;
+
+    var childParams = ((_routerPanesState = routerPanesState[groupIndex + 1]) === null || _routerPanesState === void 0 ? void 0 : _routerPanesState[0].params) || {};
+    var parentRefPath = childParams.parentRefPath;
+    handleEditReference({
+      id,
+      type,
+      // Uncertain that this works as intended
+      parentRefPath: parentRefPath ? (0, _paths.fromString)(parentRefPath) : [""],
+      // Added this to satisfy TS
+      template: type
     });
-    routerContext.navigateUrl(href);
-  }, [routerContext, routerPanesState, groupIndex]);
+  }, [routerPanesState, groupIndex, handleEditReference]);
 
-  if (!_rev) {
-    return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
-      padding: 4,
-      space: 5
-    }, /*#__PURE__*/_react.default.createElement(_Feedback.default, null, "Document must be Published"), debug && /*#__PURE__*/_react.default.createElement(_Debug.default, {
-      query: query,
-      params: params
-    }));
-  }
-
-  if (isLoading) {
+  if (loading) {
     return /*#__PURE__*/_react.default.createElement(_ui.Box, {
       padding: 4
     }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
@@ -107,13 +92,12 @@ function Documents(props) {
 
   return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
     padding: 2,
-    space: 2
+    space: 1
   }, data.map(doc => /*#__PURE__*/_react.default.createElement(_ui.Button, {
     key: doc._id,
-    onClick: () => openDocumentInSidePane(doc._id, doc._type),
-    mode: "bleed",
-    radius: 2,
-    padding: 2
+    onClick: () => handleClick(doc._id, doc._type),
+    padding: 2,
+    mode: "bleed"
   }, /*#__PURE__*/_react.default.createElement(_preview.default, {
     value: doc,
     type: _schema.default.get(doc._type)

package/lib/Documents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Documents.tsx"],"names":["client","sanityClient","withConfig","apiVersion","Documents","props","query","params","debug","_rev","fetch","isLoading","error","data","routerContext","React","useContext","RouterContext","routerPanesState","groupIndex","openDocumentInSidePane","useCallback","id","type","newPane","panes","href","resolvePathFromState","navigateUrl","length","map","doc","_id","_type","schema","get"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAEE,IAAMA,MAAM,GAAGC,gBAAaC,UAAb,CAAwB;AAACC,EAAAA,UAAU;AAAX,CAAxB,CAAf;;AAEa,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACvC,MAAOC,KAAP,GAAqCD,KAArC,CAAOC,KAAP;AAAA,MAAcC,MAAd,GAAqCF,KAArC,CAAcE,MAAd;AAAA,MAAsBC,KAAtB,GAAqCH,KAArC,CAAsBG,KAAtB;AAAA,MAA6BC,IAA7B,GAAqCJ,KAArC,CAA6BI,IAA7B;;AAEA,kBAAiC,0BAAS,CAAC,cAAD,EAAiB;AAACJ,IAAAA;AAAD,GAAjB,CAAT,EAAoC,MACnEL,MAAM,CAACU,KAAP,CAAaJ,KAAb,EAAoBC,MAApB,CAD+B,CAAjC;AAAA,MAAOI,SAAP,aAAOA,SAAP;AAAA,MAAkBC,KAAlB,aAAkBA,KAAlB;AAAA,MAAyBC,IAAzB,aAAyBA,IAAzB;;AAIA,MAAMC,aAAa,GAAGC,eAAMC,UAAN,CAAiBC,4BAAjB,CAAtB;;AACA,uBAAuC,8BAAvC;AAAA,MAAOC,gBAAP,kBAAOA,gBAAP;AAAA,MAAyBC,UAAzB,kBAAyBA,UAAzB;;AAEA,MAAMC,sBAAsB,GAAGL,eAAMM,WAAN,CAC7B,CAACC,EAAD,EAAaC,IAAb,KAA8B;AAC5B,QAAMC,OAAO,GAAG,CACd;AACEF,MAAAA,EAAE,EAAEA,EADN;AAEEf,MAAAA,MAAM,EAAE;AAACgB,QAAAA;AAAD;AAFV,KADc,CAAhB;AAMA,QAAIE,KAAK,GAAG,CAACP,gBAAgB,CAAC,CAAD,CAAjB,EAAsBA,gBAAgB,CAAC,CAAD,CAAtC,EAA2CM,OAA3C,CAAZ;AAEA,QAAME,IAAI,GAAGZ,aAAa,CAACa,oBAAd,CAAmC;AAACF,MAAAA;AAAD,KAAnC,CAAb;AACAX,IAAAA,aAAa,CAACc,WAAd,CAA0BF,IAA1B;AACD,GAZ4B,EAa7B,CAACZ,aAAD,EAAgBI,gBAAhB,EAAkCC,UAAlC,CAb6B,CAA/B;;AAgBA,MAAI,CAACV,IAAL,EAAW;AACT,wBACE,6BAAC,SAAD;AAAO,MAAA,OAAO,EAAE,CAAhB;AAAmB,MAAA,KAAK,EAAE;AAA1B,oBACE,6BAAC,iBAAD,qCADF,EAEGD,KAAK,iBAAI,6BAAC,cAAD;AAAO,MAAA,KAAK,EAAEF,KAAd;AAAqB,MAAA,MAAM,EAAEC;AAA7B,MAFZ,CADF;AAMD;;AAED,MAAII,SAAJ,EAAe;AACb,wBACE,6BAAC,OAAD;AAAK,MAAA,OAAO,EAAE;AAAd,oBACE,6BAAC,QAAD;AAAM,MAAA,OAAO,EAAC,QAAd;AAAuB,MAAA,KAAK,EAAC;AAA7B,oBACE,6BAAC,WAAD;AAAS,MAAA,KAAK;AAAd,MADF,CADF,CADF;AAOD;;AAED,MAAIC,KAAJ,EAAW;AACT,wBACE,6BAAC,SAAD;AAAO,MAAA,OAAO,EAAE,CAAhB;AAAmB,MAAA,KAAK,EAAE;AAA1B,oBACE,6BAAC,iBAAD,mDADF,EAEGJ,KAAK,iBAAI,6BAAC,cAAD;AAAO,MAAA,KAAK,EAAEF,KAAd;AAAqB,MAAA,MAAM,EAAEC;AAA7B,MAFZ,CADF;AAMD;;AAED,MAAI,EAACM,IAAD,aAACA,IAAD,eAACA,IAAI,CAAEgB,MAAP,CAAJ,EAAmB;AACjB,wBACE,6BAAC,SAAD;AAAO,MAAA,OAAO,EAAE,CAAhB;AAAmB,MAAA,KAAK,EAAE;AAA1B,oBACE,6BAAC,iBAAD,6BADF,EAEGrB,KAAK,iBAAI,6BAAC,cAAD;AAAO,MAAA,KAAK,EAAEF,KAAd;AAAqB,MAAA,MAAM,EAAEC;AAA7B,MAFZ,CADF;AAMD;;AAED,sBACE,6BAAC,SAAD;AAAO,IAAA,OAAO,EAAE,CAAhB;AAAmB,IAAA,KAAK,EAAE;AAA1B,KACGM,IAAI,CAACiB,GAAL,CAAUC,GAAD,iBACR,6BAAC,UAAD;AACE,IAAA,GAAG,EAAEA,GAAG,CAACC,GADX;AAEE,IAAA,OAAO,EAAE,MAAMZ,sBAAsB,CAACW,GAAG,CAACC,GAAL,EAAUD,GAAG,CAACE,KAAd,CAFvC;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,IAAA,MAAM,EAAE,CAJV;AAKE,IAAA,OAAO,EAAE;AALX,kBAOE,6BAAC,gBAAD;AAAS,IAAA,KAAK,EAAEF,GAAhB;AAAqB,IAAA,IAAI,EAAEG,gBAAOC,GAAP,CAAWJ,GAAG,CAACE,KAAf;AAA3B,IAPF,CADD,CADH,CADF;AAeD","sourcesContent":["import React from 'react'\nimport {useQuery} from 'react-query'\nimport {Button, Box, Stack, Flex, Spinner} from '@sanity/ui'\nimport {usePaneRouter} from '@sanity/desk-tool'\nimport {RouterContext} from '@sanity/state-router/lib/RouterContext'\nimport Preview from 'part:@sanity/base/preview'\nimport schema from 'part:@sanity/base/schema'\nimport sanityClient from 'part:@sanity/base/client'\n\nimport Debug from './Debug'\nimport Feedback from './Feedback'\n\n  const client = sanityClient.withConfig({apiVersion: `2021-05-19`})\n\nexport default function Documents(props) {\n  const {query, params, debug, _rev} = props\n\n  const {isLoading, error, data} = useQuery(['useDocuments', {props}], () =>\n    client.fetch(query, params)\n  )\n\n  const routerContext = React.useContext(RouterContext)\n  const {routerPanesState, groupIndex} = usePaneRouter()\n\n  const openDocumentInSidePane = React.useCallback(\n    (id: string, type: string) => {\n      const newPane = [\n        {\n          id: id,\n          params: {type},\n        },\n      ]\n      let panes = [routerPanesState[0], routerPanesState[1], newPane]\n\n      const href = routerContext.resolvePathFromState({panes})\n      routerContext.navigateUrl(href)\n    },\n    [routerContext, routerPanesState, groupIndex]\n  )\n\n  if (!_rev) {\n    return (\n      <Stack padding={4} space={5}>\n        <Feedback>Document must be Published</Feedback>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  if (isLoading) {\n    return (\n      <Box padding={4}>\n        <Flex justify=\"center\" align=\"center\">\n          <Spinner muted />\n        </Flex>\n      </Box>\n    )\n  }\n\n  if (error) {\n    return (\n      <Stack padding={4} space={5}>\n        <Feedback>There was en error performing this query</Feedback>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  if (!data?.length) {\n    return (\n      <Stack padding={4} space={5}>\n        <Feedback>No Documents found</Feedback>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack padding={2} space={2}>\n      {data.map((doc) => (\n        <Button\n          key={doc._id}\n          onClick={() => openDocumentInSidePane(doc._id, doc._type)}\n          mode=\"bleed\"\n          radius={2}\n          padding={2}\n        >\n          <Preview value={doc} type={schema.get(doc._type)} />\n        </Button>\n      ))}\n    </Stack>\n  )\n}\n"],"file":"Documents.js"}
+{"version":3,"file":"Documents.js","names":["Documents","props","query","params","debug","usePaneRouter","routerPanesState","groupIndex","handleEditReference","useListeningQuery","loading","error","data","handleClick","useCallback","id","type","childParams","parentRefPath","pathFromString","template","length","map","doc","_id","_type","schema","get"],"sources":["../src/Documents.tsx"],"sourcesContent":["import React, {useCallback} from 'react'\nimport {Box, Button, Stack, Flex, Spinner} from '@sanity/ui'\nimport {fromString as pathFromString} from '@sanity/util/paths'\nimport {usePaneRouter} from '@sanity/desk-tool'\nimport Preview from 'part:@sanity/base/preview'\nimport schema from 'part:@sanity/base/schema'\n\nimport Debug from './Debug'\nimport Feedback from './Feedback'\nimport useListeningQuery from './hooks/useListeningQuery'\n\ntype DocumentsProps = {\n  query: string\n  params: {[key: string]: string}\n  debug: boolean\n}\n\nexport default function Documents(props: DocumentsProps) {\n  const {query, params, debug} = props\n  const {routerPanesState, groupIndex, handleEditReference} = usePaneRouter()\n\n  const {loading, error, data} = useListeningQuery(query, params)\n\n  const handleClick = useCallback(\n    (id, type) => {\n      const childParams = routerPanesState[groupIndex + 1]?.[0].params || {}\n      const {parentRefPath} = childParams\n\n      handleEditReference({\n        id,\n        type,\n        // Uncertain that this works as intended\n        parentRefPath: parentRefPath ? pathFromString(parentRefPath) : [``],\n        // Added this to satisfy TS\n        template: type,\n      })\n    },\n    [routerPanesState, groupIndex, handleEditReference]\n  )\n\n  if (loading) {\n    return (\n      <Box padding={4}>\n        <Flex justify=\"center\" align=\"center\">\n          <Spinner muted />\n        </Flex>\n      </Box>\n    )\n  }\n\n  if (error) {\n    return (\n      <Stack padding={4} space={5}>\n        <Feedback>There was en error performing this query</Feedback>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  if (!data?.length) {\n    return (\n      <Stack padding={4} space={5}>\n        <Feedback>No Documents found</Feedback>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack padding={2} space={1}>\n      {data.map((doc) => (\n        <Button\n          key={doc._id}\n          onClick={() => handleClick(doc._id, doc._type)}\n          padding={2}\n          mode=\"bleed\"\n        >\n          <Preview value={doc} type={schema.get(doc._type)} />\n        </Button>\n      ))}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;AAQe,SAASA,SAAT,CAAmBC,KAAnB,EAA0C;EACvD,IAAOC,KAAP,GAA+BD,KAA/B,CAAOC,KAAP;EAAA,IAAcC,MAAd,GAA+BF,KAA/B,CAAcE,MAAd;EAAA,IAAsBC,KAAtB,GAA+BH,KAA/B,CAAsBG,KAAtB;;EACA,qBAA4D,IAAAC,uBAAA,GAA5D;EAAA,IAAOC,gBAAP,kBAAOA,gBAAP;EAAA,IAAyBC,UAAzB,kBAAyBA,UAAzB;EAAA,IAAqCC,mBAArC,kBAAqCA,mBAArC;;EAEA,yBAA+B,IAAAC,2BAAA,EAAkBP,KAAlB,EAAyBC,MAAzB,CAA/B;EAAA,IAAOO,OAAP,sBAAOA,OAAP;EAAA,IAAgBC,KAAhB,sBAAgBA,KAAhB;EAAA,IAAuBC,IAAvB,sBAAuBA,IAAvB;;EAEA,IAAMC,WAAW,GAAG,IAAAC,kBAAA,EAClB,CAACC,EAAD,EAAKC,IAAL,KAAc;IAAA;;IACZ,IAAMC,WAAW,GAAG,sBAAAX,gBAAgB,CAACC,UAAU,GAAG,CAAd,CAAhB,wEAAmC,CAAnC,EAAsCJ,MAAtC,KAAgD,EAApE;IACA,IAAOe,aAAP,GAAwBD,WAAxB,CAAOC,aAAP;IAEAV,mBAAmB,CAAC;MAClBO,EADkB;MAElBC,IAFkB;MAGlB;MACAE,aAAa,EAAEA,aAAa,GAAG,IAAAC,iBAAA,EAAeD,aAAf,CAAH,GAAmC,IAJ7C;MAKlB;MACAE,QAAQ,EAAEJ;IANQ,CAAD,CAAnB;EAQD,CAbiB,EAclB,CAACV,gBAAD,EAAmBC,UAAnB,EAA+BC,mBAA/B,CAdkB,CAApB;;EAiBA,IAAIE,OAAJ,EAAa;IACX,oBACE,6BAAC,OAAD;MAAK,OAAO,EAAE;IAAd,gBACE,6BAAC,QAAD;MAAM,OAAO,EAAC,QAAd;MAAuB,KAAK,EAAC;IAA7B,gBACE,6BAAC,WAAD;MAAS,KAAK;IAAd,EADF,CADF,CADF;EAOD;;EAED,IAAIC,KAAJ,EAAW;IACT,oBACE,6BAAC,SAAD;MAAO,OAAO,EAAE,CAAhB;MAAmB,KAAK,EAAE;IAA1B,gBACE,6BAAC,iBAAD,mDADF,EAEGP,KAAK,iBAAI,6BAAC,cAAD;MAAO,KAAK,EAAEF,KAAd;MAAqB,MAAM,EAAEC;IAA7B,EAFZ,CADF;EAMD;;EAED,IAAI,EAACS,IAAD,aAACA,IAAD,eAACA,IAAI,CAAES,MAAP,CAAJ,EAAmB;IACjB,oBACE,6BAAC,SAAD;MAAO,OAAO,EAAE,CAAhB;MAAmB,KAAK,EAAE;IAA1B,gBACE,6BAAC,iBAAD,6BADF,EAEGjB,KAAK,iBAAI,6BAAC,cAAD;MAAO,KAAK,EAAEF,KAAd;MAAqB,MAAM,EAAEC;IAA7B,EAFZ,CADF;EAMD;;EAED,oBACE,6BAAC,SAAD;IAAO,OAAO,EAAE,CAAhB;IAAmB,KAAK,EAAE;EAA1B,GACGS,IAAI,CAACU,GAAL,CAAUC,GAAD,iBACR,6BAAC,UAAD;IACE,GAAG,EAAEA,GAAG,CAACC,GADX;IAEE,OAAO,EAAE,MAAMX,WAAW,CAACU,GAAG,CAACC,GAAL,EAAUD,GAAG,CAACE,KAAd,CAF5B;IAGE,OAAO,EAAE,CAHX;IAIE,IAAI,EAAC;EAJP,gBAME,6BAAC,gBAAD;IAAS,KAAK,EAAEF,GAAhB;IAAqB,IAAI,EAAEG,eAAA,CAAOC,GAAP,CAAWJ,GAAG,CAACE,KAAf;EAA3B,EANF,CADD,CADH,CADF;AAcD"}

package/lib/DocumentsPane.js

@@ -9,10 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _dlv = _interopRequireDefault(require("dlv"));
 
-var _reactQuery = require("react-query");
+var _ui = require("@sanity/ui");
 
 var _Documents = _interopRequireDefault(require("./Documents"));
 
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+
+var _Debug = _interopRequireDefault(require("./Debug"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -21,31 +25,36 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var queryClient = new _reactQuery.QueryClient();
-
-function DocumentsPane(_ref) {
-  var sanityDocument = _ref.document,
-      options = _ref.options;
+function DocumentsPane(props) {
+  var sanityDocument = props.document,
+      options = props.options;
   var query = options.query,
       params = options.params,
       useDraft = options.useDraft,
       debug = options.debug;
   var doc = useDraft ? sanityDocument.displayed : sanityDocument.published;
 
-  var _ref2 = doc !== null && doc !== void 0 ? doc : {},
-      _id = _ref2._id,
-      _rev = _ref2._rev;
+  var _ref = doc !== null && doc !== void 0 ? doc : {},
+      _rev = _ref._rev;
 
   var paramValues = Object.keys(params).reduce((acc, key) => _objectSpread(_objectSpread({}, acc), {}, {
     [key]: (0, _dlv.default)(doc, params[key])
   }), {});
-  return /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {
-    client: queryClient
-  }, /*#__PURE__*/_react.default.createElement(_Documents.default, {
-    _rev: _rev,
+
+  if (!_rev) {
+    return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      padding: 4,
+      space: 5
+    }, /*#__PURE__*/_react.default.createElement(_Feedback.default, null, "Document must be Published to have References"), debug && /*#__PURE__*/_react.default.createElement(_Debug.default, {
+      query: query,
+      params: params
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Documents.default, {
     query: query,
     params: paramValues,
     debug: debug
-  }));
+  });
 }
 //# sourceMappingURL=DocumentsPane.js.map

package/lib/DocumentsPane.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/DocumentsPane.tsx"],"names":["queryClient","QueryClient","DocumentsPane","sanityDocument","document","options","query","params","useDraft","debug","doc","displayed","published","_id","_rev","paramValues","Object","keys","reduce","acc","key"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,IAAMA,WAAW,GAAG,IAAIC,uBAAJ,EAApB;;AAEe,SAASC,aAAT,OAA4D;AAAA,MAA1BC,cAA0B,QAApCC,QAAoC;AAAA,MAAVC,OAAU,QAAVA,OAAU;AACzE,MAAOC,KAAP,GAAyCD,OAAzC,CAAOC,KAAP;AAAA,MAAcC,MAAd,GAAyCF,OAAzC,CAAcE,MAAd;AAAA,MAAsBC,QAAtB,GAAyCH,OAAzC,CAAsBG,QAAtB;AAAA,MAAgCC,KAAhC,GAAyCJ,OAAzC,CAAgCI,KAAhC;AAEA,MAAMC,GAAG,GAAGF,QAAQ,GAAGL,cAAc,CAACQ,SAAlB,GAA8BR,cAAc,CAACS,SAAjE;;AACA,cAAoBF,GAApB,aAAoBA,GAApB,cAAoBA,GAApB,GAA2B,EAA3B;AAAA,MAAOG,GAAP,SAAOA,GAAP;AAAA,MAAYC,IAAZ,SAAYA,IAAZ;;AAEA,MAAMC,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYV,MAAZ,EAAoBW,MAApB,CAClB,CAACC,GAAD,EAAMC,GAAN,qCAAmBD,GAAnB;AAAwB,KAACC,GAAD,GAAO,kBAAMV,GAAN,EAAWH,MAAM,CAACa,GAAD,CAAjB;AAA/B,IADkB,EAElB,EAFkB,CAApB;AAKA,sBACE,6BAAC,+BAAD;AAAqB,IAAA,MAAM,EAAEpB;AAA7B,kBACE,6BAAC,kBAAD;AAAW,IAAA,IAAI,EAAEc,IAAjB;AAAuB,IAAA,KAAK,EAAER,KAA9B;AAAqC,IAAA,MAAM,EAAES,WAA7C;AAA0D,IAAA,KAAK,EAAEN;AAAjE,IADF,CADF;AAKD","sourcesContent":["import React from 'react'\nimport delve from 'dlv'\nimport {QueryClient, QueryClientProvider} from 'react-query'\n\nimport Documents from './Documents'\n\nconst queryClient = new QueryClient()\n\nexport default function DocumentsPane({document: sanityDocument, options}) {\n  const {query, params, useDraft, debug} = options\n\n  const doc = useDraft ? sanityDocument.displayed : sanityDocument.published\n  const {_id, _rev} = doc ?? {}\n\n  const paramValues = Object.keys(params).reduce(\n    (acc, key) => ({...acc, [key]: delve(doc, params[key])}),\n    {}\n  )\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <Documents _rev={_rev} query={query} params={paramValues} debug={debug} />\n    </QueryClientProvider>\n  )\n}\n"],"file":"DocumentsPane.js"}
+{"version":3,"file":"DocumentsPane.js","names":["DocumentsPane","props","sanityDocument","document","options","query","params","useDraft","debug","doc","displayed","published","_rev","paramValues","Object","keys","reduce","acc","key","delve"],"sources":["../src/DocumentsPane.tsx"],"sourcesContent":["import React from 'react'\nimport delve from 'dlv'\nimport {Stack} from '@sanity/ui'\nimport {SanityDocument} from '@sanity/client'\n\nimport Documents from './Documents'\nimport Feedback from './Feedback'\nimport Debug from './Debug'\n\ntype DocumentsPaneOptions = {\n  query: string\n  params: {[key: string]: string}\n  debug: boolean\n  useDraft: boolean\n}\n\ntype DocumentsPaneProps = {\n  document: SanityDocument\n  options: DocumentsPaneOptions\n}\n\nexport default function DocumentsPane(props: DocumentsPaneProps) {\n  const {document: sanityDocument, options} = props\n  const {query, params, useDraft, debug} = options\n\n  const doc = useDraft ? sanityDocument.displayed : sanityDocument.published\n  const {_rev} = doc ?? {}\n\n  const paramValues = Object.keys(params).reduce(\n    (acc, key) => ({...acc, [key]: delve(doc, params[key])}),\n    {}\n  )\n\n  if (!_rev) {\n    return (\n      <Stack padding={4} space={5}>\n        <Feedback>Document must be Published to have References</Feedback>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  return <Documents query={query} params={paramValues} debug={debug} />\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;AACA;;;;;;;;;;AAce,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;EAC/D,IAAiBC,cAAjB,GAA4CD,KAA5C,CAAOE,QAAP;EAAA,IAAiCC,OAAjC,GAA4CH,KAA5C,CAAiCG,OAAjC;EACA,IAAOC,KAAP,GAAyCD,OAAzC,CAAOC,KAAP;EAAA,IAAcC,MAAd,GAAyCF,OAAzC,CAAcE,MAAd;EAAA,IAAsBC,QAAtB,GAAyCH,OAAzC,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyCJ,OAAzC,CAAgCI,KAAhC;EAEA,IAAMC,GAAG,GAAGF,QAAQ,GAAGL,cAAc,CAACQ,SAAlB,GAA8BR,cAAc,CAACS,SAAjE;;EACA,WAAeF,GAAf,aAAeA,GAAf,cAAeA,GAAf,GAAsB,EAAtB;EAAA,IAAOG,IAAP,QAAOA,IAAP;;EAEA,IAAMC,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYT,MAAZ,EAAoBU,MAApB,CAClB,CAACC,GAAD,EAAMC,GAAN,qCAAmBD,GAAnB;IAAwB,CAACC,GAAD,GAAO,IAAAC,YAAA,EAAMV,GAAN,EAAWH,MAAM,CAACY,GAAD,CAAjB;EAA/B,EADkB,EAElB,EAFkB,CAApB;;EAKA,IAAI,CAACN,IAAL,EAAW;IACT,oBACE,6BAAC,SAAD;MAAO,OAAO,EAAE,CAAhB;MAAmB,KAAK,EAAE;IAA1B,gBACE,6BAAC,iBAAD,wDADF,EAEGJ,KAAK,iBAAI,6BAAC,cAAD;MAAO,KAAK,EAAEH,KAAd;MAAqB,MAAM,EAAEC;IAA7B,EAFZ,CADF;EAMD;;EAED,oBAAO,6BAAC,kBAAD;IAAW,KAAK,EAAED,KAAlB;IAAyB,MAAM,EAAEQ,WAAjC;IAA8C,KAAK,EAAEL;EAArD,EAAP;AACD"}

package/lib/Feedback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Feedback.tsx"],"names":["Feedback","props","children","tone"],"mappings":";;;;;;;AAAA;;AACA;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAOC,QAAP,GAAqCD,KAArC,CAAOC,QAAP;AAAA,oBAAqCD,KAArC,CAAiBE,IAAjB;AAAA,MAAiBA,IAAjB;AAEA,sBACE,6BAAC,QAAD;AAAM,IAAA,OAAO,EAAE,CAAf;AAAkB,IAAA,MAAM,EAAE,CAA1B;AAA6B,IAAA,MAAM,EAAE,CAArC;AAAwC,IAAA,IAAI,EAAEA;AAA9C,kBACE,6BAAC,QAAD;AAAM,IAAA,IAAI,EAAE;AAAZ,KAAgBD,QAAhB,CADF,CADF;AAKD","sourcesContent":["import React from 'react'\nimport {Card, Text} from '@sanity/ui'\nimport type {BadgeTone} from '@sanity/ui'\n\ntype FeedbackProps = {\n  children?: React.ReactNode\n  tone?: BadgeTone\n}\n\nexport default function Feedback(props: FeedbackProps) {\n  const {children, tone = `caution`} = props\n\n  return (\n    <Card padding={3} radius={2} shadow={1} tone={tone}>\n      <Text size={1}>{children}</Text>\n    </Card>\n  )\n}\n"],"file":"Feedback.js"}
+{"version":3,"file":"Feedback.js","names":["Feedback","props","children","tone"],"sources":["../src/Feedback.tsx"],"sourcesContent":["import React from 'react'\nimport {Card, Text} from '@sanity/ui'\nimport type {BadgeTone} from '@sanity/ui'\n\ntype FeedbackProps = {\n  children?: React.ReactNode\n  tone?: BadgeTone\n}\n\nexport default function Feedback(props: FeedbackProps) {\n  const {children, tone = `caution`} = props\n\n  return (\n    <Card padding={3} radius={2} shadow={1} tone={tone}>\n      <Text size={1}>{children}</Text>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;EACrD,IAAOC,QAAP,GAAqCD,KAArC,CAAOC,QAAP;EAAA,kBAAqCD,KAArC,CAAiBE,IAAjB;EAAA,IAAiBA,IAAjB;EAEA,oBACE,6BAAC,QAAD;IAAM,OAAO,EAAE,CAAf;IAAkB,MAAM,EAAE,CAA1B;IAA6B,MAAM,EAAE,CAArC;IAAwC,IAAI,EAAEA;EAA9C,gBACE,6BAAC,QAAD;IAAM,IAAI,EAAE;EAAZ,GAAgBD,QAAhB,CADF,CADF;AAKD"}

package/lib/hooks/useListeningQuery.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useListeningQuery;
+
+var _react = require("react");
+
+var _document = _interopRequireDefault(require("part:@sanity/base/datastore/document"));
+
+var _operators = require("rxjs/operators");
+
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var DEFAULT_PARAMS = {};
+var DEFAULT_OPTIONS = {
+  apiVersion: "v2022-05-09"
+};
+
+function useListeningQuery(query) {
+  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_PARAMS;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_OPTIONS;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      data = _useState6[0],
+      setData = _useState6[1];
+
+  var subscription = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (query) {
+      subscription.current = _document.default.listenQuery(query, params, options).pipe((0, _operators.distinctUntilChanged)(_reactFastCompare.default), (0, _operators.catchError)(err => {
+        console.error(err);
+        setError(err);
+        setLoading(false);
+        setData(null);
+        return err;
+      })).subscribe(documents => {
+        setData(current => (0, _reactFastCompare.default)(current, documents) ? current : documents);
+        setLoading(false);
+        setError(false);
+      });
+    }
+
+    return () => {
+      return subscription.current ? subscription.current.unsubscribe() : undefined;
+    };
+  }, [query, params, options]);
+  return {
+    loading,
+    error,
+    data
+  };
+}
+//# sourceMappingURL=useListeningQuery.js.map

package/lib/hooks/useListeningQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListeningQuery.js","names":["DEFAULT_PARAMS","DEFAULT_OPTIONS","apiVersion","useListeningQuery","query","params","options","useState","loading","setLoading","error","setError","data","setData","subscription","useRef","useEffect","current","documentStore","listenQuery","pipe","distinctUntilChanged","isEqual","catchError","err","console","subscribe","documents","unsubscribe","undefined"],"sources":["../../src/hooks/useListeningQuery.ts"],"sourcesContent":["import React, {useEffect, useState, useRef} from 'react'\nimport documentStore from 'part:@sanity/base/datastore/document'\nimport {catchError, distinctUntilChanged} from 'rxjs/operators'\nimport isEqual from 'react-fast-compare'\n\ntype Params = Record<string, string | number | boolean | string[]>\n\ninterface ListenQueryOptions {\n  tag?: string\n  apiVersion?: string\n}\n\ntype ReturnShape = {\n  loading: boolean\n  error: boolean\n  data: any\n}\n\ntype Observable = {\n  unsubscribe: () => void\n}\n\nconst DEFAULT_PARAMS = {}\nconst DEFAULT_OPTIONS = {apiVersion: `v2022-05-09`}\n\nexport default function useListeningQuery(\n  query: string,\n  params: Params = DEFAULT_PARAMS,\n  options: ListenQueryOptions = DEFAULT_OPTIONS\n): ReturnShape {\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState(false)\n  const [data, setData] = useState(null)\n  const subscription = useRef<null | Observable>(null)\n\n  useEffect(() => {\n    if (query) {\n      subscription.current = documentStore\n        .listenQuery(query, params, options)\n        .pipe(\n          distinctUntilChanged(isEqual),\n          catchError((err) => {\n            console.error(err)\n            setError(err)\n            setLoading(false)\n            setData(null)\n\n            return err\n          })\n        )\n        .subscribe((documents) => {\n          setData((current) => (isEqual(current, documents) ? current : documents))\n          setLoading(false)\n          setError(false)\n        })\n    }\n\n    return () => {\n      return subscription.current ? subscription.current.unsubscribe() : undefined\n    }\n  }, [query, params, options])\n\n  return {loading, error, data}\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAmBA,IAAMA,cAAc,GAAG,EAAvB;AACA,IAAMC,eAAe,GAAG;EAACC,UAAU;AAAX,CAAxB;;AAEe,SAASC,iBAAT,CACbC,KADa,EAIA;EAAA,IAFbC,MAEa,uEAFIL,cAEJ;EAAA,IADbM,OACa,uEADiBL,eACjB;;EACb,gBAA8B,IAAAM,eAAA,EAAS,IAAT,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB;;EACA,iBAA0B,IAAAF,eAAA,EAAS,KAAT,CAA1B;EAAA;EAAA,IAAOG,KAAP;EAAA,IAAcC,QAAd;;EACA,iBAAwB,IAAAJ,eAAA,EAAS,IAAT,CAAxB;EAAA;EAAA,IAAOK,IAAP;EAAA,IAAaC,OAAb;;EACA,IAAMC,YAAY,GAAG,IAAAC,aAAA,EAA0B,IAA1B,CAArB;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,IAAIZ,KAAJ,EAAW;MACTU,YAAY,CAACG,OAAb,GAAuBC,iBAAA,CACpBC,WADoB,CACRf,KADQ,EACDC,MADC,EACOC,OADP,EAEpBc,IAFoB,CAGnB,IAAAC,+BAAA,EAAqBC,yBAArB,CAHmB,EAInB,IAAAC,qBAAA,EAAYC,GAAD,IAAS;QAClBC,OAAO,CAACf,KAAR,CAAcc,GAAd;QACAb,QAAQ,CAACa,GAAD,CAAR;QACAf,UAAU,CAAC,KAAD,CAAV;QACAI,OAAO,CAAC,IAAD,CAAP;QAEA,OAAOW,GAAP;MACD,CAPD,CAJmB,EAapBE,SAboB,CAaTC,SAAD,IAAe;QACxBd,OAAO,CAAEI,OAAD,IAAc,IAAAK,yBAAA,EAAQL,OAAR,EAAiBU,SAAjB,IAA8BV,OAA9B,GAAwCU,SAAvD,CAAP;QACAlB,UAAU,CAAC,KAAD,CAAV;QACAE,QAAQ,CAAC,KAAD,CAAR;MACD,CAjBoB,CAAvB;IAkBD;;IAED,OAAO,MAAM;MACX,OAAOG,YAAY,CAACG,OAAb,GAAuBH,YAAY,CAACG,OAAb,CAAqBW,WAArB,EAAvB,GAA4DC,SAAnE;IACD,CAFD;EAGD,CAzBD,EAyBG,CAACzB,KAAD,EAAQC,MAAR,EAAgBC,OAAhB,CAzBH;EA2BA,OAAO;IAACE,OAAD;IAAUE,KAAV;IAAiBE;EAAjB,CAAP;AACD"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["DocumentsPane"],"mappings":";;;;;;;AACA;;;;eAEeA,sB","sourcesContent":["\nimport DocumentsPane from \"./DocumentsPane\";\n\nexport default DocumentsPane\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["DocumentsPane"],"sources":["../src/index.ts"],"sourcesContent":["import DocumentsPane from './DocumentsPane'\n\nexport default DocumentsPane\n"],"mappings":";;;;;;;AAAA;;;;eAEeA,sB"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "sanity-plugin-documents-pane",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "description": "Displays the results of a GROQ query in a View Pane",
   "main": "lib/index.js",
   "scripts": {
     "build": "sanipack build",
+    "verify": "sanipack verify",
     "watch": "sanipack build --watch",
     "_postinstall": "husky install",
     "prepublishOnly": "pinst --disable && sanipack build && sanipack verify",
@@ -28,42 +29,32 @@
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
   "dependencies": {
-    "@sanity/base": "^2.29.5",
-    "@sanity/desk-tool": "^2.29.5",
-    "@sanity/state-router": "^2.29.3",
-    "@sanity/ui": "^0.34.6",
+    "@sanity/ui": "^0.37.12",
     "dlv": "^1.1.3",
-    "react-query": "^3.19.1",
-    "husky": "^7.0.1"
-  },
-  "devDependencies": {
-    "eslint": "7.31.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-sanity": "5.1.0",
-    "eslint-plugin-react": "^7.24.0",
-    "pinst": "^2.1.6",
-    "prettier": "^2.3.2",
-    "sanipack": "^2.1.0"
+    "react-fast-compare": "^3.2.0",
+    "rxjs": "^6.5.6"
   },
   "peerDependencies": {
-    "react": "^17.0.0"
+    "@sanity/base": "^2.30.1",
+    "@sanity/desk-tool": "^2.30.1",
+    "@sanity/util": "^2.29.5",
+    "react": "^16.0.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@sanity/eslint-config-studio": "^2.0.0",
+    "eslint": "8.19.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-sanity": "6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "husky": "^8.0.1",
+    "pinst": "^3.0.0",
+    "prettier": "^2.7.1",
+    "sanipack": "^2.1.0",
+    "typescript": "^4.7.4"
   },
   "bugs": {
     "url": "https://github.com/sanity-io/sanity-plugin-document-pane/issues"
   },
-  "homepage": "https://github.com/sanity-io/sanity-plugin-document-pane#readme",
-  "prettier": {
-    "semi": false,
-    "printWidth": 100,
-    "bracketSpacing": false,
-    "singleQuote": true
-  },
-  "eslintConfig": {
-    "parser": "sanipack/babel/eslint-parser",
-    "extends": [
-      "sanity",
-      "sanity/react",
-      "prettier"
-    ]
-  }
+  "homepage": "https://github.com/sanity-io/sanity-plugin-document-pane#readme"
 }

package/src/Debug.tsx

@@ -1,17 +1,21 @@
 import React from 'react'
 import {Code, Box, Label, Stack} from '@sanity/ui'
 
-export default function Debug({query, params}) {
+export default function Debug({query, params}: {query: string; params: {[key: string]: string}}) {
   return (
     <>
       <Stack space={4}>
-        <Box><Label>Query</Label></Box>
+        <Box>
+          <Label>Query</Label>
+        </Box>
         <Box>
           <Code>{query}</Code>
         </Box>
       </Stack>
       <Stack space={4}>
-        <Box><Label>Params</Label></Box>
+        <Box>
+          <Label>Params</Label>
+        </Box>
         <Box>
           <Code>{JSON.stringify(params)}</Code>
         </Box>
@@ -19,13 +23,3 @@ export default function Debug({query, params}) {
     </>
   )
 }
-
-Debug.propTypes = {
-  params: PropTypes.object,
-  query: PropTypes.string,
-}
-
-Debug.defaultProps = {
-  params: {},
-  query: ``,
-}

package/src/Documents.tsx

@@ -1,53 +1,44 @@
-import React from 'react'
-import {useQuery} from 'react-query'
-import {Button, Box, Stack, Flex, Spinner} from '@sanity/ui'
+import React, {useCallback} from 'react'
+import {Box, Button, Stack, Flex, Spinner} from '@sanity/ui'
+import {fromString as pathFromString} from '@sanity/util/paths'
 import {usePaneRouter} from '@sanity/desk-tool'
-import {RouterContext} from '@sanity/state-router/lib/RouterContext'
 import Preview from 'part:@sanity/base/preview'
 import schema from 'part:@sanity/base/schema'
-import sanityClient from 'part:@sanity/base/client'
 
 import Debug from './Debug'
 import Feedback from './Feedback'
+import useListeningQuery from './hooks/useListeningQuery'
 
-  const client = sanityClient.withConfig({apiVersion: `2021-05-19`})
-
-export default function Documents(props) {
-  const {query, params, debug, _rev} = props
+type DocumentsProps = {
+  query: string
+  params: {[key: string]: string}
+  debug: boolean
+}
 
-  const {isLoading, error, data} = useQuery(['useDocuments', {props}], () =>
-    client.fetch(query, params)
-  )
+export default function Documents(props: DocumentsProps) {
+  const {query, params, debug} = props
+  const {routerPanesState, groupIndex, handleEditReference} = usePaneRouter()
 
-  const routerContext = React.useContext(RouterContext)
-  const {routerPanesState, groupIndex} = usePaneRouter()
+  const {loading, error, data} = useListeningQuery(query, params)
 
-  const openDocumentInSidePane = React.useCallback(
-    (id: string, type: string) => {
-      const newPane = [
-        {
-          id: id,
-          params: {type},
-        },
-      ]
-      let panes = [routerPanesState[0], routerPanesState[1], newPane]
+  const handleClick = useCallback(
+    (id, type) => {
+      const childParams = routerPanesState[groupIndex + 1]?.[0].params || {}
+      const {parentRefPath} = childParams
 
-      const href = routerContext.resolvePathFromState({panes})
-      routerContext.navigateUrl(href)
+      handleEditReference({
+        id,
+        type,
+        // Uncertain that this works as intended
+        parentRefPath: parentRefPath ? pathFromString(parentRefPath) : [``],
+        // Added this to satisfy TS
+        template: type,
+      })
     },
-    [routerContext, routerPanesState, groupIndex]
+    [routerPanesState, groupIndex, handleEditReference]
   )
 
-  if (!_rev) {
-    return (
-      <Stack padding={4} space={5}>
-        <Feedback>Document must be Published</Feedback>
-        {debug && <Debug query={query} params={params} />}
-      </Stack>
-    )
-  }
-
-  if (isLoading) {
+  if (loading) {
     return (
       <Box padding={4}>
         <Flex justify="center" align="center">
@@ -76,14 +67,13 @@ export default function Documents(props) {
   }
 
   return (
-    <Stack padding={2} space={2}>
+    <Stack padding={2} space={1}>
       {data.map((doc) => (
         <Button
           key={doc._id}
-          onClick={() => openDocumentInSidePane(doc._id, doc._type)}
-          mode="bleed"
-          radius={2}
+          onClick={() => handleClick(doc._id, doc._type)}
           padding={2}
+          mode="bleed"
         >
           <Preview value={doc} type={schema.get(doc._type)} />
         </Button>

package/src/DocumentsPane.tsx

@@ -1,25 +1,44 @@
 import React from 'react'
 import delve from 'dlv'
-import {QueryClient, QueryClientProvider} from 'react-query'
+import {Stack} from '@sanity/ui'
+import {SanityDocument} from '@sanity/client'
 
 import Documents from './Documents'
+import Feedback from './Feedback'
+import Debug from './Debug'
 
-const queryClient = new QueryClient()
+type DocumentsPaneOptions = {
+  query: string
+  params: {[key: string]: string}
+  debug: boolean
+  useDraft: boolean
+}
+
+type DocumentsPaneProps = {
+  document: SanityDocument
+  options: DocumentsPaneOptions
+}
 
-export default function DocumentsPane({document: sanityDocument, options}) {
+export default function DocumentsPane(props: DocumentsPaneProps) {
+  const {document: sanityDocument, options} = props
   const {query, params, useDraft, debug} = options
 
   const doc = useDraft ? sanityDocument.displayed : sanityDocument.published
-  const {_id, _rev} = doc ?? {}
+  const {_rev} = doc ?? {}
 
   const paramValues = Object.keys(params).reduce(
     (acc, key) => ({...acc, [key]: delve(doc, params[key])}),
     {}
   )
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Documents _rev={_rev} query={query} params={paramValues} debug={debug} />
-    </QueryClientProvider>
-  )
+  if (!_rev) {
+    return (
+      <Stack padding={4} space={5}>
+        <Feedback>Document must be Published to have References</Feedback>
+        {debug && <Debug query={query} params={params} />}
+      </Stack>
+    )
+  }
+
+  return <Documents query={query} params={paramValues} debug={debug} />
 }

package/src/hooks/useListeningQuery.ts

@@ -0,0 +1,64 @@
+import React, {useEffect, useState, useRef} from 'react'
+import documentStore from 'part:@sanity/base/datastore/document'
+import {catchError, distinctUntilChanged} from 'rxjs/operators'
+import isEqual from 'react-fast-compare'
+
+type Params = Record<string, string | number | boolean | string[]>
+
+interface ListenQueryOptions {
+  tag?: string
+  apiVersion?: string
+}
+
+type ReturnShape = {
+  loading: boolean
+  error: boolean
+  data: any
+}
+
+type Observable = {
+  unsubscribe: () => void
+}
+
+const DEFAULT_PARAMS = {}
+const DEFAULT_OPTIONS = {apiVersion: `v2022-05-09`}
+
+export default function useListeningQuery(
+  query: string,
+  params: Params = DEFAULT_PARAMS,
+  options: ListenQueryOptions = DEFAULT_OPTIONS
+): ReturnShape {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+  const [data, setData] = useState(null)
+  const subscription = useRef<null | Observable>(null)
+
+  useEffect(() => {
+    if (query) {
+      subscription.current = documentStore
+        .listenQuery(query, params, options)
+        .pipe(
+          distinctUntilChanged(isEqual),
+          catchError((err) => {
+            console.error(err)
+            setError(err)
+            setLoading(false)
+            setData(null)
+
+            return err
+          })
+        )
+        .subscribe((documents) => {
+          setData((current) => (isEqual(current, documents) ? current : documents))
+          setLoading(false)
+          setError(false)
+        })
+    }
+
+    return () => {
+      return subscription.current ? subscription.current.unsubscribe() : undefined
+    }
+  }, [query, params, options])
+
+  return {loading, error, data}
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import DocumentsPane from './DocumentsPane'
+
+export default DocumentsPane

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "extends": "sanipack/babel"
-}

package/.eslintignore

@@ -1 +0,0 @@
-lib

package/src/index.js

@@ -1,4 +0,0 @@
-
-import DocumentsPane from "./DocumentsPane";
-
-export default DocumentsPane