npm - @webiny/app-website-builder - Versions diffs - 6.4.5 → 6.6.0-alpha.0 - Mend

@webiny/app-website-builder 6.4.5 → 6.6.0-alpha.0

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 (1530) hide show

package/BaseEditor/defaultConfig/DefaultEditorConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/DefaultEditorConfig.js","sources":["../../../src/BaseEditor/defaultConfig/DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/config/index.js\";\nimport { SidebarEmptyState } from \"./Sidebar/SidebarEmptyState.js\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup.js\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties.js\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup.js\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab.js\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab.js\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers/index.js\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings.js\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers.js\";\nimport { ContentPreviewConfig } from \"./Content/ContentPreviewConfig.js\";\~~nimport { CloneElementAction } from \"./Sidebar/ElementActions/CloneElementAction.js\";\nimport { DeleteElementAction } from \"./Sidebar/ElementActions/DeleteElementAction.js\";\~~n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n return (\n <Ui.NoActiveElement>\n <SidebarEmptyState message={\"Select an element in the canvas to edit properties.\"} />\n </Ui.NoActiveElement>\n );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n return (\n <>\n <CommandHandlers />\n <EditorConfig>\n <ElementInputRenderers />\n <ContentPreviewConfig />\n <Ui.Toolbar.Element\n name={\"insertElements\"}\n group={\"tabs\"}\n element={<InsertElementsTab />}\n />\n <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n {/* Sidebar Groups /}\n <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n {/ Style Settings Tab /}\n <Ui.Sidebar.Element\n name={\"styleSettings\"}\n group={\"style\"}\n element={\n <Ui.OnActiveElement>\n <StyleProperties />\n </Ui.OnActiveElement>\n }\n />\n <Ui.Sidebar.Element\n name={\"styleInactive\"}\n group={\"style\"}\n element={<ClickToActivate />}\n />\n {/ Element Settings Tab /}\n <Ui.Sidebar.Element\n name={\"elementInactive\"}\n group={\"element\"}\n element={<ClickToActivate />}\n />\n {/ This element renders element properties. /}\n <Ui.Sidebar.Element\n name={\"elementSettings\"}\n group={\"element\"}\n element={\n <Ui.OnActiveElement>\n <ElementSettings />\n </Ui.OnActiveElement>\n }\n />\n {/<Ui.Sidebar.Element\n name={\"stateEditor\"}\n group={\"element\"}\n element={<DocumentStateEditor />}\n />/}\n {/ Element Actions (dropdown menu items) */}\n <EditorConfig.ElementAction\n name={\"cloneElement\"}\n element={<CloneElementAction />}\n />\n <EditorConfig.ElementAction\n name={\"deleteElement\"}\n element={<DeleteElementAction />}\n after={\"cloneElement\"}\n />\n </EditorConfig>\n </>\n );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"names":["Ui","EditorConfig","ClickToActivate","SidebarEmptyState","DefaultEditorConfig","React","CommandHandlers","ElementInputRenderers","ContentPreviewConfig","InsertElementsTab","NavigatorTab","ElementSettingsGroup","StyleSettingsGroup","StyleProperties","ElementSettings"~~,"CloneElementAction","DeleteElementAction"~~],"mappings":"~~;;;;;;;;;;;;;;AAeA~~,MAAM,EAAEA,IAAAA,EAAE,EAAE,GAAGC;AAEf,MAAMC,kBAAkB,IACb,WAAP,GACI,oBAACF,GAAG,eAAe,sBACf,oBAACG,mBAAiBA;QAAC,SAAS;;AAKjC,MAAMC,sBAAsB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IACnC,WAAP,GACI,wDACI,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACL,cAAYA,MAAAA,WAAAA,GACT,oBAACM,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACR,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACS,mBAAiBA;sBAE/B,oBAACT,GAAG,OAAO,CAAC,OAAO;QAAC,MAAM;QAAa,OAAO;QAAQ,uBAAS,oBAACU,cAAYA;sBAE5E,oBAACV,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAW,uBAAS,oBAACW,sBAAoBA;sBACjE,oBAACX,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAS,uBAAS,oBAACY,oBAAkBA;sBAE7D,oBAACZ,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACa,iBAAeA;sBAI5B,oBAACb,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACc,iBAAeA~~;sBAU5B,oBAACb,aAAa,aAAa;QACvB,MAAM;QACN,uBAAS,oBAACc,oBAAkBA;sBAEhC,oBAACd,aAAa,aAAa;QACvB,MAAM;QACN,uBAAS,oBAACe,qBAAmBA;QAC7B,OAAO~~;;~~AAO3BZ~~,oBAAoB,WAAW,GAAG"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/DefaultEditorConfig.js","sources":["../../../src/BaseEditor/defaultConfig/DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/config/index.js\";\nimport { SidebarEmptyState } from \"./Sidebar/SidebarEmptyState.js\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup.js\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties.js\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup.js\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab.js\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab.js\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers/index.js\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings.js\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers.js\";\nimport { ContentPreviewConfig } from \"./Content/ContentPreviewConfig.js\";\n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n return (\n <Ui.NoActiveElement>\n <SidebarEmptyState message={\"Select an element in the canvas to edit properties.\"} />\n </Ui.NoActiveElement>\n );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n return (\n <>\n <CommandHandlers />\n <EditorConfig>\n <ElementInputRenderers />\n <ContentPreviewConfig />\n <Ui.Toolbar.Element\n name={\"insertElements\"}\n group={\"tabs\"}\n element={<InsertElementsTab />}\n />\n <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n {/* Sidebar Groups /}\n <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n {/ Style Settings Tab /}\n <Ui.Sidebar.Element\n name={\"styleSettings\"}\n group={\"style\"}\n element={\n <Ui.OnActiveElement>\n <StyleProperties />\n </Ui.OnActiveElement>\n }\n />\n <Ui.Sidebar.Element\n name={\"styleInactive\"}\n group={\"style\"}\n element={<ClickToActivate />}\n />\n {/ Element Settings Tab /}\n <Ui.Sidebar.Element\n name={\"elementInactive\"}\n group={\"element\"}\n element={<ClickToActivate />}\n />\n {/ This element renders element properties. /}\n <Ui.Sidebar.Element\n name={\"elementSettings\"}\n group={\"element\"}\n element={\n <Ui.OnActiveElement>\n <ElementSettings />\n </Ui.OnActiveElement>\n }\n />\n {/<Ui.Sidebar.Element\n name={\"stateEditor\"}\n group={\"element\"}\n element={<DocumentStateEditor />}\n />*/}\n </EditorConfig>\n </>\n );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"names":["Ui","EditorConfig","ClickToActivate","SidebarEmptyState","DefaultEditorConfig","React","CommandHandlers","ElementInputRenderers","ContentPreviewConfig","InsertElementsTab","NavigatorTab","ElementSettingsGroup","StyleSettingsGroup","StyleProperties","ElementSettings"],"mappings":";;;;;;;;;;;;AAaA,MAAM,EAAEA,IAAAA,EAAE,EAAE,GAAGC;AAEf,MAAMC,kBAAkB,IACb,WAAP,GACI,oBAACF,GAAG,eAAe,sBACf,oBAACG,mBAAiBA;QAAC,SAAS;;AAKjC,MAAMC,sBAAsB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IACnC,WAAP,GACI,wDACI,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACL,cAAYA,MAAAA,WAAAA,GACT,oBAACM,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACR,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACS,mBAAiBA;sBAE/B,oBAACT,GAAG,OAAO,CAAC,OAAO;QAAC,MAAM;QAAa,OAAO;QAAQ,uBAAS,oBAACU,cAAYA;sBAE5E,oBAACV,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAW,uBAAS,oBAACW,sBAAoBA;sBACjE,oBAACX,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAS,uBAAS,oBAACY,oBAAkBA;sBAE7D,oBAACZ,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACa,iBAAeA;sBAI5B,oBAACb,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACc,iBAAeA;;AAc5CV,oBAAoB,WAAW,GAAG"}

package/BaseEditor/defaultConfig/ElementInputRenderers.js CHANGED Viewed

@@ -11,6 +11,7 @@ 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";
 const ElementInputRenderers = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Slot",
         component: SlotInputRenderer
@@ -41,6 +42,9 @@ 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
     }));
 export { ElementInputRenderers };

package/BaseEditor/defaultConfig/ElementInputRenderers.js.map CHANGED Viewed

	@@ -1 +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"}
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\";\nimport { ObjectInputRenderer } from \"~/inputRenderers/ObjectInput/ObjectInputRenderer.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 <EditorConfig.ElementInput.Renderer\n name={\"Webiny/Object\"}\n component={ObjectInputRenderer}\n />\n </>\n );\n};\n"],"names":["ElementInputRenderers","EditorConfig","SlotInputRenderer","TextInputRenderer","SelectInputRenderer","TextareaInputRenderer","NumberInputRenderer","DefaultLexicalConfig","LexicalInputRenderer","BooleanInputRenderer","GridLayoutInputRenderer","FileInputRenderer","FragmentSelectorInputRenderer","ObjectInputRenderer"],"mappings":";;;;;;;;;;;;;;AAeO,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;sBAEf,oBAACX,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWY"}

package/BaseEditor/defaultConfig/Sidebar/ElementPreview.js CHANGED Viewed

@@ -1,14 +1,10 @@
 import react from "react";
 import { useComponent } from "../../hooks/useComponent.js";
-import { DropdownMenu, Icon, IconButton } from "@webiny/admin-ui";
+import { Icon } 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"
@@ -20,13 +16,7 @@ const ElementPreview = ({ element })=>{
         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)));
+    }, component.label ?? element.component.name));
 };
 export { ElementPreview };

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

	@@ -1 +1 @@
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~~"}
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 { Icon } from \"@webiny/admin-ui\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.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 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 );\n};\n"],"names":["ElementPreview","element","component","useComponent","Icon","InlineSvg"],"mappings":";;;;AAUO,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;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;AAI1D"}

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

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

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

	@@ -1 +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~~"}
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, 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 ADDED Viewed

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

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

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

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

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

@@ -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"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/buildDefaultObject.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { InputAstNode } from "@webiny/website-builder-sdk";
+/**
+ * Builds a default value for a single input node, falling back to a type-based empty when no
+ * explicit `defaultValue` is configured. Nested objects are built recursively.
+ */
+export declare function buildDefaultValue(node: InputAstNode): any;
+/**
+ * Builds a default object for an object field from its child input nodes.
+ */
+export declare function buildDefaultObject(children: InputAstNode[]): Record<string, any>;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/buildDefaultObject.js ADDED Viewed

@@ -0,0 +1,29 @@
+function emptyValueForType(type, list) {
+    if (list) return [];
+    switch(type){
+        case "number":
+            return 0;
+        case "boolean":
+            return false;
+        case "slot":
+            return;
+        default:
+            return "";
+    }
+}
+function buildDefaultValue(node) {
+    if ("object" === node.type) {
+        if (node.list) return node.input.defaultValue ?? [];
+        return buildDefaultObject(node.children);
+    }
+    if (void 0 !== node.input.defaultValue) return node.input.defaultValue;
+    return emptyValueForType(node.type, node.list);
+}
+function buildDefaultObject(children) {
+    const result = {};
+    for (const child of children)result[child.name] = buildDefaultValue(child);
+    return result;
+}
+export { buildDefaultObject, buildDefaultValue };
+//# sourceMappingURL=buildDefaultObject.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/buildDefaultObject.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/buildDefaultObject.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/buildDefaultObject.ts"],"sourcesContent":["import type { InputAstNode } from \"@webiny/website-builder-sdk\";\n\n/**\n * Returns a sensible empty value for a leaf input type. This guarantees that a freshly added\n * list item has at least one defined leaf binding - without it, an \"empty\" item produces no\n * bindings at all and would silently disappear on the next render (the item count is derived\n * from the flat leaf bindings).\n */\nfunction emptyValueForType(type: string, list: boolean): any {\n if (list) {\n return [];\n }\n\n switch (type) {\n case \"number\":\n return 0;\n case \"boolean\":\n return false;\n case \"slot\":\n return undefined;\n default:\n return \"\";\n }\n}\n\n/**\n * Builds a default value for a single input node, falling back to a type-based empty when no\n * explicit `defaultValue` is configured. Nested objects are built recursively.\n */\nexport function buildDefaultValue(node: InputAstNode): any {\n if (node.type === \"object\") {\n if (node.list) {\n return node.input.defaultValue ?? [];\n }\n\n return buildDefaultObject(node.children);\n }\n\n if (node.input.defaultValue !== undefined) {\n return node.input.defaultValue;\n }\n\n return emptyValueForType(node.type, node.list);\n}\n\n/**\n * Builds a default object for an object field from its child input nodes.\n */\nexport function buildDefaultObject(children: InputAstNode[]): Record<string, any> {\n const result: Record<string, any> = {};\n\n for (const child of children) {\n result[child.name] = buildDefaultValue(child);\n }\n\n return result;\n}\n"],"names":["emptyValueForType","type","list","buildDefaultValue","node","buildDefaultObject","undefined","children","result","child"],"mappings":"AAQA,SAASA,kBAAkBC,IAAY,EAAEC,IAAa;IAClD,IAAIA,MACA,OAAO,EAAE;IAGb,OAAQD;QACJ,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD;QACJ;YACI,OAAO;IACf;AACJ;AAMO,SAASE,kBAAkBC,IAAkB;IAChD,IAAIA,AAAc,aAAdA,KAAK,IAAI,EAAe;QACxB,IAAIA,KAAK,IAAI,EACT,OAAOA,KAAK,KAAK,CAAC,YAAY,IAAI,EAAE;QAGxC,OAAOC,mBAAmBD,KAAK,QAAQ;IAC3C;IAEA,IAAIA,AAA4BE,WAA5BF,KAAK,KAAK,CAAC,YAAY,EACvB,OAAOA,KAAK,KAAK,CAAC,YAAY;IAGlC,OAAOJ,kBAAkBI,KAAK,IAAI,EAAEA,KAAK,IAAI;AACjD;AAKO,SAASC,mBAAmBE,QAAwB;IACvD,MAAMC,SAA8B,CAAC;IAErC,KAAK,MAAMC,SAASF,SAChBC,MAAM,CAACC,MAAM,IAAI,CAAC,GAAGN,kBAAkBM;IAG3C,OAAOD;AACX"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useBindingsForElement.d.ts CHANGED Viewed

@@ -3,20 +3,6 @@ export declare const useBindingsForElement: (elementId: string) => {
     resolvedBindings: import("@webiny/website-builder-sdk").DocumentElementBindings & {
         inputs: import("@webiny/website-builder-sdk").DocumentElementInputBindings;
         styles: Partial<{
-            clipPath?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipPath | undefined> | undefined;
-            filter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Filter | undefined> | undefined;
-            mask?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Mask<string | number> | undefined> | undefined;
-            transform?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Transform | undefined> | undefined;
-            fill?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Fill | undefined> | undefined;
-            height?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Height<string | number> | undefined> | undefined;
-            left?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Left<string | number> | undefined> | undefined;
-            top?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Top<string | number> | undefined> | undefined;
-            width?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Width<string | number> | undefined> | undefined;
-            position?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Position | undefined> | undefined;
-            content?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Content | undefined> | undefined;
-            display?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Display | undefined> | undefined;
-            flexDirection?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexDirection | undefined> | undefined;
-            overflowY?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowY | undefined> | undefined;
             accentColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AccentColor | undefined> | undefined;
             alignContent?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AlignContent | undefined> | undefined;
             alignItems?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AlignItems | undefined> | undefined;
@@ -97,6 +83,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             caretColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CaretColor | undefined> | undefined;
             caretShape?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CaretShape | undefined> | undefined;
             clear?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Clear | undefined> | undefined;
+            clipPath?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipPath | undefined> | undefined;
             clipRule?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipRule | undefined> | undefined;
             color?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Color | undefined> | undefined;
             colorAdjust?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PrintColorAdjust | undefined> | undefined;
@@ -117,6 +104,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             containIntrinsicWidth?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainIntrinsicWidth<string | number> | undefined> | undefined;
             containerName?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainerName | undefined> | undefined;
             containerType?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainerType | undefined> | undefined;
+            content?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Content | undefined> | undefined;
             contentVisibility?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContentVisibility | undefined> | undefined;
             counterIncrement?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CounterIncrement | undefined> | undefined;
             counterReset?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CounterReset | undefined> | undefined;
@@ -126,12 +114,16 @@ export declare const useBindingsForElement: (elementId: string) => {
             cy?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Cy<string | number> | undefined> | undefined;
             d?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.D | undefined> | undefined;
             direction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Direction | undefined> | undefined;
+            display?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Display | undefined> | undefined;
             dominantBaseline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.DominantBaseline | undefined> | undefined;
             emptyCells?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.EmptyCells | undefined> | undefined;
             fieldSizing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FieldSizing | undefined> | undefined;
+            fill?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Fill | undefined> | undefined;
             fillOpacity?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FillOpacity | undefined> | undefined;
             fillRule?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FillRule | undefined> | undefined;
+            filter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Filter | undefined> | undefined;
             flexBasis?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexBasis<string | number> | undefined> | undefined;
+            flexDirection?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexDirection | undefined> | undefined;
             flexGrow?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexGrow | undefined> | undefined;
             flexShrink?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexShrink | undefined> | undefined;
             flexWrap?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexWrap | undefined> | undefined;
@@ -175,6 +167,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             gridTemplateColumns?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.GridTemplateColumns<string | number> | undefined> | undefined;
             gridTemplateRows?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.GridTemplateRows<string | number> | undefined> | undefined;
             hangingPunctuation?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HangingPunctuation | undefined> | undefined;
+            height?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Height<string | number> | undefined> | undefined;
             hyphenateCharacter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HyphenateCharacter | undefined> | undefined;
             hyphenateLimitChars?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HyphenateLimitChars | undefined> | undefined;
             hyphens?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Hyphens | undefined> | undefined;
@@ -194,6 +187,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             justifyItems?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifyItems | undefined> | undefined;
             justifySelf?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifySelf | undefined> | undefined;
             justifyTracks?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifyTracks | undefined> | undefined;
+            left?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Left<string | number> | undefined> | undefined;
             letterSpacing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LetterSpacing<string | number> | undefined> | undefined;
             lightingColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LightingColor | undefined> | undefined;
             lineBreak?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LineBreak | undefined> | undefined;
@@ -268,6 +262,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             overflowInline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowInline | undefined> | undefined;
             overflowWrap?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowWrap | undefined> | undefined;
             overflowX?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowX | undefined> | undefined;
+            overflowY?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowY | undefined> | undefined;
             overlay?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Overlay | undefined> | undefined;
             overscrollBehaviorBlock?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverscrollBehaviorBlock | undefined> | undefined;
             overscrollBehaviorInline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverscrollBehaviorInline | undefined> | undefined;
@@ -286,6 +281,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             perspective?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Perspective<string | number> | undefined> | undefined;
             perspectiveOrigin?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PerspectiveOrigin<string | number> | undefined> | undefined;
             pointerEvents?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PointerEvents | undefined> | undefined;
+            position?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Position | undefined> | undefined;
             positionAnchor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionAnchor | undefined> | undefined;
             positionArea?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionArea | undefined> | undefined;
             positionTryFallbacks?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionTryFallbacks | undefined> | undefined;
@@ -381,7 +377,9 @@ export declare const useBindingsForElement: (elementId: string) => {
             textWrapMode?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TextWrapMode | undefined> | undefined;
             textWrapStyle?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TextWrapStyle | undefined> | undefined;
             timelineScope?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TimelineScope | undefined> | undefined;
+            top?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Top<string | number> | undefined> | undefined;
             touchAction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TouchAction | undefined> | undefined;
+            transform?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Transform | undefined> | undefined;
             transformBox?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformBox | undefined> | undefined;
             transformOrigin?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformOrigin<string | number> | undefined> | undefined;
             transformStyle?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformStyle | undefined> | undefined;
@@ -404,6 +402,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             whiteSpace?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WhiteSpace | undefined> | undefined;
             whiteSpaceCollapse?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WhiteSpaceCollapse | undefined> | undefined;
             widows?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Widows | undefined> | undefined;
+            width?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Width<string | number> | undefined> | undefined;
             willChange?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WillChange | undefined> | undefined;
             wordBreak?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WordBreak | undefined> | undefined;
             wordSpacing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WordSpacing<string | number> | undefined> | undefined;
@@ -437,6 +436,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             lineClamp?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LineClamp | undefined> | undefined;
             marginBlock?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.MarginBlock<string | number> | undefined> | undefined;
             marginInline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.MarginInline<string | number> | undefined> | undefined;
+            mask?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Mask<string | number> | undefined> | undefined;
             maskBorder?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.MaskBorder | undefined> | undefined;
             motion?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Offset<string | number> | undefined> | undefined;
             offset?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Offset<string | number> | undefined> | undefined;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import type { ValueBinding } from "@webiny/website-builder-sdk";
 import type { InputAstNode } from "@webiny/website-builder-sdk";
 import { type IMetadata } from "../../../../BaseEditor/metadata/index.js";
 export type OnChangeParams = {
@@ -14,7 +13,7 @@ export declare class InputValueObject {
     unset(): void;
 }
 export declare const useInputValue: (elementId: string, node: InputAstNode) => {
-    value: ValueBinding;
+    value: any;
     metadata: IMetadata;
     inheritanceMap: {
         overridden: boolean;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js CHANGED Viewed

@@ -25,7 +25,12 @@ class InputValueObject {
     }
 }
 function convertBracketPathToDotPath(path) {
-    return path.replace(/\/(\d+)\//g, ".$1");
+    return path.replace(/\//g, ".");
+}
+function getDeepValueAtPath(obj, path) {
+    if (!path) return obj;
+    const keys = path.split("/").map((key)=>/^\d+$/.test(key) ? Number(key) : key);
+    return keys.reduce((acc, key)=>null == acc ? void 0 : acc[key], obj);
 }
 const withTimeout = (cb)=>(...args)=>{
         setTimeout(()=>{
@@ -47,7 +52,17 @@ const useInputValue = (elementId, node)=>{
         elementId,
         rawBindings
     ]);
-    const value = resolvedBindings.inputs[node.path];
+    const value = useMemo(()=>{
+        if (node.children.length > 0) {
+            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+            return getDeepValueAtPath(deepInputs, node.path);
+        }
+        return resolvedBindings.inputs[node.path];
+    }, [
+        resolvedBindings,
+        node.path,
+        inputsProcessor
+    ]);
     const inputMetadata = useMemo(()=>{
         let elementMetadata = new ElementMetadata(elementId, rawBindings.metadata);
         if (node.input.responsive) elementMetadata = new BreakpointElementMetadata(breakpointNames, breakpoint.name, elementMetadata);