npm - @webiny/app-admin - Versions diffs - 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2 - Mend

@webiny/app-admin 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (845) hide show

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

	@@ -1 +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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"}
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/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 CHANGED Viewed

@@ -1,11 +1,17 @@
 import React from "react";
 import type { IObjectFieldItemVM, LayoutNodeVM } from "../../../../features/formModel/index.js";
+import { FieldValueFormatter } from "../../../../features/formModel/index.js";
 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 declare function useFieldValueFormatters(): FieldValueFormatter.Interface[];
 export interface ListItemRendererProps {
     item: IObjectFieldItemVM;
     index: number;
@@ -16,8 +22,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/ObjectFieldComponents.js CHANGED Viewed

@@ -1,11 +1,12 @@
-import react, { useEffect, useState } from "react";
+import react, { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Accordion, Button, IconButton } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/add.svg";
 import { ReactComponent as delete_outline_svg_ReactComponent } from "@webiny/icons/delete_outline.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 { hasSubtreeFocusRequest } from "../../../../features/formModel/index.js";
+import { useContainer } from "@webiny/app";
+import { FieldValueFormatter, hasSubtreeFocusRequest } from "../../../../features/formModel/index.js";
 import { LayoutNodeRenderer } from "../../../../features/formModel/FormView.js";
 import { resolveItemDescription, resolveItemTitle } from "./resolveItemTitle.js";
 const NestedLayout = observer(({ layout })=>/*#__PURE__*/ react.createElement("div", {
@@ -14,8 +15,15 @@ const NestedLayout = observer(({ layout })=>/*#__PURE__*/ react.createElement("d
             key: index,
             node: node
         }))));
+function useFieldValueFormatters() {
+    const container = useContainer();
+    return useMemo(()=>container.resolveAll(FieldValueFormatter), [
+        container
+    ]);
+}
 const ListItemRenderer = observer(({ item, index, total, label, itemTitle, itemDescription, disabled, sortable })=>{
     const [open, setOpen] = useState(false);
+    const formatters = useFieldValueFormatters();
     const hasFocusRequest = hasSubtreeFocusRequest(item.fields);
     useEffect(()=>{
         if (hasFocusRequest) setOpen(true);
@@ -51,8 +59,8 @@ const ListItemRenderer = observer(({ item, index, total, label, itemTitle, itemD
         variant: "container",
         openClosedIndicatorPosition: "left"
     }, /*#__PURE__*/ react.createElement(Accordion.Item, {
-        title: resolveItemTitle(item, index, label, itemTitle),
-        description: resolveItemDescription(item, index, itemDescription),
+        title: resolveItemTitle(item.fields, index, `${label || "Item"} #${index + 1}`, itemTitle, formatters),
+        description: resolveItemDescription(item.fields, index, itemDescription, formatters),
         actions: disabled ? null : actions,
         open: open,
         onOpenChange: setOpen,
@@ -98,6 +106,6 @@ const AddItemButton = ({ label, disabled, onAdd })=>/*#__PURE__*/ react.createEl
         onClick: onAdd,
         disabled: disabled
     }));
-export { AddItemButton, ListItemRenderer, NestedLayout };
+export { AddItemButton, ListItemRenderer, NestedLayout, useFieldValueFormatters };
 //# sourceMappingURL=ObjectFieldComponents.js.map

package/base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport type { IObjectFieldItemVM, LayoutNodeVM } from \"~/features/formModel/index.js\";\nimport { hasSubtreeFocusRequest } from \"~/features/formModel/index.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\nimport { resolveItemTitle, resolveItemDescription } from \"./resolveItemTitle.js\";\nimport type { ISortableItemProps } from \"~/presentation/sortable/index.js\";\n\nexport const NestedLayout = observer(({ layout }: { layout: LayoutNodeVM[] }) => {\n return (\n <div className={\"flex flex-col gap-md\"}>\n {layout.map((node, index) => (\n <LayoutNodeRenderer key={index} node={node} />\n ))}\n </div>\n );\n});\n\nexport interface ListItemRendererProps {\n item: IObjectFieldItemVM;\n index: number;\n total: number;\n label?: string;\n itemTitle?: string \| ((data: Record<string, unknown>, index: number) => string);\n itemDescription?: string \| ((data: Record<string, unknown>, index: number) => string);\n disabled: boolean;\n sortable?: ISortableItemProps;\n}\n\nexport const ListItemRenderer = observer(\n ({\n item,\n index,\n total,\n label,\n itemTitle,\n itemDescription,\n disabled,\n sortable\n }: ListItemRendererProps) => {\n const [open, setOpen] = useState(false);\n const hasFocusRequest = hasSubtreeFocusRequest(item.fields);\n\n useEffect(() => {\n if (hasFocusRequest) {\n setOpen(true);\n }\n }, [hasFocusRequest]);\n\n const actions = (\n <>\n <IconButton\n icon={<ArrowDown />}\n onClick={e => {\n e.stopPropagation();\n item.moveDown();\n }}\n variant=\"ghost\"\n disabled={index === total - 1}\n />\n <IconButton\n icon={<ArrowUp />}\n onClick={e => {\n e.stopPropagation();\n item.moveUp();\n }}\n variant=\"ghost\"\n disabled={index === 0}\n />\n <Accordion.Item.Action.Separator />\n <IconButton\n icon={<DeleteIcon />}\n onClick={e => {\n e.stopPropagation();\n item.remove();\n }}\n variant=\"ghost\"\n />\n </>\n );\n\n const accordion = (\n <Accordion\n background={\"base\"}\n variant={\"container\"}\n openClosedIndicatorPosition={\"left\"}\n >\n <Accordion.Item\n title={resolveItemTitle(item, index, ~~label,~~ itemTitle)}\n description={resolveItemDescription(item, index, itemDescription)}\n actions={disabled ? null : actions}\n open={open}\n onOpenChange={setOpen}\n draggable={!disabled && sortable !== undefined}\n dragHandleRef={sortable?.handleRef}\n >\n <NestedLayout layout={item.layout} />\n </Accordion.Item>\n </Accordion>\n );\n\n if (!sortable) {\n return accordion;\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}\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\nexport interface AddItemButtonProps {\n label?: string;\n disabled: boolean;\n onAdd: () => void;\n}\n\nexport const AddItemButton = ({ label, disabled, onAdd }: AddItemButtonProps) => {\n return (\n <div>\n <Button\n icon={<AddIcon />}\n text={label \|\| \"Add Item\"}\n variant={\"tertiary\"}\n onClick={onAdd}\n disabled={disabled}\n />\n </div>\n );\n};\n"],"names":["NestedLayout","observer","layout","node","index","LayoutNodeRenderer","ListItemRenderer","item","total","label","itemTitle","itemDescription","disabled","sortable","open","setOpen","useState","hasFocusRequest","hasSubtreeFocusRequest","useEffect","actions","IconButton","ArrowDown","e","ArrowUp","Accordion","DeleteIcon","accordion","resolveItemTitle","resolveItemDescription","undefined","DropIndicator","position","isFirst","isLast","offset","AddItemButton","onAdd","Button","AddIcon"],"mappings":"~~;;;;;;;;;;AAaO~~,MAAMA,eAAeC,SAAS,CAAC,EAAEC,MAAM,EAA8B,GACjE,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,OAAO,GAAG,CAAC,CAACC,MAAMC,QAAAA,WAAAA,GACf,oBAACC,oBAAkBA;YAAC,KAAKD;YAAO,MAAMD;;~~AAiB~~/C,~~MAAMG~~,~~mBAAmBL~~,SAC5B,CAAC,~~EACGM~~,IAAI,~~EACJH~~,KAAK,~~EACLI~~,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,eAAe,EACfC,QAAQ,EACRC,QAAQ,EACY;IACpB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAMC,kBAAkBC,~~uBAAuBX~~,KAAK,MAAM;~~IAE1DY~~,UAAU;QACN,IAAIF,~~iBACAF~~,QAAQ;IAEhB,GAAG;~~QAACE~~;KAAgB;IAEpB,MAAMG,UAAU,WAAVA,GACF,wDACI,oBAACC,YAAUA;QACP,oBAAM,oBAACC,mCAASA;QAChB,SAASC,CAAAA;YACLA,EAAE,eAAe;~~YACjBhB~~,KAAK,QAAQ;QACjB;QACA,SAAQ;QACR,~~UAAUH~~,~~UAAUI~~,QAAQ;sBAEhC,~~oBAACa~~,YAAUA;QACP,oBAAM,oBAACG,iCAAOA;QACd,SAASD,CAAAA;YACLA,EAAE,eAAe;~~YACjBhB~~,KAAK,MAAM;QACf;QACA,SAAQ;QACR,~~UAAUH~~,AAAU,MAAVA;sBAEd,~~oBAACqB~~,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACJ,YAAUA;QACP,oBAAM,oBAACK,mCAAUA;QACjB,SAASH,CAAAA;YACLA,EAAE,eAAe;~~YACjBhB~~,KAAK,MAAM;QACf;QACA,SAAQ;;IAKpB,~~MAAMoB~~,YAAY,WAAZA,GACF,oBAACF,WAASA;QACN,YAAY;QACZ,SAAS;QACT,6BAA6B;qBAE7B,oBAACA,UAAU,IAAI;QACX,OAAOG,~~iBAAiBrB~~,~~MAAMH~~,~~OAAOK~~,~~OAAOC~~;~~QAC5C~~,~~aAAamB~~,~~uBAAuBtB~~,~~MAAMH~~,~~OAAOO~~;~~QACjD~~,~~SAASC~~,WAAW,~~OAAOQ~~;QAC3B,~~MAAMN~~;QACN,cAAcC;QACd,WAAW,CAACH,YAAYC,~~AAAaiB~~,~~WAAbjB~~;QACxB,eAAeA,UAAU;qBAEzB,~~oBAACb~~,cAAYA;QAAC,~~QAAQO~~,KAAK,MAAM;;IAK7C,IAAI,CAACM,UACD,~~OAAOc~~;IAGX,OAAO,WAAP,GACI,oBAAC;QACG,~~KAAKd~~,SAAS,GAAG;QACjB,sBAAmB;QACnB,WAAW;QACX,OAAO;YAAE,SAASA,SAAS,UAAU,GAAG,MAAM;QAAE;OAE/CA,AAAyB,UAAzBA,SAAS,WAAW,IAAc,WAAT,GACtB,~~oBAACkB~~,eAAaA;QAAC,UAAU;QAAO,~~SAAS3B~~,AAAU,MAAVA;~~QAE5CuB~~,~~WACAd~~,AAAyB,aAAzBA,SAAS,WAAW,IAAiB,WAAZ,GACtB,~~oBAACkB~~,eAAaA;QAAC,UAAU;QAAU,~~QAAQ3B~~,~~UAAUI~~,QAAQ;;AAI7E;AAGJ,~~MAAMuB~~,gBAAgB,CAAC,EACnBC,QAAQ,EACRC,UAAU,KAAK,EACfC,SAAS,KAAK,EAKjB;IACG,IAAIC,SAAS;IACb,IAAIH,AAAa,UAAbA,YAAsBC,SACtBE,SAAS;IAEb,IAAIH,AAAa,aAAbA,YAAyBE,QACzBC,SAAS;IAGb,OAAO,WAAP,GACI,oBAAC;QACG,WAAW;QACX,OAAO;YACH,CAACH,SAAS,EAAEG;YACZ,WAAWH,AAAa,UAAbA,WAAqB,qBAAqB;QACzD;qBAEA,oBAAC;QAAI,WAAW;;AAG5B;AAQO,MAAMI,gBAAgB,CAAC,~~EAAE3B~~,KAAK,EAAEG,QAAQ,~~EAAEyB~~,KAAK,EAAsB,GACjE,WAAP,GACI,oBAAC,2BACG,oBAACC,QAAMA;QACH,oBAAM,oBAACC,gBAAOA;QACd,~~MAAM9B~~,SAAS;QACf,SAAS;QACT,~~SAAS4B~~;QACT,~~UAAUzB~~"}
1	+ {"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport { useContainer } from \"@webiny/app\";\nimport type { IObjectFieldItemVM, LayoutNodeVM } from \"~/features/formModel/index.js\";\nimport { FieldValueFormatter, hasSubtreeFocusRequest } from \"~/features/formModel/index.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\nimport { resolveItemTitle, resolveItemDescription } from \"./resolveItemTitle.js\";\nimport type { ISortableItemProps } from \"~/presentation/sortable/index.js\";\n\nexport const NestedLayout = observer(({ layout }: { layout: LayoutNodeVM[] }) => {\n return (\n <div className={\"flex flex-col gap-md\"}>\n {layout.map((node, index) => (\n <LayoutNodeRenderer key={index} node={node} />\n ))}\n </div>\n );\n});\n\nexport function useFieldValueFormatters(): FieldValueFormatter.Interface[] {\n const container = useContainer();\n return useMemo(() => container.resolveAll(FieldValueFormatter), [container]);\n}\n\nexport interface ListItemRendererProps {\n item: IObjectFieldItemVM;\n index: number;\n total: number;\n label?: string;\n itemTitle?: string \| ((data: Record<string, unknown>, index: number) => string);\n itemDescription?: string \| ((data: Record<string, unknown>, index: number) => string);\n disabled: boolean;\n sortable?: ISortableItemProps;\n}\n\nexport const ListItemRenderer = observer(\n ({\n item,\n index,\n total,\n label,\n itemTitle,\n itemDescription,\n disabled,\n sortable\n }: ListItemRendererProps) => {\n const [open, setOpen] = useState(false);\n const formatters = useFieldValueFormatters();\n const hasFocusRequest = hasSubtreeFocusRequest(item.fields);\n\n useEffect(() => {\n if (hasFocusRequest) {\n setOpen(true);\n }\n }, [hasFocusRequest]);\n\n const actions = (\n <>\n <IconButton\n icon={<ArrowDown />}\n onClick={e => {\n e.stopPropagation();\n item.moveDown();\n }}\n variant=\"ghost\"\n disabled={index === total - 1}\n />\n <IconButton\n icon={<ArrowUp />}\n onClick={e => {\n e.stopPropagation();\n item.moveUp();\n }}\n variant=\"ghost\"\n disabled={index === 0}\n />\n <Accordion.Item.Action.Separator />\n <IconButton\n icon={<DeleteIcon />}\n onClick={e => {\n e.stopPropagation();\n item.remove();\n }}\n variant=\"ghost\"\n />\n </>\n );\n\n const accordion = (\n <Accordion\n background={\"base\"}\n variant={\"container\"}\n openClosedIndicatorPosition={\"left\"}\n >\n <Accordion.Item\n title={resolveItemTitle(\n item.fields,\n index,\n `${label \|\| \"Item\"} #${index + 1}`,\n itemTitle,\n formatters\n )}\n description={resolveItemDescription(\n item.fields,\n index,\n itemDescription,\n formatters\n )}\n actions={disabled ? null : actions}\n open={open}\n onOpenChange={setOpen}\n draggable={!disabled && sortable !== undefined}\n dragHandleRef={sortable?.handleRef}\n >\n <NestedLayout layout={item.layout} />\n </Accordion.Item>\n </Accordion>\n );\n\n if (!sortable) {\n return accordion;\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}\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\nexport interface AddItemButtonProps {\n label?: string;\n disabled: boolean;\n onAdd: () => void;\n}\n\nexport const AddItemButton = ({ label, disabled, onAdd }: AddItemButtonProps) => {\n return (\n <div>\n <Button\n icon={<AddIcon />}\n text={label \|\| \"Add Item\"}\n variant={\"tertiary\"}\n onClick={onAdd}\n disabled={disabled}\n />\n </div>\n );\n};\n"],"names":["NestedLayout","observer","layout","node","index","LayoutNodeRenderer","useFieldValueFormatters","container","useContainer","useMemo","FieldValueFormatter","ListItemRenderer","item","total","label","itemTitle","itemDescription","disabled","sortable","open","setOpen","useState","formatters","hasFocusRequest","hasSubtreeFocusRequest","useEffect","actions","IconButton","ArrowDown","e","ArrowUp","Accordion","DeleteIcon","accordion","resolveItemTitle","resolveItemDescription","undefined","DropIndicator","position","isFirst","isLast","offset","AddItemButton","onAdd","Button","AddIcon"],"mappings":"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"}

package/base/Base/FieldRenderers/ObjectRenderer/ObjectRenderer.js CHANGED Viewed

@@ -1,33 +1,12 @@
 import react, { useEffect, useState } from "react";
 import { Accordion } from "@webiny/admin-ui";
 import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
-import { NestedLayout } from "./ObjectFieldComponents.js";
+import { NestedLayout, useFieldValueFormatters } from "./ObjectFieldComponents.js";
+import { resolveItemDescription, resolveItemTitle } from "./resolveItemTitle.js";
 import { hasSubtreeFocusRequest } from "../../../../features/formModel/index.js";
-function resolveTitle(field, itemTitle) {
-    if (!itemTitle) return field.label;
-    if ("string" == typeof itemTitle) {
-        const child = field.fields.find((f)=>f.name === itemTitle);
-        return (child ? String(child.value ?? "") : "") || field.label;
-    }
-    const data = {};
-    for (const child of field.fields)data[child.name] = child.value;
-    return itemTitle(data) || field.label;
-}
-function resolveDescription(field, itemDescription) {
-    if (!itemDescription) return;
-    if ("string" == typeof itemDescription) {
-        const child = field.fields.find((f)=>f.name === itemDescription);
-        return (child ? String(child.value ?? "") : "") || void 0;
-    }
-    const data = {};
-    for (const child of field.fields)data[child.name] = child.value;
-    return itemDescription(data) || void 0;
-}
 const ObjectRenderer = createObjectFieldRenderer(({ field })=>{
     const settings = field.rendererSettings;
-    if (settings?.container === false) return /*#__PURE__*/ react.createElement(NestedLayout, {
-        layout: field.layout
-    });
+    const formatters = useFieldValueFormatters();
     const focusInside = hasSubtreeFocusRequest(field.fields);
     const [open, setOpen] = useState(settings?.open ?? true);
     useEffect(()=>{
@@ -35,12 +14,15 @@ const ObjectRenderer = createObjectFieldRenderer(({ field })=>{
     }, [
         focusInside
     ]);
+    if (settings?.container === false) return /*#__PURE__*/ react.createElement(NestedLayout, {
+        layout: field.layout
+    });
     return /*#__PURE__*/ react.createElement(Accordion, {
         background: "base",
         variant: "container"
     }, /*#__PURE__*/ react.createElement(Accordion.Item, {
-        title: resolveTitle(field, settings?.itemTitle),
-        description: resolveDescription(field, settings?.itemDescription),
+        title: resolveItemTitle(field.fields, 0, field.label || "", settings?.itemTitle, formatters),
+        description: resolveItemDescription(field.fields, 0, settings?.itemDescription, formatters),
         open: open,
         onOpenChange: setOpen,
         className: "pl-sm"

package/base/Base/FieldRenderers/ObjectRenderer/ObjectRenderer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectRenderer.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\nimport ~~type~~ { ~~IObjectFieldVM~~ } from \"~~~/features/formModel/index~~.js\";\nimport { hasSubtreeFocusRequest } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n interface IFieldRendererRegistry {\n objectAccordionSingle: {\n fieldType: \"object\";\n settings?: {\n open?: boolean;\n container?: boolean;\n itemTitle?: string \| ((data: Record<string, unknown>) => string);\n itemDescription?: string \| ((data: Record<string, unknown>) => string);\n };\n };\n }\n}\n\nfunction resolveTitle(\n field: IObjectFieldVM,\n itemTitle: string \| ((data: Record<string, unknown>) => string) \| undefined\n): string \| undefined {\n if (!itemTitle) {\n return field.label;\n }\n\n if (typeof itemTitle === \"string\") {\n const child = field.fields.find(f => f.name === itemTitle);\n return (child ? String(child.value ?? \"\") : \"\") \|\| field.label;\n }\n\n const data: Record<string, unknown> = {};\n for (const child of field.fields) {\n data[child.name] = child.value;\n }\n return itemTitle(data) \|\| field.label;\n}\n\nfunction resolveDescription(\n field: IObjectFieldVM,\n itemDescription: string \| ((data: Record<string, unknown>) => string) \| undefined\n): string \| undefined {\n if (!itemDescription) {\n return undefined;\n }\n\n if (typeof itemDescription === \"string\") {\n const child = field.fields.find(f => f.name === itemDescription);\n return (child ? String(child.value ?? \"\") : \"\") \|\| undefined;\n }\n\n const data: Record<string, unknown> = {};\n for (const child of field.fields) {\n data[child.name] = child.value;\n }\n return itemDescription(data) \|\| undefined;\n}\n\nexport const ObjectRenderer = createObjectFieldRenderer<\"objectAccordionSingle\">(({ field }) => {\n const settings = field.rendererSettings;\n\n if ~~(settings?.container~~ ~~===~~ ~~false~~) {\n ~~return <NestedLayout layout={field.layout} />;\n }~~\n\n // Force the object accordion open when a focus request lands anywhere in\n // its subtree, so \"jump to field\" can cascade through collapsed levels.\n const focusInside = hasSubtreeFocusRequest(field.fields);\n const [open, setOpen] = useState(settings?.open ?? true);\n useEffect(() => {\n if (focusInside) {\n setOpen(true);\n }\n }, [focusInside]);\n\n return (\n <Accordion background={\"base\"} variant={\"container\"}>\n <Accordion.Item\n title={~~resolveTitle~~(field, settings?.itemTitle)}\n description={~~resolveDescription~~(field, settings?.itemDescription)}\n open={open}\n onOpenChange={setOpen}\n className={\"pl-sm\"}\n >\n <NestedLayout layout={field.layout} />\n </Accordion.Item>\n </Accordion>\n );\n});\n"],"names":["~~resolveTitle~~","~~field~~","~~itemTitle~~","~~child~~","f","~~String~~","~~data~~","~~resolveDescription~~","~~itemDescription~~","~~undefined~~","~~ObjectRenderer~~","~~createObjectFieldRenderer~~","~~settings","~~NestedLayout","~~focusInside~~","~~hasSubtreeFocusRequest~~","~~open~~"~~,"setOpen","useState","useEffect","Accordion"~~],"mappings":"~~;;;;;AAqBA~~,~~SAASA~~,~~aACLC~~,~~KAAqB~~,~~EACrBC~~,~~SAA2E;IAE3E~~,~~IAAI,CAACA,WACD,OAAOD,MAAM,~~KAAK~~;IAGtB~~,~~IAAI,AAAqB,YAArB,OAAOC,WAAwB~~;~~QAC/B~~,MAAMC,~~QAAQF~~,MAAM,~~MAAM,CAAC,IAAI,CAACG,CAAAA,IAAKA,EAAE,IAAI,KAAKF~~;~~QAChD~~,~~OAAQC~~,~~AAAAA,CAAAA,QAAQE,OAAOF,MAAM,KAAK,IAAI,MAAM,EAAC,KAAMF,MAAM,KAAK~~;~~IAClE;IAEA~~,~~MAAMK~~,~~OAAgC~~,~~CAAC;IACvC~~,~~KAAK,MAAMH,SAASF,~~MAAM,MAAM~~,CAC5BK,IAAI,CAACH,MAAM,IAAI,CAAC,GAAGA,MAAM,KAAK~~;~~IAElC~~,~~OAAOD,UAAUI,SAASL,~~MAAM,~~KAAK;AACzC;AAEA~~,~~SAASM~~,~~mBACLN~~,~~KAAqB~~,~~EACrBO~~,~~eAAiF;IAEjF~~,~~IAAI,CAACA,iBACD~~;~~IAGJ~~,~~IAAI,AAA2B,YAA3B,OAAOA,iBAA8B~~;~~QACrC~~,~~MAAML~~,~~QAAQF~~,~~MAAM,MAAM,CAAC,IAAI,CAACG,CAAAA,IAAKA,EAAE,IAAI,KAAKI~~;~~QAChD~~,~~OAAQL,AAAAA,CAAAA,QAAQE,OAAOF,MAAM,KAAK,IAAI,MAAM,EAAC,KAAMM~~;~~IACvD~~;~~IAEA,MAAMH,OAAgC,CAAC~~;~~IACvC~~,~~KAAK~~,~~MAAMH,SAASF,MAAM,MAAM,CAC5BK,IAAI,CAACH,MAAM,IAAI,CAAC,GAAGA,MAAM,KAAK;IAElC,OAAOK,gBAAgBF,SAASG;AACpC;AAEO,MAAMC,iBAAiBC,0BAAmD,CAAC,EAAEV,KAAK,EAAE;IACvF,MAAMW,WAAWX,MAAM,gBAAgB;IAEvC,IAAIW,~~UAAU,cAAc,OACxB,OAAO,WAAP,GAAO,~~oBAACC~~,cAAYA;QAAC,~~QAAQZ~~,MAAM,MAAM;;~~IAK7C~~,~~MAAMa,cAAcC,uBAAuBd,MAAM,MAAM;IACvD,MAAM,CAACe,MAAMC,QAAQ,GAAGC,SAASN,UAAU,QAAQ;IACnDO,UAAU;QACN,IAAIL,aACAG,QAAQ;IAEhB,GAAG;QAACH;KAAY;IAEhB,~~OAAO,WAAP,GACI,~~oBAACM~~,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,~~OAAOpB~~,~~aAAaC~~,~~OAAOW~~,UAAU;~~QACrC~~,~~aAAaL~~,~~mBAAmBN~~,~~OAAOW~~,UAAU;~~QACjD~~,MAAMI;QACN,cAAcC;QACd,WAAW;qBAEX,~~oBAACJ~~,cAAYA;QAAC,~~QAAQZ~~,MAAM,MAAM;;AAIlD"}
1	+ {"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectRenderer.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { NestedLayout, useFieldValueFormatters } from \"./ObjectFieldComponents.js\";\nimport { resolveItemDescription, resolveItemTitle } from \"./resolveItemTitle.js\";\nimport { hasSubtreeFocusRequest } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n interface IFieldRendererRegistry {\n objectAccordionSingle: {\n fieldType: \"object\";\n settings?: {\n open?: boolean;\n container?: boolean;\n itemTitle?: string \| ((data: Record<string, unknown>) => string);\n itemDescription?: string \| ((data: Record<string, unknown>) => string);\n };\n };\n }\n}\n\nexport const ObjectRenderer = createObjectFieldRenderer<\"objectAccordionSingle\">(({ field }) => {\n const settings = field.rendererSettings;\n const formatters = useFieldValueFormatters();\n\n // Force the object accordion open when a focus request lands anywhere in\n // its subtree, so \"jump to field\" can cascade through collapsed levels.\n const focusInside = hasSubtreeFocusRequest(field.fields);\n const [open, setOpen] = useState(settings?.open ?? true);\n useEffect(() => {\n if (focusInside) {\n setOpen(true);\n }\n }, [focusInside]);\n\n if (settings?.container === false) {\n return <NestedLayout layout={field.layout} />;\n }\n\n return (\n <Accordion background={\"base\"} variant={\"container\"}>\n <Accordion.Item\n title={resolveItemTitle(\n field.fields,\n 0,\n field.label \|\| \"\",\n settings?.itemTitle,\n formatters\n )}\n description={resolveItemDescription(\n field.fields,\n 0,\n settings?.itemDescription,\n formatters\n )}\n open={open}\n onOpenChange={setOpen}\n className={\"pl-sm\"}\n >\n <NestedLayout layout={field.layout} />\n </Accordion.Item>\n </Accordion>\n );\n});\n"],"names":["ObjectRenderer","createObjectFieldRenderer","field","settings","formatters","useFieldValueFormatters","focusInside","hasSubtreeFocusRequest","open","setOpen","useState","useEffect","NestedLayout","Accordion","resolveItemTitle","resolveItemDescription"],"mappings":";;;;;;AAqBO,MAAMA,iBAAiBC,0BAAmD,CAAC,EAAEC,KAAK,EAAE;IACvF,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,aAAaC;IAInB,MAAMC,cAAcC,uBAAuBL,MAAM,MAAM;IACvD,MAAM,CAACM,MAAMC,QAAQ,GAAGC,SAASP,UAAU,QAAQ;IACnDQ,UAAU;QACN,IAAIL,aACAG,QAAQ;IAEhB,GAAG;QAACH;KAAY;IAEhB,IAAIH,UAAU,cAAc,OACxB,OAAO,WAAP,GAAO,oBAACS,cAAYA;QAAC,QAAQV,MAAM,MAAM;;IAG7C,OAAO,WAAP,GACI,oBAACW,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,OAAOC,iBACHZ,MAAM,MAAM,EACZ,GACAA,MAAM,KAAK,IAAI,IACfC,UAAU,WACVC;QAEJ,aAAaW,uBACTb,MAAM,MAAM,EACZ,GACAC,UAAU,iBACVC;QAEJ,MAAMI;QACN,cAAcC;QACd,WAAW;qBAEX,oBAACG,cAAYA;QAAC,QAAQV,MAAM,MAAM;;AAIlD"}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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/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} RENAMED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 {};