@webiny/app-website-builder 6.4.11 → 6.6.0-alpha.1

package/BaseEditor/defaultConfig/Content/usePreviewDomain.js

@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
-import { useGetWebsiteBuilderSettings } from "../../../features/index.js";
+import { useFeature } from "@webiny/app";
+import { GetSettingsFeature } from "../../../features/settings/getSettings/index.js";
 import { useSubscribeToLocalStorage } from "./useSubscribeToLocalStorage.js";
 const CUSTOM_PREVIEW_DOMAIN = "webiny_wb_custom_preview_domain";
+const normalizePreviewDomain = (domain)=>domain.replace(/\/+$/, "");
 const usePreviewDomain = ()=>{
     const [previewDomain, setDomainFromSettings] = useState("");
     const [customDomain, setCustomDomain] = useState(()=>window.localStorage.getItem(CUSTOM_PREVIEW_DOMAIN));
@@ -17,14 +19,14 @@ const usePreviewDomain = ()=>{
     const unsetPreviewDomain = useCallback(()=>{
         localStorage.unset();
     }, []);
-    const { getSettings } = useGetWebsiteBuilderSettings();
+    const { useCase: getSettings } = useFeature(GetSettingsFeature);
     useEffect(()=>{
-        getSettings().then((settings)=>{
+        getSettings.execute().then((settings)=>{
             setDomainFromSettings(settings.previewDomain ?? "http://localhost:3000");
         });
     }, []);
     return {
-        previewDomain: customDomain ?? previewDomain,
+        previewDomain: normalizePreviewDomain(customDomain ?? previewDomain),
         setPreviewDomain,
         unsetPreviewDomain,
         isOverridden: customDomain && customDomain !== previewDomain

package/BaseEditor/defaultConfig/Content/usePreviewDomain.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Content/usePreviewDomain.js","sources":["../../../../src/BaseEditor/defaultConfig/Content/usePreviewDomain.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { useGetWebsiteBuilderSettings } from \"~/features/index.js\";\nimport { useSubscribeToLocalStorage } from \"./useSubscribeToLocalStorage.js\";\n\nconst CUSTOM_PREVIEW_DOMAIN = \"webiny_wb_custom_preview_domain\";\n\n/**\n * This hook loads preview domain from settings, and also takes into account the override\n * via localstorage, which is a developers-only feature.\n */\nexport const usePreviewDomain = () => {\n    const [previewDomain, setDomainFromSettings] = useState<string>(\"\");\n\n    const [customDomain, setCustomDomain] = useState(() =>\n        window.localStorage.getItem(CUSTOM_PREVIEW_DOMAIN)\n    );\n\n    const localStorage = useSubscribeToLocalStorage(CUSTOM_PREVIEW_DOMAIN, newValue => {\n        setCustomDomain(newValue);\n    });\n\n    const setPreviewDomain = useCallback(\n        (domain: string) => {\n            if (domain === previewDomain) {\n                localStorage.unset();\n            } else {\n                localStorage.set(domain);\n            }\n        },\n        [previewDomain]\n    );\n\n    const unsetPreviewDomain = useCallback(() => {\n        localStorage.unset();\n    }, []);\n\n    const { getSettings } = useGetWebsiteBuilderSettings();\n\n    useEffect(() => {\n        getSettings().then(settings => {\n            setDomainFromSettings(settings.previewDomain ?? \"http://localhost:3000\");\n        });\n    }, []);\n\n    return {\n        previewDomain: customDomain ?? previewDomain,\n        setPreviewDomain,\n        unsetPreviewDomain,\n        isOverridden: customDomain && customDomain !== previewDomain\n    };\n};\n"],"names":["CUSTOM_PREVIEW_DOMAIN","usePreviewDomain","previewDomain","setDomainFromSettings","useState","customDomain","setCustomDomain","window","localStorage","useSubscribeToLocalStorage","newValue","setPreviewDomain","useCallback","domain","unsetPreviewDomain","getSettings","useGetWebsiteBuilderSettings","useEffect","settings"],"mappings":";;;AAIA,MAAMA,wBAAwB;AAMvB,MAAMC,mBAAmB;IAC5B,MAAM,CAACC,eAAeC,sBAAsB,GAAGC,SAAiB;IAEhE,MAAM,CAACC,cAAcC,gBAAgB,GAAGF,SAAS,IAC7CG,OAAO,YAAY,CAAC,OAAO,CAACP;IAGhC,MAAMQ,eAAeC,2BAA2BT,uBAAuBU,CAAAA;QACnEJ,gBAAgBI;IACpB;IAEA,MAAMC,mBAAmBC,YACrB,CAACC;QACG,IAAIA,WAAWX,eACXM,aAAa,KAAK;aAElBA,aAAa,GAAG,CAACK;IAEzB,GACA;QAACX;KAAc;IAGnB,MAAMY,qBAAqBF,YAAY;QACnCJ,aAAa,KAAK;IACtB,GAAG,EAAE;IAEL,MAAM,EAAEO,WAAW,EAAE,GAAGC;IAExBC,UAAU;QACNF,cAAc,IAAI,CAACG,CAAAA;YACff,sBAAsBe,SAAS,aAAa,IAAI;QACpD;IACJ,GAAG,EAAE;IAEL,OAAO;QACH,eAAeb,gBAAgBH;QAC/BS;QACAG;QACA,cAAcT,gBAAgBA,iBAAiBH;IACnD;AACJ"}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/usePreviewDomain.js","sources":["../../../../src/BaseEditor/defaultConfig/Content/usePreviewDomain.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { useFeature } from \"@webiny/app\";\nimport { GetSettingsFeature } from \"~/features/settings/getSettings/index.js\";\nimport { useSubscribeToLocalStorage } from \"./useSubscribeToLocalStorage.js\";\n\nconst CUSTOM_PREVIEW_DOMAIN = \"webiny_wb_custom_preview_domain\";\n\n/**\n * Removes trailing slashes from the preview domain, so that concatenating it with a page path\n * (which always starts with a slash) never produces a double slash.\n *\n * We normalize here, at the single point where the domain is read, rather than where it's written.\n * The domain can come from two different sources: the saved settings value (`getSettings`) and the\n * dev-only session override stored in localStorage (`setPreviewDomain`). Normalizing on read covers\n * both sources in one place, and also fixes any values that were already stored with a trailing\n * slash before this normalization existed.\n */\nconst normalizePreviewDomain = (domain: string) => domain.replace(/\\/+$/, \"\");\n\n/**\n * This hook loads preview domain from settings, and also takes into account the override\n * via localstorage, which is a developers-only feature.\n */\nexport const usePreviewDomain = () => {\n    const [previewDomain, setDomainFromSettings] = useState<string>(\"\");\n\n    const [customDomain, setCustomDomain] = useState(() =>\n        window.localStorage.getItem(CUSTOM_PREVIEW_DOMAIN)\n    );\n\n    const localStorage = useSubscribeToLocalStorage(CUSTOM_PREVIEW_DOMAIN, newValue => {\n        setCustomDomain(newValue);\n    });\n\n    const setPreviewDomain = useCallback(\n        (domain: string) => {\n            if (domain === previewDomain) {\n                localStorage.unset();\n            } else {\n                localStorage.set(domain);\n            }\n        },\n        [previewDomain]\n    );\n\n    const unsetPreviewDomain = useCallback(() => {\n        localStorage.unset();\n    }, []);\n\n    const { useCase: getSettings } = useFeature(GetSettingsFeature);\n\n    useEffect(() => {\n        getSettings.execute().then(settings => {\n            setDomainFromSettings(settings.previewDomain ?? \"http://localhost:3000\");\n        });\n    }, []);\n\n    return {\n        previewDomain: normalizePreviewDomain(customDomain ?? previewDomain),\n        setPreviewDomain,\n        unsetPreviewDomain,\n        isOverridden: customDomain && customDomain !== previewDomain\n    };\n};\n"],"names":["CUSTOM_PREVIEW_DOMAIN","normalizePreviewDomain","domain","usePreviewDomain","previewDomain","setDomainFromSettings","useState","customDomain","setCustomDomain","window","localStorage","useSubscribeToLocalStorage","newValue","setPreviewDomain","useCallback","unsetPreviewDomain","getSettings","useFeature","GetSettingsFeature","useEffect","settings"],"mappings":";;;;AAKA,MAAMA,wBAAwB;AAY9B,MAAMC,yBAAyB,CAACC,SAAmBA,OAAO,OAAO,CAAC,QAAQ;AAMnE,MAAMC,mBAAmB;IAC5B,MAAM,CAACC,eAAeC,sBAAsB,GAAGC,SAAiB;IAEhE,MAAM,CAACC,cAAcC,gBAAgB,GAAGF,SAAS,IAC7CG,OAAO,YAAY,CAAC,OAAO,CAACT;IAGhC,MAAMU,eAAeC,2BAA2BX,uBAAuBY,CAAAA;QACnEJ,gBAAgBI;IACpB;IAEA,MAAMC,mBAAmBC,YACrB,CAACZ;QACG,IAAIA,WAAWE,eACXM,aAAa,KAAK;aAElBA,aAAa,GAAG,CAACR;IAEzB,GACA;QAACE;KAAc;IAGnB,MAAMW,qBAAqBD,YAAY;QACnCJ,aAAa,KAAK;IACtB,GAAG,EAAE;IAEL,MAAM,EAAE,SAASM,WAAW,EAAE,GAAGC,WAAWC;IAE5CC,UAAU;QACNH,YAAY,OAAO,GAAG,IAAI,CAACI,CAAAA;YACvBf,sBAAsBe,SAAS,aAAa,IAAI;QACpD;IACJ,GAAG,EAAE;IAEL,OAAO;QACH,eAAenB,uBAAuBM,gBAAgBH;QACtDS;QACAE;QACA,cAAcR,gBAAgBA,iBAAiBH;IACnD;AACJ"}

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

@@ -11,6 +11,8 @@ 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";
 const ElementInputRenderers = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Slot",
         component: SlotInputRenderer
@@ -41,6 +43,12 @@ 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
     }));
 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 { 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\";\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            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/ColorPicker\"}\n                component={ColorPickerInputRenderer}\n            />\n        </>\n    );\n};\n"],"names":["ElementInputRenderers","EditorConfig","SlotInputRenderer","TextInputRenderer","SelectInputRenderer","TextareaInputRenderer","NumberInputRenderer","DefaultLexicalConfig","LexicalInputRenderer","BooleanInputRenderer","GridLayoutInputRenderer","FileInputRenderer","FragmentSelectorInputRenderer","ObjectInputRenderer","ColorPickerInputRenderer"],"mappings":";;;;;;;;;;;;;;;AAgBO,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;sBAEf,oBAACZ,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWa"}

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

@@ -6,7 +6,6 @@ import { InputRenderer } from "./InputRenderer.js";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { InfoMessage } from "../InfoMessage.js";
-import { ElementPreview } from "../ElementPreview.js";
 const ElementInputs = makeDecoratable("ElementInputs", ({ element })=>{
     const component = useComponent(element.component.name);
     const bindings = useSelectFromDocument((document)=>document.bindings[element.id] ?? {
@@ -25,11 +24,7 @@ const ElementInputs = makeDecoratable("ElementInputs", ({ element })=>{
     return /*#__PURE__*/ react.createElement(Grid, {
         gap: "compact",
         className: "pt-md px-sm"
-    }, /*#__PURE__*/ react.createElement(Grid.Column, {
-        span: 12
-    }, /*#__PURE__*/ react.createElement(ElementPreview, {
-        element: element
-    })), hasEditableInputs ? /*#__PURE__*/ react.createElement(react.Fragment, null) : /*#__PURE__*/ react.createElement(Grid.Column, {
+    }, hasEditableInputs ? /*#__PURE__*/ react.createElement(react.Fragment, null) : /*#__PURE__*/ react.createElement(Grid.Column, {
         span: 12
     }, /*#__PURE__*/ react.createElement(InfoMessage, {
         message: "This element has no 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\";\nimport { ElementPreview } from \"../ElementPreview.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            <Grid.Column span={12}>\n                <ElementPreview element={element} />\n            </Grid.Column>\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","ElementPreview","InfoMessage","InputRenderer"],"mappings":";;;;;;;;;AAeO,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;qBAC7B,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,gBAAcA;QAAC,SAASZ;SAE5B,AAACS,oB,cAKE,4CALkB,WAApBA,GACE,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,aAAWA;QAAC,SAAS;SAG1B,cAGJ,oBAACC,eAAaA;QAAC,KAAKd,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

@@ -2,7 +2,10 @@ import react from "react";
 import { Icon } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/notes.svg";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
-const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
+import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
+const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableContainer, {
+        tabIndex: -1
+    }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
         name: "element",
         label: "Element",
         icon: /*#__PURE__*/ react.createElement(Icon, {
@@ -12,7 +15,7 @@ const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(Sidebar.Group
         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 { 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"}
+{"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\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\n\nexport const ElementSettingsGroup = () => (\n    <ScrollableContainer tabIndex={-1}>\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    </ScrollableContainer>\n);\n"],"names":["ElementSettingsGroup","ScrollableContainer","Sidebar","Icon","NotesIcon"],"mappings":";;;;;AAMO,MAAMA,uBAAuB,kBAChC,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,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"}

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

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

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

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