@webiny/app-headless-cms 6.3.0-beta.4 → 6.4.0-beta.0

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

@@ -1,190 +1,142 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useApolloClient, useModelFieldGraphqlContext } from "../../../../hooks/index.js";
-import { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRY } from "./graphql.js";
+import { GET_CONTENT_ENTRY, SEARCH_CONTENT_ENTRIES } from "./graphql.js";
 import { convertReferenceEntriesToOptionCollection, convertReferenceEntryToOption } from "./helpers.js";
 import { parseIdentifier } from "@webiny/utils";
-const getValueHash = value => {
-  if (!value || !value.id && !value.entryId) {
-    return null;
-  } else if (value.entryId) {
-    return value.entryId;
-  }
-  const {
-    id
-  } = parseIdentifier(value.id);
-  return id;
+const getValueHash = (value)=>{
+    if (!value || !value.id && !value.entryId) return null;
+    if (value.entryId) return value.entryId;
+    const { id } = parseIdentifier(value.id);
+    return id;
 };
-export const useReference = ({
-  bind,
-  field
-}) => {
-  const allEntries = useRef({});
-  const client = useApolloClient();
-  const [search, setSearch] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [entries, setEntries] = useState({});
-  const [latestEntries, setLatestEntries] = useState({});
-  const [valueEntry, setValueEntry] = useState(null);
-  const requestContext = useModelFieldGraphqlContext();
-  const models = field.settings ? field.settings.models || [] : [];
-  const modelsHash = models.map(model => model.modelId).join(",");
-  const value = bind.value;
-  const valueHash = getValueHash(value);
-  const searchEntries = async () => {
-    if (!search) {
-      return;
-    }
-    setLoading(true);
-    const {
-      data
-    } = await client.query({
-      query: SEARCH_CONTENT_ENTRIES,
-      variables: {
-        modelIds: models.map(m => m.modelId),
-        query: search,
-        limit: 10
-      },
-      context: requestContext
-    });
-    setLoading(false);
-    const collection = convertReferenceEntriesToOptionCollection(data.content.data);
-    if (valueEntry) {
-      collection[valueEntry.entryId] = valueEntry;
-    }
-    allEntries.current = {
-      ...allEntries.current,
-      ...collection
+const useReference = ({ bind, field })=>{
+    const allEntries = useRef({});
+    const client = useApolloClient();
+    const [search, setSearch] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [entries, setEntries] = useState({});
+    const [latestEntries, setLatestEntries] = useState({});
+    const [valueEntry, setValueEntry] = useState(null);
+    const requestContext = useModelFieldGraphqlContext();
+    const models = field.settings ? field.settings.models || [] : [];
+    const modelsHash = models.map((model)=>model.modelId).join(",");
+    const value = bind.value;
+    const valueHash = getValueHash(value);
+    const searchEntries = async ()=>{
+        if (!search) return;
+        setLoading(true);
+        const { data } = await client.query({
+            query: SEARCH_CONTENT_ENTRIES,
+            variables: {
+                modelIds: models.map((m)=>m.modelId),
+                query: search,
+                limit: 10
+            },
+            context: requestContext
+        });
+        setLoading(false);
+        const collection = convertReferenceEntriesToOptionCollection(data.content.data);
+        if (valueEntry) collection[valueEntry.entryId] = valueEntry;
+        allEntries.current = {
+            ...allEntries.current,
+            ...collection
+        };
+        setEntries(collection);
     };
-    setEntries(collection);
-  };
-  useEffect(() => {
-    searchEntries();
-  }, [search]);
-  useEffect(() => {
-    if (models.length === 0) {
-      return;
-    }
-    client.query({
-      query: SEARCH_CONTENT_ENTRIES,
-      variables: {
-        modelIds: models.map(m => m.modelId),
-        limit: 10
-      },
-      /**
-       * We cannot update this query response in cache after a reference entry being created/deleted,
-       * which result in cached response being stale, therefore, we're setting the fetchPolicy to "network-only" to by passing cache.
-       */
-      fetchPolicy: "network-only",
-      context: requestContext
-    }).then(({
-      data
-    }) => {
-      const latestEntryData = convertReferenceEntriesToOptionCollection(data.content.data);
-      if (valueEntry) {
-        latestEntryData[valueEntry.entryId] = valueEntry;
-      }
-      setLatestEntries(latestEntryData);
-      allEntries.current = {
-        ...allEntries.current,
-        ...latestEntryData
-      };
-    });
-  }, [modelsHash]);
-  useEffect(() => {
-    if (!value || !models) {
-      setValueEntry(() => null);
-      return;
-    }
-    const entry = valueHash ? allEntries.current[valueHash] : null;
-    if (entry) {
-      /**
-       * if entry exists set valueEntry to that one so we do not load new one
-       */
-      setValueEntry(() => {
-        return entry;
-      });
-      return;
-    }
-    setLoading(true);
-    /**
-     * Query loads both latest and published entries.
-     * We do this in a single query because there might not be a published entry so we can use the latest one.
-     */
-    client.query({
-      query: GET_CONTENT_ENTRY,
-      variables: {
-        entry: {
-          modelId: value.modelId,
-          id: value.id
+    useEffect(()=>{
+        searchEntries();
+    }, [
+        search
+    ]);
+    useEffect(()=>{
+        if (0 === models.length) return;
+        client.query({
+            query: SEARCH_CONTENT_ENTRIES,
+            variables: {
+                modelIds: models.map((m)=>m.modelId),
+                limit: 10
+            },
+            fetchPolicy: "network-only",
+            context: requestContext
+        }).then(({ data })=>{
+            const latestEntryData = convertReferenceEntriesToOptionCollection(data.content.data);
+            if (valueEntry) latestEntryData[valueEntry.entryId] = valueEntry;
+            setLatestEntries(latestEntryData);
+            allEntries.current = {
+                ...allEntries.current,
+                ...latestEntryData
+            };
+        });
+    }, [
+        modelsHash
+    ]);
+    useEffect(()=>{
+        if (!value || !models) return void setValueEntry(()=>null);
+        const entry = valueHash ? allEntries.current[valueHash] : null;
+        if (entry) return void setValueEntry(()=>entry);
+        setLoading(true);
+        client.query({
+            query: GET_CONTENT_ENTRY,
+            variables: {
+                entry: {
+                    modelId: value.modelId,
+                    id: value.id
+                }
+            },
+            context: requestContext
+        }).then((res)=>{
+            setLoading(false);
+            const dataEntry = res.data.latest.data;
+            if (!dataEntry) return;
+            const option = {
+                ...convertReferenceEntryToOption(dataEntry),
+                latest: dataEntry.id,
+                published: res.data.published.data ? res.data.published.data.id : null
+            };
+            allEntries.current[option.entryId] = option;
+            setLatestEntries((prev)=>({
+                    ...prev,
+                    [option.entryId]: {
+                        ...option
+                    }
+                }));
+            setValueEntry(()=>option);
+        });
+    }, [
+        valueHash,
+        modelsHash
+    ]);
+    const onChange = useCallback((value, entry)=>{
+        if (null !== value) {
+            setSearch("");
+            setValueEntry(()=>entry);
+            bind.onChange({
+                modelId: entry.modelId,
+                id: entry.id
+            });
+            return;
         }
-      },
-      context: requestContext
-    }).then(res => {
-      setLoading(false);
-      const dataEntry = res.data.latest.data;
-      if (!dataEntry) {
-        return;
-      }
-      const option = {
-        ...convertReferenceEntryToOption(dataEntry),
-        latest: dataEntry.id,
-        published: res.data.published.data ? res.data.published.data.id : null
-      };
-      allEntries.current[option.entryId] = option;
-      setLatestEntries(prev => {
-        return {
-          ...prev,
-          [option.entryId]: {
-            ...option
-          }
-        };
-      });
-      /**
-       * Calculate a couple of props for the Autocomplete component.
-       */
-      setValueEntry(() => {
-        return option;
-      });
-    });
-  }, [valueHash, modelsHash]);
-  const onChange = useCallback((value, entry) => {
-    if (value !== null) {
-      setSearch("");
-      setValueEntry(() => {
-        return entry;
-      });
-      bind.onChange({
-        modelId: entry.modelId,
-        id: entry.id
-      });
-      return;
-    }
-    setValueEntry(() => null);
-    bind.onChange(null);
-  }, []);
-
-  /**
-   * Format options for the Autocomplete component.
-   */
-  const options = useMemo(() => Object.values(entries), [valueHash, entries]);
-
-  /**
-   * Format default options for the Autocomplete component.
-   */
-  const defaultOptions = useMemo(() => {
-    return Object.values(latestEntries);
-  }, [valueHash, latestEntries]);
-  const outputOptions = (search && options ? options : defaultOptions) || [];
-  if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {
-    outputOptions.push(valueEntry);
-  }
-  return {
-    onChange,
-    setSearch,
-    value: valueEntry,
-    loading,
-    options: outputOptions
-  };
+        setValueEntry(()=>null);
+        bind.onChange(null);
+    }, []);
+    const options = useMemo(()=>Object.values(entries), [
+        valueHash,
+        entries
+    ]);
+    const defaultOptions = useMemo(()=>Object.values(latestEntries), [
+        valueHash,
+        latestEntries
+    ]);
+    const outputOptions = (search && options ? options : defaultOptions) || [];
+    if (valueEntry && false === outputOptions.some((opt)=>opt.entryId === valueEntry.entryId)) outputOptions.push(valueEntry);
+    return {
+        onChange,
+        setSearch,
+        value: valueEntry,
+        loading,
+        options: outputOptions
+    };
 };
+export { useReference };
 
 //# sourceMappingURL=useReference.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","useApolloClient","useModelFieldGraphqlContext","SEARCH_CONTENT_ENTRIES","GET_CONTENT_ENTRY","convertReferenceEntriesToOptionCollection","convertReferenceEntryToOption","parseIdentifier","getValueHash","value","id","entryId","useReference","bind","field","allEntries","client","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntry","setValueEntry","requestContext","models","settings","modelsHash","map","model","modelId","join","valueHash","searchEntries","data","query","variables","modelIds","m","limit","context","collection","content","current","length","fetchPolicy","then","latestEntryData","entry","res","dataEntry","latest","option","published","prev","onChange","options","Object","values","defaultOptions","outputOptions","some","opt","push"],"sources":["useReference.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient, useModelFieldGraphqlContext } from \"~/admin/hooks/index.js\";\nimport type {\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables\n} from \"./graphql.js\";\nimport { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRY } from \"./graphql.js\";\nimport type { CmsModelField, CmsModel } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { OptionItem, OptionItemCollection } from \"./types.js\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"./helpers.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ninterface UseReferenceHookArgs {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\n\ninterface UseReferenceHookValue {\n    onChange: (value: any, entry: OptionItem) => void;\n    setSearch: (value: string) => void;\n    value: OptionItem | null;\n    loading: boolean;\n    options: OptionItem[];\n}\n\ntype UseReferenceHook = (args: UseReferenceHookArgs) => UseReferenceHookValue;\n\nconst getValueHash = (value: any): string | null => {\n    if (!value || (!value.id && !value.entryId)) {\n        return null;\n    } else if (value.entryId) {\n        return value.entryId;\n    }\n    const { id } = parseIdentifier(value.id);\n    return id;\n};\n\nexport const useReference: UseReferenceHook = ({ bind, field }) => {\n    const allEntries = useRef<OptionItemCollection>({});\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<OptionItemCollection>({});\n    const [latestEntries, setLatestEntries] = useState<OptionItemCollection>({});\n    const [valueEntry, setValueEntry] = useState<OptionItem | null>(null);\n    const requestContext = useModelFieldGraphqlContext();\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\" | \"name\"\n    >[];\n    const modelsHash = models.map(model => model.modelId).join(\",\");\n\n    const value = bind.value;\n    const valueHash = getValueHash(value);\n\n    const searchEntries = async () => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: SEARCH_CONTENT_ENTRIES,\n            variables: {\n                modelIds: models.map(m => m.modelId),\n                query: search,\n                limit: 10\n            },\n            context: requestContext\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n        if (valueEntry) {\n            collection[valueEntry.entryId] = valueEntry;\n        }\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        if (models.length === 0) {\n            return;\n        }\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\",\n                context: requestContext\n            })\n            .then(({ data }) => {\n                const latestEntryData = convertReferenceEntriesToOptionCollection(\n                    data.content.data\n                );\n                if (valueEntry) {\n                    latestEntryData[valueEntry.entryId] = valueEntry;\n                }\n\n                setLatestEntries(latestEntryData);\n                allEntries.current = {\n                    ...allEntries.current,\n                    ...latestEntryData\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!value || !models) {\n            setValueEntry(() => null);\n            return;\n        }\n\n        const entry = valueHash ? allEntries.current[valueHash] : null;\n        if (entry) {\n            /**\n             * if entry exists set valueEntry to that one so we do not load new one\n             */\n            setValueEntry(() => {\n                return entry;\n            });\n            return;\n        }\n\n        setLoading(true);\n        /**\n         * Query loads both latest and published entries.\n         * We do this in a single query because there might not be a published entry so we can use the latest one.\n         */\n        client\n            .query<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>({\n                query: GET_CONTENT_ENTRY,\n                variables: {\n                    entry: {\n                        modelId: value.modelId,\n                        id: value.id\n                    }\n                },\n                context: requestContext\n            })\n            .then(res => {\n                setLoading(false);\n                const dataEntry = res.data.latest.data;\n                if (!dataEntry) {\n                    return;\n                }\n                const option: OptionItem = {\n                    ...convertReferenceEntryToOption(dataEntry),\n                    latest: dataEntry.id,\n                    published: res.data.published.data ? res.data.published.data.id : null\n                };\n                allEntries.current[option.entryId] = option;\n                setLatestEntries(prev => {\n                    return {\n                        ...prev,\n                        [option.entryId]: {\n                            ...option\n                        }\n                    };\n                });\n                /**\n                 * Calculate a couple of props for the Autocomplete component.\n                 */\n                setValueEntry(() => {\n                    return option;\n                });\n            });\n    }, [valueHash, modelsHash]);\n\n    const onChange = useCallback((value: string, entry: OptionItem) => {\n        if (value !== null) {\n            setSearch(\"\");\n\n            setValueEntry(() => {\n                return entry;\n            });\n\n            bind.onChange({\n                modelId: entry.modelId,\n                id: entry.id\n            });\n            return;\n        }\n\n        setValueEntry(() => null);\n        bind.onChange(null);\n    }, []);\n\n    /**\n     * Format options for the Autocomplete component.\n     */\n    const options = useMemo(() => Object.values(entries), [valueHash, entries]);\n\n    /**\n     * Format default options for the Autocomplete component.\n     */\n    const defaultOptions = useMemo(() => {\n        return Object.values(latestEntries);\n    }, [valueHash, latestEntries]);\n\n    const outputOptions: OptionItem[] = (search && options ? options : defaultOptions) || [];\n\n    if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {\n        outputOptions.push(valueEntry);\n    }\n\n    return {\n        onChange,\n        setSearch,\n        value: valueEntry,\n        loading,\n        options: outputOptions\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/components/useReference.js","sources":["../../../../../../src/admin/plugins/fieldRenderers/ref/components/useReference.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient, useModelFieldGraphqlContext } from \"~/admin/hooks/index.js\";\nimport type {\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables\n} from \"./graphql.js\";\nimport { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRY } from \"./graphql.js\";\nimport type { CmsModelField, CmsModel } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { OptionItem, OptionItemCollection } from \"./types.js\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"./helpers.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ninterface UseReferenceHookArgs {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\n\ninterface UseReferenceHookValue {\n    onChange: (value: any, entry: OptionItem) => void;\n    setSearch: (value: string) => void;\n    value: OptionItem | null;\n    loading: boolean;\n    options: OptionItem[];\n}\n\ntype UseReferenceHook = (args: UseReferenceHookArgs) => UseReferenceHookValue;\n\nconst getValueHash = (value: any): string | null => {\n    if (!value || (!value.id && !value.entryId)) {\n        return null;\n    } else if (value.entryId) {\n        return value.entryId;\n    }\n    const { id } = parseIdentifier(value.id);\n    return id;\n};\n\nexport const useReference: UseReferenceHook = ({ bind, field }) => {\n    const allEntries = useRef<OptionItemCollection>({});\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<OptionItemCollection>({});\n    const [latestEntries, setLatestEntries] = useState<OptionItemCollection>({});\n    const [valueEntry, setValueEntry] = useState<OptionItem | null>(null);\n    const requestContext = useModelFieldGraphqlContext();\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\" | \"name\"\n    >[];\n    const modelsHash = models.map(model => model.modelId).join(\",\");\n\n    const value = bind.value;\n    const valueHash = getValueHash(value);\n\n    const searchEntries = async () => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: SEARCH_CONTENT_ENTRIES,\n            variables: {\n                modelIds: models.map(m => m.modelId),\n                query: search,\n                limit: 10\n            },\n            context: requestContext\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n        if (valueEntry) {\n            collection[valueEntry.entryId] = valueEntry;\n        }\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        if (models.length === 0) {\n            return;\n        }\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\",\n                context: requestContext\n            })\n            .then(({ data }) => {\n                const latestEntryData = convertReferenceEntriesToOptionCollection(\n                    data.content.data\n                );\n                if (valueEntry) {\n                    latestEntryData[valueEntry.entryId] = valueEntry;\n                }\n\n                setLatestEntries(latestEntryData);\n                allEntries.current = {\n                    ...allEntries.current,\n                    ...latestEntryData\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!value || !models) {\n            setValueEntry(() => null);\n            return;\n        }\n\n        const entry = valueHash ? allEntries.current[valueHash] : null;\n        if (entry) {\n            /**\n             * if entry exists set valueEntry to that one so we do not load new one\n             */\n            setValueEntry(() => {\n                return entry;\n            });\n            return;\n        }\n\n        setLoading(true);\n        /**\n         * Query loads both latest and published entries.\n         * We do this in a single query because there might not be a published entry so we can use the latest one.\n         */\n        client\n            .query<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>({\n                query: GET_CONTENT_ENTRY,\n                variables: {\n                    entry: {\n                        modelId: value.modelId,\n                        id: value.id\n                    }\n                },\n                context: requestContext\n            })\n            .then(res => {\n                setLoading(false);\n                const dataEntry = res.data.latest.data;\n                if (!dataEntry) {\n                    return;\n                }\n                const option: OptionItem = {\n                    ...convertReferenceEntryToOption(dataEntry),\n                    latest: dataEntry.id,\n                    published: res.data.published.data ? res.data.published.data.id : null\n                };\n                allEntries.current[option.entryId] = option;\n                setLatestEntries(prev => {\n                    return {\n                        ...prev,\n                        [option.entryId]: {\n                            ...option\n                        }\n                    };\n                });\n                /**\n                 * Calculate a couple of props for the Autocomplete component.\n                 */\n                setValueEntry(() => {\n                    return option;\n                });\n            });\n    }, [valueHash, modelsHash]);\n\n    const onChange = useCallback((value: string, entry: OptionItem) => {\n        if (value !== null) {\n            setSearch(\"\");\n\n            setValueEntry(() => {\n                return entry;\n            });\n\n            bind.onChange({\n                modelId: entry.modelId,\n                id: entry.id\n            });\n            return;\n        }\n\n        setValueEntry(() => null);\n        bind.onChange(null);\n    }, []);\n\n    /**\n     * Format options for the Autocomplete component.\n     */\n    const options = useMemo(() => Object.values(entries), [valueHash, entries]);\n\n    /**\n     * Format default options for the Autocomplete component.\n     */\n    const defaultOptions = useMemo(() => {\n        return Object.values(latestEntries);\n    }, [valueHash, latestEntries]);\n\n    const outputOptions: OptionItem[] = (search && options ? options : defaultOptions) || [];\n\n    if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {\n        outputOptions.push(valueEntry);\n    }\n\n    return {\n        onChange,\n        setSearch,\n        value: valueEntry,\n        loading,\n        options: outputOptions\n    };\n};\n"],"names":["getValueHash","value","id","parseIdentifier","useReference","bind","field","allEntries","useRef","client","useApolloClient","search","setSearch","useState","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntry","setValueEntry","requestContext","useModelFieldGraphqlContext","models","modelsHash","model","valueHash","searchEntries","data","SEARCH_CONTENT_ENTRIES","m","collection","convertReferenceEntriesToOptionCollection","useEffect","latestEntryData","entry","GET_CONTENT_ENTRY","res","dataEntry","option","convertReferenceEntryToOption","prev","onChange","useCallback","options","useMemo","Object","defaultOptions","outputOptions","opt"],"mappings":"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"}