@webiny/website-builder-react 6.3.0 → 6.4.0-beta.0

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

package/components/useBindingsForElement.js

@@ -3,17 +3,19 @@ import { BindingsProcessor } from "@webiny/website-builder-sdk";
 import { useViewport } from "./useViewportInfo.js";
 import { useDocumentStore } from "./DocumentStoreProvider.js";
 import { useSelectFromState } from "./useSelectFromState.js";
-export const useBindingsForElement = (elementId, breakpoint) => {
-  const documentStore = useDocumentStore();
-  const viewport = useViewport();
-  return useSelectFromState(() => documentStore.getDocument(), document => {
-    const bindings = toJS(document.bindings[elementId]) ?? {};
-    const breakpoints = viewport.breakpoints.map(bp => bp.name);
-
-    // Merge element bindings.
-    const bindingsProcessor = new BindingsProcessor(breakpoints);
-    return bindingsProcessor.getBindings(bindings, breakpoint);
-  }, [elementId, breakpoint]);
+const useBindingsForElement = (elementId, breakpoint)=>{
+    const documentStore = useDocumentStore();
+    const viewport = useViewport();
+    return useSelectFromState(()=>documentStore.getDocument(), (document)=>{
+        const bindings = toJS(document.bindings[elementId]) ?? {};
+        const breakpoints = viewport.breakpoints.map((bp)=>bp.name);
+        const bindingsProcessor = new BindingsProcessor(breakpoints);
+        return bindingsProcessor.getBindings(bindings, breakpoint);
+    }, [
+        elementId,
+        breakpoint
+    ]);
 };
+export { useBindingsForElement };
 
 //# sourceMappingURL=useBindingsForElement.js.map

package/components/useBindingsForElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["toJS","BindingsProcessor","useViewport","useDocumentStore","useSelectFromState","useBindingsForElement","elementId","breakpoint","documentStore","viewport","getDocument","document","bindings","breakpoints","map","bp","name","bindingsProcessor","getBindings"],"sources":["useBindingsForElement.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport { BindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { useViewport } from \"./useViewportInfo.js\";\nimport { useDocumentStore } from \"./DocumentStoreProvider.js\";\nimport { useSelectFromState } from \"./useSelectFromState.js\";\n\nexport const useBindingsForElement = (elementId: string, breakpoint: string) => {\n    const documentStore = useDocumentStore();\n    const viewport = useViewport();\n\n    return useSelectFromState(\n        () => documentStore.getDocument()!,\n        document => {\n            const bindings = toJS(document.bindings[elementId]) ?? {};\n            const breakpoints = viewport.breakpoints.map(bp => bp.name);\n\n            // Merge element bindings.\n            const bindingsProcessor = new BindingsProcessor(breakpoints);\n\n            return bindingsProcessor.getBindings(bindings, breakpoint);\n        },\n        [elementId, breakpoint]\n    );\n};\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,MAAM;AAC3B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,WAAW;AACpB,SAASC,gBAAgB;AACzB,SAASC,kBAAkB;AAE3B,OAAO,MAAMC,qBAAqB,GAAGA,CAACC,SAAiB,EAAEC,UAAkB,KAAK;EAC5E,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC;EACxC,MAAMM,QAAQ,GAAGP,WAAW,CAAC,CAAC;EAE9B,OAAOE,kBAAkB,CACrB,MAAMI,aAAa,CAACE,WAAW,CAAC,CAAE,EAClCC,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGZ,IAAI,CAACW,QAAQ,CAACC,QAAQ,CAACN,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;IACzD,MAAMO,WAAW,GAAGJ,QAAQ,CAACI,WAAW,CAACC,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CAAC;;IAE3D;IACA,MAAMC,iBAAiB,GAAG,IAAIhB,iBAAiB,CAACY,WAAW,CAAC;IAE5D,OAAOI,iBAAiB,CAACC,WAAW,CAACN,QAAQ,EAAEL,UAAU,CAAC;EAC9D,CAAC,EACD,CAACD,SAAS,EAAEC,UAAU,CAC1B,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"components/useBindingsForElement.js","sources":["../../src/components/useBindingsForElement.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport { BindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { useViewport } from \"./useViewportInfo.js\";\nimport { useDocumentStore } from \"./DocumentStoreProvider.js\";\nimport { useSelectFromState } from \"./useSelectFromState.js\";\n\nexport const useBindingsForElement = (elementId: string, breakpoint: string) => {\n    const documentStore = useDocumentStore();\n    const viewport = useViewport();\n\n    return useSelectFromState(\n        () => documentStore.getDocument()!,\n        document => {\n            const bindings = toJS(document.bindings[elementId]) ?? {};\n            const breakpoints = viewport.breakpoints.map(bp => bp.name);\n\n            // Merge element bindings.\n            const bindingsProcessor = new BindingsProcessor(breakpoints);\n\n            return bindingsProcessor.getBindings(bindings, breakpoint);\n        },\n        [elementId, breakpoint]\n    );\n};\n"],"names":["useBindingsForElement","elementId","breakpoint","documentStore","useDocumentStore","viewport","useViewport","useSelectFromState","document","bindings","toJS","breakpoints","bp","bindingsProcessor","BindingsProcessor"],"mappings":";;;;;AAMO,MAAMA,wBAAwB,CAACC,WAAmBC;IACrD,MAAMC,gBAAgBC;IACtB,MAAMC,WAAWC;IAEjB,OAAOC,mBACH,IAAMJ,cAAc,WAAW,IAC/BK,CAAAA;QACI,MAAMC,WAAWC,KAAKF,SAAS,QAAQ,CAACP,UAAU,KAAK,CAAC;QACxD,MAAMU,cAAcN,SAAS,WAAW,CAAC,GAAG,CAACO,CAAAA,KAAMA,GAAG,IAAI;QAG1D,MAAMC,oBAAoB,IAAIC,kBAAkBH;QAEhD,OAAOE,kBAAkB,WAAW,CAACJ,UAAUP;IACnD,GACA;QAACD;QAAWC;KAAW;AAE/B"}

package/components/useDocumentState.js

@@ -1,8 +1,9 @@
 import { useDocumentStore } from "./DocumentStoreProvider.js";
 import { useSelectFromState } from "./useSelectFromState.js";
-export const useDocumentState = () => {
-  const documentStore = useDocumentStore();
-  return useSelectFromState(() => documentStore.getDocument(), document => document.state ?? {});
+const useDocumentState = ()=>{
+    const documentStore = useDocumentStore();
+    return useSelectFromState(()=>documentStore.getDocument(), (document)=>document.state ?? {});
 };
+export { useDocumentState };
 
 //# sourceMappingURL=useDocumentState.js.map

package/components/useDocumentState.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDocumentStore","useSelectFromState","useDocumentState","documentStore","getDocument","document","state"],"sources":["useDocumentState.ts"],"sourcesContent":["import { useDocumentStore } from \"./DocumentStoreProvider.js\";\nimport { useSelectFromState } from \"./useSelectFromState.js\";\n\nexport const useDocumentState = () => {\n    const documentStore = useDocumentStore();\n    return useSelectFromState(\n        () => documentStore.getDocument()!,\n        document => document.state ?? {}\n    );\n};\n"],"mappings":"AAAA,SAASA,gBAAgB;AACzB,SAASC,kBAAkB;AAE3B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;EACxC,OAAOC,kBAAkB,CACrB,MAAME,aAAa,CAACC,WAAW,CAAC,CAAE,EAClCC,QAAQ,IAAIA,QAAQ,CAACC,KAAK,IAAI,CAAC,CACnC,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"components/useDocumentState.js","sources":["../../src/components/useDocumentState.ts"],"sourcesContent":["import { useDocumentStore } from \"./DocumentStoreProvider.js\";\nimport { useSelectFromState } from \"./useSelectFromState.js\";\n\nexport const useDocumentState = () => {\n    const documentStore = useDocumentStore();\n    return useSelectFromState(\n        () => documentStore.getDocument()!,\n        document => document.state ?? {}\n    );\n};\n"],"names":["useDocumentState","documentStore","useDocumentStore","useSelectFromState","document"],"mappings":";;AAGO,MAAMA,mBAAmB;IAC5B,MAAMC,gBAAgBC;IACtB,OAAOC,mBACH,IAAMF,cAAc,WAAW,IAC/BG,CAAAA,WAAYA,SAAS,KAAK,IAAI,CAAC;AAEvC"}

package/components/useSelectFromState.js

@@ -1,39 +1,33 @@
-import deepEqual from "deep-equal";
-import { useState, useEffect, useMemo } from "react";
+import deep_equal from "deep-equal";
+import { useEffect, useMemo, useState } from "react";
 import { reaction } from "mobx";
-/**
- * Subscribe to part of the document state.
- * @param selector   Pick the slice of state you care about.
- * @param equals     (optional) comparator, defaults to Object.is
- */
-export function useSelectFromState(getState, selector, deps = [], equals = deepEqual) {
-  // Pull the initial slice synchronously
-  const initialValue = useMemo(() => selector(getState()), deps);
-  const [value, setValue] = useState(initialValue);
-  useEffect(() => {
-    setValue(selector(getState())); // reset state on dep change
-  }, deps);
-  useEffect(() => {
-    // reaction tracks selector(doc) and only fires when newVal !== oldVal
-    const disposer = reaction(() => {
-      const state = getState();
-      return selector(state);
-    }, (newValue, oldValue) => {
-      if (!equals(oldValue, newValue)) {
-        setValue(newValue);
-      }
-    }, {
-      // use your comparator to decide if newValue “really” changed
-      equals,
-      // we already set initial via useState
-      fireImmediately: false
-    });
-    return () => {
-      // clean up when the component unmounts
-      disposer();
-    };
-  }, [getState, selector, equals, ...deps]);
-  return value;
+function useSelectFromState(getState, selector, deps = [], equals = deep_equal) {
+    const initialValue = useMemo(()=>selector(getState()), deps);
+    const [value, setValue] = useState(initialValue);
+    useEffect(()=>{
+        setValue(selector(getState()));
+    }, deps);
+    useEffect(()=>{
+        const disposer = reaction(()=>{
+            const state = getState();
+            return selector(state);
+        }, (newValue, oldValue)=>{
+            if (!equals(oldValue, newValue)) setValue(newValue);
+        }, {
+            equals,
+            fireImmediately: false
+        });
+        return ()=>{
+            disposer();
+        };
+    }, [
+        getState,
+        selector,
+        equals,
+        ...deps
+    ]);
+    return value;
 }
+export { useSelectFromState };
 
 //# sourceMappingURL=useSelectFromState.js.map

package/components/useSelectFromState.js.map

@@ -1 +1 @@
-{"version":3,"names":["deepEqual","useState","useEffect","useMemo","reaction","useSelectFromState","getState","selector","deps","equals","initialValue","value","setValue","disposer","state","newValue","oldValue","fireImmediately"],"sources":["useSelectFromState.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport { useState, useEffect, useMemo } from \"react\";\nimport type { IReactionDisposer } from \"mobx\";\nimport { reaction } from \"mobx\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromState<TState, T>(\n    getState: () => TState,\n    selector: (doc: TState) => T,\n    deps: React.DependencyList = [],\n    equals: Equals<T> = deepEqual\n): T {\n    // Pull the initial slice synchronously\n    const initialValue = useMemo(() => selector(getState()), deps);\n    const [value, setValue] = useState<T>(initialValue);\n\n    useEffect(() => {\n        setValue(selector(getState())); // reset state on dep change\n    }, deps);\n\n    useEffect(() => {\n        // reaction tracks selector(doc) and only fires when newVal !== oldVal\n        const disposer: IReactionDisposer = reaction(\n            () => {\n                const state = getState();\n\n                return selector(state);\n            },\n            (newValue, oldValue) => {\n                if (!equals(oldValue, newValue)) {\n                    setValue(newValue);\n                }\n            },\n            {\n                // use your comparator to decide if newValue “really” changed\n                equals,\n                // we already set initial via useState\n                fireImmediately: false\n            }\n        );\n\n        return () => {\n            // clean up when the component unmounts\n            disposer();\n        };\n    }, [getState, selector, equals, ...deps]);\n\n    return value;\n}\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAEpD,SAASC,QAAQ,QAAQ,MAAM;AAI/B;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAC9BC,QAAsB,EACtBC,QAA4B,EAC5BC,IAA0B,GAAG,EAAE,EAC/BC,MAAiB,GAAGT,SAAS,EAC5B;EACD;EACA,MAAMU,YAAY,GAAGP,OAAO,CAAC,MAAMI,QAAQ,CAACD,QAAQ,CAAC,CAAC,CAAC,EAAEE,IAAI,CAAC;EAC9D,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAAIS,YAAY,CAAC;EAEnDR,SAAS,CAAC,MAAM;IACZU,QAAQ,CAACL,QAAQ,CAACD,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EACpC,CAAC,EAAEE,IAAI,CAAC;EAERN,SAAS,CAAC,MAAM;IACZ;IACA,MAAMW,QAA2B,GAAGT,QAAQ,CACxC,MAAM;MACF,MAAMU,KAAK,GAAGR,QAAQ,CAAC,CAAC;MAExB,OAAOC,QAAQ,CAACO,KAAK,CAAC;IAC1B,CAAC,EACD,CAACC,QAAQ,EAAEC,QAAQ,KAAK;MACpB,IAAI,CAACP,MAAM,CAACO,QAAQ,EAAED,QAAQ,CAAC,EAAE;QAC7BH,QAAQ,CAACG,QAAQ,CAAC;MACtB;IACJ,CAAC,EACD;MACI;MACAN,MAAM;MACN;MACAQ,eAAe,EAAE;IACrB,CACJ,CAAC;IAED,OAAO,MAAM;MACT;MACAJ,QAAQ,CAAC,CAAC;IACd,CAAC;EACL,CAAC,EAAE,CAACP,QAAQ,EAAEC,QAAQ,EAAEE,MAAM,EAAE,GAAGD,IAAI,CAAC,CAAC;EAEzC,OAAOG,KAAK;AAChB","ignoreList":[]}
+{"version":3,"file":"components/useSelectFromState.js","sources":["../../src/components/useSelectFromState.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport { useState, useEffect, useMemo } from \"react\";\nimport type { IReactionDisposer } from \"mobx\";\nimport { reaction } from \"mobx\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromState<TState, T>(\n    getState: () => TState,\n    selector: (doc: TState) => T,\n    deps: React.DependencyList = [],\n    equals: Equals<T> = deepEqual\n): T {\n    // Pull the initial slice synchronously\n    const initialValue = useMemo(() => selector(getState()), deps);\n    const [value, setValue] = useState<T>(initialValue);\n\n    useEffect(() => {\n        setValue(selector(getState())); // reset state on dep change\n    }, deps);\n\n    useEffect(() => {\n        // reaction tracks selector(doc) and only fires when newVal !== oldVal\n        const disposer: IReactionDisposer = reaction(\n            () => {\n                const state = getState();\n\n                return selector(state);\n            },\n            (newValue, oldValue) => {\n                if (!equals(oldValue, newValue)) {\n                    setValue(newValue);\n                }\n            },\n            {\n                // use your comparator to decide if newValue “really” changed\n                equals,\n                // we already set initial via useState\n                fireImmediately: false\n            }\n        );\n\n        return () => {\n            // clean up when the component unmounts\n            disposer();\n        };\n    }, [getState, selector, equals, ...deps]);\n\n    return value;\n}\n"],"names":["useSelectFromState","getState","selector","deps","equals","deepEqual","initialValue","useMemo","value","setValue","useState","useEffect","disposer","reaction","state","newValue","oldValue"],"mappings":";;;AAYO,SAASA,mBACZC,QAAsB,EACtBC,QAA4B,EAC5BC,OAA6B,EAAE,EAC/BC,SAAoBC,UAAS;IAG7B,MAAMC,eAAeC,QAAQ,IAAML,SAASD,aAAaE;IACzD,MAAM,CAACK,OAAOC,SAAS,GAAGC,SAAYJ;IAEtCK,UAAU;QACNF,SAASP,SAASD;IACtB,GAAGE;IAEHQ,UAAU;QAEN,MAAMC,WAA8BC,SAChC;YACI,MAAMC,QAAQb;YAEd,OAAOC,SAASY;QACpB,GACA,CAACC,UAAUC;YACP,IAAI,CAACZ,OAAOY,UAAUD,WAClBN,SAASM;QAEjB,GACA;YAEIX;YAEA,iBAAiB;QACrB;QAGJ,OAAO;YAEHQ;QACJ;IACJ,GAAG;QAACX;QAAUC;QAAUE;WAAWD;KAAK;IAExC,OAAOK;AACX"}

package/components/useViewportInfo.js

@@ -1,11 +1,10 @@
 import { useEffect, useState } from "react";
 import { viewportManager } from "@webiny/website-builder-sdk";
-export const useViewport = () => {
-  const [viewport, setViewport] = useState(viewportManager.getViewport());
-  useEffect(() => {
-    return viewportManager.onViewportChangeEnd(setViewport);
-  }, []);
-  return viewport;
+const useViewport = ()=>{
+    const [viewport, setViewport] = useState(viewportManager.getViewport());
+    useEffect(()=>viewportManager.onViewportChangeEnd(setViewport), []);
+    return viewport;
 };
+export { useViewport };
 
 //# sourceMappingURL=useViewportInfo.js.map

package/components/useViewportInfo.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useState","viewportManager","useViewport","viewport","setViewport","getViewport","onViewportChangeEnd"],"sources":["useViewportInfo.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { viewportManager } from \"@webiny/website-builder-sdk\";\n\nexport const useViewport = () => {\n    const [viewport, setViewport] = useState(viewportManager.getViewport());\n\n    useEffect(() => {\n        return viewportManager.onViewportChangeEnd(setViewport);\n    }, []);\n\n    return viewport;\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,eAAe,QAAQ,6BAA6B;AAE7D,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGJ,QAAQ,CAACC,eAAe,CAACI,WAAW,CAAC,CAAC,CAAC;EAEvEN,SAAS,CAAC,MAAM;IACZ,OAAOE,eAAe,CAACK,mBAAmB,CAACF,WAAW,CAAC;EAC3D,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOD,QAAQ;AACnB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/useViewportInfo.js","sources":["../../src/components/useViewportInfo.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { viewportManager } from \"@webiny/website-builder-sdk\";\n\nexport const useViewport = () => {\n    const [viewport, setViewport] = useState(viewportManager.getViewport());\n\n    useEffect(() => {\n        return viewportManager.onViewportChangeEnd(setViewport);\n    }, []);\n\n    return viewport;\n};\n"],"names":["useViewport","viewport","setViewport","useState","viewportManager","useEffect"],"mappings":";;AAGO,MAAMA,cAAc;IACvB,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAASC,gBAAgB,WAAW;IAEpEC,UAAU,IACCD,gBAAgB,mBAAmB,CAACF,cAC5C,EAAE;IAEL,OAAOD;AACX"}