@webiny/app-headless-cms 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/admin/plugins/fieldRenderers/ref/advanced/components/Entry.js

@@ -1,127 +1,119 @@
-import React, { useCallback, useMemo } from "react";
+import react, { useCallback, useMemo } from "react";
 import { Image } from "./entry/Image.js";
-import { Tag, TimeAgo, Text, DropdownMenu, IconButton, Checkbox, cn } from "@webiny/admin-ui";
-import { ReactComponent as MoreVertIcon } from "@webiny/icons/more_vert.svg";
-import { ReactComponent as OpenInNewIcon } from "@webiny/icons/open_in_new.svg";
-import { ReactComponent as RemoveIcon } from "@webiny/icons/close.svg";
-import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
-import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
+import { Checkbox, DropdownMenu, IconButton, Tag, Text, TimeAgo, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as open_in_new_svg_ReactComponent } from "@webiny/icons/open_in_new.svg";
+import { ReactComponent as close_svg_ReactComponent } from "@webiny/icons/close.svg";
+import { ReactComponent as arrow_upward_svg_ReactComponent } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as arrow_downward_svg_ReactComponent } from "@webiny/icons/arrow_downward.svg";
 import { useRouter } from "@webiny/app";
 import { Routes } from "../../../../../../routes.js";
-export const Entry = ({
-  entry,
-  onChange,
-  onRemove,
-  selected,
-  index,
-  onMoveUp: onMoveUpClick,
-  onMoveDown: onMoveDownClick,
-  placement
-}) => {
-  const {
-    getLink
-  } = useRouter();
-  const onSelect = useCallback(() => {
-    if (onChange) {
-      onChange({
+const Entry = ({ entry, onChange, onRemove, selected, index, onMoveUp: onMoveUpClick, onMoveDown: onMoveDownClick, placement, disabled = false })=>{
+    const { getLink } = useRouter();
+    const onSelect = useCallback(()=>{
+        if (onChange) onChange({
+            id: entry.id,
+            modelId: entry.model.modelId
+        });
+    }, [
+        onChange,
+        entry.id,
+        entry.model.modelId
+    ]);
+    const onMoveUp = useCallback((ev)=>{
+        if (!onMoveUpClick) return;
+        onMoveUpClick(index, ev.shiftKey);
+    }, [
+        onMoveUpClick,
+        index
+    ]);
+    const onMoveDown = useCallback((ev)=>{
+        if (!onMoveDownClick) return;
+        onMoveDownClick(index, ev.shiftKey);
+    }, [
+        onMoveDownClick,
+        index
+    ]);
+    const entryStatusLabel = entry.status.charAt(0).toUpperCase() + entry.status.slice(1);
+    const entryRevision = useMemo(()=>{
+        const extractedRevision = entry.id.split("#")[1] || "0001";
+        return "v" + Number(extractedRevision).toString();
+    }, [
+        entry.id
+    ]);
+    const folderId = entry.wbyAco_location?.folderId || entry.location?.folderId || "";
+    const link = getLink(Routes.ContentEntries.List, {
         id: entry.id,
-        modelId: entry.model.modelId
-      });
-    }
-  }, [onChange, entry.id, entry.model.modelId]);
-  const onMoveUp = useCallback(ev => {
-    if (!onMoveUpClick) {
-      return;
-    }
-    onMoveUpClick(index, ev.shiftKey);
-  }, [onMoveUpClick, index]);
-  const onMoveDown = useCallback(ev => {
-    if (!onMoveDownClick) {
-      return;
-    }
-    onMoveDownClick(index, ev.shiftKey);
-  }, [onMoveDownClick, index]);
-  const entryStatusLabel = entry.status.charAt(0).toUpperCase() + entry.status.slice(1);
-
-  // Did not have `revision` field available in the `getLatestContentEntries`
-  // response, hence the manual extraction from the `id` field.
-  const entryRevision = useMemo(() => {
-    const extractedRevision = entry.id.split("#")[1] || "0001";
-
-    // Remove leading zeros for correct padding.
-    return "v" + Number(extractedRevision).toString();
-  }, [entry.id]);
-  const folderId = entry.wbyAco_location?.folderId || entry.location?.folderId || "";
-  const link = getLink(Routes.ContentEntries.List, {
-    id: entry.id,
-    modelId: entry.model.modelId,
-    folderId
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    "data-selected": selected,
-    onClick: onSelect,
-    "data-role": "ref-field-entry",
-    className: cn("flex items-center justify-between gap-md w-full rounded-md bg-neutral-light p-sm-extra pr-lg hover:bg-neutral-dimmed border-md border-transparent data-[selected=true]:border-accent-dimmed", {
-      "hover:cursor-pointer": !!onChange
-    })
-  }, onChange && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: selected,
-    onChange: () => {
-      // We're not calling the onSelect callback here because
-      // the parent div already does that on click.
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-[auto_1fr_auto] items-center gap-lg text-sm text-neutral-muted w-full min-w-0"
-  }, /*#__PURE__*/React.createElement(Image, {
-    title: entry.title,
-    src: entry.image
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "overflow-hidden"
-  }, /*#__PURE__*/React.createElement("div", null, entry.model.name), /*#__PURE__*/React.createElement("div", {
-    title: entry.title,
-    className: "text-md text-neutral-primary font-semibold mb-sm text-ellipsis overflow-hidden whitespace-nowrap block"
-  }, entry.title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-    className: "w-[60px] inline-block"
-  }, "Created:"), /*#__PURE__*/React.createElement("span", null, entry.createdBy.displayName, ", ", /*#__PURE__*/React.createElement(TimeAgo, {
-    datetime: entry.createdOn
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-sm"
-  }, /*#__PURE__*/React.createElement(Tag, {
-    content: /*#__PURE__*/React.createElement(React.Fragment, null, entryStatusLabel, "\xA0", /*#__PURE__*/React.createElement(Text, {
-      size: "sm",
-      className: "text-neutral-muted"
-    }, "(", entryRevision, ")")),
-    variant: "neutral-base-outline"
-  }), placement == "multiRef" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-xs"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    disabled: !onMoveUpClick,
-    variant: "ghost",
-    size: "sm",
-    icon: /*#__PURE__*/React.createElement(ArrowUp, null),
-    onClick: onMoveUp
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    disabled: !onMoveDownClick,
-    variant: "ghost",
-    size: "sm",
-    icon: /*#__PURE__*/React.createElement(ArrowDown, null),
-    onClick: onMoveDown
-  }))), /*#__PURE__*/React.createElement(DropdownMenu, {
-    trigger: /*#__PURE__*/React.createElement(IconButton, {
-      variant: "ghost",
-      size: "sm",
-      icon: /*#__PURE__*/React.createElement(MoreVertIcon, null)
-    })
-  }, /*#__PURE__*/React.createElement(DropdownMenu.Link, {
-    icon: /*#__PURE__*/React.createElement(OpenInNewIcon, null),
-    text: "Open in new tab",
-    to: link,
-    target: "_blank"
-  }), onRemove && /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-    icon: /*#__PURE__*/React.createElement(RemoveIcon, null),
-    text: placement === "multiRef" ? "Remove from list" : "Remove",
-    onClick: () => onRemove(entry.id)
-  })))));
+        modelId: entry.model.modelId,
+        folderId
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        "data-selected": selected,
+        onClick: onSelect,
+        "data-role": "ref-field-entry",
+        className: cn("flex items-center justify-between gap-md w-full rounded-md bg-neutral-light p-sm-extra pr-lg hover:bg-neutral-dimmed border-md border-transparent data-[selected=true]:border-accent-dimmed", {
+            "hover:cursor-pointer": !!onChange
+        })
+    }, onChange && !disabled ? /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Checkbox, {
+        checked: selected,
+        onChange: ()=>{}
+    })) : null, /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-[auto_1fr] items-start @lg:items-center gap-lg text-sm text-neutral-muted w-full min-w-0"
+    }, /*#__PURE__*/ react.createElement(Image, {
+        title: entry.title,
+        src: entry.image
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col @lg:flex-row @lg:items-center @lg:justify-between gap-sm min-w-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "min-w-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "truncate"
+    }, entry.model.name), /*#__PURE__*/ react.createElement("div", {
+        title: entry.title,
+        className: "text-md text-neutral-primary font-semibold mb-sm text-ellipsis overflow-hidden whitespace-nowrap block"
+    }, entry.title), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("span", {
+        className: "w-[60px] inline-block"
+    }, "Created:"), /*#__PURE__*/ react.createElement("span", null, entry.createdBy.displayName, ",", " ", /*#__PURE__*/ react.createElement(TimeAgo, {
+        datetime: entry.createdOn
+    })))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm shrink-0"
+    }, /*#__PURE__*/ react.createElement(Tag, {
+        content: /*#__PURE__*/ react.createElement(react.Fragment, null, entryStatusLabel, "\xa0", /*#__PURE__*/ react.createElement(Text, {
+            size: "sm",
+            className: "text-neutral-muted"
+        }, "(", entryRevision, ")")),
+        variant: "neutral-base-outline"
+    }), disabled || "multiRef" != placement ? null : /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-xs"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        disabled: !onMoveUpClick,
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null),
+        onClick: onMoveUp
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        disabled: !onMoveDownClick,
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null),
+        onClick: onMoveDown
+    })), disabled ? null : /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            size: "sm",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }, /*#__PURE__*/ react.createElement(DropdownMenu.Link, {
+        icon: /*#__PURE__*/ react.createElement(open_in_new_svg_ReactComponent, null),
+        text: "Open in new tab",
+        to: link,
+        target: "_blank"
+    }), onRemove && /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        icon: /*#__PURE__*/ react.createElement(close_svg_ReactComponent, null),
+        text: "multiRef" === placement ? "Remove from list" : "Remove",
+        onClick: ()=>onRemove(entry.id)
+    }))))));
 };
+export { Entry };
 
 //# sourceMappingURL=Entry.js.map

package/admin/plugins/fieldRenderers/ref/advanced/components/Entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","Image","Tag","TimeAgo","Text","DropdownMenu","IconButton","Checkbox","cn","ReactComponent","MoreVertIcon","OpenInNewIcon","RemoveIcon","ArrowUp","ArrowDown","useRouter","Routes","Entry","entry","onChange","onRemove","selected","index","onMoveUp","onMoveUpClick","onMoveDown","onMoveDownClick","placement","getLink","onSelect","id","modelId","model","ev","shiftKey","entryStatusLabel","status","charAt","toUpperCase","slice","entryRevision","extractedRevision","split","Number","toString","folderId","wbyAco_location","location","link","ContentEntries","List","createElement","onClick","className","checked","title","src","image","name","createdBy","displayName","datetime","createdOn","content","Fragment","size","variant","disabled","icon","trigger","Link","text","to","target","Item"],"sources":["Entry.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport type {\n    CmsReferenceContentEntry,\n    CmsReferenceValue\n} from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport { Image } from \"./entry/Image.js\";\nimport type { CmsModel } from \"~/types.js\";\nimport { Tag, TimeAgo, Text, DropdownMenu, IconButton, Checkbox, cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as MoreVertIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenInNewIcon } from \"@webiny/icons/open_in_new.svg\";\nimport { ReactComponent as RemoveIcon } from \"@webiny/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport { useRouter } from \"@webiny/app\";\nimport { Routes } from \"~/routes.js\";\n\ninterface EntryProps {\n    model: CmsModel;\n    entry: CmsReferenceContentEntry;\n    onChange: (value: CmsReferenceValue) => void;\n    index?: never;\n    selected: boolean;\n    onMoveUp?: never;\n    onMoveDown?: never;\n    onRemove?: never;\n    placement?: string;\n}\n\ninterface EntryPropsWithRemove {\n    onRemove: (entryId: string) => void;\n    model: CmsModel;\n    entry: CmsReferenceContentEntry;\n    index: number;\n    onMoveUp?: (index: number, toTop: boolean) => void;\n    onMoveDown?: (index: number, toBottom: boolean) => void;\n    onChange?: never;\n    selected?: never;\n    placement?: string;\n}\n\nexport const Entry = ({\n    entry,\n    onChange,\n    onRemove,\n    selected,\n    index,\n    onMoveUp: onMoveUpClick,\n    onMoveDown: onMoveDownClick,\n    placement\n}: EntryPropsWithRemove | EntryProps) => {\n    const { getLink } = useRouter();\n\n    const onSelect = useCallback(() => {\n        if (onChange) {\n            onChange({\n                id: entry.id,\n                modelId: entry.model.modelId\n            });\n        }\n    }, [onChange, entry.id, entry.model.modelId]);\n\n    const onMoveUp = useCallback(\n        (ev: React.MouseEvent) => {\n            if (!onMoveUpClick) {\n                return;\n            }\n            onMoveUpClick(index, ev.shiftKey);\n        },\n        [onMoveUpClick, index]\n    );\n    const onMoveDown = useCallback(\n        (ev: React.MouseEvent) => {\n            if (!onMoveDownClick) {\n                return;\n            }\n            onMoveDownClick(index, ev.shiftKey);\n        },\n        [onMoveDownClick, index]\n    );\n\n    const entryStatusLabel = entry.status.charAt(0).toUpperCase() + entry.status.slice(1);\n\n    // Did not have `revision` field available in the `getLatestContentEntries`\n    // response, hence the manual extraction from the `id` field.\n    const entryRevision = useMemo(() => {\n        const extractedRevision = entry.id.split(\"#\")[1] || \"0001\";\n\n        // Remove leading zeros for correct padding.\n        return \"v\" + Number(extractedRevision).toString();\n    }, [entry.id]);\n\n    const folderId = entry.wbyAco_location?.folderId || entry.location?.folderId || \"\";\n\n    const link = getLink(Routes.ContentEntries.List, {\n        id: entry.id,\n        modelId: entry.model.modelId,\n        folderId\n    });\n\n    return (\n        <div\n            data-selected={selected}\n            onClick={onSelect}\n            data-role=\"ref-field-entry\"\n            className={cn(\n                \"flex items-center justify-between gap-md w-full rounded-md bg-neutral-light p-sm-extra pr-lg hover:bg-neutral-dimmed border-md border-transparent data-[selected=true]:border-accent-dimmed\",\n                { \"hover:cursor-pointer\": !!onChange }\n            )}\n        >\n            {onChange && (\n                <div>\n                    <Checkbox\n                        checked={selected}\n                        onChange={() => {\n                            // We're not calling the onSelect callback here because\n                            // the parent div already does that on click.\n                        }}\n                    />\n                </div>\n            )}\n            <div\n                className={\n                    \"grid grid-cols-[auto_1fr_auto] items-center gap-lg text-sm text-neutral-muted w-full min-w-0\"\n                }\n            >\n                <Image title={entry.title} src={entry.image} />\n                <div className={\"overflow-hidden\"}>\n                    <div>{entry.model.name}</div>\n\n                    <div\n                        title={entry.title}\n                        className={\n                            \"text-md text-neutral-primary font-semibold mb-sm text-ellipsis overflow-hidden whitespace-nowrap block\"\n                        }\n                    >\n                        {entry.title}\n                    </div>\n\n                    <div>\n                        <span className={\"w-[60px] inline-block\"}>Created:</span>\n                        <span>\n                            {entry.createdBy.displayName}, <TimeAgo datetime={entry.createdOn} />\n                        </span>\n                    </div>\n                    {/* <div>\n                        <span className={\"w-[60px] inline-block\"}>Location:</span>\n                        <span>\n                            Home / Content / Preview / ... / Manage / Retail / Local / Products\n                        </span>\n                    </div>*/}\n                </div>\n                <div className={\"flex items-center gap-sm\"}>\n                    <Tag\n                        content={\n                            <>\n                                {entryStatusLabel}&nbsp;\n                                <Text size={\"sm\"} className={\"text-neutral-muted\"}>\n                                    ({entryRevision})\n                                </Text>\n                            </>\n                        }\n                        variant={\"neutral-base-outline\"}\n                    />\n\n                    {placement == \"multiRef\" && (\n                        <>\n                            <div className={\"flex gap-xs\"}>\n                                <IconButton\n                                    disabled={!onMoveUpClick}\n                                    variant={\"ghost\"}\n                                    size={\"sm\"}\n                                    icon={<ArrowUp />}\n                                    onClick={onMoveUp}\n                                />\n                                <IconButton\n                                    disabled={!onMoveDownClick}\n                                    variant={\"ghost\"}\n                                    size={\"sm\"}\n                                    icon={<ArrowDown />}\n                                    onClick={onMoveDown}\n                                />\n                            </div>\n                        </>\n                    )}\n\n                    <DropdownMenu\n                        trigger={\n                            <IconButton variant={\"ghost\"} size={\"sm\"} icon={<MoreVertIcon />} />\n                        }\n                    >\n                        <DropdownMenu.Link\n                            icon={<OpenInNewIcon />}\n                            text={\"Open in new tab\"}\n                            to={link}\n                            target={\"_blank\"}\n                        />\n\n                        {onRemove && (\n                            <DropdownMenu.Item\n                                icon={<RemoveIcon />}\n                                text={placement === \"multiRef\" ? \"Remove from list\" : \"Remove\"}\n                                onClick={() => onRemove(entry.id)}\n                            />\n                        )}\n                    </DropdownMenu>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/components/Entry.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/components/Entry.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport type {\n    CmsReferenceContentEntry,\n    CmsReferenceValue\n} from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport { Image } from \"./entry/Image.js\";\nimport type { CmsModel } from \"~/types.js\";\nimport { Tag, TimeAgo, Text, DropdownMenu, IconButton, Checkbox, cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as MoreVertIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenInNewIcon } from \"@webiny/icons/open_in_new.svg\";\nimport { ReactComponent as RemoveIcon } from \"@webiny/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport { useRouter } from \"@webiny/app\";\nimport { Routes } from \"~/routes.js\";\n\ninterface EntryProps {\n    model: CmsModel;\n    entry: CmsReferenceContentEntry;\n    onChange: (value: CmsReferenceValue) => void;\n    index?: never;\n    disabled?: boolean;\n    selected: boolean;\n    onMoveUp?: never;\n    onMoveDown?: never;\n    onRemove?: never;\n    placement?: string;\n}\n\ninterface EntryPropsWithRemove {\n    onRemove: (entryId: string) => void;\n    disabled?: boolean;\n    model: CmsModel;\n    entry: CmsReferenceContentEntry;\n    index: number;\n    onMoveUp?: (index: number, toTop: boolean) => void;\n    onMoveDown?: (index: number, toBottom: boolean) => void;\n    onChange?: never;\n    selected?: never;\n    placement?: string;\n}\n\nexport const Entry = ({\n    entry,\n    onChange,\n    onRemove,\n    selected,\n    index,\n    onMoveUp: onMoveUpClick,\n    onMoveDown: onMoveDownClick,\n    placement,\n    disabled = false\n}: EntryPropsWithRemove | EntryProps) => {\n    const { getLink } = useRouter();\n\n    const onSelect = useCallback(() => {\n        if (onChange) {\n            onChange({\n                id: entry.id,\n                modelId: entry.model.modelId\n            });\n        }\n    }, [onChange, entry.id, entry.model.modelId]);\n\n    const onMoveUp = useCallback(\n        (ev: React.MouseEvent) => {\n            if (!onMoveUpClick) {\n                return;\n            }\n            onMoveUpClick(index, ev.shiftKey);\n        },\n        [onMoveUpClick, index]\n    );\n    const onMoveDown = useCallback(\n        (ev: React.MouseEvent) => {\n            if (!onMoveDownClick) {\n                return;\n            }\n            onMoveDownClick(index, ev.shiftKey);\n        },\n        [onMoveDownClick, index]\n    );\n\n    const entryStatusLabel = entry.status.charAt(0).toUpperCase() + entry.status.slice(1);\n\n    // Did not have `revision` field available in the `getLatestContentEntries`\n    // response, hence the manual extraction from the `id` field.\n    const entryRevision = useMemo(() => {\n        const extractedRevision = entry.id.split(\"#\")[1] || \"0001\";\n\n        // Remove leading zeros for correct padding.\n        return \"v\" + Number(extractedRevision).toString();\n    }, [entry.id]);\n\n    const folderId = entry.wbyAco_location?.folderId || entry.location?.folderId || \"\";\n\n    const link = getLink(Routes.ContentEntries.List, {\n        id: entry.id,\n        modelId: entry.model.modelId,\n        folderId\n    });\n\n    return (\n        <div\n            data-selected={selected}\n            onClick={onSelect}\n            data-role=\"ref-field-entry\"\n            className={cn(\n                \"flex items-center justify-between gap-md w-full rounded-md bg-neutral-light p-sm-extra pr-lg hover:bg-neutral-dimmed border-md border-transparent data-[selected=true]:border-accent-dimmed\",\n                { \"hover:cursor-pointer\": !!onChange }\n            )}\n        >\n            {onChange && !disabled ? (\n                <div>\n                    <Checkbox\n                        checked={selected}\n                        onChange={() => {\n                            // We're not calling the onSelect callback here because\n                            // the parent div already does that on click.\n                        }}\n                    />\n                </div>\n            ) : null}\n            <div\n                className={\n                    \"grid grid-cols-[auto_1fr] items-start @lg:items-center gap-lg text-sm text-neutral-muted w-full min-w-0\"\n                }\n            >\n                <Image title={entry.title} src={entry.image} />\n                <div\n                    className={\n                        \"flex flex-col @lg:flex-row @lg:items-center @lg:justify-between gap-sm min-w-0\"\n                    }\n                >\n                    <div className={\"min-w-0\"}>\n                        <div className={\"truncate\"}>{entry.model.name}</div>\n\n                        <div\n                            title={entry.title}\n                            className={\n                                \"text-md text-neutral-primary font-semibold mb-sm text-ellipsis overflow-hidden whitespace-nowrap block\"\n                            }\n                        >\n                            {entry.title}\n                        </div>\n\n                        <div>\n                            <span className={\"w-[60px] inline-block\"}>Created:</span>\n                            <span>\n                                {entry.createdBy.displayName},{\" \"}\n                                <TimeAgo datetime={entry.createdOn} />\n                            </span>\n                        </div>\n                    </div>\n                    <div className={\"flex items-center gap-sm shrink-0\"}>\n                        <Tag\n                            content={\n                                <>\n                                    {entryStatusLabel}&nbsp;\n                                    <Text size={\"sm\"} className={\"text-neutral-muted\"}>\n                                        ({entryRevision})\n                                    </Text>\n                                </>\n                            }\n                            variant={\"neutral-base-outline\"}\n                        />\n\n                        {!disabled && placement == \"multiRef\" ? (\n                            <div className={\"flex gap-xs\"}>\n                                <IconButton\n                                    disabled={!onMoveUpClick}\n                                    variant={\"ghost\"}\n                                    size={\"sm\"}\n                                    icon={<ArrowUp />}\n                                    onClick={onMoveUp}\n                                />\n                                <IconButton\n                                    disabled={!onMoveDownClick}\n                                    variant={\"ghost\"}\n                                    size={\"sm\"}\n                                    icon={<ArrowDown />}\n                                    onClick={onMoveDown}\n                                />\n                            </div>\n                        ) : null}\n\n                        {!disabled ? (\n                            <DropdownMenu\n                                trigger={\n                                    <IconButton\n                                        variant={\"ghost\"}\n                                        size={\"sm\"}\n                                        icon={<MoreVertIcon />}\n                                    />\n                                }\n                            >\n                                <DropdownMenu.Link\n                                    icon={<OpenInNewIcon />}\n                                    text={\"Open in new tab\"}\n                                    to={link}\n                                    target={\"_blank\"}\n                                />\n\n                                {onRemove && (\n                                    <DropdownMenu.Item\n                                        icon={<RemoveIcon />}\n                                        text={\n                                            placement === \"multiRef\" ? \"Remove from list\" : \"Remove\"\n                                        }\n                                        onClick={() => onRemove(entry.id)}\n                                    />\n                                )}\n                            </DropdownMenu>\n                        ) : null}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["Entry","entry","onChange","onRemove","selected","index","onMoveUpClick","onMoveDownClick","placement","disabled","getLink","useRouter","onSelect","useCallback","onMoveUp","ev","onMoveDown","entryStatusLabel","entryRevision","useMemo","extractedRevision","Number","folderId","link","Routes","cn","Checkbox","Image","TimeAgo","Tag","Text","IconButton","ArrowUp","ArrowDown","DropdownMenu","MoreVertIcon","OpenInNewIcon","RemoveIcon"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/components/NoEntries.js

@@ -1,14 +1,10 @@
-import React from "react";
+import react from "react";
 import { Text } from "@webiny/admin-ui";
-const NoEntries = ({
-  text = "No records found."
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex justify-center px-xl py-md-extra bg-neutral-subtle"
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "sm"
-  }, text));
-};
+const NoEntries = ({ text = "No records found." })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center px-xl py-md-extra bg-neutral-subtle"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, text));
 export { NoEntries };
 
 //# sourceMappingURL=NoEntries.js.map

package/admin/plugins/fieldRenderers/ref/advanced/components/NoEntries.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","NoEntries","text","createElement","className","size"],"sources":["NoEntries.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"@webiny/admin-ui\";\n\ninterface NoEntriesProps {\n    text?: React.ReactNode;\n}\n\nconst NoEntries = ({ text = \"No records found.\" }: NoEntriesProps) => {\n    return (\n        <div className={\"flex justify-center px-xl py-md-extra bg-neutral-subtle\"}>\n            <Text size={\"sm\"}>{text}</Text>\n        </div>\n    );\n};\n\nexport { NoEntries, type NoEntriesProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AAMvC,MAAMC,SAAS,GAAGA,CAAC;EAAEC,IAAI,GAAG;AAAoC,CAAC,KAAK;EAClE,oBACIH,KAAA,CAAAI,aAAA;IAAKC,SAAS,EAAE;EAA0D,gBACtEL,KAAA,CAAAI,aAAA,CAACH,IAAI;IAACK,IAAI,EAAE;EAAK,GAAEH,IAAW,CAC7B,CAAC;AAEd,CAAC;AAED,SAASD,SAAS","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/components/NoEntries.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/components/NoEntries.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"@webiny/admin-ui\";\n\ninterface NoEntriesProps {\n    text?: React.ReactNode;\n}\n\nconst NoEntries = ({ text = \"No records found.\" }: NoEntriesProps) => {\n    return (\n        <div className={\"flex justify-center px-xl py-md-extra bg-neutral-subtle\"}>\n            <Text size={\"sm\"}>{text}</Text>\n        </div>\n    );\n};\n\nexport { NoEntries, type NoEntriesProps };\n"],"names":["NoEntries","text","Text"],"mappings":";;AAOA,MAAMA,YAAY,CAAC,EAAEC,OAAO,mBAAmB,EAAkB,GACtD,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,MAAIA;QAAC,MAAM;OAAOD"}

package/admin/plugins/fieldRenderers/ref/advanced/components/Options.js

@@ -1,68 +1,63 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { OptionsModelList } from "./options/OptionsModelList.js";
-import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
-import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as link_svg_ReactComponent } from "@webiny/icons/link.svg";
 import { Button, DropdownMenu } from "@webiny/admin-ui";
-const CreateNewRecordButton = props => {
-  return /*#__PURE__*/React.createElement(Button, Object.assign({}, props, {
-    variant: "tertiary",
-    text: "Create a new record",
-    icon: /*#__PURE__*/React.createElement(AddIcon, null)
-  }));
-};
-const LinkExistingRecordButton = props => {
-  return /*#__PURE__*/React.createElement(Button, Object.assign({}, props, {
-    variant: "tertiary",
-    text: "Select an existing record",
-    icon: /*#__PURE__*/React.createElement(LinkIcon, null)
-  }));
-};
-export const Options = ({
-  models,
-  onNewRecord,
-  onLinkExistingRecord
-}) => {
-  const hasMultipleModels = models.length > 1;
-  const onSingleNewRecord = useCallback(() => {
-    if (models.length === 0 || hasMultipleModels) {
-      return;
-    }
-    onNewRecord(models[0].modelId);
-  }, [models]);
-  const onSingleExistingRecord = useCallback(() => {
-    if (models.length === 0 || hasMultipleModels) {
-      return;
-    }
-    onLinkExistingRecord(models[0].modelId);
-  }, [models]);
-  if (hasMultipleModels) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex gap-sm"
-    }, /*#__PURE__*/React.createElement(DropdownMenu, {
-      trigger: /*#__PURE__*/React.createElement(Button, {
+const CreateNewRecordButton = (props)=>/*#__PURE__*/ react.createElement(Button, {
+        ...props,
         variant: "tertiary",
         text: "Create a new record",
-        icon: /*#__PURE__*/React.createElement(AddIcon, null)
-      })
-    }, /*#__PURE__*/React.createElement(OptionsModelList, {
-      onClick: onNewRecord,
-      models: models
-    })), /*#__PURE__*/React.createElement(DropdownMenu, {
-      trigger: /*#__PURE__*/React.createElement(Button, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    });
+const LinkExistingRecordButton = (props)=>/*#__PURE__*/ react.createElement(Button, {
+        ...props,
         variant: "tertiary",
         text: "Select an existing record",
-        icon: /*#__PURE__*/React.createElement(LinkIcon, null)
-      })
-    }, /*#__PURE__*/React.createElement(OptionsModelList, {
-      onClick: onLinkExistingRecord,
-      models: models
+        icon: /*#__PURE__*/ react.createElement(link_svg_ReactComponent, null)
+    });
+const Options = ({ models, onNewRecord, onLinkExistingRecord })=>{
+    const hasMultipleModels = models.length > 1;
+    const onSingleNewRecord = useCallback(()=>{
+        if (0 === models.length || hasMultipleModels) return;
+        onNewRecord(models[0].modelId);
+    }, [
+        models
+    ]);
+    const onSingleExistingRecord = useCallback(()=>{
+        if (0 === models.length || hasMultipleModels) return;
+        onLinkExistingRecord(models[0].modelId);
+    }, [
+        models
+    ]);
+    if (hasMultipleModels) return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap gap-sm"
+    }, /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "tertiary",
+            text: "Create a new record",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }, /*#__PURE__*/ react.createElement(OptionsModelList, {
+        onClick: onNewRecord,
+        models: models
+    })), /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "tertiary",
+            text: "Select an existing record",
+            icon: /*#__PURE__*/ react.createElement(link_svg_ReactComponent, null)
+        })
+    }, /*#__PURE__*/ react.createElement(OptionsModelList, {
+        onClick: onLinkExistingRecord,
+        models: models
     })));
-  }
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CreateNewRecordButton, {
-    onClick: onSingleNewRecord
-  }), "\xA0", /*#__PURE__*/React.createElement(LinkExistingRecordButton, {
-    onClick: onSingleExistingRecord
-  }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap gap-sm"
+    }, /*#__PURE__*/ react.createElement(CreateNewRecordButton, {
+        onClick: onSingleNewRecord
+    }), /*#__PURE__*/ react.createElement(LinkExistingRecordButton, {
+        onClick: onSingleExistingRecord
+    }));
 };
+export { Options };
 
 //# sourceMappingURL=Options.js.map

package/admin/plugins/fieldRenderers/ref/advanced/components/Options.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","OptionsModelList","ReactComponent","AddIcon","LinkIcon","Button","DropdownMenu","CreateNewRecordButton","props","createElement","Object","assign","variant","text","icon","LinkExistingRecordButton","Options","models","onNewRecord","onLinkExistingRecord","hasMultipleModels","length","onSingleNewRecord","modelId","onSingleExistingRecord","className","trigger","onClick"],"sources":["Options.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { CmsModel } from \"~/types.js\";\nimport { OptionsModelList } from \"~/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList.js\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as LinkIcon } from \"@webiny/icons/link.svg\";\nimport { Button, type ButtonProps, DropdownMenu } from \"@webiny/admin-ui\";\n\nconst CreateNewRecordButton = (props: ButtonProps) => {\n    return <Button {...props} variant={\"tertiary\"} text=\"Create a new record\" icon={<AddIcon />} />;\n};\n\nconst LinkExistingRecordButton = (props: ButtonProps) => {\n    return (\n        <Button\n            {...props}\n            variant={\"tertiary\"}\n            text=\"Select an existing record\"\n            icon={<LinkIcon />}\n        />\n    );\n};\n\ninterface OptionsProps {\n    models: CmsModel[];\n    onNewRecord: (modelId: string) => void;\n    onLinkExistingRecord: (modelId: string) => void;\n}\nexport const Options = ({ models, onNewRecord, onLinkExistingRecord }: OptionsProps) => {\n    const hasMultipleModels = models.length > 1;\n    const onSingleNewRecord = useCallback(() => {\n        if (models.length === 0 || hasMultipleModels) {\n            return;\n        }\n        onNewRecord(models[0].modelId);\n    }, [models]);\n\n    const onSingleExistingRecord = useCallback(() => {\n        if (models.length === 0 || hasMultipleModels) {\n            return;\n        }\n        onLinkExistingRecord(models[0].modelId);\n    }, [models]);\n\n    if (hasMultipleModels) {\n        return (\n            <div className={\"flex gap-sm\"}>\n                <DropdownMenu\n                    trigger={\n                        <Button\n                            variant={\"tertiary\"}\n                            text=\"Create a new record\"\n                            icon={<AddIcon />}\n                        />\n                    }\n                >\n                    <OptionsModelList onClick={onNewRecord} models={models} />\n                </DropdownMenu>\n                <DropdownMenu\n                    trigger={\n                        <Button\n                            variant={\"tertiary\"}\n                            text=\"Select an existing record\"\n                            icon={<LinkIcon />}\n                        />\n                    }\n                >\n                    <OptionsModelList onClick={onLinkExistingRecord} models={models} />\n                </DropdownMenu>\n            </div>\n        );\n    }\n\n    return (\n        <div>\n            <CreateNewRecordButton onClick={onSingleNewRecord} />\n            &nbsp;\n            <LinkExistingRecordButton onClick={onSingleExistingRecord} />\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/components/Options.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/components/Options.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { CmsModel } from \"~/types.js\";\nimport { OptionsModelList } from \"~/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList.js\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as LinkIcon } from \"@webiny/icons/link.svg\";\nimport { Button, type ButtonProps, DropdownMenu } from \"@webiny/admin-ui\";\n\nconst CreateNewRecordButton = (props: ButtonProps) => {\n    return <Button {...props} variant={\"tertiary\"} text=\"Create a new record\" icon={<AddIcon />} />;\n};\n\nconst LinkExistingRecordButton = (props: ButtonProps) => {\n    return (\n        <Button\n            {...props}\n            variant={\"tertiary\"}\n            text=\"Select an existing record\"\n            icon={<LinkIcon />}\n        />\n    );\n};\n\ninterface OptionsProps {\n    models: CmsModel[];\n    onNewRecord: (modelId: string) => void;\n    onLinkExistingRecord: (modelId: string) => void;\n}\nexport const Options = ({ models, onNewRecord, onLinkExistingRecord }: OptionsProps) => {\n    const hasMultipleModels = models.length > 1;\n    const onSingleNewRecord = useCallback(() => {\n        if (models.length === 0 || hasMultipleModels) {\n            return;\n        }\n        onNewRecord(models[0].modelId);\n    }, [models]);\n\n    const onSingleExistingRecord = useCallback(() => {\n        if (models.length === 0 || hasMultipleModels) {\n            return;\n        }\n        onLinkExistingRecord(models[0].modelId);\n    }, [models]);\n\n    if (hasMultipleModels) {\n        return (\n            <div className={\"flex flex-wrap gap-sm\"}>\n                <DropdownMenu\n                    trigger={\n                        <Button\n                            variant={\"tertiary\"}\n                            text=\"Create a new record\"\n                            icon={<AddIcon />}\n                        />\n                    }\n                >\n                    <OptionsModelList onClick={onNewRecord} models={models} />\n                </DropdownMenu>\n                <DropdownMenu\n                    trigger={\n                        <Button\n                            variant={\"tertiary\"}\n                            text=\"Select an existing record\"\n                            icon={<LinkIcon />}\n                        />\n                    }\n                >\n                    <OptionsModelList onClick={onLinkExistingRecord} models={models} />\n                </DropdownMenu>\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"flex flex-wrap gap-sm\"}>\n            <CreateNewRecordButton onClick={onSingleNewRecord} />\n            <LinkExistingRecordButton onClick={onSingleExistingRecord} />\n        </div>\n    );\n};\n"],"names":["CreateNewRecordButton","props","Button","AddIcon","LinkExistingRecordButton","LinkIcon","Options","models","onNewRecord","onLinkExistingRecord","hasMultipleModels","onSingleNewRecord","useCallback","onSingleExistingRecord","DropdownMenu","OptionsModelList"],"mappings":";;;;;AAOA,MAAMA,wBAAwB,CAACC,QACpB,WAAP,GAAO,oBAACC,QAAMA;QAAE,GAAGD,KAAK;QAAE,SAAS;QAAY,MAAK;QAAsB,oBAAM,oBAACE,gBAAOA;;AAG5F,MAAMC,2BAA2B,CAACH,QACvB,WAAP,GACI,oBAACC,QAAMA;QACF,GAAGD,KAAK;QACT,SAAS;QACT,MAAK;QACL,oBAAM,oBAACI,yBAAQA;;AAUpB,MAAMC,UAAU,CAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,oBAAoB,EAAgB;IAC/E,MAAMC,oBAAoBH,OAAO,MAAM,GAAG;IAC1C,MAAMI,oBAAoBC,YAAY;QAClC,IAAIL,AAAkB,MAAlBA,OAAO,MAAM,IAAUG,mBACvB;QAEJF,YAAYD,MAAM,CAAC,EAAE,CAAC,OAAO;IACjC,GAAG;QAACA;KAAO;IAEX,MAAMM,yBAAyBD,YAAY;QACvC,IAAIL,AAAkB,MAAlBA,OAAO,MAAM,IAAUG,mBACvB;QAEJD,qBAAqBF,MAAM,CAAC,EAAE,CAAC,OAAO;IAC1C,GAAG;QAACA;KAAO;IAEX,IAAIG,mBACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,cAAYA;QACT,uBACI,oBAACZ,QAAMA;YACH,SAAS;YACT,MAAK;YACL,oBAAM,oBAACC,gBAAOA;;qBAItB,oBAACY,kBAAgBA;QAAC,SAASP;QAAa,QAAQD;uBAEpD,oBAACO,cAAYA;QACT,uBACI,oBAACZ,QAAMA;YACH,SAAS;YACT,MAAK;YACL,oBAAM,oBAACG,yBAAQA;;qBAIvB,oBAACU,kBAAgBA;QAAC,SAASN;QAAsB,QAAQF;;IAMzE,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACP,uBAAqBA;QAAC,SAASW;sBAChC,oBAACP,0BAAwBA;QAAC,SAASS;;AAG/C"}