@webiny/app-website-builder 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/BaseEditor/defaultConfig/DocumentStateEditor/DocumentStateEditor.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const DocumentStateEditor: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const DocumentStateEditor: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/ElementInputRenderers.js

@@ -4,6 +4,9 @@ import { TextInputRenderer } from "../../inputRenderers/TextInput.js";
 import { NumberInputRenderer } from "../../inputRenderers/NumberInput.js";
 import { BooleanInputRenderer } from "../../inputRenderers/BooleanInput.js";
 import { TextareaInputRenderer } from "../../inputRenderers/TextareaInput.js";
+import { TagsInputRenderer } from "../../inputRenderers/TagsInput.js";
+import { DateTimeInputRenderer } from "../../inputRenderers/DateTimeInput.js";
+import { RadioInputRenderer } from "../../inputRenderers/RadioInput.js";
 import { LexicalInputRenderer } from "../../inputRenderers/LexicalInput/LexicalInput.js";
 import { DefaultLexicalConfig } from "../../inputRenderers/LexicalInput/DefaultLexicalConfig.js";
 import { SlotInputRenderer } from "../../inputRenderers/SlotInput.js";
@@ -11,6 +14,9 @@ import { GridLayoutInputRenderer } from "../../inputRenderers/GridLayoutInput.js
 import { SelectInputRenderer } from "../../inputRenderers/SelectInput.js";
 import { FileInputRenderer } from "../../inputRenderers/FileInput.js";
 import { FragmentSelectorInputRenderer } from "../../inputRenderers/FragmentSelectorInput.js";
+import { ObjectInputRenderer } from "../../inputRenderers/ObjectInput/ObjectInputRenderer.js";
+import { ColorPickerInputRenderer } from "../../inputRenderers/ColorPickerInput.js";
+import { ContentEntryInputRenderer } from "../../inputRenderers/ContentEntryInput.js";
 const ElementInputRenderers = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Slot",
         component: SlotInputRenderer
@@ -20,9 +26,18 @@ const ElementInputRenderers = ()=>/*#__PURE__*/ react.createElement(react.Fragme
     }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Select",
         component: SelectInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/RadioGroup",
+        component: RadioInputRenderer
     }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Textarea",
         component: TextareaInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/Tags",
+        component: TagsInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/DateTime",
+        component: DateTimeInputRenderer
     }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Number",
         component: NumberInputRenderer
@@ -41,6 +56,15 @@ const ElementInputRenderers = ()=>/*#__PURE__*/ react.createElement(react.Fragme
     }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/FragmentSelector",
         component: FragmentSelectorInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/Object",
+        component: ObjectInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/ColorPicker",
+        component: ColorPickerInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/ContentEntry",
+        component: ContentEntryInputRenderer
     }));
 export { ElementInputRenderers };
 

package/BaseEditor/defaultConfig/ElementInputRenderers.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/ElementInputRenderers.js","sources":["../../../src/BaseEditor/defaultConfig/ElementInputRenderers.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { TextInputRenderer } from \"~/inputRenderers/TextInput.js\";\nimport { NumberInputRenderer } from \"~/inputRenderers/NumberInput.js\";\nimport { BooleanInputRenderer } from \"~/inputRenderers/BooleanInput.js\";\nimport { TextareaInputRenderer } from \"~/inputRenderers/TextareaInput.js\";\nimport { LexicalInputRenderer } from \"~/inputRenderers/LexicalInput/LexicalInput.js\";\nimport { DefaultLexicalConfig } from \"~/inputRenderers/LexicalInput/DefaultLexicalConfig.js\";\nimport { SlotInputRenderer } from \"~/inputRenderers/SlotInput.js\";\nimport { GridLayoutInputRenderer } from \"~/inputRenderers/GridLayoutInput.js\";\nimport { SelectInputRenderer } from \"~/inputRenderers/SelectInput.js\";\nimport { FileInputRenderer } from \"~/inputRenderers/FileInput.js\";\nimport { FragmentSelectorInputRenderer } from \"~/inputRenderers/FragmentSelectorInput.js\";\n\nexport const ElementInputRenderers = () => {\n    return (\n        <>\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Slot\"}\n                component={SlotInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Input\"}\n                component={TextInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Select\"}\n                component={SelectInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Textarea\"}\n                component={TextareaInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Number\"}\n                component={NumberInputRenderer}\n            />\n            {/* Configure Lexical Editor*/}\n            <DefaultLexicalConfig />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Lexical\"}\n                component={LexicalInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Switch\"}\n                component={BooleanInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/GridLayout\"}\n                component={GridLayoutInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FileManager\"}\n                component={FileInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FragmentSelector\"}\n                component={FragmentSelectorInputRenderer}\n            />\n        </>\n    );\n};\n"],"names":["ElementInputRenderers","EditorConfig","SlotInputRenderer","TextInputRenderer","SelectInputRenderer","TextareaInputRenderer","NumberInputRenderer","DefaultLexicalConfig","LexicalInputRenderer","BooleanInputRenderer","GridLayoutInputRenderer","FileInputRenderer","FragmentSelectorInputRenderer"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,wBAAwB,IAC1B,WAAP,GACI,wDACI,oBAACC,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWC;sBAEf,oBAACD,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWE;sBAEf,oBAACF,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWG;sBAEf,oBAACH,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWI;sBAEf,oBAACJ,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWK;sBAGf,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACN,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWO;sBAEf,oBAACP,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWQ;sBAEf,oBAACR,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWS;sBAEf,oBAACT,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWU;sBAEf,oBAACV,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWW"}
+{"version":3,"file":"BaseEditor/defaultConfig/ElementInputRenderers.js","sources":["../../../src/BaseEditor/defaultConfig/ElementInputRenderers.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { TextInputRenderer } from \"~/inputRenderers/TextInput.js\";\nimport { NumberInputRenderer } from \"~/inputRenderers/NumberInput.js\";\nimport { BooleanInputRenderer } from \"~/inputRenderers/BooleanInput.js\";\nimport { TextareaInputRenderer } from \"~/inputRenderers/TextareaInput.js\";\nimport { TagsInputRenderer } from \"~/inputRenderers/TagsInput.js\";\nimport { DateTimeInputRenderer } from \"~/inputRenderers/DateTimeInput.js\";\nimport { RadioInputRenderer } from \"~/inputRenderers/RadioInput.js\";\nimport { LexicalInputRenderer } from \"~/inputRenderers/LexicalInput/LexicalInput.js\";\nimport { DefaultLexicalConfig } from \"~/inputRenderers/LexicalInput/DefaultLexicalConfig.js\";\nimport { SlotInputRenderer } from \"~/inputRenderers/SlotInput.js\";\nimport { GridLayoutInputRenderer } from \"~/inputRenderers/GridLayoutInput.js\";\nimport { SelectInputRenderer } from \"~/inputRenderers/SelectInput.js\";\nimport { FileInputRenderer } from \"~/inputRenderers/FileInput.js\";\nimport { FragmentSelectorInputRenderer } from \"~/inputRenderers/FragmentSelectorInput.js\";\nimport { ObjectInputRenderer } from \"~/inputRenderers/ObjectInput/ObjectInputRenderer.js\";\nimport { ColorPickerInputRenderer } from \"~/inputRenderers/ColorPickerInput.js\";\nimport { ContentEntryInputRenderer } from \"~/inputRenderers/ContentEntryInput.js\";\n\nexport const ElementInputRenderers = () => {\n    return (\n        <>\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Slot\"}\n                component={SlotInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Input\"}\n                component={TextInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Select\"}\n                component={SelectInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/RadioGroup\"}\n                component={RadioInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Textarea\"}\n                component={TextareaInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Tags\"}\n                component={TagsInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/DateTime\"}\n                component={DateTimeInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Number\"}\n                component={NumberInputRenderer}\n            />\n            {/* Configure Lexical Editor*/}\n            <DefaultLexicalConfig />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Lexical\"}\n                component={LexicalInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Switch\"}\n                component={BooleanInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/GridLayout\"}\n                component={GridLayoutInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FileManager\"}\n                component={FileInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FragmentSelector\"}\n                component={FragmentSelectorInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Object\"}\n                component={ObjectInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/ColorPicker\"}\n                component={ColorPickerInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/ContentEntry\"}\n                component={ContentEntryInputRenderer}\n            />\n        </>\n    );\n};\n"],"names":["ElementInputRenderers","EditorConfig","SlotInputRenderer","TextInputRenderer","SelectInputRenderer","RadioInputRenderer","TextareaInputRenderer","TagsInputRenderer","DateTimeInputRenderer","NumberInputRenderer","DefaultLexicalConfig","LexicalInputRenderer","BooleanInputRenderer","GridLayoutInputRenderer","FileInputRenderer","FragmentSelectorInputRenderer","ObjectInputRenderer","ColorPickerInputRenderer","ContentEntryInputRenderer"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,MAAMA,wBAAwB,IAC1B,WAAP,GACI,wDACI,oBAACC,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWC;sBAEf,oBAACD,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWE;sBAEf,oBAACF,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWG;sBAEf,oBAACH,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWI;sBAEf,oBAACJ,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWK;sBAEf,oBAACL,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWM;sBAEf,oBAACN,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWO;sBAEf,oBAACP,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWQ;sBAGf,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACT,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWU;sBAEf,oBAACV,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWW;sBAEf,oBAACX,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWY;sBAEf,oBAACZ,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWa;sBAEf,oBAACb,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWc;sBAEf,oBAACd,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWe;sBAEf,oBAACf,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWgB;sBAEf,oBAAChB,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWiB"}

package/BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CloneElementAction: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.js

@@ -0,0 +1,25 @@
+import react, { useCallback } from "react";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/content_copy.svg";
+import { useActiveElement } from "../../../hooks/useActiveElement.js";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { Commands } from "../../../index.js";
+const CloneElementAction = ()=>{
+    const [element] = useActiveElement();
+    const editor = useDocumentEditor();
+    const onClick = useCallback(()=>{
+        if (element) editor.executeCommand(Commands.CloneElement, {
+            id: element.id
+        });
+    }, [
+        element?.id
+    ]);
+    return /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Clone",
+        onClick: onClick
+    });
+};
+export { CloneElementAction };
+
+//# sourceMappingURL=CloneElementAction.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as ContentCopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const CloneElementAction = () => {\n    const [element] = useActiveElement();\n    const editor = useDocumentEditor();\n\n    const onClick = useCallback(() => {\n        if (element) {\n            editor.executeCommand(Commands.CloneElement, { id: element.id });\n        }\n    }, [element?.id]);\n\n    return <DropdownMenu.Item icon={<ContentCopyIcon />} text={\"Clone\"} onClick={onClick} />;\n};\n"],"names":["CloneElementAction","element","useActiveElement","editor","useDocumentEditor","onClick","useCallback","Commands","DropdownMenu","ContentCopyIcon"],"mappings":";;;;;;AAOO,MAAMA,qBAAqB;IAC9B,MAAM,CAACC,QAAQ,GAAGC;IAClB,MAAMC,SAASC;IAEf,MAAMC,UAAUC,YAAY;QACxB,IAAIL,SACAE,OAAO,cAAc,CAACI,SAAS,YAAY,EAAE;YAAE,IAAIN,QAAQ,EAAE;QAAC;IAEtE,GAAG;QAACA,SAAS;KAAG;IAEhB,OAAO,WAAP,GAAO,oBAACO,aAAa,IAAI;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,MAAM;QAAS,SAASJ;;AACjF"}

package/BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DeleteElementAction: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.js

@@ -0,0 +1,26 @@
+import react, { useCallback } from "react";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { useActiveElement } from "../../../hooks/useActiveElement.js";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { Commands } from "../../../index.js";
+const DeleteElementAction = ()=>{
+    const [element] = useActiveElement();
+    const editor = useDocumentEditor();
+    const onClick = useCallback(()=>{
+        if (element) editor.executeCommand(Commands.DeleteElement, {
+            id: element.id
+        });
+    }, [
+        element?.id
+    ]);
+    return /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        className: "text-destructive-primary [&_svg]:fill-destructive",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Delete",
+        onClick: onClick
+    });
+};
+export { DeleteElementAction };
+
+//# sourceMappingURL=DeleteElementAction.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const DeleteElementAction = () => {\n    const [element] = useActiveElement();\n    const editor = useDocumentEditor();\n\n    const onClick = useCallback(() => {\n        if (element) {\n            editor.executeCommand(Commands.DeleteElement, { id: element.id });\n        }\n    }, [element?.id]);\n\n    return (\n        <DropdownMenu.Item\n            className={\"text-destructive-primary [&_svg]:fill-destructive\"}\n            icon={<DeleteIcon />}\n            text={\"Delete\"}\n            onClick={onClick}\n        />\n    );\n};\n"],"names":["DeleteElementAction","element","useActiveElement","editor","useDocumentEditor","onClick","useCallback","Commands","DropdownMenu","DeleteIcon"],"mappings":";;;;;;AAOO,MAAMA,sBAAsB;IAC/B,MAAM,CAACC,QAAQ,GAAGC;IAClB,MAAMC,SAASC;IAEf,MAAMC,UAAUC,YAAY;QACxB,IAAIL,SACAE,OAAO,cAAc,CAACI,SAAS,aAAa,EAAE;YAAE,IAAIN,QAAQ,EAAE;QAAC;IAEvE,GAAG;QAACA,SAAS;KAAG;IAEhB,OAAO,WAAP,GACI,oBAACO,aAAa,IAAI;QACd,WAAW;QACX,oBAAM,oBAACC,gBAAUA;QACjB,MAAM;QACN,SAASJ;;AAGrB"}

package/BaseEditor/defaultConfig/Sidebar/ElementPreview.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { DocumentElement } from "@webiny/website-builder-sdk";
+interface ElementPreviewProps {
+    element: DocumentElement;
+}
+export declare const ElementPreview: ({ element }: ElementPreviewProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/ElementPreview.js

@@ -0,0 +1,33 @@
+import react from "react";
+import { useComponent } from "../../hooks/useComponent.js";
+import { DropdownMenu, Icon, IconButton } from "@webiny/admin-ui";
+import { InlineSvg } from "../Toolbar/InsertElements/InlineSvg.js";
+import { ReactComponent } from "@webiny/icons/more_vert.svg";
+import { ElementActions } from "../../config/ElementAction.js";
+const ElementPreview = ({ element })=>{
+    const component = useComponent(element.component.name);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "fill-accent-default"
+    }, component.image && /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(InlineSvg, {
+            src: component.image
+        }),
+        size: "md",
+        label: component.label ?? element.component.name
+    })), /*#__PURE__*/ react.createElement("span", {
+        className: "text-md font-semibold text-neutral-primary"
+    }, component.label ?? element.component.name)), /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            size: "sm",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }, /*#__PURE__*/ react.createElement(ElementActions, null)));
+};
+export { ElementPreview };
+
+//# sourceMappingURL=ElementPreview.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementPreview.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/ElementPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { DropdownMenu, Icon, IconButton } from \"@webiny/admin-ui\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ElementActions } from \"~/BaseEditor/config/ElementAction.js\";\n\ninterface ElementPreviewProps {\n    element: DocumentElement;\n}\n\nexport const ElementPreview = ({ element }: ElementPreviewProps) => {\n    const component = useComponent(element.component.name);\n\n    return (\n        <div className={\"flex items-center justify-between\"}>\n            <div className={\"flex items-center gap-sm\"}>\n                <div className={\"fill-accent-default\"}>\n                    {component.image && (\n                        <Icon\n                            icon={<InlineSvg src={component.image} />}\n                            size={\"md\"}\n                            label={component.label ?? element.component.name}\n                        />\n                    )}\n                </div>\n                <span className={\"text-md font-semibold text-neutral-primary\"}>\n                    {component.label ?? element.component.name}\n                </span>\n            </div>\n            <DropdownMenu\n                trigger={<IconButton variant={\"ghost\"} size={\"sm\"} icon={<MoreVerticalIcon />} />}\n            >\n                <ElementActions />\n            </DropdownMenu>\n        </div>\n    );\n};\n"],"names":["ElementPreview","element","component","useComponent","Icon","InlineSvg","DropdownMenu","IconButton","MoreVerticalIcon","ElementActions"],"mappings":";;;;;;AAYO,MAAMA,iBAAiB,CAAC,EAAEC,OAAO,EAAuB;IAC3D,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;OACXC,UAAU,KAAK,IAAI,WAAJ,GACZ,oBAACE,MAAIA;QACD,oBAAM,oBAACC,WAASA;YAAC,KAAKH,UAAU,KAAK;;QACrC,MAAM;QACN,OAAOA,UAAU,KAAK,IAAID,QAAQ,SAAS,CAAC,IAAI;uBAI5D,oBAAC;QAAK,WAAW;OACZC,UAAU,KAAK,IAAID,QAAQ,SAAS,CAAC,IAAI,kBAGlD,oBAACK,cAAYA;QACT,uBAAS,oBAACC,YAAUA;YAAC,SAAS;YAAS,MAAM;YAAM,oBAAM,oBAACC,gBAAgBA;;qBAE1E,oBAACC,gBAAcA;AAI/B"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js

@@ -21,10 +21,14 @@ const ElementInputs = makeDecoratable("ElementInputs", ({ element })=>{
         inputsAst
     ]);
     if (!element) return null;
-    if (!hasEditableInputs) return /*#__PURE__*/ react.createElement(InfoMessage, {
+    return /*#__PURE__*/ react.createElement(Grid, {
+        gap: "compact",
+        className: "pt-md px-sm"
+    }, hasEditableInputs ? /*#__PURE__*/ react.createElement(react.Fragment, null) : /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(InfoMessage, {
         message: "This element has no inputs."
-    });
-    return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(InputRenderer, {
+    })), /*#__PURE__*/ react.createElement(InputRenderer, {
         key: element.id,
         ast: inputsAst,
         bindings: bindings.inputs

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InputRenderer } from \"./InputRenderer.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\n\ninterface ElementInputsProps {\n    element: DocumentElement;\n}\n\nexport const ElementInputs = makeDecoratable(\"ElementInputs\", ({ element }: ElementInputsProps) => {\n    const component = useComponent(element.component.name);\n\n    const bindings = useSelectFromDocument(\n        document => {\n            return document.bindings[element.id] ?? { inputs: {} };\n        },\n        [element.id]\n    );\n\n    const inputsAst = useMemo(() => {\n        return ComponentManifestToAstConverter.convert(component.inputs ?? []);\n    }, [component.name, element.id]);\n\n    const hasEditableInputs = useMemo(() => {\n        return inputsAst.filter(input => input.type !== \"slot\").length > 0;\n    }, [inputsAst]);\n\n    if (!element) {\n        return null;\n    }\n\n    if (!hasEditableInputs) {\n        return <InfoMessage message={\"This element has no inputs.\"} />;\n    }\n\n    return (\n        <Grid>\n            {/*<Grid.Column key={\"repeat\"} span={12}>*/}\n            {/*    <Select*/}\n            {/*        label={\"Repeat for each\"}*/}\n            {/*        placeholder={\"Select binding\"}*/}\n            {/*        options={arrayOptions}*/}\n            {/*        value={repeat.value ?? \"\"}*/}\n            {/*        onChange={value => repeat.onChange(value === \"\" ? undefined : value)}*/}\n            {/*    />*/}\n            {/*</Grid.Column>*/}\n            <InputRenderer key={element.id} ast={inputsAst} bindings={bindings.inputs} />\n        </Grid>\n    );\n});\n\n// interface ElementInputProps {\n//     element: DocumentElement;\n//     input: ComponentInput;\n// }\n//\n// const ElementInput = ({ element, input }: ElementInputProps) => {\n//     const Renderer = useInputRenderer(input.renderer || \"__unknown__\");\n//\n//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);\n//\n//     /*   return (\n//         <Renderer\n//             value={value.static}\n//             input={input}\n//             onChange={onChange}\n//             onPreviewChange={onPreviewChange}\n//         />\n//     );*/\n//     if (value.expression) {\n//         return (\n//             <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n//                 <ExpressionRenderer\n//                     element={element}\n//                     value={value.expression}\n//                     onChange={onChange}\n//                     input={input}\n//                 />\n//             </WithBindingToggle>\n//         );\n//     }\n//\n//     return (\n//         <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n//             <Renderer\n//                 value={value.static}\n//                 input={input}\n//                 onChange={onChange}\n//                 onPreviewChange={onPreviewChange}\n//             />\n//         </WithBindingToggle>\n//     );\n// };\n"],"names":["ElementInputs","makeDecoratable","element","component","useComponent","bindings","useSelectFromDocument","document","inputsAst","useMemo","ComponentManifestToAstConverter","hasEditableInputs","input","InfoMessage","Grid","InputRenderer"],"mappings":";;;;;;;;AAcO,MAAMA,gBAAgBC,gBAAgB,iBAAiB,CAAC,EAAEC,OAAO,EAAsB;IAC1F,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,MAAMG,WAAWC,sBACbC,CAAAA,WACWA,SAAS,QAAQ,CAACL,QAAQ,EAAE,CAAC,IAAI;YAAE,QAAQ,CAAC;QAAE,GAEzD;QAACA,QAAQ,EAAE;KAAC;IAGhB,MAAMM,YAAYC,QAAQ,IACfC,gCAAgC,OAAO,CAACP,UAAU,MAAM,IAAI,EAAE,GACtE;QAACA,UAAU,IAAI;QAAED,QAAQ,EAAE;KAAC;IAE/B,MAAMS,oBAAoBF,QAAQ,IACvBD,UAAU,MAAM,CAACI,CAAAA,QAASA,AAAe,WAAfA,MAAM,IAAI,EAAa,MAAM,GAAG,GAClE;QAACJ;KAAU;IAEd,IAAI,CAACN,SACD,OAAO;IAGX,IAAI,CAACS,mBACD,OAAO,WAAP,GAAO,oBAACE,aAAWA;QAAC,SAAS;;IAGjC,OAAO,WAAP,GACI,oBAACC,MAAIA,MAAAA,WAAAA,GAUD,oBAACC,eAAaA;QAAC,KAAKb,QAAQ,EAAE;QAAE,KAAKM;QAAW,UAAUH,SAAS,MAAM;;AAGrF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InputRenderer } from \"./InputRenderer.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\n\ninterface ElementInputsProps {\n    element: DocumentElement;\n}\n\nexport const ElementInputs = makeDecoratable(\"ElementInputs\", ({ element }: ElementInputsProps) => {\n    const component = useComponent(element.component.name);\n\n    const bindings = useSelectFromDocument(\n        document => {\n            return document.bindings[element.id] ?? { inputs: {} };\n        },\n        [element.id]\n    );\n\n    const inputsAst = useMemo(() => {\n        return ComponentManifestToAstConverter.convert(component.inputs ?? []);\n    }, [component.name, element.id]);\n\n    const hasEditableInputs = useMemo(() => {\n        return inputsAst.filter(input => input.type !== \"slot\").length > 0;\n    }, [inputsAst]);\n\n    if (!element) {\n        return null;\n    }\n\n    return (\n        <Grid gap={\"compact\"} className={\"pt-md px-sm\"}>\n            {!hasEditableInputs ? (\n                <Grid.Column span={12}>\n                    <InfoMessage message={\"This element has no inputs.\"} />\n                </Grid.Column>\n            ) : (\n                <></>\n            )}\n\n            <InputRenderer key={element.id} ast={inputsAst} bindings={bindings.inputs} />\n        </Grid>\n    );\n});\n\n// interface ElementInputProps {\n//     element: DocumentElement;\n//     input: ComponentInput;\n// }\n//\n// const ElementInput = ({ element, input }: ElementInputProps) => {\n//     const Renderer = useInputRenderer(input.renderer || \"__unknown__\");\n//\n//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);\n//\n//     /*   return (\n//         <Renderer\n//             value={value.static}\n//             input={input}\n//             onChange={onChange}\n//             onPreviewChange={onPreviewChange}\n//         />\n//     );*/\n//     if (value.expression) {\n//         return (\n//             <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n//                 <ExpressionRenderer\n//                     element={element}\n//                     value={value.expression}\n//                     onChange={onChange}\n//                     input={input}\n//                 />\n//             </WithBindingToggle>\n//         );\n//     }\n//\n//     return (\n//         <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n//             <Renderer\n//                 value={value.static}\n//                 input={input}\n//                 onChange={onChange}\n//                 onPreviewChange={onPreviewChange}\n//             />\n//         </WithBindingToggle>\n//     );\n// };\n"],"names":["ElementInputs","makeDecoratable","element","component","useComponent","bindings","useSelectFromDocument","document","inputsAst","useMemo","ComponentManifestToAstConverter","hasEditableInputs","input","Grid","InfoMessage","InputRenderer"],"mappings":";;;;;;;;AAcO,MAAMA,gBAAgBC,gBAAgB,iBAAiB,CAAC,EAAEC,OAAO,EAAsB;IAC1F,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,MAAMG,WAAWC,sBACbC,CAAAA,WACWA,SAAS,QAAQ,CAACL,QAAQ,EAAE,CAAC,IAAI;YAAE,QAAQ,CAAC;QAAE,GAEzD;QAACA,QAAQ,EAAE;KAAC;IAGhB,MAAMM,YAAYC,QAAQ,IACfC,gCAAgC,OAAO,CAACP,UAAU,MAAM,IAAI,EAAE,GACtE;QAACA,UAAU,IAAI;QAAED,QAAQ,EAAE;KAAC;IAE/B,MAAMS,oBAAoBF,QAAQ,IACvBD,UAAU,MAAM,CAACI,CAAAA,QAASA,AAAe,WAAfA,MAAM,IAAI,EAAa,MAAM,GAAG,GAClE;QAACJ;KAAU;IAEd,IAAI,CAACN,SACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACW,MAAIA;QAAC,KAAK;QAAW,WAAW;OAC5B,AAACF,oB,cAKE,4CALkB,WAApBA,GACE,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,aAAWA;QAAC,SAAS;SAG1B,cAGJ,oBAACC,eAAaA;QAAC,KAAKb,QAAQ,EAAE;QAAE,KAAKM;QAAW,UAAUH,SAAS,MAAM;;AAGrF"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js

@@ -1,12 +1,21 @@
 import react from "react";
+import { Grid } from "@webiny/admin-ui";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
 import { ElementInputs } from "./ElementInputs.js";
+import { ElementPreview } from "../ElementPreview.js";
 const ElementSettings = ()=>{
     const [element] = useActiveElement();
     if (!element) return null;
-    return /*#__PURE__*/ react.createElement(ElementInputs, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Grid, {
+        gap: "compact",
+        className: "pt-md px-sm"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(ElementPreview, {
         element: element
-    });
+    }))), /*#__PURE__*/ react.createElement(ElementInputs, {
+        element: element
+    }));
 };
 export { ElementSettings };
 

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.tsx"],"sourcesContent":["import React from \"react\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { ElementInputs } from \"./ElementInputs.js\";\n\nexport const ElementSettings = () => {\n    const [element] = useActiveElement();\n\n    if (!element) {\n        return null;\n    }\n\n    return <ElementInputs element={element} />;\n};\n"],"names":["ElementSettings","element","useActiveElement","ElementInputs"],"mappings":";;;AAIO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAElB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACE,eAAaA;QAAC,SAASF;;AACnC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { ElementInputs } from \"./ElementInputs.js\";\nimport { ElementPreview } from \"../ElementPreview.js\";\n\nexport const ElementSettings = () => {\n    const [element] = useActiveElement();\n\n    if (!element) {\n        return null;\n    }\n\n    return (\n        <>\n            <Grid gap={\"compact\"} className={\"pt-md px-sm\"}>\n                <Grid.Column span={12}>\n                    <ElementPreview element={element} />\n                </Grid.Column>\n            </Grid>\n            <ElementInputs element={element} />\n        </>\n    );\n};\n"],"names":["ElementSettings","element","useActiveElement","Grid","ElementPreview","ElementInputs"],"mappings":";;;;;AAMO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAElB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAACE,MAAIA;QAAC,KAAK;QAAW,WAAW;qBAC7B,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,gBAAcA;QAAC,SAASH;wBAGjC,oBAACI,eAAaA;QAAC,SAASJ;;AAGpC"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js

@@ -1,15 +1,18 @@
 import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/notes.svg";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
-const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableContainer, {
-        tabIndex: -1
-    }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
+const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
         name: "element",
         label: "Element",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Element"
+        }),
         element: /*#__PURE__*/ react.createElement(Sidebar.Elements, {
             group: "element"
         })
-    }));
+    });
 export { ElementSettingsGroup };
 
 //# sourceMappingURL=ElementSettingsGroup.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\n\nexport const ElementSettingsGroup = () => {\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"element\"}\n                label={\"Element\"}\n                element={<Sidebar.Elements group={\"element\"} />}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"names":["ElementSettingsGroup","ScrollableContainer","Sidebar"],"mappings":";;;AAIO,MAAMA,uBAAuB,IACzB,WAAP,GACI,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,uBAAS,oBAACA,QAAQ,QAAQ;YAAC,OAAO"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as NotesIcon } from \"@webiny/icons/notes.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\n\nexport const ElementSettingsGroup = () => (\n    <Sidebar.Group.Tab\n        name={\"element\"}\n        label={\"Element\"}\n        icon={<Icon icon={<NotesIcon />} label={\"Element\"} />}\n        element={<Sidebar.Elements group={\"element\"} />}\n    />\n);\n"],"names":["ElementSettingsGroup","Sidebar","Icon","NotesIcon"],"mappings":";;;;AAKO,MAAMA,uBAAuB,kBAChC,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAASA;YAAK,OAAO;;QACxC,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/InputField.d.ts

@@ -6,5 +6,5 @@ interface InputFieldProps {
     element: DocumentElement;
     bindings: DocumentElementBindings["inputs"];
 }
-export declare function InputField({ element, node }: InputFieldProps): React.JSX.Element | undefined;
+export declare function InputField({ element, node, bindings }: InputFieldProps): React.JSX.Element;
 export {};

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/InputField.js

@@ -2,11 +2,10 @@ import react from "react";
 import { useInputRenderer } from "./useInputRenderer.js";
 import { useInputValue } from "./useInputValue.js";
 import { InheritanceLabel } from "../InheritanceLabel.js";
-function InputField({ element, node }) {
+function InputField({ element, node, bindings }) {
     const Renderer = useInputRenderer(node.input.renderer);
     const { value, onChange, onPreviewChange, inheritanceMap, metadata, onReset } = useInputValue(element.id, node);
     const input = node.input;
-    if ("object" === input.type) return;
     const label = node.input.responsive ? /*#__PURE__*/ react.createElement(InheritanceLabel, {
         text: input.label,
         inheritedFrom: inheritanceMap?.inheritedFrom,
@@ -19,7 +18,10 @@ function InputField({ element, node }) {
         value: value?.static,
         onChange: onChange,
         onPreviewChange: onPreviewChange,
-        input: node.input
+        input: node.input,
+        node: node,
+        element: element,
+        bindings: bindings
     });
 }
 export { InputField };

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/InputField.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport { useInputRenderer } from \"./useInputRenderer.js\";\nimport { useInputValue } from \"./useInputValue.js\";\nimport type { DocumentElement, DocumentElementBindings } from \"@webiny/website-builder-sdk\";\nimport { InheritanceLabel } from \"../InheritanceLabel.js\";\n\ninterface InputFieldProps {\n    node: InputAstNode;\n    element: DocumentElement;\n    bindings: DocumentElementBindings[\"inputs\"];\n}\n\nexport function InputField({ element, node }: InputFieldProps) {\n    const Renderer = useInputRenderer(node.input.renderer!);\n    const { value, onChange, onPreviewChange, inheritanceMap, metadata, onReset } = useInputValue(\n        element.id,\n        node\n    );\n    const input = node.input;\n\n    if (input.type === \"object\") {\n        // TODO: nested inputs will be implemented at a later stage.\n        return;\n\n        /*if (node.list) {\n            return <FieldArray node={node} bindings={bindings} />;\n        }\n\n        return (\n            <fieldset>\n                <legend>{input.label}</legend>\n                {node.children.map(child => (\n                    <InputField key={child.path} node={child} bindings={bindings} />\n                ))}\n            </fieldset>\n        );*/\n    }\n\n    const label = node.input.responsive ? (\n        <InheritanceLabel\n            text={input.label}\n            inheritedFrom={inheritanceMap?.inheritedFrom}\n            isOverridden={inheritanceMap?.overridden ?? false}\n            onReset={onReset}\n        />\n    ) : (\n        input.label\n    );\n\n    return (\n        <Renderer\n            metadata={metadata}\n            label={label}\n            value={value?.static}\n            onChange={onChange}\n            onPreviewChange={onPreviewChange}\n            input={node.input}\n        />\n    );\n\n    // We'll implement expression bindings at a later stage.\n    /*return value.expression ? (\n        <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n            <ExpressionRenderer\n                element={activeElement!}\n                value={value.expression}\n                onChange={onChange}\n                input={input}\n            />\n        </WithBindingToggle>\n    ) : (\n        <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n            <Renderer\n                value={value.static}\n                onChange={onChange}\n                onPreviewChange={onPreviewChange}\n                input={node.input}\n            />\n        </WithBindingToggle>\n    );*/\n}\n"],"names":["InputField","element","node","Renderer","useInputRenderer","value","onChange","onPreviewChange","inheritanceMap","metadata","onReset","useInputValue","input","label","InheritanceLabel"],"mappings":";;;;AAaO,SAASA,WAAW,EAAEC,OAAO,EAAEC,IAAI,EAAmB;IACzD,MAAMC,WAAWC,iBAAiBF,KAAK,KAAK,CAAC,QAAQ;IACrD,MAAM,EAAEG,KAAK,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,cAC5EV,QAAQ,EAAE,EACVC;IAEJ,MAAMU,QAAQV,KAAK,KAAK;IAExB,IAAIU,AAAe,aAAfA,MAAM,IAAI,EAEV;IAgBJ,MAAMC,QAAQX,KAAK,KAAK,CAAC,UAAU,GAAG,WAAH,GAC/B,oBAACY,kBAAgBA;QACb,MAAMF,MAAM,KAAK;QACjB,eAAeJ,gBAAgB;QAC/B,cAAcA,gBAAgB,cAAc;QAC5C,SAASE;SAGbE,MAAM,KAAK;IAGf,OAAO,WAAP,GACI,oBAACT,UAAAA;QACG,UAAUM;QACV,OAAOI;QACP,OAAOR,OAAO;QACd,UAAUC;QACV,iBAAiBC;QACjB,OAAOL,KAAK,KAAK;;AAwB7B"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/InputField.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport { useInputRenderer } from \"./useInputRenderer.js\";\nimport { useInputValue } from \"./useInputValue.js\";\nimport type { DocumentElement, DocumentElementBindings } from \"@webiny/website-builder-sdk\";\nimport { InheritanceLabel } from \"../InheritanceLabel.js\";\n\ninterface InputFieldProps {\n    node: InputAstNode;\n    element: DocumentElement;\n    bindings: DocumentElementBindings[\"inputs\"];\n}\n\nexport function InputField({ element, node, bindings }: InputFieldProps) {\n    const Renderer = useInputRenderer(node.input.renderer!);\n    const { value, onChange, onPreviewChange, inheritanceMap, metadata, onReset } = useInputValue(\n        element.id,\n        node\n    );\n    const input = node.input;\n\n    const label = node.input.responsive ? (\n        <InheritanceLabel\n            text={input.label}\n            inheritedFrom={inheritanceMap?.inheritedFrom}\n            isOverridden={inheritanceMap?.overridden ?? false}\n            onReset={onReset}\n        />\n    ) : (\n        input.label\n    );\n\n    return (\n        <Renderer\n            metadata={metadata}\n            label={label}\n            value={value?.static}\n            onChange={onChange}\n            onPreviewChange={onPreviewChange}\n            input={node.input}\n            node={node}\n            element={element}\n            bindings={bindings}\n        />\n    );\n\n    // We'll implement expression bindings at a later stage.\n    /*return value.expression ? (\n        <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n            <ExpressionRenderer\n                element={activeElement!}\n                value={value.expression}\n                onChange={onChange}\n                input={input}\n            />\n        </WithBindingToggle>\n    ) : (\n        <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n            <Renderer\n                value={value.static}\n                onChange={onChange}\n                onPreviewChange={onPreviewChange}\n                input={node.input}\n            />\n        </WithBindingToggle>\n    );*/\n}\n"],"names":["InputField","element","node","bindings","Renderer","useInputRenderer","value","onChange","onPreviewChange","inheritanceMap","metadata","onReset","useInputValue","input","label","InheritanceLabel"],"mappings":";;;;AAaO,SAASA,WAAW,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAmB;IACnE,MAAMC,WAAWC,iBAAiBH,KAAK,KAAK,CAAC,QAAQ;IACrD,MAAM,EAAEI,KAAK,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,cAC5EX,QAAQ,EAAE,EACVC;IAEJ,MAAMW,QAAQX,KAAK,KAAK;IAExB,MAAMY,QAAQZ,KAAK,KAAK,CAAC,UAAU,GAAG,WAAH,GAC/B,oBAACa,kBAAgBA;QACb,MAAMF,MAAM,KAAK;QACjB,eAAeJ,gBAAgB;QAC/B,cAAcA,gBAAgB,cAAc;QAC5C,SAASE;SAGbE,MAAM,KAAK;IAGf,OAAO,WAAP,GACI,oBAACT,UAAAA;QACG,UAAUM;QACV,OAAOI;QACP,OAAOR,OAAO;QACd,UAAUC;QACV,iBAAiBC;QACjB,OAAON,KAAK,KAAK;QACjB,MAAMA;QACN,SAASD;QACT,UAAUE;;AAwBtB"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectField.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { DocumentElement, DocumentElementBindings, InputAstNode } from "@webiny/website-builder-sdk";
+interface ObjectFieldProps {
+    node: InputAstNode;
+    element: DocumentElement;
+    bindings: DocumentElementBindings["inputs"];
+}
+/**
+ * A single (non-list) object field. Rendered as one row that opens a drawer containing the
+ * object's child inputs, recursed through `InputField`.
+ */
+export declare function ObjectField({ element, node, bindings }: ObjectFieldProps): React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectField.js

@@ -0,0 +1,29 @@
+import react, { useState } from "react";
+import { InputField } from "./InputField.js";
+import { ObjectFieldHeader, ObjectFieldPanel, ObjectRow, useDrawerDepth } from "../../../../inputRenderers/ObjectInput/index.js";
+function ObjectField({ element, node, bindings }) {
+    const [open, setOpen] = useState(false);
+    const depth = useDrawerDepth();
+    const label = node.input.label ?? node.name;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xs"
+    }, /*#__PURE__*/ react.createElement(ObjectFieldHeader, {
+        description: node.input.description
+    }), /*#__PURE__*/ react.createElement(ObjectRow, {
+        title: label,
+        onOpen: ()=>setOpen(true)
+    }), /*#__PURE__*/ react.createElement(ObjectFieldPanel, {
+        open: open,
+        onClose: ()=>setOpen(false),
+        title: label,
+        depth: depth
+    }, node.children.map((child)=>/*#__PURE__*/ react.createElement(InputField, {
+            key: child.path,
+            element: element,
+            node: child,
+            bindings: bindings
+        }))));
+}
+export { ObjectField };
+
+//# sourceMappingURL=ObjectField.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectField.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectField.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    InputAstNode\n} from \"@webiny/website-builder-sdk\";\nimport { InputField } from \"./InputField.js\";\nimport {\n    ObjectFieldHeader,\n    ObjectFieldPanel,\n    ObjectRow,\n    useDrawerDepth\n} from \"~/inputRenderers/ObjectInput/index.js\";\n\ninterface ObjectFieldProps {\n    node: InputAstNode;\n    element: DocumentElement;\n    bindings: DocumentElementBindings[\"inputs\"];\n}\n\n/**\n * A single (non-list) object field. Rendered as one row that opens a drawer containing the\n * object's child inputs, recursed through `InputField`.\n */\nexport function ObjectField({ element, node, bindings }: ObjectFieldProps) {\n    const [open, setOpen] = useState(false);\n    const depth = useDrawerDepth();\n    const label = node.input.label ?? node.name;\n\n    return (\n        <div className={\"flex flex-col gap-xs\"}>\n            <ObjectFieldHeader description={node.input.description} />\n            <ObjectRow title={label} onOpen={() => setOpen(true)} />\n            <ObjectFieldPanel\n                open={open}\n                onClose={() => setOpen(false)}\n                title={label}\n                depth={depth}\n            >\n                {node.children.map(child => (\n                    <InputField\n                        key={child.path}\n                        element={element}\n                        node={child}\n                        bindings={bindings}\n                    />\n                ))}\n            </ObjectFieldPanel>\n        </div>\n    );\n}\n"],"names":["ObjectField","element","node","bindings","open","setOpen","useState","depth","useDrawerDepth","label","ObjectFieldHeader","ObjectRow","ObjectFieldPanel","child","InputField"],"mappings":";;;AAwBO,SAASA,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAoB;IACrE,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAMC,QAAQC;IACd,MAAMC,QAAQP,KAAK,KAAK,CAAC,KAAK,IAAIA,KAAK,IAAI;IAE3C,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,mBAAiBA;QAAC,aAAaR,KAAK,KAAK,CAAC,WAAW;sBACtD,oBAACS,WAASA;QAAC,OAAOF;QAAO,QAAQ,IAAMJ,QAAQ;sBAC/C,oBAACO,kBAAgBA;QACb,MAAMR;QACN,SAAS,IAAMC,QAAQ;QACvB,OAAOI;QACP,OAAOF;OAENL,KAAK,QAAQ,CAAC,GAAG,CAACW,CAAAA,QAAAA,WAAAA,GACf,oBAACC,YAAUA;YACP,KAAKD,MAAM,IAAI;YACf,SAASZ;YACT,MAAMY;YACN,UAAUV;;AAMlC"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { DocumentElement, DocumentElementBindings, InputAstNode } from "@webiny/website-builder-sdk";
+interface ObjectListFieldProps {
+    node: InputAstNode;
+    element: DocumentElement;
+    bindings: DocumentElementBindings["inputs"];
+}
+/**
+ * A repeatable (list) object field. Rendered as a list of rows (one per item) plus an "Add"
+ * button; clicking a row opens that item's drawer. Add / remove / reorder rewrite the whole array
+ * and commit it through the container's `onChange`. Each item's fields are rendered as nested
+ * `InputField`s with index-qualified paths (e.g. `items/0/label`).
+ */
+export declare function ObjectListField({ element, node, bindings }: ObjectListFieldProps): React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.js

@@ -0,0 +1,111 @@
+import react, { useState } from "react";
+import { InputField } from "./InputField.js";
+import { useInputValue } from "./useInputValue.js";
+import { buildDefaultObject } from "./buildDefaultObject.js";
+import { ObjectAddButton, ObjectEmptyState, ObjectFieldHeader, ObjectFieldPanel, ObjectRow, ObjectRowActions, useDrawerDepth } from "../../../../inputRenderers/ObjectInput/index.js";
+function ObjectListField({ element, node, bindings }) {
+    const { value, onChange } = useInputValue(element.id, node);
+    const items = Array.isArray(value) ? value : [];
+    const [openIndex, setOpenIndex] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const depth = useDrawerDepth();
+    const label = node.input.label ?? node.name;
+    const openItem = (index)=>{
+        setActiveIndex(index);
+        setOpenIndex(index);
+    };
+    const commit = (next)=>{
+        onChange(({ value })=>{
+            value.set(next);
+        });
+    };
+    const handleAdd = ()=>{
+        commit([
+            ...items,
+            buildDefaultObject(node.children)
+        ]);
+    };
+    const handleRemove = (index)=>{
+        setOpenIndex(null);
+        commit(items.filter((_, i)=>i !== index));
+    };
+    const handleMoveUp = (index)=>{
+        if (index <= 0) return;
+        const next = [
+            ...items
+        ];
+        [next[index - 1], next[index]] = [
+            next[index],
+            next[index - 1]
+        ];
+        commit(next);
+    };
+    const handleMoveDown = (index)=>{
+        if (index >= items.length - 1) return;
+        const next = [
+            ...items
+        ];
+        [next[index], next[index + 1]] = [
+            next[index + 1],
+            next[index]
+        ];
+        commit(next);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(ObjectFieldHeader, {
+        label: label,
+        description: node.input.description
+    }), 0 === items.length ? /*#__PURE__*/ react.createElement(ObjectEmptyState, {
+        onAdd: handleAdd
+    }) : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, items.map((item, index)=>/*#__PURE__*/ react.createElement(ObjectRow, {
+            key: `${node.path}/${index}`,
+            title: deriveItemTitle(node, item, index),
+            onOpen: ()=>openItem(index),
+            actions: /*#__PURE__*/ react.createElement(ObjectRowActions, {
+                onMoveUp: ()=>handleMoveUp(index),
+                onMoveDown: ()=>handleMoveDown(index),
+                onRemove: ()=>handleRemove(index),
+                canMoveUp: index > 0,
+                canMoveDown: index < items.length - 1
+            })
+        }))), /*#__PURE__*/ react.createElement(ObjectAddButton, {
+        onClick: handleAdd
+    })), /*#__PURE__*/ react.createElement(ObjectFieldPanel, {
+        open: null !== openIndex,
+        onClose: ()=>setOpenIndex(null),
+        title: deriveItemTitle(node, items[activeIndex], activeIndex),
+        depth: depth
+    }, node.children.map((child)=>{
+        const indexedChild = withIndexedPath(child, node.path, activeIndex);
+        return /*#__PURE__*/ react.createElement(InputField, {
+            key: indexedChild.path,
+            element: element,
+            node: indexedChild,
+            bindings: bindings
+        });
+    })));
+}
+function deriveItemTitle(node, item, index) {
+    const label = node.input.label ?? node.name;
+    if (item && "object" == typeof item) for (const child of node.children){
+        const childValue = item[child.name];
+        if (("text" === child.type || "longText" === child.type) && "string" == typeof childValue && childValue.trim()) return childValue;
+    }
+    return `${label} #${index + 1}`;
+}
+function withIndexedPath(node, listPath, index) {
+    const prefix = `${listPath}/`;
+    const indexedPrefix = `${listPath}/${index}/`;
+    const rewrite = (current)=>({
+            ...current,
+            path: current.path.startsWith(prefix) ? indexedPrefix + current.path.slice(prefix.length) : current.path,
+            children: current.children.map(rewrite)
+        });
+    return rewrite(node);
+}
+export { ObjectListField };
+
+//# sourceMappingURL=ObjectListField.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    InputAstNode\n} from \"@webiny/website-builder-sdk\";\nimport { InputField } from \"./InputField.js\";\nimport { useInputValue } from \"./useInputValue.js\";\nimport { buildDefaultObject } from \"./buildDefaultObject.js\";\nimport {\n    ObjectAddButton,\n    ObjectEmptyState,\n    ObjectFieldHeader,\n    ObjectFieldPanel,\n    ObjectRow,\n    ObjectRowActions,\n    useDrawerDepth\n} from \"~/inputRenderers/ObjectInput/index.js\";\n\ninterface ObjectListFieldProps {\n    node: InputAstNode;\n    element: DocumentElement;\n    bindings: DocumentElementBindings[\"inputs\"];\n}\n\n/**\n * A repeatable (list) object field. Rendered as a list of rows (one per item) plus an \"Add\"\n * button; clicking a row opens that item's drawer. Add / remove / reorder rewrite the whole array\n * and commit it through the container's `onChange`. Each item's fields are rendered as nested\n * `InputField`s with index-qualified paths (e.g. `items/0/label`).\n */\nexport function ObjectListField({ element, node, bindings }: ObjectListFieldProps) {\n    const { value, onChange } = useInputValue(element.id, node);\n    const items: any[] = Array.isArray(value) ? value : [];\n    const [openIndex, setOpenIndex] = useState<number | null>(null);\n    // The index whose panel is shown. Retained while closing so the content stays put during the\n    // exit transition (openIndex goes null immediately, activeIndex lingers).\n    const [activeIndex, setActiveIndex] = useState(0);\n    const depth = useDrawerDepth();\n    const label = node.input.label ?? node.name;\n\n    const openItem = (index: number) => {\n        setActiveIndex(index);\n        setOpenIndex(index);\n    };\n\n    const commit = (next: any[]) => {\n        onChange(({ value }) => {\n            value.set(next);\n        });\n    };\n\n    const handleAdd = () => {\n        commit([...items, buildDefaultObject(node.children)]);\n    };\n\n    const handleRemove = (index: number) => {\n        setOpenIndex(null);\n        commit(items.filter((_, i) => i !== index));\n    };\n\n    const handleMoveUp = (index: number) => {\n        if (index <= 0) {\n            return;\n        }\n        const next = [...items];\n        [next[index - 1], next[index]] = [next[index], next[index - 1]];\n        commit(next);\n    };\n\n    const handleMoveDown = (index: number) => {\n        if (index >= items.length - 1) {\n            return;\n        }\n        const next = [...items];\n        [next[index], next[index + 1]] = [next[index + 1], next[index]];\n        commit(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <ObjectFieldHeader label={label} description={node.input.description} />\n\n            {items.length === 0 ? (\n                <ObjectEmptyState onAdd={handleAdd} />\n            ) : (\n                <>\n                    <div className={\"flex flex-col gap-sm\"}>\n                        {items.map((item, index) => (\n                            <ObjectRow\n                                key={`${node.path}/${index}`}\n                                title={deriveItemTitle(node, item, index)}\n                                onOpen={() => openItem(index)}\n                                actions={\n                                    <ObjectRowActions\n                                        onMoveUp={() => handleMoveUp(index)}\n                                        onMoveDown={() => handleMoveDown(index)}\n                                        onRemove={() => handleRemove(index)}\n                                        canMoveUp={index > 0}\n                                        canMoveDown={index < items.length - 1}\n                                    />\n                                }\n                            />\n                        ))}\n                    </div>\n                    <ObjectAddButton onClick={handleAdd} />\n                </>\n            )}\n\n            <ObjectFieldPanel\n                open={openIndex !== null}\n                onClose={() => setOpenIndex(null)}\n                title={deriveItemTitle(node, items[activeIndex], activeIndex)}\n                depth={depth}\n            >\n                {node.children.map(child => {\n                    const indexedChild = withIndexedPath(child, node.path, activeIndex);\n                    return (\n                        <InputField\n                            key={indexedChild.path}\n                            element={element}\n                            node={indexedChild}\n                            bindings={bindings}\n                        />\n                    );\n                })}\n            </ObjectFieldPanel>\n        </div>\n    );\n}\n\n/**\n * Derives a human-readable title for a list item: the first non-empty text value found among its\n * fields, falling back to \"<label> #<n>\".\n */\nfunction deriveItemTitle(node: InputAstNode, item: any, index: number): string {\n    const label = node.input.label ?? node.name;\n\n    if (item && typeof item === \"object\") {\n        for (const child of node.children) {\n            const childValue = item[child.name];\n            if (\n                (child.type === \"text\" || child.type === \"longText\") &&\n                typeof childValue === \"string\" &&\n                childValue.trim()\n            ) {\n                return childValue;\n            }\n        }\n    }\n\n    return `${label} #${index + 1}`;\n}\n\n/**\n * Rewrites an AST node (and its descendants) so that paths under a list container include the\n * given item index, e.g. `items/label` -> `items/0/label`.\n */\nfunction withIndexedPath(node: InputAstNode, listPath: string, index: number): InputAstNode {\n    const prefix = `${listPath}/`;\n    const indexedPrefix = `${listPath}/${index}/`;\n\n    const rewrite = (current: InputAstNode): InputAstNode => ({\n        ...current,\n        path: current.path.startsWith(prefix)\n            ? indexedPrefix + current.path.slice(prefix.length)\n            : current.path,\n        children: current.children.map(rewrite)\n    });\n\n    return rewrite(node);\n}\n"],"names":["ObjectListField","element","node","bindings","value","onChange","useInputValue","items","Array","openIndex","setOpenIndex","useState","activeIndex","setActiveIndex","depth","useDrawerDepth","label","openItem","index","commit","next","handleAdd","buildDefaultObject","handleRemove","_","i","handleMoveUp","handleMoveDown","ObjectFieldHeader","ObjectEmptyState","item","ObjectRow","deriveItemTitle","ObjectRowActions","ObjectAddButton","ObjectFieldPanel","child","indexedChild","withIndexedPath","InputField","childValue","listPath","prefix","indexedPrefix","rewrite","current"],"mappings":";;;;;AA+BO,SAASA,gBAAgB,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAwB;IAC7E,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,cAAcL,QAAQ,EAAE,EAAEC;IACtD,MAAMK,QAAeC,MAAM,OAAO,CAACJ,SAASA,QAAQ,EAAE;IACtD,MAAM,CAACK,WAAWC,aAAa,GAAGC,SAAwB;IAG1D,MAAM,CAACC,aAAaC,eAAe,GAAGF,SAAS;IAC/C,MAAMG,QAAQC;IACd,MAAMC,QAAQd,KAAK,KAAK,CAAC,KAAK,IAAIA,KAAK,IAAI;IAE3C,MAAMe,WAAW,CAACC;QACdL,eAAeK;QACfR,aAAaQ;IACjB;IAEA,MAAMC,SAAS,CAACC;QACZf,SAAS,CAAC,EAAED,KAAK,EAAE;YACfA,MAAM,GAAG,CAACgB;QACd;IACJ;IAEA,MAAMC,YAAY;QACdF,OAAO;eAAIZ;YAAOe,mBAAmBpB,KAAK,QAAQ;SAAE;IACxD;IAEA,MAAMqB,eAAe,CAACL;QAClBR,aAAa;QACbS,OAAOZ,MAAM,MAAM,CAAC,CAACiB,GAAGC,IAAMA,MAAMP;IACxC;IAEA,MAAMQ,eAAe,CAACR;QAClB,IAAIA,SAAS,GACT;QAEJ,MAAME,OAAO;eAAIb;SAAM;QACvB,CAACa,IAAI,CAACF,QAAQ,EAAE,EAAEE,IAAI,CAACF,MAAM,CAAC,GAAG;YAACE,IAAI,CAACF,MAAM;YAAEE,IAAI,CAACF,QAAQ,EAAE;SAAC;QAC/DC,OAAOC;IACX;IAEA,MAAMO,iBAAiB,CAACT;QACpB,IAAIA,SAASX,MAAM,MAAM,GAAG,GACxB;QAEJ,MAAMa,OAAO;eAAIb;SAAM;QACvB,CAACa,IAAI,CAACF,MAAM,EAAEE,IAAI,CAACF,QAAQ,EAAE,CAAC,GAAG;YAACE,IAAI,CAACF,QAAQ,EAAE;YAAEE,IAAI,CAACF,MAAM;SAAC;QAC/DC,OAAOC;IACX;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,mBAAiBA;QAAC,OAAOZ;QAAO,aAAad,KAAK,KAAK,CAAC,WAAW;QAEnEK,AAAiB,MAAjBA,MAAM,MAAM,GAAS,WAAJ,GACd,oBAACsB,kBAAgBA;QAAC,OAAOR;uBAEzB,wDACI,oBAAC;QAAI,WAAW;OACXd,MAAM,GAAG,CAAC,CAACuB,MAAMZ,QAAAA,WAAAA,GACd,oBAACa,WAASA;YACN,KAAK,GAAG7B,KAAK,IAAI,CAAC,CAAC,EAAEgB,OAAO;YAC5B,OAAOc,gBAAgB9B,MAAM4B,MAAMZ;YACnC,QAAQ,IAAMD,SAASC;YACvB,uBACI,oBAACe,kBAAgBA;gBACb,UAAU,IAAMP,aAAaR;gBAC7B,YAAY,IAAMS,eAAeT;gBACjC,UAAU,IAAMK,aAAaL;gBAC7B,WAAWA,QAAQ;gBACnB,aAAaA,QAAQX,MAAM,MAAM,GAAG;;4BAMxD,oBAAC2B,iBAAeA;QAAC,SAASb;uBAIlC,oBAACc,kBAAgBA;QACb,MAAM1B,AAAc,SAAdA;QACN,SAAS,IAAMC,aAAa;QAC5B,OAAOsB,gBAAgB9B,MAAMK,KAAK,CAACK,YAAY,EAAEA;QACjD,OAAOE;OAENZ,KAAK,QAAQ,CAAC,GAAG,CAACkC,CAAAA;QACf,MAAMC,eAAeC,gBAAgBF,OAAOlC,KAAK,IAAI,EAAEU;QACvD,OAAO,WAAP,GACI,oBAAC2B,YAAUA;YACP,KAAKF,aAAa,IAAI;YACtB,SAASpC;YACT,MAAMoC;YACN,UAAUlC;;IAGtB;AAIhB;AAMA,SAAS6B,gBAAgB9B,IAAkB,EAAE4B,IAAS,EAAEZ,KAAa;IACjE,MAAMF,QAAQd,KAAK,KAAK,CAAC,KAAK,IAAIA,KAAK,IAAI;IAE3C,IAAI4B,QAAQ,AAAgB,YAAhB,OAAOA,MACf,KAAK,MAAMM,SAASlC,KAAK,QAAQ,CAAE;QAC/B,MAAMsC,aAAaV,IAAI,CAACM,MAAM,IAAI,CAAC;QACnC,IACKA,AAAAA,CAAAA,AAAe,WAAfA,MAAM,IAAI,IAAeA,AAAe,eAAfA,MAAM,IAAI,AAAc,KAClD,AAAsB,YAAtB,OAAOI,cACPA,WAAW,IAAI,IAEf,OAAOA;IAEf;IAGJ,OAAO,GAAGxB,MAAM,EAAE,EAAEE,QAAQ,GAAG;AACnC;AAMA,SAASoB,gBAAgBpC,IAAkB,EAAEuC,QAAgB,EAAEvB,KAAa;IACxE,MAAMwB,SAAS,GAAGD,SAAS,CAAC,CAAC;IAC7B,MAAME,gBAAgB,GAAGF,SAAS,CAAC,EAAEvB,MAAM,CAAC,CAAC;IAE7C,MAAM0B,UAAU,CAACC,UAAyC;YACtD,GAAGA,OAAO;YACV,MAAMA,QAAQ,IAAI,CAAC,UAAU,CAACH,UACxBC,gBAAgBE,QAAQ,IAAI,CAAC,KAAK,CAACH,OAAO,MAAM,IAChDG,QAAQ,IAAI;YAClB,UAAUA,QAAQ,QAAQ,CAAC,GAAG,CAACD;QACnC;IAEA,OAAOA,QAAQ1C;AACnB"}