@webiny/website-builder-react 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/components/ElementSlotDepthProvider.js

@@ -1,18 +1,13 @@
 "use client";
-
-import React from "react";
-const ElementSlotDepthContext = /*#__PURE__*/React.createContext(0);
-export const ElementSlotDepthProvider = ({
-  children,
-  depth
-}) => {
-  return /*#__PURE__*/React.createElement(ElementSlotDepthContext.Provider, {
-    value: depth
-  }, children);
-};
-export const useElementSlotDepth = () => {
-  const context = React.useContext(ElementSlotDepthContext);
-  return context ?? 0;
+import react from "react";
+const ElementSlotDepthContext = /*#__PURE__*/ react.createContext(0);
+const ElementSlotDepthProvider = ({ children, depth })=>/*#__PURE__*/ react.createElement(ElementSlotDepthContext.Provider, {
+        value: depth
+    }, children);
+const useElementSlotDepth = ()=>{
+    const context = react.useContext(ElementSlotDepthContext);
+    return context ?? 0;
 };
+export { ElementSlotDepthProvider, useElementSlotDepth };
 
 //# sourceMappingURL=ElementSlotDepthProvider.js.map

package/components/ElementSlotDepthProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ElementSlotDepthContext","createContext","ElementSlotDepthProvider","children","depth","createElement","Provider","value","useElementSlotDepth","context","useContext"],"sources":["ElementSlotDepthProvider.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nconst ElementSlotDepthContext = React.createContext<number>(0);\n\ninterface ElementSlotDepthProviderProps {\n    depth: number;\n    children: React.ReactNode;\n}\n\nexport const ElementSlotDepthProvider = ({ children, depth }: ElementSlotDepthProviderProps) => {\n    return (\n        <ElementSlotDepthContext.Provider value={depth}>\n            {children}\n        </ElementSlotDepthContext.Provider>\n    );\n};\n\nexport const useElementSlotDepth = () => {\n    const context = React.useContext(ElementSlotDepthContext);\n\n    return context ?? 0;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,uBAAuB,gBAAGD,KAAK,CAACE,aAAa,CAAS,CAAC,CAAC;AAO9D,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAqC,CAAC,KAAK;EAC5F,oBACIL,KAAA,CAAAM,aAAA,CAACL,uBAAuB,CAACM,QAAQ;IAACC,KAAK,EAAEH;EAAM,GAC1CD,QAC6B,CAAC;AAE3C,CAAC;AAED,OAAO,MAAMK,mBAAmB,GAAGA,CAAA,KAAM;EACrC,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACV,uBAAuB,CAAC;EAEzD,OAAOS,OAAO,IAAI,CAAC;AACvB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/ElementSlotDepthProvider.js","sources":["../../src/components/ElementSlotDepthProvider.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nconst ElementSlotDepthContext = React.createContext<number>(0);\n\ninterface ElementSlotDepthProviderProps {\n    depth: number;\n    children: React.ReactNode;\n}\n\nexport const ElementSlotDepthProvider = ({ children, depth }: ElementSlotDepthProviderProps) => {\n    return (\n        <ElementSlotDepthContext.Provider value={depth}>\n            {children}\n        </ElementSlotDepthContext.Provider>\n    );\n};\n\nexport const useElementSlotDepth = () => {\n    const context = React.useContext(ElementSlotDepthContext);\n\n    return context ?? 0;\n};\n"],"names":["ElementSlotDepthContext","React","ElementSlotDepthProvider","children","depth","useElementSlotDepth","context"],"mappings":";;AAGA,MAAMA,0BAA0B,WAAHA,GAAGC,MAAAA,aAAmB,CAAS;AAOrD,MAAMC,2BAA2B,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAiC,GAChF,WAAP,GACI,oBAACJ,wBAAwB,QAAQ;QAAC,OAAOI;OACpCD;AAKN,MAAME,sBAAsB;IAC/B,MAAMC,UAAUL,MAAAA,UAAgB,CAACD;IAEjC,OAAOM,WAAW;AACtB"}

package/components/FragmentsProvider.js

@@ -1,43 +1,37 @@
 "use client";
-
-import React, { useEffect } from "react";
+import react, { useEffect } from "react";
 import { contentSdk } from "@webiny/website-builder-sdk";
-const FragmentsContext = /*#__PURE__*/React.createContext(undefined);
-export const FragmentsProvider = ({
-  fragments,
-  children
-}) => {
-  useEffect(() => {
-    if (contentSdk.isEditing()) {
-      // Extract serializable data
-      const fragmentsData = fragments.map(fragment => {
-        if (fragment.type === "fixed") {
-          return {
-            type: "fixed",
-            name: fragment.name
-          };
+const FragmentsContext = /*#__PURE__*/ react.createContext(void 0);
+const FragmentsProvider = ({ fragments, children })=>{
+    useEffect(()=>{
+        if (contentSdk.isEditing()) {
+            const fragmentsData = fragments.map((fragment)=>{
+                if ("fixed" === fragment.type) return {
+                    type: "fixed",
+                    name: fragment.name
+                };
+                return {
+                    type: "component",
+                    component: fragment.component,
+                    inputs: fragment.inputs
+                };
+            });
+            contentSdk.getEditingSdk().messenger.send("document.fragments", {
+                fragments: fragmentsData
+            });
         }
-        return {
-          type: "component",
-          component: fragment.component,
-          inputs: fragment.inputs
-        };
-      });
-      contentSdk.getEditingSdk().messenger.send("document.fragments", {
-        fragments: fragmentsData
-      });
-    }
-  }, [fragments.length]);
-  return /*#__PURE__*/React.createElement(FragmentsContext.Provider, {
-    value: fragments
-  }, children);
+    }, [
+        fragments.length
+    ]);
+    return /*#__PURE__*/ react.createElement(FragmentsContext.Provider, {
+        value: fragments
+    }, children);
 };
-export const useDocumentFragments = () => {
-  const context = React.useContext(FragmentsContext);
-  if (!context) {
-    return [];
-  }
-  return context;
+const useDocumentFragments = ()=>{
+    const context = react.useContext(FragmentsContext);
+    if (!context) return [];
+    return context;
 };
+export { FragmentsProvider, useDocumentFragments };
 
 //# sourceMappingURL=FragmentsProvider.js.map

package/components/FragmentsProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","contentSdk","FragmentsContext","createContext","undefined","FragmentsProvider","fragments","children","isEditing","fragmentsData","map","fragment","type","name","component","inputs","getEditingSdk","messenger","send","length","createElement","Provider","value","useDocumentFragments","context","useContext"],"sources":["FragmentsProvider.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect } from \"react\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\n\ntype FragmentConfig =\n    | {\n          type: \"fixed\";\n          name: string;\n          element: React.ReactNode;\n      }\n    | { type: \"component\"; component: string; inputs: Record<string, any> };\n\nexport type DocumentFragments = FragmentConfig[];\n\nconst FragmentsContext = React.createContext<DocumentFragments | undefined>(undefined);\n\ninterface FragmentsProviderProps {\n    fragments: DocumentFragments;\n    children: React.ReactNode;\n}\n\nexport const FragmentsProvider = ({ fragments, children }: FragmentsProviderProps) => {\n    useEffect(() => {\n        if (contentSdk.isEditing()) {\n            // Extract serializable data\n            const fragmentsData = fragments.map(fragment => {\n                if (fragment.type === \"fixed\") {\n                    return {\n                        type: \"fixed\",\n                        name: fragment.name\n                    };\n                }\n\n                return {\n                    type: \"component\",\n                    component: fragment.component,\n                    inputs: fragment.inputs\n                };\n            });\n\n            contentSdk\n                .getEditingSdk()!\n                .messenger.send(\"document.fragments\", { fragments: fragmentsData });\n        }\n    }, [fragments.length]);\n\n    return <FragmentsContext.Provider value={fragments}>{children}</FragmentsContext.Provider>;\n};\n\nexport const useDocumentFragments = () => {\n    const context = React.useContext(FragmentsContext);\n    if (!context) {\n        return [];\n    }\n\n    return context;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,UAAU,QAAQ,6BAA6B;AAYxD,MAAMC,gBAAgB,gBAAGH,KAAK,CAACI,aAAa,CAAgCC,SAAS,CAAC;AAOtF,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAAiC,CAAC,KAAK;EAClFP,SAAS,CAAC,MAAM;IACZ,IAAIC,UAAU,CAACO,SAAS,CAAC,CAAC,EAAE;MACxB;MACA,MAAMC,aAAa,GAAGH,SAAS,CAACI,GAAG,CAACC,QAAQ,IAAI;QAC5C,IAAIA,QAAQ,CAACC,IAAI,KAAK,OAAO,EAAE;UAC3B,OAAO;YACHA,IAAI,EAAE,OAAO;YACbC,IAAI,EAAEF,QAAQ,CAACE;UACnB,CAAC;QACL;QAEA,OAAO;UACHD,IAAI,EAAE,WAAW;UACjBE,SAAS,EAAEH,QAAQ,CAACG,SAAS;UAC7BC,MAAM,EAAEJ,QAAQ,CAACI;QACrB,CAAC;MACL,CAAC,CAAC;MAEFd,UAAU,CACLe,aAAa,CAAC,CAAC,CACfC,SAAS,CAACC,IAAI,CAAC,oBAAoB,EAAE;QAAEZ,SAAS,EAAEG;MAAc,CAAC,CAAC;IAC3E;EACJ,CAAC,EAAE,CAACH,SAAS,CAACa,MAAM,CAAC,CAAC;EAEtB,oBAAOpB,KAAA,CAAAqB,aAAA,CAAClB,gBAAgB,CAACmB,QAAQ;IAACC,KAAK,EAAEhB;EAAU,GAAEC,QAAoC,CAAC;AAC9F,CAAC;AAED,OAAO,MAAMgB,oBAAoB,GAAGA,CAAA,KAAM;EACtC,MAAMC,OAAO,GAAGzB,KAAK,CAAC0B,UAAU,CAACvB,gBAAgB,CAAC;EAClD,IAAI,CAACsB,OAAO,EAAE;IACV,OAAO,EAAE;EACb;EAEA,OAAOA,OAAO;AAClB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/FragmentsProvider.js","sources":["../../src/components/FragmentsProvider.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect } from \"react\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\n\ntype FragmentConfig =\n    | {\n          type: \"fixed\";\n          name: string;\n          element: React.ReactNode;\n      }\n    | { type: \"component\"; component: string; inputs: Record<string, any> };\n\nexport type DocumentFragments = FragmentConfig[];\n\nconst FragmentsContext = React.createContext<DocumentFragments | undefined>(undefined);\n\ninterface FragmentsProviderProps {\n    fragments: DocumentFragments;\n    children: React.ReactNode;\n}\n\nexport const FragmentsProvider = ({ fragments, children }: FragmentsProviderProps) => {\n    useEffect(() => {\n        if (contentSdk.isEditing()) {\n            // Extract serializable data\n            const fragmentsData = fragments.map(fragment => {\n                if (fragment.type === \"fixed\") {\n                    return {\n                        type: \"fixed\",\n                        name: fragment.name\n                    };\n                }\n\n                return {\n                    type: \"component\",\n                    component: fragment.component,\n                    inputs: fragment.inputs\n                };\n            });\n\n            contentSdk\n                .getEditingSdk()!\n                .messenger.send(\"document.fragments\", { fragments: fragmentsData });\n        }\n    }, [fragments.length]);\n\n    return <FragmentsContext.Provider value={fragments}>{children}</FragmentsContext.Provider>;\n};\n\nexport const useDocumentFragments = () => {\n    const context = React.useContext(FragmentsContext);\n    if (!context) {\n        return [];\n    }\n\n    return context;\n};\n"],"names":["FragmentsContext","React","undefined","FragmentsProvider","fragments","children","useEffect","contentSdk","fragmentsData","fragment","useDocumentFragments","context"],"mappings":";;;AAcA,MAAMA,mBAAmB,WAAHA,GAAGC,MAAAA,aAAmB,CAAgCC;AAOrE,MAAMC,oBAAoB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAA0B;IAC7EC,UAAU;QACN,IAAIC,WAAW,SAAS,IAAI;YAExB,MAAMC,gBAAgBJ,UAAU,GAAG,CAACK,CAAAA;gBAChC,IAAIA,AAAkB,YAAlBA,SAAS,IAAI,EACb,OAAO;oBACH,MAAM;oBACN,MAAMA,SAAS,IAAI;gBACvB;gBAGJ,OAAO;oBACH,MAAM;oBACN,WAAWA,SAAS,SAAS;oBAC7B,QAAQA,SAAS,MAAM;gBAC3B;YACJ;YAEAF,WAAAA,aACkB,GACb,SAAS,CAAC,IAAI,CAAC,sBAAsB;gBAAE,WAAWC;YAAc;QACzE;IACJ,GAAG;QAACJ,UAAU,MAAM;KAAC;IAErB,OAAO,WAAP,GAAO,oBAACJ,iBAAiB,QAAQ;QAAC,OAAOI;OAAYC;AACzD;AAEO,MAAMK,uBAAuB;IAChC,MAAMC,UAAUV,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACW,SACD,OAAO,EAAE;IAGb,OAAOA;AACX"}

package/components/LiveElementRenderer.js

@@ -1,78 +1,63 @@
 "use client";
-
-import React, { useCallback, useEffect, useState } from "react";
+import react, { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { contentSdk } from "@webiny/website-builder-sdk";
 import { ElementSlot } from "./ElementSlot.js";
 import { useViewport } from "./useViewportInfo.js";
 import { useBindingsForElement } from "./useBindingsForElement.js";
 import { useDocumentState } from "./useDocumentState.js";
-export const LiveElementRenderer = observer(({
-  element
-}) => {
-  const viewport = useViewport();
-
-  // 1. Start breakpoint as "desktop" on both server and initial client render.
-  const [breakpoint, setBreakpoint] = useState("desktop");
-
-  // 2. Update breakpoint on the client after mount, using real viewport value.
-  useEffect(() => {
-    if (viewport.breakpoint && viewport.breakpoint !== breakpoint) {
-      setBreakpoint(viewport.breakpoint);
-    }
-  }, [viewport.breakpoint, breakpoint]);
-
-  // Bindings for current breakpoint
-  const elementBindings = useBindingsForElement(element.id, breakpoint); // pass breakpoint explicitly if possible
-  const state = useDocumentState();
-  const onResolved = useCallback((value, input) => {
-    if (input.type === "slot") {
-      return /*#__PURE__*/React.createElement(ElementSlot, {
-        key: element.id,
-        parentId: element.id,
-        slot: input.name,
-        elements: input.list ? value : [value]
-      });
-    }
-    return value;
-  }, [element.id]);
-  if (!element || !element.component) {
-    return null;
-  }
-  const instances = contentSdk.resolveElement({
-    element,
-    state,
-    elementBindings,
-    onResolved
-  });
-  if (!instances) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, instances.map((resolvedElement, index) => {
-    const {
-      component: Component,
-      inputs,
-      styles,
-      manifest
-    } = resolvedElement;
-    const props = {
-      inputs,
-      styles,
-      element,
-      breakpoint: viewport.breakpoint
-    };
-    const autoApplyStyles = manifest.autoApplyStyles !== false;
-    const userElement = /*#__PURE__*/React.createElement(Component, Object.assign({
-      key: element.id
-    }, props));
-    if (!autoApplyStyles) {
-      return userElement;
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      key: index,
-      style: styles
-    }, userElement);
-  }));
+const LiveElementRenderer = observer(({ element })=>{
+    const viewport = useViewport();
+    const [breakpoint, setBreakpoint] = useState("desktop");
+    useEffect(()=>{
+        if (viewport.breakpoint && viewport.breakpoint !== breakpoint) setBreakpoint(viewport.breakpoint);
+    }, [
+        viewport.breakpoint,
+        breakpoint
+    ]);
+    const elementBindings = useBindingsForElement(element.id, breakpoint);
+    const state = useDocumentState();
+    const onResolved = useCallback((value, input)=>{
+        if ("slot" === input.type) return /*#__PURE__*/ react.createElement(ElementSlot, {
+            key: element.id,
+            parentId: element.id,
+            slot: input.name,
+            elements: input.list ? value : [
+                value
+            ]
+        });
+        return value;
+    }, [
+        element.id
+    ]);
+    if (!element || !element.component) return null;
+    const instances = contentSdk.resolveElement({
+        element,
+        state,
+        elementBindings,
+        onResolved
+    });
+    if (!instances) return null;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, instances.map((resolvedElement, index)=>{
+        const { component: Component, inputs, styles, manifest } = resolvedElement;
+        const props = {
+            inputs,
+            styles,
+            element,
+            breakpoint: viewport.breakpoint
+        };
+        const autoApplyStyles = false !== manifest.autoApplyStyles;
+        const userElement = /*#__PURE__*/ react.createElement(Component, {
+            key: element.id,
+            ...props
+        });
+        if (!autoApplyStyles) return userElement;
+        return /*#__PURE__*/ react.createElement("div", {
+            key: index,
+            style: styles
+        }, userElement);
+    }));
 });
+export { LiveElementRenderer };
 
 //# sourceMappingURL=LiveElementRenderer.js.map

package/components/LiveElementRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","observer","contentSdk","ElementSlot","useViewport","useBindingsForElement","useDocumentState","LiveElementRenderer","element","viewport","breakpoint","setBreakpoint","elementBindings","id","state","onResolved","value","input","type","createElement","key","parentId","slot","name","elements","list","component","instances","resolveElement","Fragment","map","resolvedElement","index","Component","inputs","styles","manifest","props","autoApplyStyles","userElement","Object","assign","style"],"sources":["LiveElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    OnResolved\n} from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { ElementSlot } from \"./ElementSlot.js\";\nimport { useViewport } from \"./useViewportInfo.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useDocumentState } from \"./useDocumentState.js\";\n\ninterface LiveElementRendererProps {\n    element: DocumentElement;\n    bindings?: DocumentElementBindings;\n}\n\nexport const LiveElementRenderer = observer(({ element }: LiveElementRendererProps) => {\n    const viewport = useViewport();\n\n    // 1. Start breakpoint as \"desktop\" on both server and initial client render.\n    const [breakpoint, setBreakpoint] = useState<\"desktop\" | string>(\"desktop\");\n\n    // 2. Update breakpoint on the client after mount, using real viewport value.\n    useEffect(() => {\n        if (viewport.breakpoint && viewport.breakpoint !== breakpoint) {\n            setBreakpoint(viewport.breakpoint);\n        }\n    }, [viewport.breakpoint, breakpoint]);\n\n    // Bindings for current breakpoint\n    const elementBindings = useBindingsForElement(element.id, breakpoint); // pass breakpoint explicitly if possible\n    const state = useDocumentState();\n\n    const onResolved = useCallback(\n        ((value, input) => {\n            if (input.type === \"slot\") {\n                return (\n                    <ElementSlot\n                        key={element.id}\n                        parentId={element.id}\n                        slot={input.name}\n                        elements={input.list ? value : [value]}\n                    />\n                );\n            }\n            return value;\n        }) as OnResolved,\n        [element.id]\n    );\n\n    if (!element || !element.component) {\n        return null;\n    }\n\n    const instances = contentSdk.resolveElement({\n        element,\n        state,\n        elementBindings,\n        onResolved\n    });\n\n    if (!instances) {\n        return null;\n    }\n\n    return (\n        <>\n            {instances.map((resolvedElement, index) => {\n                const { component: Component, inputs, styles, manifest } = resolvedElement;\n                const props = { inputs, styles, element, breakpoint: viewport.breakpoint };\n                const autoApplyStyles = manifest.autoApplyStyles !== false;\n\n                const userElement = <Component key={element.id} {...props} />;\n\n                if (!autoApplyStyles) {\n                    return userElement;\n                }\n\n                return (\n                    <div key={index} style={styles}>\n                        {userElement}\n                    </div>\n                );\n            })}\n        </>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAM1C,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,WAAW;AACpB,SAASC,WAAW;AACpB,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAOzB,OAAO,MAAMC,mBAAmB,GAAGN,QAAQ,CAAC,CAAC;EAAEO;AAAkC,CAAC,KAAK;EACnF,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;;EAE9B;EACA,MAAM,CAACM,UAAU,EAAEC,aAAa,CAAC,GAAGX,QAAQ,CAAqB,SAAS,CAAC;;EAE3E;EACAD,SAAS,CAAC,MAAM;IACZ,IAAIU,QAAQ,CAACC,UAAU,IAAID,QAAQ,CAACC,UAAU,KAAKA,UAAU,EAAE;MAC3DC,aAAa,CAACF,QAAQ,CAACC,UAAU,CAAC;IACtC;EACJ,CAAC,EAAE,CAACD,QAAQ,CAACC,UAAU,EAAEA,UAAU,CAAC,CAAC;;EAErC;EACA,MAAME,eAAe,GAAGP,qBAAqB,CAACG,OAAO,CAACK,EAAE,EAAEH,UAAU,CAAC,CAAC,CAAC;EACvE,MAAMI,KAAK,GAAGR,gBAAgB,CAAC,CAAC;EAEhC,MAAMS,UAAU,GAAGjB,WAAW,CACzB,CAACkB,KAAK,EAAEC,KAAK,KAAK;IACf,IAAIA,KAAK,CAACC,IAAI,KAAK,MAAM,EAAE;MACvB,oBACIrB,KAAA,CAAAsB,aAAA,CAAChB,WAAW;QACRiB,GAAG,EAAEZ,OAAO,CAACK,EAAG;QAChBQ,QAAQ,EAAEb,OAAO,CAACK,EAAG;QACrBS,IAAI,EAAEL,KAAK,CAACM,IAAK;QACjBC,QAAQ,EAAEP,KAAK,CAACQ,IAAI,GAAGT,KAAK,GAAG,CAACA,KAAK;MAAE,CAC1C,CAAC;IAEV;IACA,OAAOA,KAAK;EAChB,CAAC,EACD,CAACR,OAAO,CAACK,EAAE,CACf,CAAC;EAED,IAAI,CAACL,OAAO,IAAI,CAACA,OAAO,CAACkB,SAAS,EAAE;IAChC,OAAO,IAAI;EACf;EAEA,MAAMC,SAAS,GAAGzB,UAAU,CAAC0B,cAAc,CAAC;IACxCpB,OAAO;IACPM,KAAK;IACLF,eAAe;IACfG;EACJ,CAAC,CAAC;EAEF,IAAI,CAACY,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACI9B,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAgC,QAAA,QACKF,SAAS,CAACG,GAAG,CAAC,CAACC,eAAe,EAAEC,KAAK,KAAK;IACvC,MAAM;MAAEN,SAAS,EAAEO,SAAS;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGL,eAAe;IAC1E,MAAMM,KAAK,GAAG;MAAEH,MAAM;MAAEC,MAAM;MAAE3B,OAAO;MAAEE,UAAU,EAAED,QAAQ,CAACC;IAAW,CAAC;IAC1E,MAAM4B,eAAe,GAAGF,QAAQ,CAACE,eAAe,KAAK,KAAK;IAE1D,MAAMC,WAAW,gBAAG1C,KAAA,CAAAsB,aAAA,CAACc,SAAS,EAAAO,MAAA,CAAAC,MAAA;MAACrB,GAAG,EAAEZ,OAAO,CAACK;IAAG,GAAKwB,KAAK,CAAG,CAAC;IAE7D,IAAI,CAACC,eAAe,EAAE;MAClB,OAAOC,WAAW;IACtB;IAEA,oBACI1C,KAAA,CAAAsB,aAAA;MAAKC,GAAG,EAAEY,KAAM;MAACU,KAAK,EAAEP;IAAO,GAC1BI,WACA,CAAC;EAEd,CAAC,CACH,CAAC;AAEX,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"components/LiveElementRenderer.js","sources":["../../src/components/LiveElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    OnResolved\n} from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { ElementSlot } from \"./ElementSlot.js\";\nimport { useViewport } from \"./useViewportInfo.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useDocumentState } from \"./useDocumentState.js\";\n\ninterface LiveElementRendererProps {\n    element: DocumentElement;\n    bindings?: DocumentElementBindings;\n}\n\nexport const LiveElementRenderer = observer(({ element }: LiveElementRendererProps) => {\n    const viewport = useViewport();\n\n    // 1. Start breakpoint as \"desktop\" on both server and initial client render.\n    const [breakpoint, setBreakpoint] = useState<\"desktop\" | string>(\"desktop\");\n\n    // 2. Update breakpoint on the client after mount, using real viewport value.\n    useEffect(() => {\n        if (viewport.breakpoint && viewport.breakpoint !== breakpoint) {\n            setBreakpoint(viewport.breakpoint);\n        }\n    }, [viewport.breakpoint, breakpoint]);\n\n    // Bindings for current breakpoint\n    const elementBindings = useBindingsForElement(element.id, breakpoint); // pass breakpoint explicitly if possible\n    const state = useDocumentState();\n\n    const onResolved = useCallback(\n        ((value, input) => {\n            if (input.type === \"slot\") {\n                return (\n                    <ElementSlot\n                        key={element.id}\n                        parentId={element.id}\n                        slot={input.name}\n                        elements={input.list ? value : [value]}\n                    />\n                );\n            }\n            return value;\n        }) as OnResolved,\n        [element.id]\n    );\n\n    if (!element || !element.component) {\n        return null;\n    }\n\n    const instances = contentSdk.resolveElement({\n        element,\n        state,\n        elementBindings,\n        onResolved\n    });\n\n    if (!instances) {\n        return null;\n    }\n\n    return (\n        <>\n            {instances.map((resolvedElement, index) => {\n                const { component: Component, inputs, styles, manifest } = resolvedElement;\n                const props = { inputs, styles, element, breakpoint: viewport.breakpoint };\n                const autoApplyStyles = manifest.autoApplyStyles !== false;\n\n                const userElement = <Component key={element.id} {...props} />;\n\n                if (!autoApplyStyles) {\n                    return userElement;\n                }\n\n                return (\n                    <div key={index} style={styles}>\n                        {userElement}\n                    </div>\n                );\n            })}\n        </>\n    );\n});\n"],"names":["LiveElementRenderer","observer","element","viewport","useViewport","breakpoint","setBreakpoint","useState","useEffect","elementBindings","useBindingsForElement","state","useDocumentState","onResolved","useCallback","value","input","ElementSlot","instances","contentSdk","resolvedElement","index","Component","inputs","styles","manifest","props","autoApplyStyles","userElement"],"mappings":";;;;;;;;AAmBO,MAAMA,sBAAsBC,SAAS,CAAC,EAAEC,OAAO,EAA4B;IAC9E,MAAMC,WAAWC;IAGjB,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAA6B;IAGjEC,UAAU;QACN,IAAIL,SAAS,UAAU,IAAIA,SAAS,UAAU,KAAKE,YAC/CC,cAAcH,SAAS,UAAU;IAEzC,GAAG;QAACA,SAAS,UAAU;QAAEE;KAAW;IAGpC,MAAMI,kBAAkBC,sBAAsBR,QAAQ,EAAE,EAAEG;IAC1D,MAAMM,QAAQC;IAEd,MAAMC,aAAaC,YACd,CAACC,OAAOC;QACL,IAAIA,AAAe,WAAfA,MAAM,IAAI,EACV,OAAO,WAAP,GACI,oBAACC,aAAWA;YACR,KAAKf,QAAQ,EAAE;YACf,UAAUA,QAAQ,EAAE;YACpB,MAAMc,MAAM,IAAI;YAChB,UAAUA,MAAM,IAAI,GAAGD,QAAQ;gBAACA;aAAM;;QAIlD,OAAOA;IACX,GACA;QAACb,QAAQ,EAAE;KAAC;IAGhB,IAAI,CAACA,WAAW,CAACA,QAAQ,SAAS,EAC9B,OAAO;IAGX,MAAMgB,YAAYC,WAAW,cAAc,CAAC;QACxCjB;QACAS;QACAF;QACAI;IACJ;IAEA,IAAI,CAACK,WACD,OAAO;IAGX,OAAO,WAAP,GACI,0CACKA,UAAU,GAAG,CAAC,CAACE,iBAAiBC;QAC7B,MAAM,EAAE,WAAWC,SAAS,EAAEC,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGL;QAC3D,MAAMM,QAAQ;YAAEH;YAAQC;YAAQtB;YAAS,YAAYC,SAAS,UAAU;QAAC;QACzE,MAAMwB,kBAAkBF,AAA6B,UAA7BA,SAAS,eAAe;QAEhD,MAAMG,cAAc,WAAdA,GAAc,oBAACN,WAAAA;YAAU,KAAKpB,QAAQ,EAAE;YAAG,GAAGwB,KAAK;;QAEzD,IAAI,CAACC,iBACD,OAAOC;QAGX,OAAO,WAAP,GACI,oBAAC;YAAI,KAAKP;YAAO,OAAOG;WACnBI;IAGb;AAGZ"}

package/components/LiveElementSlot.js

@@ -1,21 +1,19 @@
 "use client";
-
-import React from "react";
+import react from "react";
 import { ElementRenderer } from "./ElementRenderer.js";
 import { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider.js";
 import { ElementIndexProvider } from "./ElementIndexProvider.js";
-export const LiveElementSlot = ({
-  elements = []
-}) => {
-  const depth = useElementSlotDepth();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementSlotDepthProvider, {
-    depth: depth + 1
-  }, elements.map((id, index) => /*#__PURE__*/React.createElement(ElementIndexProvider, {
-    key: id,
-    index: index
-  }, /*#__PURE__*/React.createElement(ElementRenderer, {
-    id: id
-  })))));
+const LiveElementSlot = ({ elements = [] })=>{
+    const depth = useElementSlotDepth();
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ElementSlotDepthProvider, {
+        depth: depth + 1
+    }, elements.map((id, index)=>/*#__PURE__*/ react.createElement(ElementIndexProvider, {
+            key: id,
+            index: index
+        }, /*#__PURE__*/ react.createElement(ElementRenderer, {
+            id: id
+        })))));
 };
+export { LiveElementSlot };
 
 //# sourceMappingURL=LiveElementSlot.js.map

package/components/LiveElementSlot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ElementRenderer","ElementSlotDepthProvider","useElementSlotDepth","ElementIndexProvider","LiveElementSlot","elements","depth","createElement","Fragment","map","id","index","key"],"sources":["LiveElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\nimport type { ElementSlotProps } from \"./ElementSlot.js\";\nimport { ElementSlotDepthProvider, useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\nimport { ElementIndexProvider } from \"./ElementIndexProvider.js\";\n\nexport const LiveElementSlot = ({ elements = [] }: Pick<ElementSlotProps, \"elements\">) => {\n    const depth = useElementSlotDepth();\n    return (\n        <>\n            <ElementSlotDepthProvider depth={depth + 1}>\n                {elements.map((id, index) => (\n                    <ElementIndexProvider key={id} index={index}>\n                        <ElementRenderer id={id} />\n                    </ElementIndexProvider>\n                ))}\n            </ElementSlotDepthProvider>\n        </>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAExB,SAASC,wBAAwB,EAAEC,mBAAmB;AACtD,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ,GAAG;AAAuC,CAAC,KAAK;EACtF,MAAMC,KAAK,GAAGJ,mBAAmB,CAAC,CAAC;EACnC,oBACIH,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,qBACIT,KAAA,CAAAQ,aAAA,CAACN,wBAAwB;IAACK,KAAK,EAAEA,KAAK,GAAG;EAAE,GACtCD,QAAQ,CAACI,GAAG,CAAC,CAACC,EAAE,EAAEC,KAAK,kBACpBZ,KAAA,CAAAQ,aAAA,CAACJ,oBAAoB;IAACS,GAAG,EAAEF,EAAG;IAACC,KAAK,EAAEA;EAAM,gBACxCZ,KAAA,CAAAQ,aAAA,CAACP,eAAe;IAACU,EAAE,EAAEA;EAAG,CAAE,CACR,CACzB,CACqB,CAC5B,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"file":"components/LiveElementSlot.js","sources":["../../src/components/LiveElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\nimport type { ElementSlotProps } from \"./ElementSlot.js\";\nimport { ElementSlotDepthProvider, useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\nimport { ElementIndexProvider } from \"./ElementIndexProvider.js\";\n\nexport const LiveElementSlot = ({ elements = [] }: Pick<ElementSlotProps, \"elements\">) => {\n    const depth = useElementSlotDepth();\n    return (\n        <>\n            <ElementSlotDepthProvider depth={depth + 1}>\n                {elements.map((id, index) => (\n                    <ElementIndexProvider key={id} index={index}>\n                        <ElementRenderer id={id} />\n                    </ElementIndexProvider>\n                ))}\n            </ElementSlotDepthProvider>\n        </>\n    );\n};\n"],"names":["LiveElementSlot","elements","depth","useElementSlotDepth","ElementSlotDepthProvider","id","index","ElementIndexProvider","ElementRenderer"],"mappings":";;;;;AAOO,MAAMA,kBAAkB,CAAC,EAAEC,WAAW,EAAE,EAAsC;IACjF,MAAMC,QAAQC;IACd,OAAO,WAAP,GACI,wDACI,oBAACC,0BAAwBA;QAAC,OAAOF,QAAQ;OACpCD,SAAS,GAAG,CAAC,CAACI,IAAIC,QAAAA,WAAAA,GACf,oBAACC,sBAAoBA;YAAC,KAAKF;YAAI,OAAOC;yBAClC,oBAACE,iBAAeA;YAAC,IAAIH;;AAM7C"}

package/components/PreviewElementSlot.js

@@ -1,30 +1,24 @@
 "use client";
-
-import React from "react";
+import react from "react";
 import { LiveElementSlot } from "./LiveElementSlot.js";
 import { useElementSlotDepth } from "./ElementSlotDepthProvider.js";
-export const PreviewElementSlot = ({
-  parentId,
-  slot,
-  elements = []
-}) => {
-  const depth = useElementSlotDepth();
-  if (!elements.length) {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        height: 100,
-        width: "100% !important"
-      },
-      "data-role": "element-slot",
-      "data-parent-id": parentId,
-      "data-parent-slot": slot,
-      "data-depth": depth,
-      "data-empty": true
+const PreviewElementSlot = ({ parentId, slot, elements = [] })=>{
+    const depth = useElementSlotDepth();
+    if (!elements.length) return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 100,
+            width: "100% !important"
+        },
+        "data-role": "element-slot",
+        "data-parent-id": parentId,
+        "data-parent-slot": slot,
+        "data-depth": depth,
+        "data-empty": true
+    });
+    return /*#__PURE__*/ react.createElement(LiveElementSlot, {
+        elements: elements
     });
-  }
-  return /*#__PURE__*/React.createElement(LiveElementSlot, {
-    elements: elements
-  });
 };
+export { PreviewElementSlot };
 
 //# sourceMappingURL=PreviewElementSlot.js.map

package/components/PreviewElementSlot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","LiveElementSlot","useElementSlotDepth","PreviewElementSlot","parentId","slot","elements","depth","length","createElement","style","height","width"],"sources":["PreviewElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LiveElementSlot } from \"./LiveElementSlot.js\";\nimport { useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\n\ninterface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const PreviewElementSlot = ({ parentId, slot, elements = [] }: ElementSlotProps) => {\n    const depth = useElementSlotDepth();\n\n    if (!elements.length) {\n        return (\n            <div\n                style={{ height: 100, width: \"100% !important\" }}\n                data-role={\"element-slot\"}\n                data-parent-id={parentId}\n                data-parent-slot={slot}\n                data-depth={depth}\n                data-empty={true}\n            />\n        );\n    }\n\n    return <LiveElementSlot elements={elements} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAW5B,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,QAAQ,GAAG;AAAqB,CAAC,KAAK;EACvF,MAAMC,KAAK,GAAGL,mBAAmB,CAAC,CAAC;EAEnC,IAAI,CAACI,QAAQ,CAACE,MAAM,EAAE;IAClB,oBACIR,KAAA,CAAAS,aAAA;MACIC,KAAK,EAAE;QAAEC,MAAM,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAkB,CAAE;MACjD,aAAW,cAAe;MAC1B,kBAAgBR,QAAS;MACzB,oBAAkBC,IAAK;MACvB,cAAYE,KAAM;MAClB,cAAY;IAAK,CACpB,CAAC;EAEV;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,eAAe;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC;AAClD,CAAC","ignoreList":[]}
+{"version":3,"file":"components/PreviewElementSlot.js","sources":["../../src/components/PreviewElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LiveElementSlot } from \"./LiveElementSlot.js\";\nimport { useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\n\ninterface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const PreviewElementSlot = ({ parentId, slot, elements = [] }: ElementSlotProps) => {\n    const depth = useElementSlotDepth();\n\n    if (!elements.length) {\n        return (\n            <div\n                style={{ height: 100, width: \"100% !important\" }}\n                data-role={\"element-slot\"}\n                data-parent-id={parentId}\n                data-parent-slot={slot}\n                data-depth={depth}\n                data-empty={true}\n            />\n        );\n    }\n\n    return <LiveElementSlot elements={elements} />;\n};\n"],"names":["PreviewElementSlot","parentId","slot","elements","depth","useElementSlotDepth","LiveElementSlot"],"mappings":";;;;AAcO,MAAMA,qBAAqB,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,EAAoB;IAClF,MAAMC,QAAQC;IAEd,IAAI,CAACF,SAAS,MAAM,EAChB,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YAAE,QAAQ;YAAK,OAAO;QAAkB;QAC/C,aAAW;QACX,kBAAgBF;QAChB,oBAAkBC;QAClB,cAAYE;QACZ,cAAY;;IAKxB,OAAO,WAAP,GAAO,oBAACE,iBAAeA;QAAC,UAAUH;;AACtC"}

package/components/index.js

@@ -2,5 +2,3 @@ export * from "./DocumentRenderer.js";
 export * from "./DocumentFragment.js";
 export * from "./ElementSlot.js";
 export * from "./DocumentStoreProvider.js";
-
-//# sourceMappingURL=index.js.map