@webiny/app-admin 6.5.0-beta.4 → 6.5.0-beta.6

package/base/Base/FieldRenderers/HorizontalTabsRenderer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { TabsNodeRendererProps } from "../../../features/formModel/FormView.js";
-export declare const HorizontalTabsRenderer: (({ node }: TabsNodeRendererProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const HorizontalTabsRenderer: (({ node }: TabsNodeRendererProps) => React.JSX.Element) & React.NamedExoticComponent<TabsNodeRendererProps> & {
+    readonly type: ({ node }: TabsNodeRendererProps) => React.JSX.Element;
 };

package/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZone.d.ts

@@ -5,7 +5,7 @@ interface MultiValueDynamicZoneProps {
     addItemLabel: string;
     showContainer?: boolean;
 }
-export declare const MultiValueDynamicZone: (({ field, addItemLabel, showContainer }: MultiValueDynamicZoneProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const MultiValueDynamicZone: (({ field, addItemLabel, showContainer }: MultiValueDynamicZoneProps) => React.JSX.Element) & React.NamedExoticComponent<MultiValueDynamicZoneProps> & {
+    readonly type: ({ field, addItemLabel, showContainer }: MultiValueDynamicZoneProps) => React.JSX.Element;
 };
 export {};

package/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZone.js

@@ -14,7 +14,7 @@ import { TEMPLATE_DISCRIMINATOR } from "../../../../../features/formModel/Object
 import { ClipboardFeature } from "../../../../../features/clipboard/feature.js";
 import { useConfirmationDialog } from "../../../../../hooks/useConfirmationDialog.js";
 import { NestedLayout } from "../ObjectFieldComponents.js";
-import { AddTemplateButton } from "../TemplatePicker.js";
+import { AddTemplateButton } from "../TemplatePicker/index.js";
 import { MultiValueDynamicZonePresenter } from "./abstractions.js";
 const MultiValueDynamicZone = observer(({ field, addItemLabel, showContainer = true })=>{
     const toast = useToast();

package/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZone.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZone.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { useFeature, useContainer } from \"@webiny/app\";\nimport { hasSubtreeFocusRequest } from \"~/features/formModel/index.js\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@webiny/icons/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldItemVM, IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { TEMPLATE_DISCRIMINATOR } from \"~/features/formModel/ObjectField.js\";\nimport { ClipboardFeature } from \"~/features/clipboard/feature.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"../ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"../TemplatePicker.js\";\nimport {\n    MultiValueDynamicZonePresenter,\n    type IMultiValueDynamicZonePresenter\n} from \"./abstractions.js\";\nimport type { ISortableItemProps } from \"~/presentation/sortable/index.js\";\nimport { Separator } from \"@webiny/admin-ui\";\n\ninterface MultiValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    addItemLabel: string;\n    showContainer?: boolean;\n}\n\nexport const MultiValueDynamicZone = observer(\n    ({ field, addItemLabel, showContainer = true }: MultiValueDynamicZoneProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n        const container = useContainer();\n\n        const presenter = useMemo<IMultiValueDynamicZonePresenter>(() => {\n            const p = container.resolve(MultiValueDynamicZonePresenter);\n            p.init({ type: `dz:${field.name}`, onReorder: (from, to) => field.moveItem(from, to) });\n            return p;\n        }, []);\n\n        useEffect(() => {\n            return () => presenter.dispose();\n        }, [presenter]);\n\n        // Force the DZ list container open when a focus request lands anywhere\n        // in its subtree, so \"jump to field\" can cascade through collapsed levels.\n        const focusInside = hasSubtreeFocusRequest(field.items.flatMap(i => i.fields));\n        const [containerOpen, setContainerOpen] = useState(true);\n        useEffect(() => {\n            if (focusInside) {\n                setContainerOpen(true);\n            }\n        }, [focusInside]);\n\n        const itemCount = field.items.length;\n\n        const clipboardItem = clipboard.item;\n        const canPaste =\n            clipboardItem !== null &&\n            clipboardItem.type === \"wby.dz\" &&\n            typeof clipboardItem.data[TEMPLATE_DISCRIMINATOR] === \"string\" &&\n            field.availableTemplates.some(t => t.id === clipboardItem.data[TEMPLATE_DISCRIMINATOR]);\n\n        const content = (\n            <div className={\"flex flex-col gap-lg\"}>\n                {itemCount > 0 ? (\n                    <Accordion\n                        background={\"base\"}\n                        variant={\"container\"}\n                        className={\"gap-md flex flex-col\"}\n                    >\n                        {field.items.map((item, index) => (\n                            <TemplatedListItem\n                                key={item.key}\n                                item={item}\n                                index={index}\n                                total={itemCount}\n                                templates={field.availableTemplates}\n                                disabled={field.disabled}\n                                sortable={presenter.getItemProps(index)}\n                            />\n                        ))}\n                    </Accordion>\n                ) : null}\n                {!field.disabled && (\n                    <div className={\"flex gap-sm items-center\"}>\n                        <AddTemplateButton\n                            label={addItemLabel}\n                            templates={field.availableTemplates}\n                            onSelect={template => field.addItem(template.id)}\n                        />\n                        {canPaste && (\n                            <Button\n                                size={\"sm\"}\n                                variant={\"tertiary\"}\n                                text={\"Paste\"}\n                                icon={<PasteIcon />}\n                                onClick={() => {\n                                    const pasted = clipboard.paste();\n                                    if (pasted) {\n                                        field.addItem(pasted.data);\n                                        toast.showSuccessToast({\n                                            title: \"Pasted from clipboard.\"\n                                        });\n                                    }\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n\n        if (!showContainer) {\n            return (\n                <>\n                    <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                        <span className={\"text-accent-primary text-lg font-semibold\"}>\n                            {field.label ?? \"\"} ({itemCount})\n                        </span>\n                    </Separator>\n                    <div className={\"mt-md\"}>{content}</div>\n                </>\n            );\n        }\n\n        const label = `${field.label || \"\"}${itemCount ? ` (${itemCount})` : \"\"}`;\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={label}\n                    open={containerOpen}\n                    onOpenChange={setContainerOpen}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n\ninterface TemplatedListItemProps {\n    item: IObjectFieldItemVM;\n    index: number;\n    total: number;\n    templates: { id: string; label: string }[];\n    disabled: boolean;\n    sortable: ISortableItemProps;\n}\n\nconst TemplatedListItem = observer(\n    ({ item, index, total, templates, disabled, sortable }: TemplatedListItemProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Delete item\",\n            message: \"Are you sure you want to delete this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const template = templates.find(t => t.id === item.templateId);\n        const title = template?.label || `Item #${index + 1}`;\n\n        // Force this item open when a focus request lands anywhere in its subtree.\n        const focusInside = hasSubtreeFocusRequest(item.fields);\n        const [open, setOpen] = useState(false);\n        useEffect(() => {\n            if (focusInside) {\n                setOpen(true);\n            }\n        }, [focusInside]);\n\n        const onDelete = () => {\n            showConfirmation(() => {\n                item.remove();\n            });\n        };\n\n        const actions = (\n            <>\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowUpIcon />} content={\"Move up\"} />}\n                    onClick={item.moveUp}\n                    disabled={index === 0}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowDownIcon />} content={\"Move down\"} />}\n                    onClick={item.moveDown}\n                    disabled={index === total - 1}\n                />\n                <Accordion.Item.Action.Separator />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CopyIcon />} content={\"Copy to clipboard\"} />}\n                    onClick={() => {\n                        clipboard.copy({ type: \"wby.dz\", data: item.getClonedData() });\n                        toast.showSuccessToast({ title: \"Copied to clipboard.\" });\n                    }}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CloneIcon />} content={\"Duplicate\"} />}\n                    onClick={item.duplicate}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />}\n                    onClick={onDelete}\n                />\n            </>\n        );\n\n        return (\n            <div\n                ref={sortable.ref}\n                data-sortable-item=\"\"\n                className={\"relative\"}\n                style={{ opacity: sortable.isDragging ? 0.4 : 1 }}\n            >\n                {sortable.closestEdge === \"top\" && (\n                    <DropIndicator position={\"top\"} isFirst={index === 0} />\n                )}\n                <Accordion.Item\n                    title={title}\n                    actions={disabled ? null : actions}\n                    open={open}\n                    onOpenChange={setOpen}\n                    draggable={!disabled}\n                    dragHandleRef={sortable.handleRef}\n                >\n                    <NestedLayout layout={item.layout} />\n                </Accordion.Item>\n                {sortable.closestEdge === \"bottom\" && (\n                    <DropIndicator position={\"bottom\"} isLast={index === total - 1} />\n                )}\n            </div>\n        );\n    }\n);\n\nconst DropIndicator = ({\n    position,\n    isFirst = false,\n    isLast = false\n}: {\n    position: \"top\" | \"bottom\";\n    isFirst?: boolean;\n    isLast?: boolean;\n}) => {\n    let offset = \"calc(var(--spacing-md) / -2)\";\n    if (position === \"top\" && isFirst) {\n        offset = \"0px\";\n    }\n    if (position === \"bottom\" && isLast) {\n        offset = \"0px\";\n    }\n\n    return (\n        <div\n            className={\"absolute left-0 right-0 z-10\"}\n            style={{\n                [position]: offset,\n                transform: position === \"top\" ? \"translateY(-50%)\" : \"translateY(50%)\"\n            }}\n        >\n            <div className={\"w-full h-[2px] bg-primary rounded-full\"} />\n        </div>\n    );\n};\n"],"names":["MultiValueDynamicZone","observer","field","addItemLabel","showContainer","toast","useToast","clipboard","useFeature","ClipboardFeature","container","useContainer","presenter","useMemo","p","MultiValueDynamicZonePresenter","from","to","useEffect","focusInside","hasSubtreeFocusRequest","i","containerOpen","setContainerOpen","useState","itemCount","clipboardItem","canPaste","TEMPLATE_DISCRIMINATOR","t","content","Accordion","item","index","TemplatedListItem","AddTemplateButton","template","Button","PasteIcon","pasted","Separator","label","HorizontalRuleIcon","total","templates","disabled","sortable","showConfirmation","useConfirmationDialog","title","open","setOpen","onDelete","actions","Tooltip","ArrowUpIcon","ArrowDownIcon","CopyIcon","CloneIcon","DeleteIcon","DropIndicator","NestedLayout","position","isFirst","isLast","offset"],"mappings":"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"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZone.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZone.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { useFeature, useContainer } from \"@webiny/app\";\nimport { hasSubtreeFocusRequest } from \"~/features/formModel/index.js\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@webiny/icons/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldItemVM, IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { TEMPLATE_DISCRIMINATOR } from \"~/features/formModel/ObjectField.js\";\nimport { ClipboardFeature } from \"~/features/clipboard/feature.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"../ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"../TemplatePicker/index.js\";\nimport {\n    MultiValueDynamicZonePresenter,\n    type IMultiValueDynamicZonePresenter\n} from \"./abstractions.js\";\nimport type { ISortableItemProps } from \"~/presentation/sortable/index.js\";\nimport { Separator } from \"@webiny/admin-ui\";\n\ninterface MultiValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    addItemLabel: string;\n    showContainer?: boolean;\n}\n\nexport const MultiValueDynamicZone = observer(\n    ({ field, addItemLabel, showContainer = true }: MultiValueDynamicZoneProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n        const container = useContainer();\n\n        const presenter = useMemo<IMultiValueDynamicZonePresenter>(() => {\n            const p = container.resolve(MultiValueDynamicZonePresenter);\n            p.init({ type: `dz:${field.name}`, onReorder: (from, to) => field.moveItem(from, to) });\n            return p;\n        }, []);\n\n        useEffect(() => {\n            return () => presenter.dispose();\n        }, [presenter]);\n\n        // Force the DZ list container open when a focus request lands anywhere\n        // in its subtree, so \"jump to field\" can cascade through collapsed levels.\n        const focusInside = hasSubtreeFocusRequest(field.items.flatMap(i => i.fields));\n        const [containerOpen, setContainerOpen] = useState(true);\n        useEffect(() => {\n            if (focusInside) {\n                setContainerOpen(true);\n            }\n        }, [focusInside]);\n\n        const itemCount = field.items.length;\n\n        const clipboardItem = clipboard.item;\n        const canPaste =\n            clipboardItem !== null &&\n            clipboardItem.type === \"wby.dz\" &&\n            typeof clipboardItem.data[TEMPLATE_DISCRIMINATOR] === \"string\" &&\n            field.availableTemplates.some(t => t.id === clipboardItem.data[TEMPLATE_DISCRIMINATOR]);\n\n        const content = (\n            <div className={\"flex flex-col gap-lg\"}>\n                {itemCount > 0 ? (\n                    <Accordion\n                        background={\"base\"}\n                        variant={\"container\"}\n                        className={\"gap-md flex flex-col\"}\n                    >\n                        {field.items.map((item, index) => (\n                            <TemplatedListItem\n                                key={item.key}\n                                item={item}\n                                index={index}\n                                total={itemCount}\n                                templates={field.availableTemplates}\n                                disabled={field.disabled}\n                                sortable={presenter.getItemProps(index)}\n                            />\n                        ))}\n                    </Accordion>\n                ) : null}\n                {!field.disabled && (\n                    <div className={\"flex gap-sm items-center\"}>\n                        <AddTemplateButton\n                            label={addItemLabel}\n                            templates={field.availableTemplates}\n                            onSelect={template => field.addItem(template.id)}\n                        />\n                        {canPaste && (\n                            <Button\n                                size={\"sm\"}\n                                variant={\"tertiary\"}\n                                text={\"Paste\"}\n                                icon={<PasteIcon />}\n                                onClick={() => {\n                                    const pasted = clipboard.paste();\n                                    if (pasted) {\n                                        field.addItem(pasted.data);\n                                        toast.showSuccessToast({\n                                            title: \"Pasted from clipboard.\"\n                                        });\n                                    }\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n\n        if (!showContainer) {\n            return (\n                <>\n                    <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                        <span className={\"text-accent-primary text-lg font-semibold\"}>\n                            {field.label ?? \"\"} ({itemCount})\n                        </span>\n                    </Separator>\n                    <div className={\"mt-md\"}>{content}</div>\n                </>\n            );\n        }\n\n        const label = `${field.label || \"\"}${itemCount ? ` (${itemCount})` : \"\"}`;\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={label}\n                    open={containerOpen}\n                    onOpenChange={setContainerOpen}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n\ninterface TemplatedListItemProps {\n    item: IObjectFieldItemVM;\n    index: number;\n    total: number;\n    templates: { id: string; label: string }[];\n    disabled: boolean;\n    sortable: ISortableItemProps;\n}\n\nconst TemplatedListItem = observer(\n    ({ item, index, total, templates, disabled, sortable }: TemplatedListItemProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Delete item\",\n            message: \"Are you sure you want to delete this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const template = templates.find(t => t.id === item.templateId);\n        const title = template?.label || `Item #${index + 1}`;\n\n        // Force this item open when a focus request lands anywhere in its subtree.\n        const focusInside = hasSubtreeFocusRequest(item.fields);\n        const [open, setOpen] = useState(false);\n        useEffect(() => {\n            if (focusInside) {\n                setOpen(true);\n            }\n        }, [focusInside]);\n\n        const onDelete = () => {\n            showConfirmation(() => {\n                item.remove();\n            });\n        };\n\n        const actions = (\n            <>\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowUpIcon />} content={\"Move up\"} />}\n                    onClick={item.moveUp}\n                    disabled={index === 0}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowDownIcon />} content={\"Move down\"} />}\n                    onClick={item.moveDown}\n                    disabled={index === total - 1}\n                />\n                <Accordion.Item.Action.Separator />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CopyIcon />} content={\"Copy to clipboard\"} />}\n                    onClick={() => {\n                        clipboard.copy({ type: \"wby.dz\", data: item.getClonedData() });\n                        toast.showSuccessToast({ title: \"Copied to clipboard.\" });\n                    }}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CloneIcon />} content={\"Duplicate\"} />}\n                    onClick={item.duplicate}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />}\n                    onClick={onDelete}\n                />\n            </>\n        );\n\n        return (\n            <div\n                ref={sortable.ref}\n                data-sortable-item=\"\"\n                className={\"relative\"}\n                style={{ opacity: sortable.isDragging ? 0.4 : 1 }}\n            >\n                {sortable.closestEdge === \"top\" && (\n                    <DropIndicator position={\"top\"} isFirst={index === 0} />\n                )}\n                <Accordion.Item\n                    title={title}\n                    actions={disabled ? null : actions}\n                    open={open}\n                    onOpenChange={setOpen}\n                    draggable={!disabled}\n                    dragHandleRef={sortable.handleRef}\n                >\n                    <NestedLayout layout={item.layout} />\n                </Accordion.Item>\n                {sortable.closestEdge === \"bottom\" && (\n                    <DropIndicator position={\"bottom\"} isLast={index === total - 1} />\n                )}\n            </div>\n        );\n    }\n);\n\nconst DropIndicator = ({\n    position,\n    isFirst = false,\n    isLast = false\n}: {\n    position: \"top\" | \"bottom\";\n    isFirst?: boolean;\n    isLast?: boolean;\n}) => {\n    let offset = \"calc(var(--spacing-md) / -2)\";\n    if (position === \"top\" && isFirst) {\n        offset = \"0px\";\n    }\n    if (position === \"bottom\" && isLast) {\n        offset = \"0px\";\n    }\n\n    return (\n        <div\n            className={\"absolute left-0 right-0 z-10\"}\n            style={{\n                [position]: offset,\n                transform: position === \"top\" ? \"translateY(-50%)\" : \"translateY(50%)\"\n            }}\n        >\n            <div className={\"w-full h-[2px] bg-primary rounded-full\"} />\n        </div>\n    );\n};\n"],"names":["MultiValueDynamicZone","observer","field","addItemLabel","showContainer","toast","useToast","clipboard","useFeature","ClipboardFeature","container","useContainer","presenter","useMemo","p","MultiValueDynamicZonePresenter","from","to","useEffect","focusInside","hasSubtreeFocusRequest","i","containerOpen","setContainerOpen","useState","itemCount","clipboardItem","canPaste","TEMPLATE_DISCRIMINATOR","t","content","Accordion","item","index","TemplatedListItem","AddTemplateButton","template","Button","PasteIcon","pasted","Separator","label","HorizontalRuleIcon","total","templates","disabled","sortable","showConfirmation","useConfirmationDialog","title","open","setOpen","onDelete","actions","Tooltip","ArrowUpIcon","ArrowDownIcon","CopyIcon","CloneIcon","DeleteIcon","DropIndicator","NestedLayout","position","isFirst","isLast","offset"],"mappings":"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"}

package/base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.d.ts

@@ -3,8 +3,12 @@ import type { IObjectFieldItemVM, LayoutNodeVM } from "../../../../features/form
 import type { ISortableItemProps } from "../../../../presentation/sortable/index.js";
 export declare const NestedLayout: (({ layout }: {
     layout: LayoutNodeVM[];
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    layout: LayoutNodeVM[];
+}> & {
+    readonly type: ({ layout }: {
+        layout: LayoutNodeVM[];
+    }) => React.JSX.Element;
 };
 export interface ListItemRendererProps {
     item: IObjectFieldItemVM;
@@ -16,8 +20,8 @@ export interface ListItemRendererProps {
     disabled: boolean;
     sortable?: ISortableItemProps;
 }
-export declare const ListItemRenderer: (({ item, index, total, label, itemTitle, itemDescription, disabled, sortable }: ListItemRendererProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const ListItemRenderer: (({ item, index, total, label, itemTitle, itemDescription, disabled, sortable }: ListItemRendererProps) => React.JSX.Element) & React.NamedExoticComponent<ListItemRendererProps> & {
+    readonly type: ({ item, index, total, label, itemTitle, itemDescription, disabled, sortable }: ListItemRendererProps) => React.JSX.Element;
 };
 export interface AddItemButtonProps {
     label?: string;

package/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.d.ts

@@ -5,7 +5,7 @@ interface SingleValueDynamicZoneProps {
     addItemLabel: string;
     showContainer?: boolean;
 }
-export declare const SingleValueDynamicZone: (({ field, addItemLabel, showContainer }: SingleValueDynamicZoneProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const SingleValueDynamicZone: (({ field, addItemLabel, showContainer }: SingleValueDynamicZoneProps) => React.JSX.Element) & React.NamedExoticComponent<SingleValueDynamicZoneProps> & {
+    readonly type: ({ field, addItemLabel, showContainer }: SingleValueDynamicZoneProps) => React.JSX.Element;
 };
 export {};

package/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js

@@ -11,7 +11,7 @@ import { TEMPLATE_DISCRIMINATOR } from "../../../../features/formModel/ObjectFie
 import { ClipboardFeature } from "../../../../features/clipboard/feature.js";
 import { useConfirmationDialog } from "../../../../hooks/useConfirmationDialog.js";
 import { NestedLayout } from "./ObjectFieldComponents.js";
-import { AddTemplateButton } from "./TemplatePicker.js";
+import { AddTemplateButton } from "./TemplatePicker/index.js";
 const SingleValueDynamicZone = observer(({ field, addItemLabel, showContainer = true })=>{
     const toast = useToast();
     const { clipboard } = useFeature(ClipboardFeature);

package/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport { hasSubtreeFocusRequest } from \"~/features/formModel/index.js\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { TEMPLATE_DISCRIMINATOR } from \"~/features/formModel/ObjectField.js\";\nimport { ClipboardFeature } from \"~/features/clipboard/feature.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"./TemplatePicker.js\";\nimport { Separator } from \"@webiny/admin-ui\";\n\ninterface SingleValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    addItemLabel: string;\n    showContainer?: boolean;\n}\n\nexport const SingleValueDynamicZone = observer(\n    ({ field, addItemLabel, showContainer = true }: SingleValueDynamicZoneProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n\n        // Force both the DZ container and the active-template accordion open\n        // when a focus request lands anywhere in the subtree, so \"jump to\n        // field\" can cascade through collapsed levels.\n        const focusInside = hasSubtreeFocusRequest(field.fields);\n        const [containerOpen, setContainerOpen] = useState(true);\n        const [templateOpen, setTemplateOpen] = useState(false);\n        useEffect(() => {\n            if (focusInside) {\n                setContainerOpen(true);\n                setTemplateOpen(true);\n            }\n        }, [focusInside]);\n\n        const activeTemplate =\n            field.activeTemplateId !== null\n                ? field.availableTemplates.find(t => t.id === field.activeTemplateId)\n                : undefined;\n\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Remove template\",\n            message: \"Are you sure you want to remove this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const onClear = () => {\n            showConfirmation(() => {\n                field.onChange(null);\n            });\n        };\n\n        const clipboardItem = clipboard.item;\n        const canPaste =\n            clipboardItem !== null &&\n            clipboardItem.type === \"wby.dz\" &&\n            typeof clipboardItem.data[TEMPLATE_DISCRIMINATOR] === \"string\" &&\n            field.availableTemplates.some(t => t.id === clipboardItem.data[TEMPLATE_DISCRIMINATOR]);\n\n        const content = (\n            <>\n                {activeTemplate ? (\n                    <Accordion background={\"base\"} variant={\"container\"}>\n                        <Accordion.Item\n                            title={activeTemplate.label}\n                            open={templateOpen}\n                            onOpenChange={setTemplateOpen}\n                            actions={\n                                field.disabled ? null : (\n                                    <>\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<CopyIcon />}\n                                                    content={\"Copy to clipboard\"}\n                                                />\n                                            }\n                                            onClick={() => {\n                                                clipboard.copy({\n                                                    type: \"wby.dz\",\n                                                    data: field.getClonedData()\n                                                });\n                                                toast.showSuccessToast({\n                                                    title: \"Copied to clipboard.\"\n                                                });\n                                            }}\n                                        />\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<DeleteIcon />}\n                                                    content={\"Delete\"}\n                                                />\n                                            }\n                                            onClick={onClear}\n                                        />\n                                    </>\n                                )\n                            }\n                        >\n                            <NestedLayout layout={field.layout} />\n                        </Accordion.Item>\n                    </Accordion>\n                ) : null}\n                {!activeTemplate && !field.disabled && (\n                    <div className={\"flex gap-sm items-center\"}>\n                        <AddTemplateButton\n                            label={addItemLabel}\n                            templates={field.availableTemplates}\n                            onSelect={template => field.setTemplate(template.id)}\n                        />\n                        {canPaste && (\n                            <Button\n                                size={\"sm\"}\n                                variant={\"tertiary\"}\n                                text={\"Paste\"}\n                                icon={<PasteIcon />}\n                                onClick={() => {\n                                    const pasted = clipboard.paste();\n                                    if (pasted) {\n                                        field.onChange(pasted.data);\n                                        toast.showSuccessToast({\n                                            title: \"Pasted from clipboard.\"\n                                        });\n                                    }\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </>\n        );\n\n        if (!showContainer) {\n            return (\n                <>\n                    <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                        <span className={\"text-accent-primary text-lg font-semibold\"}>\n                            {field.label ?? \"\"}\n                        </span>\n                    </Separator>\n                    <div className={\"mt-md\"}>{content}</div>\n                </>\n            );\n        }\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={field.label}\n                    open={containerOpen}\n                    onOpenChange={setContainerOpen}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n"],"names":["SingleValueDynamicZone","observer","field","addItemLabel","showContainer","toast","useToast","clipboard","useFeature","ClipboardFeature","focusInside","hasSubtreeFocusRequest","containerOpen","setContainerOpen","useState","templateOpen","setTemplateOpen","useEffect","activeTemplate","t","undefined","showConfirmation","useConfirmationDialog","onClear","clipboardItem","canPaste","TEMPLATE_DISCRIMINATOR","content","Accordion","Tooltip","CopyIcon","DeleteIcon","NestedLayout","AddTemplateButton","template","Button","PasteIcon","pasted","Separator","HorizontalRuleIcon"],"mappings":"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"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport { hasSubtreeFocusRequest } from \"~/features/formModel/index.js\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { TEMPLATE_DISCRIMINATOR } from \"~/features/formModel/ObjectField.js\";\nimport { ClipboardFeature } from \"~/features/clipboard/feature.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"./TemplatePicker/index.js\";\nimport { Separator } from \"@webiny/admin-ui\";\n\ninterface SingleValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    addItemLabel: string;\n    showContainer?: boolean;\n}\n\nexport const SingleValueDynamicZone = observer(\n    ({ field, addItemLabel, showContainer = true }: SingleValueDynamicZoneProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n\n        // Force both the DZ container and the active-template accordion open\n        // when a focus request lands anywhere in the subtree, so \"jump to\n        // field\" can cascade through collapsed levels.\n        const focusInside = hasSubtreeFocusRequest(field.fields);\n        const [containerOpen, setContainerOpen] = useState(true);\n        const [templateOpen, setTemplateOpen] = useState(false);\n        useEffect(() => {\n            if (focusInside) {\n                setContainerOpen(true);\n                setTemplateOpen(true);\n            }\n        }, [focusInside]);\n\n        const activeTemplate =\n            field.activeTemplateId !== null\n                ? field.availableTemplates.find(t => t.id === field.activeTemplateId)\n                : undefined;\n\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Remove template\",\n            message: \"Are you sure you want to remove this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const onClear = () => {\n            showConfirmation(() => {\n                field.onChange(null);\n            });\n        };\n\n        const clipboardItem = clipboard.item;\n        const canPaste =\n            clipboardItem !== null &&\n            clipboardItem.type === \"wby.dz\" &&\n            typeof clipboardItem.data[TEMPLATE_DISCRIMINATOR] === \"string\" &&\n            field.availableTemplates.some(t => t.id === clipboardItem.data[TEMPLATE_DISCRIMINATOR]);\n\n        const content = (\n            <>\n                {activeTemplate ? (\n                    <Accordion background={\"base\"} variant={\"container\"}>\n                        <Accordion.Item\n                            title={activeTemplate.label}\n                            open={templateOpen}\n                            onOpenChange={setTemplateOpen}\n                            actions={\n                                field.disabled ? null : (\n                                    <>\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<CopyIcon />}\n                                                    content={\"Copy to clipboard\"}\n                                                />\n                                            }\n                                            onClick={() => {\n                                                clipboard.copy({\n                                                    type: \"wby.dz\",\n                                                    data: field.getClonedData()\n                                                });\n                                                toast.showSuccessToast({\n                                                    title: \"Copied to clipboard.\"\n                                                });\n                                            }}\n                                        />\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<DeleteIcon />}\n                                                    content={\"Delete\"}\n                                                />\n                                            }\n                                            onClick={onClear}\n                                        />\n                                    </>\n                                )\n                            }\n                        >\n                            <NestedLayout layout={field.layout} />\n                        </Accordion.Item>\n                    </Accordion>\n                ) : null}\n                {!activeTemplate && !field.disabled && (\n                    <div className={\"flex gap-sm items-center\"}>\n                        <AddTemplateButton\n                            label={addItemLabel}\n                            templates={field.availableTemplates}\n                            onSelect={template => field.setTemplate(template.id)}\n                        />\n                        {canPaste && (\n                            <Button\n                                size={\"sm\"}\n                                variant={\"tertiary\"}\n                                text={\"Paste\"}\n                                icon={<PasteIcon />}\n                                onClick={() => {\n                                    const pasted = clipboard.paste();\n                                    if (pasted) {\n                                        field.onChange(pasted.data);\n                                        toast.showSuccessToast({\n                                            title: \"Pasted from clipboard.\"\n                                        });\n                                    }\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </>\n        );\n\n        if (!showContainer) {\n            return (\n                <>\n                    <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                        <span className={\"text-accent-primary text-lg font-semibold\"}>\n                            {field.label ?? \"\"}\n                        </span>\n                    </Separator>\n                    <div className={\"mt-md\"}>{content}</div>\n                </>\n            );\n        }\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={field.label}\n                    open={containerOpen}\n                    onOpenChange={setContainerOpen}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n"],"names":["SingleValueDynamicZone","observer","field","addItemLabel","showContainer","toast","useToast","clipboard","useFeature","ClipboardFeature","focusInside","hasSubtreeFocusRequest","containerOpen","setContainerOpen","useState","templateOpen","setTemplateOpen","useEffect","activeTemplate","t","undefined","showConfirmation","useConfirmationDialog","onClear","clipboardItem","canPaste","TEMPLATE_DISCRIMINATOR","content","Accordion","Tooltip","CopyIcon","DeleteIcon","NestedLayout","AddTemplateButton","template","Button","PasteIcon","pasted","Separator","HorizontalRuleIcon"],"mappings":"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"}

package/base/Base/FieldRenderers/ObjectRenderer/{TemplatePicker.d.ts → TemplatePicker/AddTemplateButton.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ITemplateVM } from "../../../../features/formModel/index.js";
+import type { ITemplateVM } from "../../../../../features/formModel/index.js";
 export interface AddTemplateButtonProps {
     templates: ITemplateVM[];
     onSelect: (template: ITemplateVM) => void;

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/AddTemplateButton.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { Button, Dialog } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { TemplateGallery } from "./TemplateGallery.js";
+const AddTemplateButton = ({ templates, onSelect, label, size = "sm", variant = "tertiary" })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-between items-center"
+    }, /*#__PURE__*/ react.createElement(Dialog, {
+        size: "lg",
+        className: "w-[800px]",
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            size: size,
+            variant: variant,
+            text: label,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }),
+        title: "Insert a template",
+        info: /*#__PURE__*/ react.createElement(react.Fragment, null)
+    }, /*#__PURE__*/ react.createElement(TemplateGallery, {
+        templates: templates,
+        onSelect: onSelect
+    })));
+export { AddTemplateButton };
+
+//# sourceMappingURL=AddTemplateButton.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/AddTemplateButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/AddTemplateButton.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/AddTemplateButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Dialog } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { ITemplateVM } from \"~/features/formModel/index.js\";\nimport { TemplateGallery } from \"./TemplateGallery.js\";\n\nexport interface AddTemplateButtonProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n    label?: string;\n    size?: \"sm\" | \"md\" | \"lg\";\n    variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const AddTemplateButton = ({\n    templates,\n    onSelect,\n    label,\n    size = \"sm\",\n    variant = \"tertiary\"\n}: AddTemplateButtonProps) => {\n    return (\n        <div className={\"flex justify-between items-center\"}>\n            <Dialog\n                size={\"lg\"}\n                className={\"w-[800px]\"}\n                trigger={<Button size={size} variant={variant} text={label} icon={<AddIcon />} />}\n                title={\"Insert a template\"}\n                info={<></>}\n            >\n                <TemplateGallery templates={templates} onSelect={onSelect} />\n            </Dialog>\n        </div>\n    );\n};\n"],"names":["AddTemplateButton","templates","onSelect","label","size","variant","Dialog","Button","AddIcon","TemplateGallery"],"mappings":";;;;AAeO,MAAMA,oBAAoB,CAAC,EAC9BC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,IAAI,EACXC,UAAU,UAAU,EACC,GACd,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,WAAW;QACX,uBAAS,oBAACC,QAAMA;YAAC,MAAMH;YAAM,SAASC;YAAS,MAAMF;YAAO,oBAAM,oBAACK,gBAAOA;;QAC1E,OAAO;QACP,oBAAM;qBAEN,oBAACC,iBAAeA;QAAC,WAAWR;QAAW,UAAUC"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/SelectableTemplate.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ITemplateVM } from "../../../../../features/formModel/index.js";
+interface SelectableTemplateProps {
+    template: ITemplateVM;
+    onSelect: (template: ITemplateVM) => void;
+    className: string;
+    children: React.ReactNode;
+}
+/**
+ * A focusable, clickable wrapper that inserts the template and closes the dialog.
+ */
+export declare const SelectableTemplate: ({ template, onSelect, className, children }: SelectableTemplateProps) => React.JSX.Element;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/SelectableTemplate.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { Dialog } from "@webiny/admin-ui";
+const selectOnEnterOrSpace = (event)=>{
+    if ("Enter" !== event.key && " " !== event.key) return;
+    event.preventDefault();
+    event.currentTarget.click();
+};
+const FOCUS_CLASSES = "focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed";
+const SelectableTemplate = ({ template, onSelect, className, children })=>/*#__PURE__*/ react.createElement(Dialog.Close, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": `Insert ${template.label}`,
+        onClick: ()=>onSelect(template),
+        onKeyDown: selectOnEnterOrSpace,
+        className: `group cursor-pointer ${FOCUS_CLASSES} ${className}`
+    }, children));
+export { SelectableTemplate };
+
+//# sourceMappingURL=SelectableTemplate.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/SelectableTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/SelectableTemplate.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/SelectableTemplate.tsx"],"sourcesContent":["import React from \"react\";\nimport { Dialog } from \"@webiny/admin-ui\";\nimport type { ITemplateVM } from \"~/features/formModel/index.js\";\n\n/**\n * Templates are picked by clicking a card or a row. Enter and Space do the same for keyboard users,\n * and go through `click()` so `Dialog.Close` closes the dialog too.\n */\nconst selectOnEnterOrSpace = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== \"Enter\" && event.key !== \" \") {\n        return;\n    }\n    event.preventDefault();\n    event.currentTarget.click();\n};\n\nconst FOCUS_CLASSES =\n    \"focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed\";\n\ninterface SelectableTemplateProps {\n    template: ITemplateVM;\n    onSelect: (template: ITemplateVM) => void;\n    className: string;\n    children: React.ReactNode;\n}\n\n/**\n * A focusable, clickable wrapper that inserts the template and closes the dialog.\n */\nexport const SelectableTemplate = ({\n    template,\n    onSelect,\n    className,\n    children\n}: SelectableTemplateProps) => {\n    return (\n        <Dialog.Close asChild>\n            <div\n                role={\"button\"}\n                tabIndex={0}\n                aria-label={`Insert ${template.label}`}\n                onClick={() => onSelect(template)}\n                onKeyDown={selectOnEnterOrSpace}\n                className={`group cursor-pointer ${FOCUS_CLASSES} ${className}`}\n            >\n                {children}\n            </div>\n        </Dialog.Close>\n    );\n};\n"],"names":["selectOnEnterOrSpace","event","FOCUS_CLASSES","SelectableTemplate","template","onSelect","className","children","Dialog"],"mappings":";;AAQA,MAAMA,uBAAuB,CAACC;IAC1B,IAAIA,AAAc,YAAdA,MAAM,GAAG,IAAgBA,AAAc,QAAdA,MAAM,GAAG,EAClC;IAEJA,MAAM,cAAc;IACpBA,MAAM,aAAa,CAAC,KAAK;AAC7B;AAEA,MAAMC,gBACF;AAYG,MAAMC,qBAAqB,CAAC,EAC/BC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACc,GACf,WAAP,GACI,oBAACC,OAAO,KAAK;QAAC;qBACV,oBAAC;QACG,MAAM;QACN,UAAU;QACV,cAAY,CAAC,OAAO,EAAEJ,SAAS,KAAK,EAAE;QACtC,SAAS,IAAMC,SAASD;QACxB,WAAWJ;QACX,WAAW,CAAC,qBAAqB,EAAEE,cAAc,CAAC,EAAEI,WAAW;OAE9DC"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateCard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { TemplateItemProps } from "./types.js";
+export declare const TemplateCard: ({ template, onSelect }: TemplateItemProps) => React.JSX.Element;

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateCard.js

@@ -0,0 +1,35 @@
+import react from "react";
+import { Button, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add_circle_outline.svg";
+import { SelectableTemplate } from "./SelectableTemplate.js";
+import { TemplateIcon } from "./TemplateIcon.js";
+const TemplateCard = ({ template, onSelect })=>/*#__PURE__*/ react.createElement(SelectableTemplate, {
+        template: template,
+        onSelect: onSelect,
+        className: "flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm"
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-center py-xxl w-full bg-neutral-dimmed"
+    }, /*#__PURE__*/ react.createElement(TemplateIcon, {
+        icon: template.icon,
+        size: 40
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "py-sm-extra px-md"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "mb-xs text-neutral-primary font-semibold"
+    }, template.label), template.description && /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "text-neutral-muted line-clamp-2"
+    }, template.description))), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-0 hidden items-center justify-center bg-white/80 group-hover:flex group-focus-visible:flex"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        size: "lg",
+        variant: "primary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        tabIndex: -1,
+        "aria-hidden": true
+    }, "Insert")));
+export { TemplateCard };
+
+//# sourceMappingURL=TemplateCard.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateCard.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { SelectableTemplate } from \"./SelectableTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport type { TemplateItemProps } from \"./types.js\";\n\nexport const TemplateCard = ({ template, onSelect }: TemplateItemProps) => {\n    return (\n        <SelectableTemplate\n            template={template}\n            onSelect={onSelect}\n            className={\n                \"flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm\"\n            }\n        >\n            <div>\n                <div className={\"flex items-center justify-center py-xxl w-full bg-neutral-dimmed\"}>\n                    <TemplateIcon icon={template.icon} size={40} />\n                </div>\n                <div className={\"py-sm-extra px-md\"}>\n                    <Text size={\"md\"} className={\"mb-xs text-neutral-primary font-semibold\"}>\n                        {template.label}\n                    </Text>\n                    {template.description && (\n                        <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-muted line-clamp-2\"}>\n                            {template.description}\n                        </Text>\n                    )}\n                </div>\n            </div>\n\n            <div\n                className={\n                    \"absolute inset-0 hidden items-center justify-center bg-white/80 group-hover:flex group-focus-visible:flex\"\n                }\n            >\n                <Button\n                    size={\"lg\"}\n                    variant={\"primary\"}\n                    icon={<PlusIcon />}\n                    tabIndex={-1}\n                    aria-hidden={true}\n                >\n                    Insert\n                </Button>\n            </div>\n        </SelectableTemplate>\n    );\n};\n"],"names":["TemplateCard","template","onSelect","SelectableTemplate","TemplateIcon","Text","Button","PlusIcon"],"mappings":";;;;;AAQO,MAAMA,eAAe,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAqB,GAC3D,WAAP,GACI,oBAACC,oBAAkBA;QACf,UAAUF;QACV,UAAUC;QACV,WACI;qBAGJ,oBAAC,2BACG,oBAAC;QAAI,WAAW;qBACZ,oBAACE,cAAYA;QAAC,MAAMH,SAAS,IAAI;QAAE,MAAM;uBAE7C,oBAAC;QAAI,WAAW;qBACZ,oBAACI,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBJ,SAAS,KAAK,GAElBA,SAAS,WAAW,IAAI,WAAJ,GACjB,oBAACI,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCJ,SAAS,WAAW,mBAMrC,oBAAC;QACG,WACI;qBAGJ,oBAACK,QAAMA;QACH,MAAM;QACN,SAAS;QACT,oBAAM,oBAACC,gBAAQA;QACf,UAAU;QACV,eAAa;OAChB"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ITemplateVM } from "../../../../../features/formModel/index.js";
+interface TemplateGalleryProps {
+    templates: ITemplateVM[];
+    onSelect: (template: ITemplateVM) => void;
+}
+export declare const TemplateGallery: ({ templates, onSelect }: TemplateGalleryProps) => React.JSX.Element;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.js

@@ -0,0 +1,22 @@
+import react, { useState } from "react";
+import { TemplateGalleryToolbar } from "./TemplateGalleryToolbar.js";
+import { TemplateList } from "./TemplateList.js";
+const TemplateGallery = ({ templates, onSelect })=>{
+    const [viewMode, setViewMode] = useState("grid");
+    const [search, setSearch] = useState("");
+    const query = search.toLowerCase();
+    const filteredTemplates = templates.filter((template)=>template.label.toLowerCase().includes(query));
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(TemplateGalleryToolbar, {
+        search: search,
+        onSearch: setSearch,
+        viewMode: viewMode,
+        onViewMode: setViewMode
+    }), /*#__PURE__*/ react.createElement(TemplateList, {
+        viewMode: viewMode,
+        templates: filteredTemplates,
+        onSelect: onSelect
+    }));
+};
+export { TemplateGallery };
+
+//# sourceMappingURL=TemplateGallery.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { ITemplateVM } from \"~/features/formModel/index.js\";\nimport { TemplateGalleryToolbar } from \"./TemplateGalleryToolbar.js\";\nimport { TemplateList } from \"./TemplateList.js\";\nimport type { ViewMode } from \"./types.js\";\n\ninterface TemplateGalleryProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n}\n\nexport const TemplateGallery = ({ templates, onSelect }: TemplateGalleryProps) => {\n    const [viewMode, setViewMode] = useState<ViewMode>(\"grid\");\n    const [search, setSearch] = useState(\"\");\n\n    const query = search.toLowerCase();\n    const filteredTemplates = templates.filter(template =>\n        template.label.toLowerCase().includes(query)\n    );\n\n    return (\n        <>\n            <TemplateGalleryToolbar\n                search={search}\n                onSearch={setSearch}\n                viewMode={viewMode}\n                onViewMode={setViewMode}\n            />\n            <TemplateList viewMode={viewMode} templates={filteredTemplates} onSelect={onSelect} />\n        </>\n    );\n};\n"],"names":["TemplateGallery","templates","onSelect","viewMode","setViewMode","useState","search","setSearch","query","filteredTemplates","template","TemplateGalleryToolbar","TemplateList"],"mappings":";;;AAWO,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAwB;IACzE,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAAmB;IACnD,MAAM,CAACC,QAAQC,UAAU,GAAGF,SAAS;IAErC,MAAMG,QAAQF,OAAO,WAAW;IAChC,MAAMG,oBAAoBR,UAAU,MAAM,CAACS,CAAAA,WACvCA,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,CAACF;IAG1C,OAAO,WAAP,GACI,wDACI,oBAACG,wBAAsBA;QACnB,QAAQL;QACR,UAAUC;QACV,UAAUJ;QACV,YAAYC;sBAEhB,oBAACQ,cAAYA;QAAC,UAAUT;QAAU,WAAWM;QAAmB,UAAUP;;AAGtF"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ViewMode } from "./types.js";
+interface TemplateGalleryToolbarProps {
+    search: string;
+    onSearch: (search: string) => void;
+    viewMode: ViewMode;
+    onViewMode: (viewMode: ViewMode) => void;
+}
+export declare const TemplateGalleryToolbar: ({ search, onSearch, viewMode, onViewMode }: TemplateGalleryToolbarProps) => React.JSX.Element;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.js

@@ -0,0 +1,46 @@
+import react from "react";
+import { DelayedOnChange, Icon, Input, ToggleGroup } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { ReactComponent as grid_view_svg_ReactComponent } from "@webiny/icons/grid_view.svg";
+import { ReactComponent as list_svg_ReactComponent } from "@webiny/icons/list.svg";
+const TemplateGalleryToolbar = ({ search, onSearch, viewMode, onViewMode })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm pb-md pt-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-w-0"
+    }, /*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: search,
+        onChange: onSearch
+    }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(Input, {
+            autoFocus: true,
+            value: value,
+            onChange: onChange,
+            placeholder: "Search templates...",
+            startIcon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Search"
+            }),
+            size: "md",
+            variant: "primary"
+        }))), /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0"
+    }, /*#__PURE__*/ react.createElement(ToggleGroup, {
+        type: "single",
+        value: viewMode,
+        onChange: (value)=>onViewMode(value),
+        items: [
+            {
+                id: "grid",
+                value: "grid",
+                icon: /*#__PURE__*/ react.createElement(grid_view_svg_ReactComponent, null)
+            },
+            {
+                id: "list",
+                value: "list",
+                icon: /*#__PURE__*/ react.createElement(list_svg_ReactComponent, null)
+            }
+        ],
+        variant: "ghost"
+    })));
+export { TemplateGalleryToolbar };
+
+//# sourceMappingURL=TemplateGalleryToolbar.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { ToggleGroup } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/grid_view.svg\";\nimport { ReactComponent as ListIcon } from \"@webiny/icons/list.svg\";\nimport type { ViewMode } from \"./types.js\";\n\ninterface TemplateGalleryToolbarProps {\n    search: string;\n    onSearch: (search: string) => void;\n    viewMode: ViewMode;\n    onViewMode: (viewMode: ViewMode) => void;\n}\n\nexport const TemplateGalleryToolbar = ({\n    search,\n    onSearch,\n    viewMode,\n    onViewMode\n}: TemplateGalleryToolbarProps) => {\n    return (\n        <div className={\"flex items-center gap-sm pb-md pt-xs\"}>\n            <div className={\"flex-1 min-w-0\"}>\n                <DelayedOnChange value={search} onChange={onSearch}>\n                    {({ value, onChange }) => (\n                        <Input\n                            autoFocus={true}\n                            value={value}\n                            onChange={onChange}\n                            placeholder={\"Search templates...\"}\n                            startIcon={<Icon icon={<SearchIcon />} label={\"Search\"} />}\n                            size={\"md\"}\n                            variant={\"primary\"}\n                        />\n                    )}\n                </DelayedOnChange>\n            </div>\n            <div className={\"shrink-0\"}>\n                <ToggleGroup\n                    type=\"single\"\n                    value={viewMode}\n                    onChange={value => onViewMode(value as ViewMode)}\n                    items={[\n                        { id: \"grid\", value: \"grid\", icon: <GridIcon /> },\n                        { id: \"list\", value: \"list\", icon: <ListIcon /> }\n                    ]}\n                    variant=\"ghost\"\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["TemplateGalleryToolbar","search","onSearch","viewMode","onViewMode","DelayedOnChange","value","onChange","Input","Icon","SearchIcon","ToggleGroup","GridIcon","ListIcon"],"mappings":";;;;;AAiBO,MAAMA,yBAAyB,CAAC,EACnCC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACgB,GACnB,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACC,iBAAeA;QAAC,OAAOJ;QAAQ,UAAUC;OACrC,CAAC,EAAEI,KAAK,EAAEC,QAAQ,EAAE,iBACjB,oBAACC,OAAKA;YACF,WAAW;YACX,OAAOF;YACP,UAAUC;YACV,aAAa;YACb,yBAAW,oBAACE,MAAIA;gBAAC,oBAAM,oBAACC,gBAAUA;gBAAK,OAAO;;YAC9C,MAAM;YACN,SAAS;4BAKzB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,aAAWA;QACR,MAAK;QACL,OAAOR;QACP,UAAUG,CAAAA,QAASF,WAAWE;QAC9B,OAAO;YACH;gBAAE,IAAI;gBAAQ,OAAO;gBAAQ,MAAM,WAAN,GAAM,oBAACM,8BAAQA;YAAI;YAChD;gBAAE,IAAI;gBAAQ,OAAO;gBAAQ,MAAM,WAAN,GAAM,oBAACC,yBAAQA;YAAI;SACnD;QACD,SAAQ"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ITemplateIcon } from "../../../../../features/formModel/index.js";
+interface TemplateIconProps {
+    icon: ITemplateIcon | undefined;
+    size: number;
+}
+export declare const TemplateIcon: ({ icon, size }: TemplateIconProps) => React.JSX.Element | null;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.js

@@ -0,0 +1,16 @@
+import react from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+const TemplateIcon = ({ icon, size })=>{
+    if (!icon) return null;
+    return /*#__PURE__*/ react.createElement(FontAwesomeIcon, {
+        className: "text-neutral-xstrong",
+        icon: icon.name.split("/"),
+        style: {
+            width: size,
+            height: size
+        }
+    });
+};
+export { TemplateIcon };
+
+//# sourceMappingURL=TemplateIcon.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport type { ITemplateIcon } from \"~/features/formModel/index.js\";\n\ninterface TemplateIconProps {\n    icon: ITemplateIcon | undefined;\n    size: number;\n}\n\nexport const TemplateIcon = ({ icon, size }: TemplateIconProps) => {\n    if (!icon) {\n        return null;\n    }\n\n    return (\n        <FontAwesomeIcon\n            className={\"text-neutral-xstrong\"}\n            icon={icon.name.split(\"/\") as IconProp}\n            style={{ width: size, height: size }}\n        />\n    );\n};\n"],"names":["TemplateIcon","icon","size","FontAwesomeIcon"],"mappings":";;AAUO,MAAMA,eAAe,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAqB;IAC1D,IAAI,CAACD,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACE,iBAAeA;QACZ,WAAW;QACX,MAAMF,KAAK,IAAI,CAAC,KAAK,CAAC;QACtB,OAAO;YAAE,OAAOC;YAAM,QAAQA;QAAK;;AAG/C"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ITemplateVM } from "../../../../../features/formModel/index.js";
+import type { ViewMode } from "./types.js";
+interface TemplateListProps {
+    viewMode: ViewMode;
+    templates: ITemplateVM[];
+    onSelect: (template: ITemplateVM) => void;
+}
+export declare const TemplateList: ({ viewMode, templates, onSelect }: TemplateListProps) => React.JSX.Element;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.js

@@ -0,0 +1,22 @@
+import react from "react";
+import { TemplateCard } from "./TemplateCard.js";
+import { TemplateListItem } from "./TemplateListItem.js";
+const TemplateList = ({ viewMode, templates, onSelect })=>{
+    if ("list" === viewMode) return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-y-sm mb-xs"
+    }, templates.map((template)=>/*#__PURE__*/ react.createElement(TemplateListItem, {
+            key: template.id,
+            template: template,
+            onSelect: onSelect
+        })));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "gap-md flex flex-wrap p-xs mb-xs"
+    }, templates.map((template)=>/*#__PURE__*/ react.createElement(TemplateCard, {
+            key: template.id,
+            template: template,
+            onSelect: onSelect
+        })));
+};
+export { TemplateList };
+
+//# sourceMappingURL=TemplateList.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ITemplateVM } from \"~/features/formModel/index.js\";\nimport { TemplateCard } from \"./TemplateCard.js\";\nimport { TemplateListItem } from \"./TemplateListItem.js\";\nimport type { ViewMode } from \"./types.js\";\n\ninterface TemplateListProps {\n    viewMode: ViewMode;\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n}\n\nexport const TemplateList = ({ viewMode, templates, onSelect }: TemplateListProps) => {\n    if (viewMode === \"list\") {\n        return (\n            <div className={\"flex flex-col gap-y-sm mb-xs\"}>\n                {templates.map(template => (\n                    <TemplateListItem key={template.id} template={template} onSelect={onSelect} />\n                ))}\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"gap-md flex flex-wrap p-xs mb-xs\"}>\n            {templates.map(template => (\n                <TemplateCard key={template.id} template={template} onSelect={onSelect} />\n            ))}\n        </div>\n    );\n};\n"],"names":["TemplateList","viewMode","templates","onSelect","template","TemplateListItem","TemplateCard"],"mappings":";;;AAYO,MAAMA,eAAe,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAqB;IAC7E,IAAIF,AAAa,WAAbA,UACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXC,UAAU,GAAG,CAACE,CAAAA,WAAAA,WAAAA,GACX,oBAACC,kBAAgBA;YAAC,KAAKD,SAAS,EAAE;YAAE,UAAUA;YAAU,UAAUD;;IAMlF,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXD,UAAU,GAAG,CAACE,CAAAA,WAAAA,WAAAA,GACX,oBAACE,cAAYA;YAAC,KAAKF,SAAS,EAAE;YAAE,UAAUA;YAAU,UAAUD;;AAI9E"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { TemplateItemProps } from "./types.js";
+export declare const TemplateListItem: ({ template, onSelect }: TemplateItemProps) => React.JSX.Element;

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.js

@@ -0,0 +1,35 @@
+import react from "react";
+import { Button, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add_circle_outline.svg";
+import { SelectableTemplate } from "./SelectableTemplate.js";
+import { TemplateIcon } from "./TemplateIcon.js";
+const TemplateListItem = ({ template, onSelect })=>/*#__PURE__*/ react.createElement(SelectableTemplate, {
+        template: template,
+        onSelect: onSelect,
+        className: "flex items-center py-sm-extra px-md rounded-lg bg-neutral-light hover:bg-[#f1f2f4]"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-center shrink-0 pr-md"
+    }, /*#__PURE__*/ react.createElement(TemplateIcon, {
+        icon: template.icon,
+        size: 24
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-w-0"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "text-neutral-primary font-semibold truncate"
+    }, template.label), template.description && /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "text-neutral-muted"
+    }, template.description)), /*#__PURE__*/ react.createElement("div", {
+        className: "hidden group-hover:block group-focus-visible:block"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        size: "md",
+        variant: "primary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        tabIndex: -1,
+        "aria-hidden": true
+    }, "Insert")));
+export { TemplateListItem };
+
+//# sourceMappingURL=TemplateListItem.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { SelectableTemplate } from \"./SelectableTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport type { TemplateItemProps } from \"./types.js\";\n\n// Used #f1f2f4 b/c in Figma, the color was result of multiple colors combined.\nexport const TemplateListItem = ({ template, onSelect }: TemplateItemProps) => {\n    return (\n        <SelectableTemplate\n            template={template}\n            onSelect={onSelect}\n            className={\n                \"flex items-center py-sm-extra px-md rounded-lg bg-neutral-light hover:bg-[#f1f2f4]\"\n            }\n        >\n            <div className={\"flex items-center justify-center shrink-0 pr-md\"}>\n                <TemplateIcon icon={template.icon} size={24} />\n            </div>\n            <div className={\"flex-1 min-w-0\"}>\n                <Text size={\"md\"} className={\"text-neutral-primary font-semibold truncate\"}>\n                    {template.label}\n                </Text>\n                {template.description && (\n                    <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-muted\"}>\n                        {template.description}\n                    </Text>\n                )}\n            </div>\n            <div className={\"hidden group-hover:block group-focus-visible:block\"}>\n                <Button\n                    size={\"md\"}\n                    variant={\"primary\"}\n                    icon={<PlusIcon />}\n                    tabIndex={-1}\n                    aria-hidden={true}\n                >\n                    Insert\n                </Button>\n            </div>\n        </SelectableTemplate>\n    );\n};\n"],"names":["TemplateListItem","template","onSelect","SelectableTemplate","TemplateIcon","Text","Button","PlusIcon"],"mappings":";;;;;AASO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAqB,GAC/D,WAAP,GACI,oBAACC,oBAAkBA;QACf,UAAUF;QACV,UAAUC;QACV,WACI;qBAGJ,oBAAC;QAAI,WAAW;qBACZ,oBAACE,cAAYA;QAAC,MAAMH,SAAS,IAAI;QAAE,MAAM;uBAE7C,oBAAC;QAAI,WAAW;qBACZ,oBAACI,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBJ,SAAS,KAAK,GAElBA,SAAS,WAAW,IAAI,WAAJ,GACjB,oBAACI,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCJ,SAAS,WAAW,kBAIjC,oBAAC;QAAI,WAAW;qBACZ,oBAACK,QAAMA;QACH,MAAM;QACN,SAAS;QACT,oBAAM,oBAACC,gBAAQA;QACf,UAAU;QACV,eAAa;OAChB"}