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

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.js

@@ -1,59 +1,46 @@
-import React from "react";
-import { Icon, Card } from "@webiny/admin-ui";
+import react from "react";
+import { Card, Icon } from "@webiny/admin-ui";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { InlineSvg } from "./InlineSvg.js";
 import { Draggable } from "../../../components/Draggable.js";
 import { useComponentGroups } from "./useComponentGroups.js";
-const GroupComponent = ({
-  item
-}) => {
-  const components = useSelectFromEditor(state => {
-    return state.components ?? {};
-  });
-  const component = components[item.name];
-  if (!component) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row items-center p-sm bg-neutral-light rounded-sm gap-sm cursor-grab fill-neutral-strong"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    label: "Icon",
-    icon: /*#__PURE__*/React.createElement(InlineSvg, {
-      src: component.image
-    }),
-    size: "md"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "text-sm font-medium text-neutral-primary text-center"
-  }, component.label ?? component.name));
+const GroupComponent = ({ item })=>{
+    const components = useSelectFromEditor((state)=>state.components ?? {});
+    const component = components[item.name];
+    if (!component) return /*#__PURE__*/ react.createElement(react.Fragment, null);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row items-center p-sm bg-neutral-light rounded-sm gap-sm cursor-grab fill-neutral-strong"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        label: "Icon",
+        icon: /*#__PURE__*/ react.createElement(InlineSvg, {
+            src: component.image
+        }),
+        size: "md"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "text-sm font-medium text-neutral-primary text-center"
+    }, component.label ?? component.name));
 };
-export const InsertElements = () => {
-  const groups = useComponentGroups();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, groups.map(group => {
-    if (!group.items.length) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(Card, {
-      key: group.name,
-      title: group.label,
-      description: group.description
-      // borderRadius={"none"}
-      // padding={""}
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col gap-sm p-sm justify-start"
-    }, group.items.map(item => {
-      return /*#__PURE__*/React.createElement(Draggable, {
-        key: item.name,
-        type: "ELEMENT",
-        item: {
-          componentName: item.name
-        }
-      }, ({
-        dragRef
-      }) => dragRef(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GroupComponent, {
-        item: item
-      }))));
-    })));
-  }));
+const InsertElements = ()=>{
+    const groups = useComponentGroups();
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, groups.map((group)=>{
+        if (!group.items.length) return null;
+        return /*#__PURE__*/ react.createElement(Card, {
+            key: group.name,
+            title: group.label,
+            description: group.description
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col gap-sm p-sm justify-start"
+        }, group.items.map((item)=>/*#__PURE__*/ react.createElement(Draggable, {
+                key: item.name,
+                type: "ELEMENT",
+                item: {
+                    componentName: item.name
+                }
+            }, ({ dragRef })=>dragRef(/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(GroupComponent, {
+                    item: item
+                })))))));
+    }));
 };
+export { InsertElements };
 
 //# sourceMappingURL=InsertElements.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","Card","useSelectFromEditor","InlineSvg","Draggable","useComponentGroups","GroupComponent","item","components","state","component","name","createElement","Fragment","className","label","icon","src","image","size","InsertElements","groups","map","group","items","length","key","title","description","type","componentName","dragRef"],"sources":["InsertElements.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Card } from \"@webiny/admin-ui\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type { ComponentGroupItem, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { useComponentGroups } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js\";\n\nconst GroupComponent = ({ item }: { item: ComponentGroupItem }) => {\n    const components = useSelectFromEditor<Record<string, ComponentManifest>>(state => {\n        return state.components ?? {};\n    });\n\n    const component = components[item.name];\n\n    if (!component) {\n        return <></>;\n    }\n\n    return (\n        <div className=\"flex flex-row items-center p-sm bg-neutral-light rounded-sm gap-sm cursor-grab fill-neutral-strong\">\n            <Icon label=\"Icon\" icon={<InlineSvg src={component.image!} />} size={\"md\"} />\n            <div className=\"text-sm font-medium text-neutral-primary text-center\">\n                {component.label ?? component.name}\n            </div>\n        </div>\n    );\n};\n\nexport const InsertElements = () => {\n    const groups = useComponentGroups();\n\n    return (\n        <>\n            {groups.map(group => {\n                if (!group.items.length) {\n                    return null;\n                }\n\n                return (\n                    <Card\n                        key={group.name}\n                        title={group.label}\n                        description={group.description}\n                        // borderRadius={\"none\"}\n                        // padding={\"\"}\n                    >\n                        <div className=\"flex flex-col gap-sm p-sm justify-start\">\n                            {group.items.map(item => {\n                                return (\n                                    <Draggable\n                                        key={item.name}\n                                        type=\"ELEMENT\"\n                                        item={{ componentName: item.name }}\n                                    >\n                                        {({ dragRef }) =>\n                                            dragRef(\n                                                <div>\n                                                    <GroupComponent item={item} />\n                                                </div>\n                                            )\n                                        }\n                                    </Draggable>\n                                );\n                            })}\n                        </div>\n                    </Card>\n                );\n            })}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,mBAAmB;AAE5B,SAASC,SAAS;AAClB,SAASC,SAAS;AAClB,SAASC,kBAAkB;AAE3B,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EAC/D,MAAMC,UAAU,GAAGN,mBAAmB,CAAoCO,KAAK,IAAI;IAC/E,OAAOA,KAAK,CAACD,UAAU,IAAI,CAAC,CAAC;EACjC,CAAC,CAAC;EAEF,MAAME,SAAS,GAAGF,UAAU,CAACD,IAAI,CAACI,IAAI,CAAC;EAEvC,IAAI,CAACD,SAAS,EAAE;IACZ,oBAAOX,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,MAAI,CAAC;EAChB;EAEA,oBACId,KAAA,CAAAa,aAAA;IAAKE,SAAS,EAAC;EAAoG,gBAC/Gf,KAAA,CAAAa,aAAA,CAACZ,IAAI;IAACe,KAAK,EAAC,MAAM;IAACC,IAAI,eAAEjB,KAAA,CAAAa,aAAA,CAACT,SAAS;MAACc,GAAG,EAAEP,SAAS,CAACQ;IAAO,CAAE,CAAE;IAACC,IAAI,EAAE;EAAK,CAAE,CAAC,eAC7EpB,KAAA,CAAAa,aAAA;IAAKE,SAAS,EAAC;EAAsD,GAChEJ,SAAS,CAACK,KAAK,IAAIL,SAAS,CAACC,IAC7B,CACJ,CAAC;AAEd,CAAC;AAED,OAAO,MAAMS,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAMC,MAAM,GAAGhB,kBAAkB,CAAC,CAAC;EAEnC,oBACIN,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,QACKQ,MAAM,CAACC,GAAG,CAACC,KAAK,IAAI;IACjB,IAAI,CAACA,KAAK,CAACC,KAAK,CAACC,MAAM,EAAE;MACrB,OAAO,IAAI;IACf;IAEA,oBACI1B,KAAA,CAAAa,aAAA,CAACX,IAAI;MACDyB,GAAG,EAAEH,KAAK,CAACZ,IAAK;MAChBgB,KAAK,EAAEJ,KAAK,CAACR,KAAM;MACnBa,WAAW,EAAEL,KAAK,CAACK;MACnB;MACA;IAAA,gBAEA7B,KAAA,CAAAa,aAAA;MAAKE,SAAS,EAAC;IAAyC,GACnDS,KAAK,CAACC,KAAK,CAACF,GAAG,CAACf,IAAI,IAAI;MACrB,oBACIR,KAAA,CAAAa,aAAA,CAACR,SAAS;QACNsB,GAAG,EAAEnB,IAAI,CAACI,IAAK;QACfkB,IAAI,EAAC,SAAS;QACdtB,IAAI,EAAE;UAAEuB,aAAa,EAAEvB,IAAI,CAACI;QAAK;MAAE,GAElC,CAAC;QAAEoB;MAAQ,CAAC,KACTA,OAAO,cACHhC,KAAA,CAAAa,aAAA,2BACIb,KAAA,CAAAa,aAAA,CAACN,cAAc;QAACC,IAAI,EAAEA;MAAK,CAAE,CAC5B,CACT,CAEG,CAAC;IAEpB,CAAC,CACA,CACH,CAAC;EAEf,CAAC,CACH,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Card } from \"@webiny/admin-ui\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type { ComponentGroupItem, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { useComponentGroups } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js\";\n\nconst GroupComponent = ({ item }: { item: ComponentGroupItem }) => {\n    const components = useSelectFromEditor<Record<string, ComponentManifest>>(state => {\n        return state.components ?? {};\n    });\n\n    const component = components[item.name];\n\n    if (!component) {\n        return <></>;\n    }\n\n    return (\n        <div className=\"flex flex-row items-center p-sm bg-neutral-light rounded-sm gap-sm cursor-grab fill-neutral-strong\">\n            <Icon label=\"Icon\" icon={<InlineSvg src={component.image!} />} size={\"md\"} />\n            <div className=\"text-sm font-medium text-neutral-primary text-center\">\n                {component.label ?? component.name}\n            </div>\n        </div>\n    );\n};\n\nexport const InsertElements = () => {\n    const groups = useComponentGroups();\n\n    return (\n        <>\n            {groups.map(group => {\n                if (!group.items.length) {\n                    return null;\n                }\n\n                return (\n                    <Card\n                        key={group.name}\n                        title={group.label}\n                        description={group.description}\n                        // borderRadius={\"none\"}\n                        // padding={\"\"}\n                    >\n                        <div className=\"flex flex-col gap-sm p-sm justify-start\">\n                            {group.items.map(item => {\n                                return (\n                                    <Draggable\n                                        key={item.name}\n                                        type=\"ELEMENT\"\n                                        item={{ componentName: item.name }}\n                                    >\n                                        {({ dragRef }) =>\n                                            dragRef(\n                                                <div>\n                                                    <GroupComponent item={item} />\n                                                </div>\n                                            )\n                                        }\n                                    </Draggable>\n                                );\n                            })}\n                        </div>\n                    </Card>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["GroupComponent","item","components","useSelectFromEditor","state","component","Icon","InlineSvg","InsertElements","groups","useComponentGroups","group","Card","Draggable","dragRef"],"mappings":";;;;;;AAQA,MAAMA,iBAAiB,CAAC,EAAEC,IAAI,EAAgC;IAC1D,MAAMC,aAAaC,oBAAuDC,CAAAA,QAC/DA,MAAM,UAAU,IAAI,CAAC;IAGhC,MAAMC,YAAYH,UAAU,CAACD,KAAK,IAAI,CAAC;IAEvC,IAAI,CAACI,WACD,OAAO,WAAP,GAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QAAC,OAAM;QAAO,oBAAM,oBAACC,WAASA;YAAC,KAAKF,UAAU,KAAK;;QAAO,MAAM;sBACrE,oBAAC;QAAI,WAAU;OACVA,UAAU,KAAK,IAAIA,UAAU,IAAI;AAIlD;AAEO,MAAMG,iBAAiB;IAC1B,MAAMC,SAASC;IAEf,OAAO,WAAP,GACI,0CACKD,OAAO,GAAG,CAACE,CAAAA;QACR,IAAI,CAACA,MAAM,KAAK,CAAC,MAAM,EACnB,OAAO;QAGX,OAAO,WAAP,GACI,oBAACC,MAAIA;YACD,KAAKD,MAAM,IAAI;YACf,OAAOA,MAAM,KAAK;YAClB,aAAaA,MAAM,WAAW;yBAI9B,oBAAC;YAAI,WAAU;WACVA,MAAM,KAAK,CAAC,GAAG,CAACV,CAAAA,OACN,WAAP,GACI,oBAACY,WAASA;gBACN,KAAKZ,KAAK,IAAI;gBACd,MAAK;gBACL,MAAM;oBAAE,eAAeA,KAAK,IAAI;gBAAC;eAEhC,CAAC,EAAEa,OAAO,EAAE,GACTA,QAAQ,WAARA,GACI,oBAAC,2BACG,oBAACd,gBAAcA;oBAAC,MAAMC;;IAU9D;AAGZ"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.js

@@ -1,19 +1,18 @@
-import React from "react";
+import react from "react";
 import { Icon, Tabs } from "@webiny/admin-ui";
 import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
-import { ReactComponent as InsertIcon } from "@webiny/icons/add_circle_outline.svg";
+import { ReactComponent } from "@webiny/icons/add_circle_outline.svg";
 import { InsertElements } from "./InsertElements.js";
-export const InsertElementsTab = () => {
-  return /*#__PURE__*/React.createElement(Tabs.Tab, {
-    value: "insert",
-    trigger: "Insert",
-    spacing: "sm",
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(InsertIcon, null),
-      label: "Insert Element"
-    }),
-    content: /*#__PURE__*/React.createElement(ScrollableContainer, null, /*#__PURE__*/React.createElement(InsertElements, null))
-  });
-};
+const InsertElementsTab = ()=>/*#__PURE__*/ react.createElement(Tabs.Tab, {
+        value: "insert",
+        trigger: "Insert",
+        spacing: "sm",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Insert Element"
+        }),
+        content: /*#__PURE__*/ react.createElement(ScrollableContainer, null, /*#__PURE__*/ react.createElement(InsertElements, null))
+    });
+export { InsertElementsTab };
 
 //# sourceMappingURL=InsertElementsTab.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","Tabs","ScrollableContainer","ReactComponent","InsertIcon","InsertElements","InsertElementsTab","createElement","Tab","value","trigger","spacing","icon","label","content"],"sources":["InsertElementsTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tabs } from \"@webiny/admin-ui\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { InsertElements } from \"./InsertElements.js\";\n\nexport const InsertElementsTab = () => {\n    return (\n        <Tabs.Tab\n            value=\"insert\"\n            trigger={\"Insert\"}\n            spacing={\"sm\"}\n            icon={<Icon icon={<InsertIcon />} label={\"Insert Element\"} />}\n            content={\n                <ScrollableContainer>\n                    <InsertElements />\n                </ScrollableContainer>\n            }\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,cAAc,IAAIC,UAAU,QAAQ,sCAAsC;AACnF,SAASC,cAAc;AAEvB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,oBACIP,KAAA,CAAAQ,aAAA,CAACN,IAAI,CAACO,GAAG;IACLC,KAAK,EAAC,QAAQ;IACdC,OAAO,EAAE,QAAS;IAClBC,OAAO,EAAE,IAAK;IACdC,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACP,IAAI;MAACY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACH,UAAU,MAAE,CAAE;MAACS,KAAK,EAAE;IAAiB,CAAE,CAAE;IAC9DC,OAAO,eACHf,KAAA,CAAAQ,aAAA,CAACL,mBAAmB,qBAChBH,KAAA,CAAAQ,aAAA,CAACF,cAAc,MAAE,CACA;EACxB,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tabs } from \"@webiny/admin-ui\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { InsertElements } from \"./InsertElements.js\";\n\nexport const InsertElementsTab = () => {\n    return (\n        <Tabs.Tab\n            value=\"insert\"\n            trigger={\"Insert\"}\n            spacing={\"sm\"}\n            icon={<Icon icon={<InsertIcon />} label={\"Insert Element\"} />}\n            content={\n                <ScrollableContainer>\n                    <InsertElements />\n                </ScrollableContainer>\n            }\n        />\n    );\n};\n"],"names":["InsertElementsTab","Tabs","Icon","InsertIcon","ScrollableContainer","InsertElements"],"mappings":";;;;;AAMO,MAAMA,oBAAoB,IACtB,WAAP,GACI,oBAACC,KAAK,GAAG;QACL,OAAM;QACN,SAAS;QACT,SAAS;QACT,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAUA;YAAK,OAAO;;QACzC,uBACI,oBAACC,qBAAmBA,MAAAA,WAAAA,GAChB,oBAACC,gBAAcA"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/index.js

@@ -1,3 +1 @@
 export * from "./InsertElements.js";
-
-//# sourceMappingURL=index.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js

@@ -1,33 +1,28 @@
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { functionConverter } from "@webiny/website-builder-sdk";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
-const getComponentFilter = group => {
-  if (group.name === "custom") {
-    return cmp => !cmp.group;
-  }
-  if (group.filter) {
-    return functionConverter.deserialize(group.filter);
-  }
-  return cmp => cmp.group === group.name;
+const getComponentFilter = (group)=>{
+    if ("custom" === group.name) return (cmp)=>!cmp.group;
+    if (group.filter) return functionConverter.deserialize(group.filter);
+    return (cmp)=>cmp.group === group.name;
 };
-export const useComponentGroups = () => {
-  const editor = useDocumentEditor();
-  return useSelectFromEditor(state => {
-    const document = editor.getDocumentState().read();
-    const groups = Object.values(state.componentGroups);
-    const components = Object.values(state.components).filter(item => !item.hideFromToolbar);
-    return groups.map(group => {
-      const filter = getComponentFilter(group);
-      return {
-        ...group,
-        items: components.filter(component => {
-          return filter(component, {
-            document
-          });
-        })
-      };
+const useComponentGroups = ()=>{
+    const editor = useDocumentEditor();
+    return useSelectFromEditor((state)=>{
+        const document = editor.getDocumentState().read();
+        const groups = Object.values(state.componentGroups);
+        const components = Object.values(state.components).filter((item)=>!item.hideFromToolbar);
+        return groups.map((group)=>{
+            const filter = getComponentFilter(group);
+            return {
+                ...group,
+                items: components.filter((component)=>filter(component, {
+                        document
+                    }))
+            };
+        });
     });
-  });
 };
+export { useComponentGroups };
 
 //# sourceMappingURL=useComponentGroups.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelectFromEditor","functionConverter","useDocumentEditor","getComponentFilter","group","name","cmp","filter","deserialize","useComponentGroups","editor","state","document","getDocumentState","read","groups","Object","values","componentGroups","components","item","hideFromToolbar","map","items","component"],"sources":["useComponentGroups.ts"],"sourcesContent":["import { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type {\n    ComponentGroupFilterContext,\n    ComponentManifest,\n    SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport { functionConverter } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\ntype WithItems<T> = T & { items: ComponentManifest[] };\n\nconst getComponentFilter = (\n    group: SerializedComponentGroup\n): ((cmp: ComponentManifest, context: ComponentGroupFilterContext) => boolean) => {\n    if (group.name === \"custom\") {\n        return cmp => !cmp.group;\n    }\n\n    if (group.filter) {\n        return functionConverter.deserialize(group.filter!);\n    }\n\n    return cmp => cmp.group === group.name;\n};\n\nexport const useComponentGroups = () => {\n    const editor = useDocumentEditor();\n\n    return useSelectFromEditor<WithItems<SerializedComponentGroup>[]>(state => {\n        const document = editor.getDocumentState().read();\n        const groups = Object.values(state.componentGroups);\n        const components = Object.values(state.components).filter(item => !item.hideFromToolbar);\n\n        return groups.map(group => {\n            const filter = getComponentFilter(group);\n\n            return {\n                ...group,\n                items: components.filter(component => {\n                    return filter(component, { document });\n                })\n            };\n        });\n    });\n};\n"],"mappings":"AAAA,SAASA,mBAAmB;AAM5B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,iBAAiB;AAI1B,MAAMC,kBAAkB,GACpBC,KAA+B,IAC+C;EAC9E,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ,EAAE;IACzB,OAAOC,GAAG,IAAI,CAACA,GAAG,CAACF,KAAK;EAC5B;EAEA,IAAIA,KAAK,CAACG,MAAM,EAAE;IACd,OAAON,iBAAiB,CAACO,WAAW,CAACJ,KAAK,CAACG,MAAO,CAAC;EACvD;EAEA,OAAOD,GAAG,IAAIA,GAAG,CAACF,KAAK,KAAKA,KAAK,CAACC,IAAI;AAC1C,CAAC;AAED,OAAO,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAMC,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAElC,OAAOF,mBAAmB,CAAwCW,KAAK,IAAI;IACvE,MAAMC,QAAQ,GAAGF,MAAM,CAACG,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACjD,MAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAACN,KAAK,CAACO,eAAe,CAAC;IACnD,MAAMC,UAAU,GAAGH,MAAM,CAACC,MAAM,CAACN,KAAK,CAACQ,UAAU,CAAC,CAACZ,MAAM,CAACa,IAAI,IAAI,CAACA,IAAI,CAACC,eAAe,CAAC;IAExF,OAAON,MAAM,CAACO,GAAG,CAAClB,KAAK,IAAI;MACvB,MAAMG,MAAM,GAAGJ,kBAAkB,CAACC,KAAK,CAAC;MAExC,OAAO;QACH,GAAGA,KAAK;QACRmB,KAAK,EAAEJ,UAAU,CAACZ,MAAM,CAACiB,SAAS,IAAI;UAClC,OAAOjB,MAAM,CAACiB,SAAS,EAAE;YAAEZ;UAAS,CAAC,CAAC;QAC1C,CAAC;MACL,CAAC;IACL,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.ts"],"sourcesContent":["import { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type {\n    ComponentGroupFilterContext,\n    ComponentManifest,\n    SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport { functionConverter } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\ntype WithItems<T> = T & { items: ComponentManifest[] };\n\nconst getComponentFilter = (\n    group: SerializedComponentGroup\n): ((cmp: ComponentManifest, context: ComponentGroupFilterContext) => boolean) => {\n    if (group.name === \"custom\") {\n        return cmp => !cmp.group;\n    }\n\n    if (group.filter) {\n        return functionConverter.deserialize(group.filter!);\n    }\n\n    return cmp => cmp.group === group.name;\n};\n\nexport const useComponentGroups = () => {\n    const editor = useDocumentEditor();\n\n    return useSelectFromEditor<WithItems<SerializedComponentGroup>[]>(state => {\n        const document = editor.getDocumentState().read();\n        const groups = Object.values(state.componentGroups);\n        const components = Object.values(state.components).filter(item => !item.hideFromToolbar);\n\n        return groups.map(group => {\n            const filter = getComponentFilter(group);\n\n            return {\n                ...group,\n                items: components.filter(component => {\n                    return filter(component, { document });\n                })\n            };\n        });\n    });\n};\n"],"names":["getComponentFilter","group","cmp","functionConverter","useComponentGroups","editor","useDocumentEditor","useSelectFromEditor","state","document","groups","Object","components","item","filter","component"],"mappings":";;;AAWA,MAAMA,qBAAqB,CACvBC;IAEA,IAAIA,AAAe,aAAfA,MAAM,IAAI,EACV,OAAOC,CAAAA,MAAO,CAACA,IAAI,KAAK;IAG5B,IAAID,MAAM,MAAM,EACZ,OAAOE,kBAAkB,WAAW,CAACF,MAAM,MAAM;IAGrD,OAAOC,CAAAA,MAAOA,IAAI,KAAK,KAAKD,MAAM,IAAI;AAC1C;AAEO,MAAMG,qBAAqB;IAC9B,MAAMC,SAASC;IAEf,OAAOC,oBAA2DC,CAAAA;QAC9D,MAAMC,WAAWJ,OAAO,gBAAgB,GAAG,IAAI;QAC/C,MAAMK,SAASC,OAAO,MAAM,CAACH,MAAM,eAAe;QAClD,MAAMI,aAAaD,OAAO,MAAM,CAACH,MAAM,UAAU,EAAE,MAAM,CAACK,CAAAA,OAAQ,CAACA,KAAK,eAAe;QAEvF,OAAOH,OAAO,GAAG,CAACT,CAAAA;YACd,MAAMa,SAASd,mBAAmBC;YAElC,OAAO;gBACH,GAAGA,KAAK;gBACR,OAAOW,WAAW,MAAM,CAACG,CAAAA,YACdD,OAAOC,WAAW;wBAAEN;oBAAS;YAE5C;QACJ;IACJ;AACJ"}