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

package/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.js.map

@@ -1 +1 @@
-{"version":3,"names":["lodashChunk","useCallback","useEffect","useMemo","useState","useApolloClient","LIST_LATEST_CONTENT_ENTRIES","parseIdentifier","executeSearch","params","setLoading","setError","setEntries","client","values","requestContext","result","query","variables","entries","map","value","id","modelId","context","error","data","message","reduce","collection","entry","entryId","ex","useReferences","initialValues","perPage","loading","hash","setHash","currentPage","setCurrentPage","pages","Array","isArray","entriesToLoad","toLoad","p","page","length","push","filter","item","sort","join","window","crypto","subtle","digest","TextEncoder","encode","then","encoded","decoded","TextDecoder","decode","items","prev","loadMore","nextPage","loadedEntries"],"sources":["useReferences.ts"],"sourcesContent":["import type ApolloClient from \"apollo-client\";\nimport lodashChunk from \"lodash/chunk.js\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useApolloClient } from \"~/admin/hooks/index.js\";\nimport type {\n    CmsReferenceContentEntry,\n    CmsReferenceValue as BaseCmsReferenceValue\n} from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport type {\n    ListLatestCmsEntriesResponse,\n    ListLatestCmsEntriesVariables\n} from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js\";\nimport { LIST_LATEST_CONTENT_ENTRIES } from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ninterface ExecuteSearchParams {\n    setLoading: (loading: boolean) => void;\n    setError: (error: string | undefined | null) => void;\n    setEntries: (entries: Record<string, CmsReferenceContentEntry>) => void;\n    client: ApolloClient<any>;\n    values: CmsReferenceValue[];\n    requestContext?: Record<string, any>;\n}\n\nconst executeSearch = async (params: ExecuteSearchParams): Promise<void> => {\n    const { setLoading, setError, setEntries, client, values, requestContext = {} } = params;\n    setLoading(true);\n    try {\n        const result = await client.query<\n            ListLatestCmsEntriesResponse,\n            ListLatestCmsEntriesVariables\n        >({\n            query: LIST_LATEST_CONTENT_ENTRIES,\n            variables: {\n                entries: values.map(value => {\n                    return {\n                        id: value.id,\n                        modelId: value.modelId\n                    };\n                })\n            },\n            context: requestContext\n        });\n        const error = result.data.entries?.error;\n        if (error) {\n            setError(error.message);\n            return;\n        }\n        const entries = result.data.entries.data.reduce<Record<string, CmsReferenceContentEntry>>(\n            (collection, entry) => {\n                collection[entry.entryId] = entry;\n                return collection;\n            },\n            {}\n        );\n        setError(null);\n        setEntries(entries);\n    } catch (ex) {\n        setError(ex.message);\n    } finally {\n        setLoading(false);\n    }\n};\n\ninterface CmsReferenceValue extends BaseCmsReferenceValue {\n    entryId: string;\n}\n\ninterface UseReferencesParams {\n    values?: BaseCmsReferenceValue[] | BaseCmsReferenceValue | null;\n    perPage?: number;\n    requestContext?: Record<string, any>;\n}\n\nexport const useReferences = ({\n    values: initialValues,\n    perPage = 10,\n    requestContext = {}\n}: UseReferencesParams) => {\n    const client = useApolloClient();\n    const [entries, setEntries] = useState<Record<string, CmsReferenceContentEntry>>({});\n    const [loading, setLoading] = useState<boolean>(false);\n    const [error, setError] = useState<string | undefined | null>(null);\n    const [hash, setHash] = useState<string | null>(null);\n    const [currentPage, setCurrentPage] = useState<number>(0);\n    const pages = useMemo(() => {\n        const values = Array.isArray(initialValues)\n            ? initialValues\n            : initialValues\n              ? [initialValues]\n              : [];\n        return lodashChunk<CmsReferenceValue>(\n            values.map(value => {\n                const { id: entryId } = parseIdentifier(value.id);\n                return {\n                    ...value,\n                    entryId\n                };\n            }),\n            perPage\n        );\n    }, [initialValues, perPage]);\n\n    const entriesToLoad = useMemo(() => {\n        /**\n         * We need to make sure that all the previous page entries are loaded\n         * And we add the current page entries to the list.\n         */\n        const toLoad: CmsReferenceValue[] = [];\n        for (let p = 0; p <= currentPage; p++) {\n            const page = pages[p];\n            if (!page || page.length === 0) {\n                return toLoad;\n            }\n            toLoad.push(\n                ...page.filter(item => {\n                    return !entries[item.entryId];\n                })\n            );\n        }\n        return toLoad;\n    }, [pages, currentPage]);\n\n    useEffect(() => {\n        if (entriesToLoad.length === 0) {\n            return;\n        }\n        const value = entriesToLoad\n            .map(item => {\n                return item.id;\n            })\n            .sort()\n            .join(\"-\");\n        if (value.length === 0) {\n            return;\n        }\n        /**\n         * If there is no crypto.subtle, lets skip this - but at this point the hash will be enormous.\n         */\n        if (!window.crypto?.subtle) {\n            if (hash === value) {\n                return;\n            }\n            setHash(value);\n            return;\n        }\n\n        window.crypto.subtle.digest(\"SHA-1\", new TextEncoder().encode(value)).then(encoded => {\n            const decoded = new TextDecoder().decode(encoded);\n            if (hash === decoded) {\n                return;\n            }\n            setHash(decoded);\n        });\n    }, [entriesToLoad]);\n\n    useEffect(() => {\n        if (!hash || entriesToLoad.length === 0) {\n            return;\n        }\n        executeSearch({\n            client,\n            requestContext,\n            values: entriesToLoad,\n            setLoading,\n            setError,\n            setEntries: items => {\n                setEntries(prev => {\n                    return {\n                        ...prev,\n                        ...items\n                    };\n                });\n            }\n        });\n    }, [hash]);\n\n    const loadMore = useCallback(() => {\n        const nextPage = currentPage + 1;\n        if (!pages[nextPage] || pages[nextPage].length === 0) {\n            return;\n        }\n        setCurrentPage(nextPage);\n    }, [pages, currentPage]);\n\n    /**\n     * This variable contains all the pages with entries, up to the current page, which is inlcuded.\n     */\n    const loadedEntries = useMemo<CmsReferenceContentEntry[]>(() => {\n        const collection: CmsReferenceContentEntry[] = [];\n        for (let page = 0; page <= currentPage; page++) {\n            const items = pages[page] || [];\n            for (const item of items) {\n                const entry = entries[item.entryId];\n                if (!entry) {\n                    continue;\n                }\n                collection.push(entry);\n            }\n        }\n        return collection;\n    }, [currentPage, entries, pages]);\n\n    return {\n        loading,\n        entries: loadedEntries,\n        error,\n        loadMore\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.ts"],"sourcesContent":["import type ApolloClient from \"apollo-client\";\nimport lodashChunk from \"lodash/chunk.js\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useApolloClient } from \"~/admin/hooks/index.js\";\nimport type {\n    CmsReferenceContentEntry,\n    CmsReferenceValue as BaseCmsReferenceValue\n} from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport type {\n    ListLatestCmsEntriesResponse,\n    ListLatestCmsEntriesVariables\n} from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js\";\nimport { LIST_LATEST_CONTENT_ENTRIES } from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ninterface ExecuteSearchParams {\n    setLoading: (loading: boolean) => void;\n    setError: (error: string | undefined | null) => void;\n    setEntries: (entries: Record<string, CmsReferenceContentEntry>) => void;\n    client: ApolloClient<any>;\n    values: CmsReferenceValue[];\n    requestContext?: Record<string, any>;\n}\n\nconst executeSearch = async (params: ExecuteSearchParams): Promise<void> => {\n    const { setLoading, setError, setEntries, client, values, requestContext = {} } = params;\n    setLoading(true);\n    try {\n        const result = await client.query<\n            ListLatestCmsEntriesResponse,\n            ListLatestCmsEntriesVariables\n        >({\n            query: LIST_LATEST_CONTENT_ENTRIES,\n            variables: {\n                entries: values.map(value => {\n                    return {\n                        id: value.id,\n                        modelId: value.modelId\n                    };\n                })\n            },\n            context: requestContext\n        });\n        const error = result.data.entries?.error;\n        if (error) {\n            setError(error.message);\n            return;\n        }\n        const entries = result.data.entries.data.reduce<Record<string, CmsReferenceContentEntry>>(\n            (collection, entry) => {\n                collection[entry.entryId] = entry;\n                return collection;\n            },\n            {}\n        );\n        setError(null);\n        setEntries(entries);\n    } catch (ex) {\n        setError(ex.message);\n    } finally {\n        setLoading(false);\n    }\n};\n\ninterface CmsReferenceValue extends BaseCmsReferenceValue {\n    entryId: string;\n}\n\ninterface UseReferencesParams {\n    values?: BaseCmsReferenceValue[] | BaseCmsReferenceValue | null;\n    perPage?: number;\n    requestContext?: Record<string, any>;\n}\n\nexport const useReferences = ({\n    values: initialValues,\n    perPage = 10,\n    requestContext = {}\n}: UseReferencesParams) => {\n    const client = useApolloClient();\n    const [entries, setEntries] = useState<Record<string, CmsReferenceContentEntry>>({});\n    const [loading, setLoading] = useState<boolean>(false);\n    const [error, setError] = useState<string | undefined | null>(null);\n    const [hash, setHash] = useState<string | null>(null);\n    const [currentPage, setCurrentPage] = useState<number>(0);\n    const pages = useMemo(() => {\n        const values = Array.isArray(initialValues)\n            ? initialValues\n            : initialValues\n              ? [initialValues]\n              : [];\n        return lodashChunk<CmsReferenceValue>(\n            values.map(value => {\n                const { id: entryId } = parseIdentifier(value.id);\n                return {\n                    ...value,\n                    entryId\n                };\n            }),\n            perPage\n        );\n    }, [initialValues, perPage]);\n\n    const entriesToLoad = useMemo(() => {\n        /**\n         * We need to make sure that all the previous page entries are loaded\n         * And we add the current page entries to the list.\n         */\n        const toLoad: CmsReferenceValue[] = [];\n        for (let p = 0; p <= currentPage; p++) {\n            const page = pages[p];\n            if (!page || page.length === 0) {\n                return toLoad;\n            }\n            toLoad.push(\n                ...page.filter(item => {\n                    return !entries[item.entryId];\n                })\n            );\n        }\n        return toLoad;\n    }, [pages, currentPage]);\n\n    useEffect(() => {\n        if (entriesToLoad.length === 0) {\n            return;\n        }\n        const value = entriesToLoad\n            .map(item => {\n                return item.id;\n            })\n            .sort()\n            .join(\"-\");\n        if (value.length === 0) {\n            return;\n        }\n        /**\n         * If there is no crypto.subtle, lets skip this - but at this point the hash will be enormous.\n         */\n        if (!window.crypto?.subtle) {\n            if (hash === value) {\n                return;\n            }\n            setHash(value);\n            return;\n        }\n\n        window.crypto.subtle.digest(\"SHA-1\", new TextEncoder().encode(value)).then(encoded => {\n            const decoded = new TextDecoder().decode(encoded);\n            if (hash === decoded) {\n                return;\n            }\n            setHash(decoded);\n        });\n    }, [entriesToLoad]);\n\n    useEffect(() => {\n        if (!hash || entriesToLoad.length === 0) {\n            return;\n        }\n        executeSearch({\n            client,\n            requestContext,\n            values: entriesToLoad,\n            setLoading,\n            setError,\n            setEntries: items => {\n                setEntries(prev => {\n                    return {\n                        ...prev,\n                        ...items\n                    };\n                });\n            }\n        });\n    }, [hash]);\n\n    const loadMore = useCallback(() => {\n        const nextPage = currentPage + 1;\n        if (!pages[nextPage] || pages[nextPage].length === 0) {\n            return;\n        }\n        setCurrentPage(nextPage);\n    }, [pages, currentPage]);\n\n    /**\n     * This variable contains all the pages with entries, up to the current page, which is inlcuded.\n     */\n    const loadedEntries = useMemo<CmsReferenceContentEntry[]>(() => {\n        const collection: CmsReferenceContentEntry[] = [];\n        for (let page = 0; page <= currentPage; page++) {\n            const items = pages[page] || [];\n            for (const item of items) {\n                const entry = entries[item.entryId];\n                if (!entry) {\n                    continue;\n                }\n                collection.push(entry);\n            }\n        }\n        return collection;\n    }, [currentPage, entries, pages]);\n\n    return {\n        loading,\n        entries: loadedEntries,\n        error,\n        loadMore\n    };\n};\n"],"names":["executeSearch","params","setLoading","setError","setEntries","client","values","requestContext","result","LIST_LATEST_CONTENT_ENTRIES","value","error","entries","collection","entry","ex","useReferences","initialValues","perPage","useApolloClient","useState","loading","hash","setHash","currentPage","setCurrentPage","pages","useMemo","Array","lodashChunk","entryId","parseIdentifier","entriesToLoad","toLoad","p","page","item","useEffect","window","TextEncoder","encoded","decoded","TextDecoder","items","prev","loadMore","useCallback","nextPage","loadedEntries"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/index.js

@@ -1,7 +1,9 @@
 import { createAdvancedSingleRenderer } from "./detailedReferenceRenderer.js";
 import { createAdvancedMultipleRenderer } from "./detailedReferencesRenderer.js";
-export const createAdvancedRefRenderer = () => {
-  return [createAdvancedSingleRenderer(), createAdvancedMultipleRenderer()];
-};
+const createAdvancedRefRenderer = ()=>[
+        createAdvancedSingleRenderer(),
+        createAdvancedMultipleRenderer()
+    ];
+export { createAdvancedRefRenderer };
 
 //# sourceMappingURL=index.js.map

package/admin/plugins/fieldRenderers/ref/advanced/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createAdvancedSingleRenderer","createAdvancedMultipleRenderer","createAdvancedRefRenderer"],"sources":["index.ts"],"sourcesContent":["import { createAdvancedSingleRenderer } from \"./detailedReferenceRenderer.js\";\nimport { createAdvancedMultipleRenderer } from \"./detailedReferencesRenderer.js\";\n\nexport const createAdvancedRefRenderer = () => {\n    return [createAdvancedSingleRenderer(), createAdvancedMultipleRenderer()];\n};\n"],"mappings":"AAAA,SAASA,4BAA4B;AACrC,SAASC,8BAA8B;AAEvC,OAAO,MAAMC,yBAAyB,GAAGA,CAAA,KAAM;EAC3C,OAAO,CAACF,4BAA4B,CAAC,CAAC,EAAEC,8BAA8B,CAAC,CAAC,CAAC;AAC7E,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/index.js","sources":["../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/index.ts"],"sourcesContent":["import { createAdvancedSingleRenderer } from \"./detailedReferenceRenderer.js\";\nimport { createAdvancedMultipleRenderer } from \"./detailedReferencesRenderer.js\";\n\nexport const createAdvancedRefRenderer = () => {\n    return [createAdvancedSingleRenderer(), createAdvancedMultipleRenderer()];\n};\n"],"names":["createAdvancedRefRenderer","createAdvancedSingleRenderer","createAdvancedMultipleRenderer"],"mappings":";;AAGO,MAAMA,4BAA4B,IAC9B;QAACC;QAAgCC;KAAiC"}

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

@@ -1,12 +1,11 @@
-import React, { useState } from "react";
+import react, { useCallback, useMemo, useState } from "react";
 import debounce from "lodash/debounce.js";
 import { NewEntryButton } from "./NewEntryButton.js";
-import { AutoComplete } from "@webiny/ui/AutoComplete/index.js";
+import { AutoComplete } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n/index.js";
 import { SimpleLink } from "@webiny/app-admin";
 import { useNewRefEntry } from "../hooks/useNewRefEntry.js";
 import { useReference } from "./useReference.js";
-import { renderItem } from "./renderItem.js";
 import { createEntryUrl } from "./createEntryUrl.js";
 import { useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
 import { useModelField, useModels } from "../../../../hooks/index.js";
@@ -14,93 +13,90 @@ import { NewReferencedEntryDialog } from "./NewReferencedEntryDialog.js";
 const t = i18n.ns("app-headless-cms/admin/fields/ref");
 const unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;
 const publishedLabel = t`Selected content entry is published. You can view it {here}.`;
-const ContentEntriesAutocomplete = ({
-  bind
-}) => {
-  const {
-    field
-  } = useModelField();
-  const rules = useFieldEffectiveRules(field);
-  const {
-    models
-  } = useModels();
-  const [showNewEntryModal, setShowNewEntryModal] = useState(false);
-  const {
-    options,
-    setSearch,
-    value,
-    loading,
-    onChange
-  } = useReference({
-    bind,
-    field
-  });
-  const disabled = !rules.canEdit || rules.disabled;
-  let entryInfo = null;
-  if (value && !value.published) {
-    const link = createEntryUrl(value);
-    entryInfo = unpublishedLabel({
-      publishItLink: /*#__PURE__*/React.createElement(SimpleLink, {
-        to: link
-      }, t`publish it`)
+const ContentEntriesAutocomplete = ({ bind })=>{
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const { models } = useModels();
+    const [showNewEntryModal, setShowNewEntryModal] = useState(false);
+    const { options: rawOptions, setSearch, value, loading, onChange } = useReference({
+        bind,
+        field
     });
-  } else if (value) {
-    const link = createEntryUrl(value);
-    entryInfo = publishedLabel({
-      here: /*#__PURE__*/React.createElement(SimpleLink, {
-        to: link
-      }, t`here`)
+    const disabled = !rules.canEdit || rules.disabled;
+    const options = useMemo(()=>rawOptions.map((opt)=>({
+                label: opt.name,
+                value: opt.entryId,
+                item: opt
+            })), [
+        rawOptions
+    ]);
+    const currentValue = useMemo(()=>value ? value.entryId : void 0, [
+        value
+    ]);
+    const onValueChange = useCallback((entryId)=>{
+        const opt = options.find((o)=>o.value === entryId);
+        if (opt?.item) onChange(entryId, opt.item);
+    }, [
+        options,
+        onChange
+    ]);
+    const onValueSearch = useCallback(debounce((search)=>setSearch(search), 250), [
+        setSearch
+    ]);
+    let entryInfo = null;
+    if (value && !value.published) {
+        const link = createEntryUrl(value);
+        entryInfo = unpublishedLabel({
+            publishItLink: /*#__PURE__*/ react.createElement(SimpleLink, {
+                to: link
+            }, t`publish it`)
+        });
+    } else if (value) {
+        const link = createEntryUrl(value);
+        entryInfo = publishedLabel({
+            here: /*#__PURE__*/ react.createElement(SimpleLink, {
+                to: link
+            }, t`here`)
+        });
+    }
+    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({
+        field
+    });
+    const model = models.find((m)=>m.modelId === refModelId);
+    if (renderNewEntryModal) return /*#__PURE__*/ react.createElement(react.Fragment, null, showNewEntryModal && model ? /*#__PURE__*/ react.createElement(NewReferencedEntryDialog, {
+        onClose: ()=>setShowNewEntryModal(false),
+        model: model,
+        onChange: (entry)=>onChange(entry, entry)
+    }) : null, /*#__PURE__*/ react.createElement(AutoComplete, {
+        validation: bind.validation,
+        loading: loading,
+        value: currentValue,
+        options: options,
+        label: field.label,
+        note: entryInfo,
+        "data-testid": `fr.input.autocomplete.${field.label}`,
+        description: /*#__PURE__*/ react.createElement(react.Fragment, null, field.help),
+        onValueChange: onValueChange,
+        onValueSearch: onValueSearch,
+        emptyMessage: /*#__PURE__*/ react.createElement(NewEntryButton, {
+            onClick: ()=>setShowNewEntryModal(true)
+        })
+    }));
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        disabled: disabled,
+        validation: bind.validation,
+        loading: loading,
+        value: currentValue,
+        options: options,
+        label: field.label,
+        description: /*#__PURE__*/ react.createElement(react.Fragment, null, field.help),
+        note: entryInfo,
+        onValueChange: onValueChange,
+        onValueSearch: onValueSearch,
+        emptyMessage: help
     });
-  }
-  const {
-    renderNewEntryModal,
-    refModelId,
-    help
-  } = useNewRefEntry({
-    field
-  });
-  const model = models.find(model => model.modelId === refModelId);
-
-  /*
-   * Wrap AutoComplete input in NewRefEntry modal.
-   */
-  if (renderNewEntryModal) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, showNewEntryModal && model ? /*#__PURE__*/React.createElement(NewReferencedEntryDialog, {
-      onClose: () => setShowNewEntryModal(false),
-      model: model,
-      onChange: entry => {
-        return onChange(entry, entry);
-      }
-    }) : null, /*#__PURE__*/React.createElement(AutoComplete, Object.assign({}, bind, {
-      renderItem: renderItem,
-      onChange: onChange,
-      loading: loading,
-      value: value || undefined,
-      options: options,
-      label: field.label,
-      note: entryInfo,
-      "data-testid": `fr.input.autocomplete.${field.label}`,
-      description: /*#__PURE__*/React.createElement(React.Fragment, null, field.help),
-      onInput: debounce(search => setSearch(search), 250),
-      noResultFound: /*#__PURE__*/React.createElement(NewEntryButton, {
-        onClick: () => setShowNewEntryModal(true)
-      })
-    })));
-  }
-  return /*#__PURE__*/React.createElement(AutoComplete, Object.assign({}, bind, {
-    disabled: disabled,
-    renderItem: renderItem,
-    onChange: onChange,
-    loading: loading,
-    value: value || undefined,
-    options: options,
-    label: field.label,
-    description: /*#__PURE__*/React.createElement(React.Fragment, null, field.help),
-    note: entryInfo,
-    onInput: debounce(search => setSearch(search), 250),
-    noResultFound: help
-  }));
 };
-export default ContentEntriesAutocomplete;
+const components_ContentEntriesAutocomplete = ContentEntriesAutocomplete;
+export default components_ContentEntriesAutocomplete;
 
 //# sourceMappingURL=ContentEntriesAutocomplete.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","debounce","NewEntryButton","AutoComplete","i18n","SimpleLink","useNewRefEntry","useReference","renderItem","createEntryUrl","useFieldEffectiveRules","useModelField","useModels","NewReferencedEntryDialog","t","ns","unpublishedLabel","publishedLabel","ContentEntriesAutocomplete","bind","field","rules","models","showNewEntryModal","setShowNewEntryModal","options","setSearch","value","loading","onChange","disabled","canEdit","entryInfo","published","link","publishItLink","createElement","to","here","renderNewEntryModal","refModelId","help","model","find","modelId","Fragment","onClose","entry","Object","assign","undefined","label","note","description","onInput","search","noResultFound","onClick"],"sources":["ContentEntriesAutocomplete.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport { NewEntryButton } from \"./NewEntryButton.js\";\nimport { AutoComplete } from \"@webiny/ui/AutoComplete/index.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { SimpleLink } from \"@webiny/app-admin\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry.js\";\nimport { useReference } from \"./useReference.js\";\nimport { renderItem } from \"./renderItem.js\";\nimport { createEntryUrl } from \"./createEntryUrl.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { useModelField, useModels } from \"~/admin/hooks/index.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;\nconst publishedLabel = t`Selected content entry is published. You can view it {here}.`;\n\ninterface ContentEntriesAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesAutocomplete = ({ bind }: ContentEntriesAutocompleteProps) => {\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const { models } = useModels();\n    const [showNewEntryModal, setShowNewEntryModal] = useState(false);\n    const { options, setSearch, value, loading, onChange } = useReference({\n        bind,\n        field\n    });\n\n    const disabled = !rules.canEdit || rules.disabled;\n\n    let entryInfo: string | null = null;\n    if (value && !value.published) {\n        const link = createEntryUrl(value);\n        entryInfo = unpublishedLabel({\n            publishItLink: <SimpleLink to={link}>{t`publish it`}</SimpleLink>\n        });\n    } else if (value) {\n        const link = createEntryUrl(value);\n        entryInfo = publishedLabel({\n            here: <SimpleLink to={link}>{t`here`}</SimpleLink>\n        });\n    }\n    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({ field });\n    const model = models.find(model => model.modelId === refModelId);\n\n    /*\n     * Wrap AutoComplete input in NewRefEntry modal.\n     */\n    if (renderNewEntryModal) {\n        return (\n            <>\n                {showNewEntryModal && model ? (\n                    <NewReferencedEntryDialog\n                        onClose={() => setShowNewEntryModal(false)}\n                        model={model}\n                        onChange={entry => {\n                            return onChange(entry, entry);\n                        }}\n                    />\n                ) : null}\n\n                <AutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    onChange={onChange}\n                    loading={loading}\n                    value={value || undefined}\n                    options={options}\n                    label={field.label}\n                    note={entryInfo}\n                    data-testid={`fr.input.autocomplete.${field.label}`}\n                    description={<>{field.help}</>}\n                    onInput={debounce(search => setSearch(search), 250)}\n                    noResultFound={<NewEntryButton onClick={() => setShowNewEntryModal(true)} />}\n                />\n            </>\n        );\n    }\n\n    return (\n        <AutoComplete\n            {...bind}\n            disabled={disabled}\n            renderItem={renderItem}\n            onChange={onChange}\n            loading={loading}\n            value={value || undefined}\n            options={options}\n            label={field.label}\n            description={<>{field.help}</>}\n            note={entryInfo}\n            onInput={debounce(search => setSearch(search), 250)}\n            noResultFound={help}\n        />\n    );\n};\n\nexport default ContentEntriesAutocomplete;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js","sources":["../../../../../../src/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.tsx"],"sourcesContent":["import React, { useState, useMemo, useCallback } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport { NewEntryButton } from \"./NewEntryButton.js\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { SimpleLink } from \"@webiny/app-admin\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry.js\";\nimport { useReference } from \"./useReference.js\";\nimport { createEntryUrl } from \"./createEntryUrl.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { useModelField, useModels } from \"~/admin/hooks/index.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;\nconst publishedLabel = t`Selected content entry is published. You can view it {here}.`;\n\ninterface ContentEntriesAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesAutocomplete = ({ bind }: ContentEntriesAutocompleteProps) => {\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const { models } = useModels();\n    const [showNewEntryModal, setShowNewEntryModal] = useState(false);\n    const {\n        options: rawOptions,\n        setSearch,\n        value,\n        loading,\n        onChange\n    } = useReference({\n        bind,\n        field\n    });\n\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const options = useMemo(\n        () => rawOptions.map(opt => ({ label: opt.name, value: opt.entryId, item: opt })),\n        [rawOptions]\n    );\n\n    const currentValue = useMemo(() => (value ? value.entryId : undefined), [value]);\n\n    const onValueChange = useCallback(\n        (entryId: string) => {\n            const opt = options.find(o => o.value === entryId);\n            if (opt?.item) {\n                onChange(entryId, opt.item);\n            }\n        },\n        [options, onChange]\n    );\n\n    const onValueSearch = useCallback(\n        debounce((search: string) => setSearch(search), 250),\n        [setSearch]\n    );\n\n    let entryInfo: string | null = null;\n    if (value && !value.published) {\n        const link = createEntryUrl(value);\n        entryInfo = unpublishedLabel({\n            publishItLink: <SimpleLink to={link}>{t`publish it`}</SimpleLink>\n        });\n    } else if (value) {\n        const link = createEntryUrl(value);\n        entryInfo = publishedLabel({\n            here: <SimpleLink to={link}>{t`here`}</SimpleLink>\n        });\n    }\n    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({ field });\n    const model = models.find(m => m.modelId === refModelId);\n\n    if (renderNewEntryModal) {\n        return (\n            <>\n                {showNewEntryModal && model ? (\n                    <NewReferencedEntryDialog\n                        onClose={() => setShowNewEntryModal(false)}\n                        model={model}\n                        onChange={entry => {\n                            return onChange(entry, entry);\n                        }}\n                    />\n                ) : null}\n\n                <AutoComplete\n                    validation={bind.validation}\n                    loading={loading}\n                    value={currentValue}\n                    options={options}\n                    label={field.label}\n                    note={entryInfo}\n                    data-testid={`fr.input.autocomplete.${field.label}`}\n                    description={<>{field.help}</>}\n                    onValueChange={onValueChange}\n                    onValueSearch={onValueSearch}\n                    emptyMessage={<NewEntryButton onClick={() => setShowNewEntryModal(true)} />}\n                />\n            </>\n        );\n    }\n\n    return (\n        <AutoComplete\n            disabled={disabled}\n            validation={bind.validation}\n            loading={loading}\n            value={currentValue}\n            options={options}\n            label={field.label}\n            description={<>{field.help}</>}\n            note={entryInfo}\n            onValueChange={onValueChange}\n            onValueSearch={onValueSearch}\n            emptyMessage={help}\n        />\n    );\n};\n\nexport default ContentEntriesAutocomplete;\n"],"names":["t","i18n","unpublishedLabel","publishedLabel","ContentEntriesAutocomplete","bind","field","useModelField","rules","useFieldEffectiveRules","models","useModels","showNewEntryModal","setShowNewEntryModal","useState","rawOptions","setSearch","value","loading","onChange","useReference","disabled","options","useMemo","opt","currentValue","undefined","onValueChange","useCallback","entryId","o","onValueSearch","debounce","search","entryInfo","link","createEntryUrl","SimpleLink","renderNewEntryModal","refModelId","help","useNewRefEntry","model","m","NewReferencedEntryDialog","entry","AutoComplete","NewEntryButton"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,mBAAmBF,CAAC,CAAC,+GAA+G,CAAC;AAC3I,MAAMG,iBAAiBH,CAAC,CAAC,4DAA4D,CAAC;AAMtF,MAAMI,6BAA6B,CAAC,EAAEC,IAAI,EAAmC;IACzE,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,QAAQC,uBAAuBH;IACrC,MAAM,EAAEI,MAAM,EAAE,GAAGC;IACnB,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,SAAS;IAC3D,MAAM,EACF,SAASC,UAAU,EACnBC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACX,GAAGC,aAAa;QACbf;QACAC;IACJ;IAEA,MAAMe,WAAW,CAACb,MAAM,OAAO,IAAIA,MAAM,QAAQ;IAEjD,MAAMc,UAAUC,QACZ,IAAMR,WAAW,GAAG,CAACS,CAAAA,MAAQ;gBAAE,OAAOA,IAAI,IAAI;gBAAE,OAAOA,IAAI,OAAO;gBAAE,MAAMA;YAAI,KAC9E;QAACT;KAAW;IAGhB,MAAMU,eAAeF,QAAQ,IAAON,QAAQA,MAAM,OAAO,GAAGS,QAAY;QAACT;KAAM;IAE/E,MAAMU,gBAAgBC,YAClB,CAACC;QACG,MAAML,MAAMF,QAAQ,IAAI,CAACQ,CAAAA,IAAKA,EAAE,KAAK,KAAKD;QAC1C,IAAIL,KAAK,MACLL,SAASU,SAASL,IAAI,IAAI;IAElC,GACA;QAACF;QAASH;KAAS;IAGvB,MAAMY,gBAAgBH,YAClBI,SAAS,CAACC,SAAmBjB,UAAUiB,SAAS,MAChD;QAACjB;KAAU;IAGf,IAAIkB,YAA2B;IAC/B,IAAIjB,SAAS,CAACA,MAAM,SAAS,EAAE;QAC3B,MAAMkB,OAAOC,eAAenB;QAC5BiB,YAAYhC,iBAAiB;YACzB,eAAe,WAAf,GAAe,oBAACmC,YAAUA;gBAAC,IAAIF;eAAOnC,CAAC,CAAC,UAAU,CAAC;QACvD;IACJ,OAAO,IAAIiB,OAAO;QACd,MAAMkB,OAAOC,eAAenB;QAC5BiB,YAAY/B,eAAe;YACvB,MAAM,WAAN,GAAM,oBAACkC,YAAUA;gBAAC,IAAIF;eAAOnC,CAAC,CAAC,IAAI,CAAC;QACxC;IACJ;IACA,MAAM,EAAEsC,mBAAmB,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGC,eAAe;QAAEnC;IAAM;IACzE,MAAMoC,QAAQhC,OAAO,IAAI,CAACiC,CAAAA,IAAKA,EAAE,OAAO,KAAKJ;IAE7C,IAAID,qBACA,OAAO,WAAP,GACI,0CACK1B,qBAAqB8B,QAAQ,WAARA,GAClB,oBAACE,0BAAwBA;QACrB,SAAS,IAAM/B,qBAAqB;QACpC,OAAO6B;QACP,UAAUG,CAAAA,QACC1B,SAAS0B,OAAOA;SAG/B,oBAEJ,oBAACC,cAAYA;QACT,YAAYzC,KAAK,UAAU;QAC3B,SAASa;QACT,OAAOO;QACP,SAASH;QACT,OAAOhB,MAAM,KAAK;QAClB,MAAM4B;QACN,eAAa,CAAC,sBAAsB,EAAE5B,MAAM,KAAK,EAAE;QACnD,2BAAa,0CAAGA,MAAM,IAAI;QAC1B,eAAeqB;QACf,eAAeI;QACf,4BAAc,oBAACgB,gBAAcA;YAAC,SAAS,IAAMlC,qBAAqB;;;IAMlF,OAAO,WAAP,GACI,oBAACiC,cAAYA;QACT,UAAUzB;QACV,YAAYhB,KAAK,UAAU;QAC3B,SAASa;QACT,OAAOO;QACP,SAASH;QACT,OAAOhB,MAAM,KAAK;QAClB,2BAAa,0CAAGA,MAAM,IAAI;QAC1B,MAAM4B;QACN,eAAeP;QACf,eAAeI;QACf,cAAcS;;AAG1B;AAEA,8CAAepC"}

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

@@ -1,10 +1,9 @@
-import React, { useCallback, useState } from "react";
+import react, { useCallback, useMemo, useState } from "react";
 import debounce from "lodash/debounce.js";
-import { MultiAutoComplete } from "@webiny/ui/AutoComplete/index.js";
+import { MultiAutoComplete } from "@webiny/admin-ui";
 import { RouteLink } from "@webiny/app-admin";
 import { i18n } from "@webiny/app/i18n/index.js";
 import { useReferences } from "./useReferences.js";
-import { renderItem, renderListItemOptions } from "./renderItem.js";
 import { NewEntryButton } from "./NewEntryButton.js";
 import { useNewRefEntry } from "../hooks/useNewRefEntry.js";
 import { useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
@@ -13,110 +12,101 @@ import { NewReferencedEntryDialog } from "./NewReferencedEntryDialog.js";
 import { Routes } from "../../../../../routes.js";
 const t = i18n.ns("app-headless-cms/admin/fields/ref");
 const warn = t`Before publishing the main content entry, make sure you publish the following referenced entries: {entries}`;
-const ContentEntriesMultiAutocomplete = ({
-  bind
-}) => {
-  const {
-    field
-  } = useModelField();
-  const rules = useFieldEffectiveRules(field);
-  const {
-    models
-  } = useModels();
-  const [showNewEntryModal, setShowNewEntryModal] = useState(false);
-  const {
-    options,
-    setSearch,
-    entries,
-    loading,
-    onChange
-  } = useReferences({
-    bind,
-    field
-  });
-  const disabled = !rules.canEdit || rules.disabled;
-  const {
-    renderNewEntryModal,
-    refModelId,
-    help
-  } = useNewRefEntry({
-    field
-  });
-  const entryWarning = (entry, index) => {
-    const {
-      id,
-      modelId,
-      name,
-      published
-    } = entry;
-    if (published) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: id
-    }, index > 0 && ", ", /*#__PURE__*/React.createElement(RouteLink, {
-      route: Routes.ContentEntries.List,
-      params: {
-        id,
-        modelId
-      }
-    }, name));
-  };
-  const warnings = entries.filter(item => !item.published);
-  let warning = null;
-  if (warnings.length > 0) {
-    warning = warn({
-      entries: /*#__PURE__*/React.createElement(React.Fragment, null, warnings.map(entryWarning))
+const ContentEntriesMultiAutocomplete = ({ bind })=>{
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const { models } = useModels();
+    const [showNewEntryModal, setShowNewEntryModal] = useState(false);
+    const { options: rawOptions, setSearch, entries, loading, onChange } = useReferences({
+        bind,
+        field
+    });
+    const disabled = !rules.canEdit || rules.disabled;
+    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({
+        field
+    });
+    const options = useMemo(()=>rawOptions.map((opt)=>({
+                label: opt.name,
+                value: opt.entryId,
+                item: opt
+            })), [
+        rawOptions
+    ]);
+    const currentValues = useMemo(()=>entries.map((e)=>e.entryId), [
+        entries
+    ]);
+    const onValuesChange = useCallback((entryIds)=>{
+        const selectedItems = entryIds.map((id)=>options.find((o)=>o.value === id)?.item).filter(Boolean);
+        onChange(selectedItems);
+    }, [
+        options,
+        onChange
+    ]);
+    const onValueSearch = useCallback(debounce((search)=>setSearch(search), 250), [
+        setSearch
+    ]);
+    const entryWarning = (entry, index)=>{
+        const { id, modelId, name, published } = entry;
+        if (published) return null;
+        return /*#__PURE__*/ react.createElement(react.Fragment, {
+            key: id
+        }, index > 0 && ", ", /*#__PURE__*/ react.createElement(RouteLink, {
+            route: Routes.ContentEntries.List,
+            params: {
+                id,
+                modelId
+            }
+        }, name));
+    };
+    const warnings = entries.filter((item)=>!item.published);
+    let warning = null;
+    if (warnings.length > 0) warning = warn({
+        entries: /*#__PURE__*/ react.createElement(react.Fragment, null, warnings.map(entryWarning))
+    });
+    const refEntryOnChange = useCallback((value)=>{
+        onChange([
+            ...entries,
+            value
+        ]);
+        setShowNewEntryModal(false);
+    }, [
+        onChange,
+        entries
+    ]);
+    const model = models.find((m)=>m.modelId === refModelId);
+    if (renderNewEntryModal) return /*#__PURE__*/ react.createElement(react.Fragment, null, showNewEntryModal && model ? /*#__PURE__*/ react.createElement(NewReferencedEntryDialog, {
+        onClose: ()=>setShowNewEntryModal(false),
+        model: model,
+        onChange: refEntryOnChange
+    }) : null, /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+        validation: bind.validation,
+        loading: loading,
+        values: currentValues,
+        options: options,
+        label: field.label,
+        onValuesChange: onValuesChange,
+        onValueSearch: onValueSearch,
+        description: /*#__PURE__*/ react.createElement(react.Fragment, null, field.help),
+        note: warning,
+        emptyMessage: /*#__PURE__*/ react.createElement(NewEntryButton, {
+            onClick: ()=>setShowNewEntryModal(true)
+        })
+    }));
+    return /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+        disabled: disabled,
+        validation: bind.validation,
+        loading: loading,
+        values: currentValues,
+        options: options,
+        label: field.label,
+        onValuesChange: onValuesChange,
+        onValueSearch: onValueSearch,
+        description: /*#__PURE__*/ react.createElement(react.Fragment, null, field.help),
+        note: warning,
+        emptyMessage: help
     });
-  }
-  const refEntryOnChange = useCallback(value => {
-    /**
-     * Append new selected entry at the end of existing entries.
-     */
-    onChange([...entries, value]);
-    setShowNewEntryModal(false);
-  }, [onChange, entries]);
-  const model = models.find(model => model.modelId === refModelId);
-  if (renderNewEntryModal) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, showNewEntryModal && model ? /*#__PURE__*/React.createElement(NewReferencedEntryDialog, {
-      onClose: () => setShowNewEntryModal(false),
-      model: model,
-      onChange: refEntryOnChange
-    }) : null, /*#__PURE__*/React.createElement(MultiAutoComplete, Object.assign({}, bind, {
-      renderItem: renderItem,
-      renderListItemLabel: renderItem,
-      renderListItemOptions: renderListItemOptions,
-      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.help),
-      note: warning,
-      noResultFound: /*#__PURE__*/React.createElement(NewEntryButton, {
-        onClick: () => setShowNewEntryModal(true)
-      })
-    })));
-  }
-  return /*#__PURE__*/React.createElement(MultiAutoComplete, Object.assign({}, bind, {
-    disabled: disabled,
-    renderItem: renderItem,
-    renderListItemLabel: renderItem,
-    renderListItemOptions: renderListItemOptions,
-    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.help),
-    note: warning,
-    noResultFound: help
-  }));
 };
-export default ContentEntriesMultiAutocomplete;
+const ContentEntriesMultiAutoComplete = ContentEntriesMultiAutocomplete;
+export default ContentEntriesMultiAutoComplete;
 
 //# sourceMappingURL=ContentEntriesMultiAutoComplete.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useState","debounce","MultiAutoComplete","RouteLink","i18n","useReferences","renderItem","renderListItemOptions","NewEntryButton","useNewRefEntry","useFieldEffectiveRules","useModelField","useModels","NewReferencedEntryDialog","Routes","t","ns","warn","ContentEntriesMultiAutocomplete","bind","field","rules","models","showNewEntryModal","setShowNewEntryModal","options","setSearch","entries","loading","onChange","disabled","canEdit","renderNewEntryModal","refModelId","help","entryWarning","entry","index","id","modelId","name","published","createElement","Fragment","key","route","ContentEntries","List","params","warnings","filter","item","warning","length","map","refEntryOnChange","value","model","find","onClose","Object","assign","renderListItemLabel","useMultipleSelectionList","label","onInput","description","note","noResultFound","onClick"],"sources":["ContentEntriesMultiAutoComplete.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete/index.js\";\nimport { RouteLink } from \"@webiny/app-admin\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useReferences } from \"./useReferences.js\";\nimport { renderItem, renderListItemOptions } from \"./renderItem.js\";\nimport { NewEntryButton } from \"./NewEntryButton.js\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { OptionItem } from \"./types.js\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { useModelField, useModels } from \"~/admin/hooks/index.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\nimport { Routes } from \"~/routes.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst warn = t`Before publishing the main content entry, make sure you publish the following referenced entries: {entries}`;\n\ninterface ContentEntriesMultiAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesMultiAutocomplete = ({ bind }: ContentEntriesMultiAutocompleteProps) => {\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const { models } = useModels();\n    const [showNewEntryModal, setShowNewEntryModal] = useState(false);\n    const { options, setSearch, entries, loading, onChange } = useReferences({ bind, field });\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({ field });\n\n    const entryWarning = (entry: OptionItem, index: number): React.ReactElement | null => {\n        const { id, modelId, name, published } = entry;\n        if (published) {\n            return null;\n        }\n        return (\n            <React.Fragment key={id}>\n                {index > 0 && \", \"}\n                <RouteLink route={Routes.ContentEntries.List} params={{ id, modelId }}>\n                    {name}\n                </RouteLink>\n            </React.Fragment>\n        );\n    };\n\n    const warnings = entries.filter(item => !item.published);\n    let warning: React.ReactElement | null = null;\n    if (warnings.length > 0) {\n        warning = warn({\n            entries: <>{warnings.map(entryWarning)}</>\n        });\n    }\n\n    const refEntryOnChange = useCallback(\n        (value: OptionItem) => {\n            /**\n             * Append new selected entry at the end of existing entries.\n             */\n            onChange([...entries, value]);\n            setShowNewEntryModal(false);\n        },\n\n        [onChange, entries]\n    );\n\n    const model = models.find(model => model.modelId === refModelId);\n\n    if (renderNewEntryModal) {\n        return (\n            <>\n                {showNewEntryModal && model ? (\n                    <NewReferencedEntryDialog\n                        onClose={() => setShowNewEntryModal(false)}\n                        model={model}\n                        onChange={refEntryOnChange}\n                    />\n                ) : null}\n                <MultiAutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    renderListItemLabel={renderItem}\n                    renderListItemOptions={renderListItemOptions}\n                    useMultipleSelectionList\n                    onChange={onChange}\n                    loading={loading}\n                    value={entries}\n                    options={options}\n                    label={field.label}\n                    onInput={debounce(setSearch, 250)}\n                    description={<>{field.help}</>}\n                    note={warning}\n                    noResultFound={<NewEntryButton onClick={() => setShowNewEntryModal(true)} />}\n                />\n            </>\n        );\n    }\n\n    return (\n        <MultiAutoComplete\n            {...bind}\n            disabled={disabled}\n            renderItem={renderItem}\n            renderListItemLabel={renderItem}\n            renderListItemOptions={renderListItemOptions}\n            useMultipleSelectionList\n            onChange={onChange}\n            loading={loading}\n            value={entries}\n            options={options}\n            label={field.label}\n            onInput={debounce(setSearch, 250)}\n            description={<>{field.help}</>}\n            note={warning}\n            noResultFound={help}\n        />\n    );\n};\n\nexport default ContentEntriesMultiAutocomplete;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.js","sources":["../../../../../../src/admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.tsx"],"sourcesContent":["import React, { useCallback, useState, useMemo } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport { MultiAutoComplete } from \"@webiny/admin-ui\";\nimport { RouteLink } from \"@webiny/app-admin\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useReferences } from \"./useReferences.js\";\nimport { NewEntryButton } from \"./NewEntryButton.js\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { OptionItem } from \"./types.js\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { useModelField, useModels } from \"~/admin/hooks/index.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\nimport { Routes } from \"~/routes.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst warn = t`Before publishing the main content entry, make sure you publish the following referenced entries: {entries}`;\n\ninterface ContentEntriesMultiAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesMultiAutocomplete = ({ bind }: ContentEntriesMultiAutocompleteProps) => {\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const { models } = useModels();\n    const [showNewEntryModal, setShowNewEntryModal] = useState(false);\n    const {\n        options: rawOptions,\n        setSearch,\n        entries,\n        loading,\n        onChange\n    } = useReferences({\n        bind,\n        field\n    });\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({ field });\n\n    const options = useMemo(\n        () => rawOptions.map(opt => ({ label: opt.name, value: opt.entryId, item: opt })),\n        [rawOptions]\n    );\n\n    const currentValues = useMemo(() => entries.map(e => e.entryId), [entries]);\n\n    const onValuesChange = useCallback(\n        (entryIds: string[]) => {\n            const selectedItems = entryIds\n                .map(id => options.find(o => o.value === id)?.item)\n                .filter(Boolean) as OptionItem[];\n            onChange(selectedItems);\n        },\n        [options, onChange]\n    );\n\n    const onValueSearch = useCallback(\n        debounce((search: string) => setSearch(search), 250),\n        [setSearch]\n    );\n\n    const entryWarning = (entry: OptionItem, index: number): React.ReactElement | null => {\n        const { id, modelId, name, published } = entry;\n        if (published) {\n            return null;\n        }\n        return (\n            <React.Fragment key={id}>\n                {index > 0 && \", \"}\n                <RouteLink route={Routes.ContentEntries.List} params={{ id, modelId }}>\n                    {name}\n                </RouteLink>\n            </React.Fragment>\n        );\n    };\n\n    const warnings = entries.filter(item => !item.published);\n    let warning: React.ReactElement | null = null;\n    if (warnings.length > 0) {\n        warning = warn({\n            entries: <>{warnings.map(entryWarning)}</>\n        });\n    }\n\n    const refEntryOnChange = useCallback(\n        (value: OptionItem) => {\n            onChange([...entries, value]);\n            setShowNewEntryModal(false);\n        },\n        [onChange, entries]\n    );\n\n    const model = models.find(m => m.modelId === refModelId);\n\n    if (renderNewEntryModal) {\n        return (\n            <>\n                {showNewEntryModal && model ? (\n                    <NewReferencedEntryDialog\n                        onClose={() => setShowNewEntryModal(false)}\n                        model={model}\n                        onChange={refEntryOnChange}\n                    />\n                ) : null}\n                <MultiAutoComplete\n                    validation={bind.validation}\n                    loading={loading}\n                    values={currentValues}\n                    options={options}\n                    label={field.label}\n                    onValuesChange={onValuesChange}\n                    onValueSearch={onValueSearch}\n                    description={<>{field.help}</>}\n                    note={warning}\n                    emptyMessage={<NewEntryButton onClick={() => setShowNewEntryModal(true)} />}\n                />\n            </>\n        );\n    }\n\n    return (\n        <MultiAutoComplete\n            disabled={disabled}\n            validation={bind.validation}\n            loading={loading}\n            values={currentValues}\n            options={options}\n            label={field.label}\n            onValuesChange={onValuesChange}\n            onValueSearch={onValueSearch}\n            description={<>{field.help}</>}\n            note={warning}\n            emptyMessage={help}\n        />\n    );\n};\n\nexport default ContentEntriesMultiAutocomplete;\n"],"names":["t","i18n","warn","ContentEntriesMultiAutocomplete","bind","field","useModelField","rules","useFieldEffectiveRules","models","useModels","showNewEntryModal","setShowNewEntryModal","useState","rawOptions","setSearch","entries","loading","onChange","useReferences","disabled","renderNewEntryModal","refModelId","help","useNewRefEntry","options","useMemo","opt","currentValues","e","onValuesChange","useCallback","entryIds","selectedItems","id","o","Boolean","onValueSearch","debounce","search","entryWarning","entry","index","modelId","name","published","React","RouteLink","Routes","warnings","item","warning","refEntryOnChange","value","model","m","NewReferencedEntryDialog","MultiAutoComplete","NewEntryButton"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import type { OptionItem } from "../../../../../admin/plugins/fieldRenderers/ref/components/types.js";
 import React from "react";
-import type { TooltipProps } from "@webiny/ui/Tooltip/index.js";
+import type { TooltipProps } from "@webiny/admin-ui";
 interface EntryStatusProps {
     item: OptionItem | null;
-    placement?: TooltipProps["placement"];
+    placement?: TooltipProps["side"];
     className?: string;
     children?: React.ReactNode;
 }