@webiny/app-headless-cms 0.0.0-mt-1

package/admin/plugins/fieldRenderers/object/multipleObjects.js

@@ -0,0 +1,72 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import { i18n } from "@webiny/app/i18n";
+import DynamicSection from "../DynamicSection";
+import { Fields } from "../../../components/ContentEntryForm/Fields";
+import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/close.svg";
+import { IconButton } from "@webiny/ui/Button";
+import { Cell } from "@webiny/ui/Grid";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+import { Typography } from "@webiny/ui/Typography";
+import Accordion from "../Accordion";
+import { fieldsWrapperStyle, dynamicSectionTitleStyle, dynamicSectionGridStyle, fieldsGridStyle } from "./StyledComponents";
+var t = i18n.ns("app-headless-cms/admin/fields/text");
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-objects",
+  renderer: {
+    rendererName: "objects",
+    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Objects"]))),
+    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a set of fields."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "object" && field.multipleValues;
+    },
+    render: function render(props) {
+      var field = props.field,
+          contentModel = props.contentModel;
+      return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
+        emptyValue: {},
+        showLabel: false,
+        renderTitle: function renderTitle(value) {
+          return /*#__PURE__*/React.createElement(Cell, {
+            span: 12,
+            className: dynamicSectionTitleStyle
+          }, /*#__PURE__*/React.createElement(Typography, {
+            use: "headline5"
+          }, "".concat(field.label, " ").concat(value.length ? "(".concat(value.length, ")") : "")), field.helpText && /*#__PURE__*/React.createElement(FormElementMessage, null, field.helpText));
+        },
+        gridClassName: dynamicSectionGridStyle
+      }), function (_ref2) {
+        var Bind = _ref2.Bind,
+            bind = _ref2.bind,
+            index = _ref2.index;
+        return /*#__PURE__*/React.createElement(Accordion, {
+          title: "".concat(props.field.label, " #").concat(index + 1),
+          action: index > 0 && /*#__PURE__*/React.createElement(IconButton, {
+            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+            onClick: function onClick() {
+              return bind.field.removeValue(index);
+            }
+          }) // Open first Accordion by default
+          ,
+          defaultValue: index === 0
+        }, /*#__PURE__*/React.createElement(Cell, {
+          span: 12,
+          className: fieldsWrapperStyle
+        }, /*#__PURE__*/React.createElement(Fields, Object.assign({
+          Bind: Bind
+        }, bind.index, {
+          contentModel: contentModel,
+          fields: field.settings.fields,
+          layout: field.settings.layout,
+          gridClassName: fieldsGridStyle
+        }))));
+      });
+    }
+  }
+};
+export default plugin;

package/admin/plugins/fieldRenderers/object/singleObject.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/object/singleObject.js

@@ -0,0 +1,45 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import { i18n } from "@webiny/app/i18n";
+import { Fields } from "../../../components/ContentEntryForm/Fields";
+import { SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+import { fieldsWrapperStyle } from "./StyledComponents";
+var t = i18n.ns("app-headless-cms/admin/fields/text");
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-object",
+  renderer: {
+    rendererName: "object",
+    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Object"]))),
+    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a set of fields."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "object" && !field.multipleValues;
+    },
+    render: function render(_ref2) {
+      var field = _ref2.field,
+          getBind = _ref2.getBind,
+          contentModel = _ref2.contentModel;
+      var Bind = getBind();
+      return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+        span: 12
+      }, /*#__PURE__*/React.createElement(SimpleFormHeader, {
+        title: field.label
+      }), field.helpText && /*#__PURE__*/React.createElement(FormElementMessage, null, field.helpText)), /*#__PURE__*/React.createElement(Cell, {
+        span: 12,
+        className: fieldsWrapperStyle
+      }, /*#__PURE__*/React.createElement(Fields, {
+        Bind: Bind,
+        contentModel: contentModel,
+        fields: field.settings.fields,
+        layout: field.settings.layout
+      })));
+    }
+  }
+};
+export default plugin;

package/admin/plugins/fieldRenderers/radioButtons.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/radioButtons.js

@@ -0,0 +1,45 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import get from "lodash/get";
+import { i18n } from "@webiny/app/i18n";
+import { Radio, RadioGroup } from "@webiny/ui/Radio";
+var t = i18n.ns("app-headless-cms/admin/fields/text");
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-radio-buttons",
+  renderer: {
+    rendererName: "radio-buttons",
+    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Radio Buttons"]))),
+    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders radio buttons, allowing selection of a single value."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return !field.multipleValues && get(field, "predefinedValues.enabled");
+    },
+    render: function render(_ref2) {
+      var field = _ref2.field,
+          getBind = _ref2.getBind;
+      var Bind = getBind();
+      var options = field.predefinedValues.values;
+      return /*#__PURE__*/React.createElement(Bind, null, /*#__PURE__*/React.createElement(RadioGroup, {
+        label: field.label,
+        description: field.helpText
+      }, function (_ref3) {
+        var onChange = _ref3.onChange,
+            getValue = _ref3.getValue;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(function (option, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: option.value + index
+          }, /*#__PURE__*/React.createElement(Radio, {
+            label: option.label,
+            value: getValue(option.value),
+            onChange: onChange(option.value)
+          }));
+        }));
+      }));
+    }
+  }
+};
+export default plugin;

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function ContentEntriesAutocomplete({ bind, field }: {
+    bind: any;
+    field: any;
+}): JSX.Element;
+export default ContentEntriesAutocomplete;

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js

@@ -0,0 +1,54 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import debounce from "lodash/debounce";
+import { AutoComplete } from "@webiny/ui/AutoComplete";
+import { i18n } from "@webiny/app/i18n";
+import { Link } from "@webiny/react-router";
+import { useReference } from "./useReference";
+import { renderItem } from "./renderItem";
+var t = i18n.ns("app-headless-cms/admin/fields/ref");
+var label = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry."])));
+
+function ContentEntriesAutocomplete(_ref) {
+  var bind = _ref.bind,
+      field = _ref.field;
+
+  var _useReference = useReference({
+    bind: bind,
+    field: field
+  }),
+      options = _useReference.options,
+      setSearch = _useReference.setSearch,
+      value = _useReference.value,
+      loading = _useReference.loading,
+      onChange = _useReference.onChange;
+
+  var unpublishedEntryInfo = null;
+
+  if (value && !value.published) {
+    var link = "/cms/content-entries/".concat(value.modelId, "?id=").concat(encodeURIComponent(value.id));
+    unpublishedEntryInfo = label({
+      publishItLink: /*#__PURE__*/React.createElement(Link, {
+        to: link
+      }, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["publish it"]))))
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(AutoComplete, Object.assign({}, bind, {
+    renderItem: renderItem,
+    onChange: onChange,
+    loading: loading,
+    value: value ? value.id : null,
+    options: options,
+    label: field.label,
+    description: /*#__PURE__*/React.createElement(React.Fragment, null, field.helpText, unpublishedEntryInfo),
+    onInput: debounce(function (search) {
+      return setSearch(search);
+    }, 250)
+  }));
+}
+
+export default ContentEntriesAutocomplete;

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function ContentEntriesMultiAutocomplete({ bind, field }: {
+    bind: any;
+    field: any;
+}): JSX.Element;
+export default ContentEntriesMultiAutocomplete;

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.js

@@ -0,0 +1,65 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React from "react";
+import debounce from "lodash/debounce";
+import { MultiAutoComplete } from "@webiny/ui/AutoComplete";
+import { Link } from "@webiny/react-router";
+import { i18n } from "@webiny/app/i18n";
+import { useReferences } from "./useReferences";
+import { renderItem } from "./renderItem";
+var t = i18n.ns("app-headless-cms/admin/fields/ref");
+var warn = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Before publishing the main content entry, make sure you publish the following referenced entries: {entries}"])));
+
+function ContentEntriesMultiAutocomplete(_ref) {
+  var bind = _ref.bind,
+      field = _ref.field;
+
+  var _useReferences = useReferences({
+    bind: bind,
+    field: field
+  }),
+      options = _useReferences.options,
+      setSearch = _useReferences.setSearch,
+      entries = _useReferences.entries,
+      loading = _useReferences.loading,
+      onChange = _useReferences.onChange;
+
+  var entryWarning = function entryWarning(_ref2, index) {
+    var id = _ref2.id,
+        modelId = _ref2.modelId,
+        name = _ref2.name,
+        published = _ref2.published;
+    return !published && /*#__PURE__*/React.createElement(React.Fragment, {
+      key: id
+    }, index > 0 && ", ", /*#__PURE__*/React.createElement(Link, {
+      to: "/cms/content-entries/".concat(modelId, "?id=").concat(encodeURIComponent(id))
+    }, name));
+  };
+
+  var warning = entries.filter(function (item) {
+    return item.published === false;
+  });
+
+  if (warning.length) {
+    warning = warn({
+      entries: /*#__PURE__*/React.createElement(React.Fragment, null, warning.map(entryWarning))
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(MultiAutoComplete, Object.assign({}, bind, {
+    renderItem: renderItem,
+    renderListItemLabel: renderItem,
+    useMultipleSelectionList: true,
+    onChange: onChange,
+    loading: loading,
+    value: entries,
+    options: options,
+    label: field.label,
+    onInput: debounce(setSearch, 250),
+    description: /*#__PURE__*/React.createElement(React.Fragment, null, field.helpText, warning)
+  }));
+}
+
+export default ContentEntriesMultiAutocomplete;

package/admin/plugins/fieldRenderers/ref/components/getOptions.d.ts

@@ -0,0 +1 @@
+export declare const getOptions: (entries?: any[], extraOptions?: any) => any[];

package/admin/plugins/fieldRenderers/ref/components/getOptions.js

@@ -0,0 +1,21 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+export var getOptions = function getOptions() {
+  var entries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var extraOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return entries.map(function (item) {
+    var name = item.title;
+
+    if (!name) {
+      return null;
+    }
+
+    var extraData = typeof extraOptions === "function" ? extraOptions(item) : {};
+    return _objectSpread({
+      id: item.id,
+      modelId: item.model.modelId,
+      modelName: item.model.name,
+      name: name,
+      published: item.status === "published"
+    }, extraData);
+  }).filter(Boolean);
+};

package/admin/plugins/fieldRenderers/ref/components/graphql.d.ts

@@ -0,0 +1,4 @@
+export declare const SEARCH_CONTENT_ENTRIES: import("graphql").DocumentNode;
+export declare const GET_CONTENT_ENTRIES: import("graphql").DocumentNode;
+export declare const GET_CONTENT_ENTRY: import("graphql").DocumentNode;
+export declare const GET_CONTENT_MODELS: import("graphql").DocumentNode;

package/admin/plugins/fieldRenderers/ref/components/graphql.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import gql from "graphql-tag";
+var fields = "\ndata {\n    id\n    status\n    title\n    model {\n        modelId\n        name\n    }\n}\nerror {\n    code\n    message\n}\n";
+export var SEARCH_CONTENT_ENTRIES = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    query CmsSearchContentEntries($modelIds: [ID!]!, $query: String!, $limit: Int) {\n        content: searchContentEntries(modelIds: $modelIds, query: $query, limit: $limit) {\n            ", "\n        }\n    }\n"])), fields);
+export var GET_CONTENT_ENTRIES = gql(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    query CmsGetContentEntries($entries: [CmsModelEntryInput!]!) {\n        content: getContentEntries(entries: $entries) {\n            ", "\n        }\n    }\n"])), fields);
+export var GET_CONTENT_ENTRY = gql(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    query CmsGetContentEntry($entry: CmsModelEntryInput!) {\n        content: getContentEntry(entry: $entry) {\n            ", "\n        }\n    }\n"])), fields);
+export var GET_CONTENT_MODELS = gql(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    query CmsGetContentModels {\n        listContentModels {\n            data {\n                modelId\n                titleFieldId\n            }\n        }\n    }\n"])));

package/admin/plugins/fieldRenderers/ref/components/renderItem.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const renderItem: (item: any) => JSX.Element;

package/admin/plugins/fieldRenderers/ref/components/renderItem.js

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Typography } from "@webiny/ui/Typography";
+var ModelId = /*#__PURE__*/styled("span", {
+  target: "ejkg0kv0",
+  label: "ModelId"
+})({
+  color: "var(--mdc-theme-text-secondary-on-background) !important"
+});
+export var renderItem = function renderItem(item) {
+  return /*#__PURE__*/React.createElement(Typography, {
+    use: "body2"
+  }, item.name, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ModelId, null, "Model: ", item.modelName));
+};

package/admin/plugins/fieldRenderers/ref/components/useReference.d.ts

@@ -0,0 +1,22 @@
+import { CmsEditorField } from "../../../../../types";
+interface ValueEntry {
+    id: string;
+    modelId: string;
+    modelName: string;
+    published: boolean;
+    name: string;
+}
+interface UseReferenceHookArgs {
+    bind: any;
+    field: CmsEditorField;
+}
+interface UseReferenceHookValue {
+    onChange: (value: any, entry: ValueEntry) => void;
+    setSearch: (value: string) => void;
+    value: ValueEntry | null;
+    loading: boolean;
+    options: ValueEntry[];
+}
+declare type UseReferenceHook = (args: UseReferenceHookArgs) => UseReferenceHookValue;
+export declare const useReference: UseReferenceHook;
+export {};

package/admin/plugins/fieldRenderers/ref/components/useReference.js

@@ -0,0 +1,240 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useApolloClient } from "../../../../hooks";
+import * as GQL from "./graphql";
+import { getOptions } from "./getOptions";
+
+var convertQueryDataToEntryList = function convertQueryDataToEntryList(data) {
+  return data.reduce(function (collection, entry) {
+    collection[entry.id] = entry;
+    return collection;
+  }, {});
+};
+
+var convertValueEntryToData = function convertValueEntryToData(entry) {
+  return {
+    id: entry.id,
+    model: {
+      modelId: entry.modelId,
+      name: entry.modelName
+    },
+    status: entry.published ? "published" : "draft",
+    title: entry.name
+  };
+};
+
+var convertDataEntryToValue = function convertDataEntryToValue(entry) {
+  return {
+    id: entry.id,
+    modelId: entry.model.modelId,
+    modelName: entry.model.name,
+    published: entry.status === "published",
+    name: entry.title
+  };
+};
+
+var assignValueEntry = function assignValueEntry(entry, collection) {
+  if (!entry) {
+    return;
+  }
+
+  collection[entry.id] = convertValueEntryToData(entry);
+};
+
+export var useReference = function useReference(_ref) {
+  var bind = _ref.bind,
+      field = _ref.field;
+  var allEntries = useRef({});
+  var client = useApolloClient();
+
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      search = _useState2[0],
+      setSearch = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      entries = _useState6[0],
+      setEntries = _useState6[1];
+
+  var _useState7 = useState({}),
+      _useState8 = _slicedToArray(_useState7, 2),
+      latestEntries = _useState8[0],
+      setLatestEntries = _useState8[1];
+
+  var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      valueEntry = _useState10[0],
+      setValueEntry = _useState10[1];
+
+  var models = field.settings.models;
+  var modelsHash = models.join(",");
+  var value = bind.value;
+  var valueHash = value ? value.id : null;
+
+  var searchEntries = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _yield$client$query, data, searchEntries;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (search) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              setLoading(true);
+              _context.next = 5;
+              return client.query({
+                query: GQL.SEARCH_CONTENT_ENTRIES,
+                variables: {
+                  modelIds: models.map(function (m) {
+                    return m.modelId;
+                  }),
+                  query: search
+                }
+              });
+
+            case 5:
+              _yield$client$query = _context.sent;
+              data = _yield$client$query.data;
+              setLoading(false);
+              searchEntries = convertQueryDataToEntryList(data.content.data);
+              assignValueEntry(valueEntry, searchEntries);
+              Object.assign(allEntries.current, searchEntries);
+              setEntries(searchEntries);
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function searchEntries() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  useEffect(function () {
+    searchEntries();
+  }, [search]);
+  useEffect(function () {
+    client.query({
+      query: GQL.SEARCH_CONTENT_ENTRIES,
+      variables: {
+        modelIds: models.map(function (m) {
+          return m.modelId;
+        }),
+        query: "__latest__",
+        limit: 10
+      }
+    }).then(function (_ref3) {
+      var data = _ref3.data;
+      var latestEntryData = convertQueryDataToEntryList(data.content.data);
+      assignValueEntry(valueEntry, latestEntryData);
+      setLatestEntries(latestEntryData);
+      Object.assign(allEntries.current, latestEntryData);
+    });
+  }, [modelsHash]);
+  useEffect(function () {
+    if (!value || !models) {
+      setValueEntry(function () {
+        return null;
+      });
+      return;
+    }
+
+    var entry = allEntries.current[valueHash];
+
+    if (entry) {
+      // if entry exists set valueEntry to that one so we do not load new one
+      setValueEntry(function () {
+        return convertDataEntryToValue(entry);
+      });
+      return;
+    }
+
+    setLoading(true);
+    client.query({
+      query: GQL.GET_CONTENT_ENTRY,
+      variables: {
+        entry: {
+          modelId: value.modelId,
+          entryId: value.entryId
+        }
+      }
+    }).then(function (res) {
+      setLoading(false);
+      var dataEntry = res.data.content.data;
+
+      if (!dataEntry) {
+        return;
+      }
+
+      allEntries.current[dataEntry.id] = dataEntry;
+      setLatestEntries(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, dataEntry.id, dataEntry));
+      }); // Calculate a couple of props for the Autocomplete component.
+
+      setValueEntry(function () {
+        return convertDataEntryToValue(dataEntry);
+      });
+    });
+  }, [valueHash, modelsHash]);
+  var onChange = useCallback(function (value, entry) {
+    if (value !== null) {
+      setSearch("");
+      setValueEntry(function () {
+        return entry;
+      });
+      return bind.onChange({
+        modelId: entry.modelId,
+        entryId: entry.id
+      });
+    }
+
+    setValueEntry(function () {
+      return null;
+    });
+    bind.onChange(null);
+  }, []); // Format options for the Autocomplete component.
+
+  var options = useMemo(function () {
+    return getOptions(Object.values(entries));
+  }, [entries]); // Format default options for the Autocomplete component.
+
+  var defaultOptions = useMemo(function () {
+    return getOptions(Object.values(latestEntries));
+  }, [latestEntries]);
+  var outputOptions = search ? options : defaultOptions || [];
+
+  if (valueEntry && outputOptions.some(function (opt) {
+    return opt.id === valueEntry.id;
+  }) === false) {
+    outputOptions.push(valueEntry);
+  }
+
+  return {
+    onChange: onChange,
+    setSearch: setSearch,
+    value: valueEntry,
+    loading: loading,
+    options: outputOptions
+  };
+};

package/admin/plugins/fieldRenderers/ref/components/useReferences.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+declare type ValueEntry = {
+    id: string;
+    modelId: string;
+    modelName: string;
+    published: boolean;
+    name: string;
+};
+export declare const useReferences: ({ bind, field }: {
+    bind: any;
+    field: any;
+}) => {
+    onChange: (values: any) => void;
+    loading: boolean;
+    setSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
+    entries: ValueEntry[];
+    options: any[];
+};
+export {};