npm - @webiny/app-website-builder - Versions diffs - 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7 - Mend

@webiny/app-website-builder 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2011) hide show

package/BaseEditor/config/Sidebar/Sidebar.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import React from "react";
 import type { ElementProps as CoreElementProps } from "../Element.js";
 import type { ElementsProps as BaseElementsProps } from "../Elements.js";
+import { Tab } from "./Tab.js";
+import { ScrollableContainer } from "../Sidebar/ScrollableContainer.js";
 export type ScopedElementProps = Omit<CoreElementProps, "scope">;
 export type BaseElementProps = Omit<ScopedElementProps, "id">;
 export type ElementsProps = Omit<BaseElementsProps, "scope">;
@@ -100,7 +102,7 @@ export declare const Sidebar: (() => React.JSX.Element) & {
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Tab.js").TabProps) => React.JSX.Element;
+        Tab: typeof Tab;
     };
-    ScrollableContainer: ({ children }: any) => React.JSX.Element;
+    ScrollableContainer: typeof ScrollableContainer;
 };

package/BaseEditor/config/Sidebar/Sidebar.js CHANGED Viewed

@@ -8,7 +8,8 @@ import { createGetId } from "../createGetId.js";
 import { ScrollableContainer } from "./ScrollableContainer.js";
 const SCOPE = "sidebar";
 const BaseSidebar = makeDecoratable("SidebarScopedLayout", ()=>/*#__PURE__*/ react.createElement("div", {
-        className: "w-[300px] flex-none"
+        className: "w-[var(--wb-spacing-sidebar)] flex-none relative",
+        "data-role": "wb-object-panel-anchor"
     }, /*#__PURE__*/ react.createElement(Layout, null)));
 const ScopedElement = makeDecoratable("SidebarScopedElement", (props)=>/*#__PURE__*/ react.createElement(Element, {
         ...props,

package/BaseEditor/config/Sidebar/Sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/config/Sidebar/Sidebar.js","sources":["../../../../src/BaseEditor/config/Sidebar/Sidebar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as CoreElementProps } from \"../Element.js\";\nimport { Element as CoreElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Tab } from \"./Tab.js\";\nimport { createGetId } from \"../createGetId.js\";\nimport { ScrollableContainer } from \"../Sidebar/ScrollableContainer.js\";\n\nconst SCOPE = \"sidebar\";\n\nconst BaseSidebar = makeDecoratable(\"SidebarScopedLayout\", () => {\n return (\n <div className={\"w-[~~300px~~] flex-none\"}>\n <Layout />\n </div>\n );\n});\n\nexport type ScopedElementProps = Omit<CoreElementProps, \"scope\">;\n\nconst ScopedElement = makeDecoratable(\"SidebarScopedElement\", (props: ScopedElementProps) => {\n return <CoreElement {...props} scope={SCOPE} />;\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type BaseElementProps = Omit<ScopedElementProps, \"id\">;\n\nconst BaseElement = makeDecoratable(\"SidebarElement\", (props: BaseElementProps) => {\n return (\n <ScopedElement\n {...props}\n id={getElementId(props.name)}\n before={props.before ? getElementId(props.before) : undefined}\n after={props.after ? getElementId(props.after) : undefined}\n />\n );\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"SidebarElements\", (props: ElementsProps) => {\n return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport type GroupProps = Omit<BaseElementProps, \"group\">;\n\nconst BaseGroup = makeDecoratable(\"SidebarGroup\", (props: GroupProps) => {\n return (\n <ScopedElement\n {...props}\n group={\"groups\"}\n id={getElementId(props.name)}\n before={props.before ? getElementId(props.before) : undefined}\n after={props.after ? getElementId(props.after) : undefined}\n />\n );\n});\n\nexport const Sidebar = Object.assign(BaseSidebar, {\n Layout,\n Element: BaseElement,\n Elements,\n Group: Object.assign(BaseGroup, { Tab }),\n ScrollableContainer\n});\n"],"names":["SCOPE","BaseSidebar","makeDecoratable","Layout","ScopedElement","props","CoreElement","getElementId","createGetId","BaseElement","undefined","Elements","BaseElements","BaseGroup","Sidebar","Object","Tab","ScrollableContainer"],"mappings":";;;;;;;;AAWA,MAAMA,QAAQ;AAEd,MAAMC,cAAcC,gBAAgB,uBAAuB,IAChD,WAAP,GACI,oBAAC;~~QAAI~~,WAAW;~~qBACZ~~,oBAACC,QAAMA;AAOnB,MAAMC,gBAAgBF,gBAAgB,wBAAwB,CAACG,QACpD,WAAP,GAAO,oBAACC,SAAWA;QAAE,GAAGD,KAAK;QAAE,OAAOL;;AAG1C,MAAMO,eAAeC,YAAYR;AAIjC,MAAMS,cAAcP,gBAAgB,kBAAkB,CAACG,QAC5C,WAAP,GACI,oBAACD,eAAaA;QACT,GAAGC,KAAK;QACT,IAAIE,aAAaF,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGE,aAAaF,MAAM,MAAM,IAAIK;QACpD,OAAOL,MAAM,KAAK,GAAGE,aAAaF,MAAM,KAAK,IAAIK;;AAO7D,MAAMC,mBAAWT,gBAAgB,mBAAmB,CAACG,QAC1C,WAAP,GAAO,oBAACO,UAAYA;QAAE,GAAGP,KAAK;QAAE,OAAOL;;AAK3C,MAAMa,YAAYX,gBAAgB,gBAAgB,CAACG,QACxC,WAAP,GACI,oBAACD,eAAaA;QACT,GAAGC,KAAK;QACT,OAAO;QACP,IAAIE,aAAaF,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGE,aAAaF,MAAM,MAAM,IAAIK;QACpD,OAAOL,MAAM,KAAK,GAAGE,aAAaF,MAAM,KAAK,IAAIK;;AAKtD,MAAMI,UAAUC,OAAO,MAAM,CAACd,aAAa;IAC9CE,QAAMA;IACN,SAASM;IACTE,UAAAA;IACA,OAAOI,OAAO,MAAM,CAACF,WAAW;QAAEG,KAAGA;IAAC;IACtCC,qBAAmBA;AACvB"}
1	+ {"version":3,"file":"BaseEditor/config/Sidebar/Sidebar.js","sources":["../../../../src/BaseEditor/config/Sidebar/Sidebar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as CoreElementProps } from \"../Element.js\";\nimport { Element as CoreElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Tab } from \"./Tab.js\";\nimport { createGetId } from \"../createGetId.js\";\nimport { ScrollableContainer } from \"../Sidebar/ScrollableContainer.js\";\n\nconst SCOPE = \"sidebar\";\n\nconst BaseSidebar = makeDecoratable(\"SidebarScopedLayout\", () => {\n return (\n <div\n className={\"w-[var(--wb-spacing-sidebar)] flex-none relative\"}\n data-role={\"wb-object-panel-anchor\"}\n >\n <Layout />\n </div>\n );\n});\n\nexport type ScopedElementProps = Omit<CoreElementProps, \"scope\">;\n\nconst ScopedElement = makeDecoratable(\"SidebarScopedElement\", (props: ScopedElementProps) => {\n return <CoreElement {...props} scope={SCOPE} />;\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type BaseElementProps = Omit<ScopedElementProps, \"id\">;\n\nconst BaseElement = makeDecoratable(\"SidebarElement\", (props: BaseElementProps) => {\n return (\n <ScopedElement\n {...props}\n id={getElementId(props.name)}\n before={props.before ? getElementId(props.before) : undefined}\n after={props.after ? getElementId(props.after) : undefined}\n />\n );\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"SidebarElements\", (props: ElementsProps) => {\n return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport type GroupProps = Omit<BaseElementProps, \"group\">;\n\nconst BaseGroup = makeDecoratable(\"SidebarGroup\", (props: GroupProps) => {\n return (\n <ScopedElement\n {...props}\n group={\"groups\"}\n id={getElementId(props.name)}\n before={props.before ? getElementId(props.before) : undefined}\n after={props.after ? getElementId(props.after) : undefined}\n />\n );\n});\n\nexport const Sidebar = Object.assign(BaseSidebar, {\n Layout,\n Element: BaseElement,\n Elements,\n Group: Object.assign(BaseGroup, { Tab }),\n ScrollableContainer\n});\n"],"names":["SCOPE","BaseSidebar","makeDecoratable","Layout","ScopedElement","props","CoreElement","getElementId","createGetId","BaseElement","undefined","Elements","BaseElements","BaseGroup","Sidebar","Object","Tab","ScrollableContainer"],"mappings":";;;;;;;;AAWA,MAAMA,QAAQ;AAEd,MAAMC,cAAcC,gBAAgB,uBAAuB,IAChD,WAAP,GACI,oBAAC;QACG,WAAW;QACX,aAAW;qBAEX,oBAACC,QAAMA;AAOnB,MAAMC,gBAAgBF,gBAAgB,wBAAwB,CAACG,QACpD,WAAP,GAAO,oBAACC,SAAWA;QAAE,GAAGD,KAAK;QAAE,OAAOL;;AAG1C,MAAMO,eAAeC,YAAYR;AAIjC,MAAMS,cAAcP,gBAAgB,kBAAkB,CAACG,QAC5C,WAAP,GACI,oBAACD,eAAaA;QACT,GAAGC,KAAK;QACT,IAAIE,aAAaF,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGE,aAAaF,MAAM,MAAM,IAAIK;QACpD,OAAOL,MAAM,KAAK,GAAGE,aAAaF,MAAM,KAAK,IAAIK;;AAO7D,MAAMC,mBAAWT,gBAAgB,mBAAmB,CAACG,QAC1C,WAAP,GAAO,oBAACO,UAAYA;QAAE,GAAGP,KAAK;QAAE,OAAOL;;AAK3C,MAAMa,YAAYX,gBAAgB,gBAAgB,CAACG,QACxC,WAAP,GACI,oBAACD,eAAaA;QACT,GAAGC,KAAK;QACT,OAAO;QACP,IAAIE,aAAaF,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGE,aAAaF,MAAM,MAAM,IAAIK;QACpD,OAAOL,MAAM,KAAK,GAAGE,aAAaF,MAAM,KAAK,IAAIK;;AAKtD,MAAMI,UAAUC,OAAO,MAAM,CAACd,aAAa;IAC9CE,QAAMA;IACN,SAASM;IACTE,UAAAA;IACA,OAAOI,OAAO,MAAM,CAACF,WAAW;QAAEG,KAAGA;IAAC;IACtCC,qBAAmBA;AACvB"}

package/BaseEditor/config/Sidebar/Tab.d.ts CHANGED Viewed

@@ -1,14 +1,10 @@
 import React from "react";
-export declare const TabContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface TabProps {
     name: string;
     label: string;
-    noPadding?: boolean;
+    icon?: React.ReactElement;
     element: React.JSX.Element;
     disabled?: boolean;
     visible?: boolean;
 }
-export declare const Tab: ({ name, label, disabled, element, visible, noPadding }: TabProps) => React.JSX.Element;
+export declare const Tab: ({ name, label, icon, disabled, element, visible }: TabProps) => React.JSX.Element;

package/BaseEditor/config/Sidebar/Tab.js CHANGED Viewed

@@ -1,31 +1,15 @@
 import react from "react";
-import styled from "@emotion/styled";
-import { Tabs } from "@webiny/admin-ui";
-const TabContainer = styled("div")({
-    display: "flex",
-    position: "relative",
-    flexDirection: "column",
-    height: "calc(100vh - 44px - 49px)",
-    overflowY: "auto",
-    "&::-webkit-scrollbar": {
-        width: 1
-    },
-    "&::-webkit-scrollbar-track": {
-        boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)"
-    },
-    "&::-webkit-scrollbar-thumb": {
-        backgroundColor: "darkgrey",
-        outline: "1px solid slategrey"
-    }
-});
-const Tab = ({ name, label, disabled, element, visible, noPadding })=>/*#__PURE__*/ react.createElement(Tabs.Tab, {
-        className: noPadding ? "p-0" : void 0,
+import { FillViewportHeight, ScrollArea, SegmentedControl } from "@webiny/admin-ui";
+const Tab = ({ name, label, icon, disabled, element, visible })=>/*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
         value: name,
         trigger: label,
+        icon: icon,
         disabled: disabled,
         visible: visible,
-        content: /*#__PURE__*/ react.createElement(TabContainer, null, element)
+        content: /*#__PURE__*/ react.createElement(FillViewportHeight, null, /*#__PURE__*/ react.createElement(ScrollArea, {
+            className: "h-full"
+        }, element))
     });
-export { Tab, TabContainer };
+export { Tab };
 //# sourceMappingURL=Tab.js.map

package/BaseEditor/config/Sidebar/Tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/config/Sidebar/Tab.js","sources":["../../../../src/BaseEditor/config/Sidebar/Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport ~~styled~~ ~~from~~ ~~\"@emotion/styled\";\nimport~~ { ~~Tabs~~ } from \"@webiny/admin-ui\";\n\nexport const TabContainer = styled(\"div\")({\n display: \"flex\",\n position: \"relative\",\n flexDirection: \"column\",\n height: \"calc(100vh - 44px - 49px)\", // Subtract top-bar and tab-header height\n overflowY: \"auto\",\n // Style scrollbar\n \"&::-webkit-scrollbar\": {\n width: 1\n },\n \"&::-webkit-scrollbar-track\": {\n boxShadow: \"inset 0 0 6px rgba(0, 0, 0, 0.3)\"\n },\n \"&::-webkit-scrollbar-thumb\": {\n backgroundColor: \"darkgrey\",\n outline: \"1px solid slategrey\"\n }\n});\n\nexport interface TabProps {\n name: string;\n label: string;\n ~~noPadding~~?: ~~boolean~~;\n element: React.JSX.Element;\n disabled?: boolean;\n visible?: boolean;\n}\n\nexport const Tab = ({ name, label, disabled, element, visible, ~~noPadding~~ }: TabProps) => {\n return (\n <Tabs.Tab\n ~~className~~={~~noPadding ? \"p-0\" : undefined~~}\n ~~value~~={~~name~~}\n ~~trigger~~={~~label~~}\n disabled={disabled}\n visible={visible}\n content={<~~TabContainer~~>{element}</~~TabContainer>~~}\n />\n );\n};\n"],"names":["~~TabContainer~~","~~styled~~","~~Tab~~","~~name~~","~~label","~~disabled","element","visible","~~noPadding~~","~~Tabs~~","~~undefined~~"],"mappings":"~~;;;AAIO~~,MAAMA,~~eAAeC,OAAO,OAAO;IACtC,SAAS;IACT,UAAU;IACV,eAAe;IACf,QAAQ;IACR,WAAW;IAEX,wBAAwB;QACpB,OAAO;IACX;IACA,8BAA8B;QAC1B,WAAW;IACf;IACA,8BAA8B;QAC1B,iBAAiB;QACjB,SAAS;IACb;AACJ;AAWO,MAAMC,~~MAAM,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,~~QAAQ~~,EAAEC,~~OAAO~~,EAAEC,OAAO,EAAEC,~~SAAS~~,EAAY,~~GACzE~~,WAAP,GACI,oBAACC,~~KAAK~~,~~GAAG;QACL~~,~~WAAWD~~,~~YAAY,QAAQE~~;~~QAC/B~~,~~OAAOP~~;QACP,SAASC;QACT,UAAUC;QACV,SAASE;~~QACT~~,~~uBAAS~~,~~oBAACP~~,~~cAAYA~~,~~MAAEM~~"}
1	+ {"version":3,"file":"BaseEditor/config/Sidebar/Tab.js","sources":["../../../../src/BaseEditor/config/Sidebar/Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport { FillViewportHeight, ScrollArea, SegmentedControl } from \"@webiny/admin-ui\";\n\nexport interface TabProps {\n name: string;\n label: string;\n icon?: React.ReactElement;\n element: React.JSX.Element;\n disabled?: boolean;\n visible?: boolean;\n}\n\nexport const Tab = ({ name, label, icon, disabled, element, visible }: TabProps) => {\n return (\n <SegmentedControl.Tabs.Tab\n value={name}\n trigger={label}\n icon={icon}\n disabled={disabled}\n visible={visible}\n // Same pattern as the Insert panel: FillViewportHeight sizes the region to the space\n // from its own top edge down to the viewport bottom (no hardcoded offsets), and the\n // ScrollArea scrolls the content within it.\n content={\n <FillViewportHeight>\n <ScrollArea className={\"h-full\"}>{element}</ScrollArea>\n </FillViewportHeight>\n }\n />\n );\n};\n"],"names":["Tab","name","label","icon","disabled","element","visible","SegmentedControl","FillViewportHeight","ScrollArea"],"mappings":";;AAYO,MAAMA,MAAM,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAY,GACpE,WAAP,GACI,oBAACC,iBAAiB,IAAI,CAAC,GAAG;QACtB,OAAON;QACP,SAASC;QACT,MAAMC;QACN,UAAUC;QACV,SAASE;QAIT,uBACI,oBAACE,oBAAkBA,MAAAA,WAAAA,GACf,oBAACC,YAAUA;YAAC,WAAW;WAAWJ"}

package/BaseEditor/config/Toolbar/Layout.js CHANGED Viewed

@@ -1,21 +1,15 @@
 import react from "react";
+import { SegmentedControl } from "@webiny/admin-ui";
 import { Toolbar } from "./Toolbar.js";
-import { Tabs } from "@webiny/admin-ui/Tabs/index.js";
 const Layout = ()=>/*#__PURE__*/ react.createElement("div", {
         "data-role": "editor-toolbar",
-        className: "bg-neutral-base border-r-sm border-r-neutral-dimmed w-[300px] h-full"
-    }, /*#__PURE__*/ react.createElement(Tabs, {
-        size: "md",
-        spacing: "md",
-        defaultValue: "insert",
-        tabs: [
-            /*#__PURE__*/ react.createElement(Toolbar.Elements, {
-                key: "tabs",
-                group: "tabs"
-            })
-        ],
-        separator: true
-    }));
+        className: "bg-neutral-base border-r-sm border-r-neutral-dimmed h-full flex flex-col p-sm"
+    }, /*#__PURE__*/ react.createElement(SegmentedControl.Tabs, {
+        className: "flex-1 flex flex-col min-h-0",
+        variant: "dimmed"
+    }, /*#__PURE__*/ react.createElement(Toolbar.Elements, {
+        group: "tabs"
+    })));
 export { Layout };
 //# sourceMappingURL=Layout.js.map

package/BaseEditor/config/Toolbar/Layout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/config/Toolbar/Layout.js","sources":["../../../../src/BaseEditor/config/Toolbar/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { ~~Toolbar~~ } from \"~~./Toolbar.js~~\";\nimport { ~~Tabs~~ } from \"~~@webiny/admin-ui/Tabs/index~~.js\";\n\nexport const Layout = () => {\n return (\n <div\n data-role={\"editor-toolbar\"}\n className={\"bg-neutral-base border-r-sm border-r-neutral-dimmed w-~~[300px]~~ h-~~full~~\"}\n >\n <Tabs~~\n size=\"md\"\n spacing~~={\"md\"}~~\n defaultValue~~={\"~~insert~~\"}\n ~~tabs={[~~<Toolbar.Elements ~~key=\"tabs\"~~ group={\"tabs\"} ~~/>]}\~~n ~~separator={true}\n~~ ~~/>\~~n </div>\n );\n};\n"],"names":["Layout","~~Tabs~~","Toolbar"],"mappings":";;;AAIO,MAAMA,SAAS,IACX,WAAP,GACI,oBAAC;QACG,aAAW;QACX,~~WAAW~~;~~qBAEX~~,oBAACC,~~MAAIA~~;~~QACD~~,~~MAAK~~;~~QACL~~,SAAS;~~QACT~~,~~cAAc;QACd,MAAM;0BAAC,~~oBAACC,QAAQ,QAAQ;~~gBAAC~~,~~KAAI;gBAAO,~~OAAO~~;;SAAW;QACtD,WAAW~~"}
1	+ {"version":3,"file":"BaseEditor/config/Toolbar/Layout.js","sources":["../../../../src/BaseEditor/config/Toolbar/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\nimport { Toolbar } from \"./Toolbar.js\";\n\nexport const Layout = () => {\n return (\n <div\n data-role={\"editor-toolbar\"}\n className={\n \"bg-neutral-base border-r-sm border-r-neutral-dimmed h-full flex flex-col p-sm\"\n }\n >\n <SegmentedControl.Tabs className={\"flex-1 flex flex-col min-h-0\"} variant={\"dimmed\"}>\n <Toolbar.Elements group={\"tabs\"} />\n </SegmentedControl.Tabs>\n </div>\n );\n};\n"],"names":["Layout","SegmentedControl","Toolbar"],"mappings":";;;AAIO,MAAMA,SAAS,IACX,WAAP,GACI,oBAAC;QACG,aAAW;QACX,WACI;qBAGJ,oBAACC,iBAAiB,IAAI;QAAC,WAAW;QAAgC,SAAS;qBACvE,oBAACC,QAAQ,QAAQ;QAAC,OAAO"}

package/BaseEditor/config/Toolbar/Tab.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import React from "react";
+export interface TabProps {
+    name: string;
+    label: string;
+    icon?: React.ReactElement;
+    element: React.JSX.Element;
+    disabled?: boolean;
+    visible?: boolean;
+}
+export declare const Tab: ({ name, label, icon, element, disabled, visible }: TabProps) => React.JSX.Element;

package/BaseEditor/config/Toolbar/Tab.js ADDED Viewed

@@ -0,0 +1,13 @@
+import react from "react";
+import { SegmentedControl } from "@webiny/admin-ui";
+const Tab = ({ name, label, icon, element, disabled, visible })=>/*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+        value: name,
+        trigger: label,
+        icon: icon,
+        disabled: disabled,
+        visible: visible,
+        content: element
+    });
+export { Tab };
+//# sourceMappingURL=Tab.js.map

package/BaseEditor/config/Toolbar/Tab.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BaseEditor/config/Toolbar/Tab.js","sources":["../../../../src/BaseEditor/config/Toolbar/Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\n\nexport interface TabProps {\n name: string;\n label: string;\n icon?: React.ReactElement;\n element: React.JSX.Element;\n disabled?: boolean;\n visible?: boolean;\n}\n\nexport const Tab = ({ name, label, icon, element, disabled, visible }: TabProps) => (\n <SegmentedControl.Tabs.Tab\n value={name}\n trigger={label}\n icon={icon}\n disabled={disabled}\n visible={visible}\n content={element}\n />\n);\n"],"names":["Tab","name","label","icon","element","disabled","visible","SegmentedControl"],"mappings":";;AAYO,MAAMA,MAAM,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,OAAO,EAAY,iBAC3E,oBAACC,iBAAiB,IAAI,CAAC,GAAG;QACtB,OAAON;QACP,SAASC;QACT,MAAMC;QACN,UAAUE;QACV,SAASC;QACT,SAASF"}

package/BaseEditor/config/Toolbar/Toolbar.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import React from "react";
 import type { ElementProps as BaseElementProps } from "../Element.js";
+import { Layout } from "./Layout.js";
 import type { ElementsProps as BaseElementsProps } from "../Elements.js";
+import { Tab } from "./Tab.js";
 export type ElementProps = Omit<BaseElementProps, "scope" | "id">;
 export type ElementsProps = Omit<BaseElementsProps, "scope">;
 export declare const Toolbar: (() => React.JSX.Element) & {
@@ -22,7 +24,7 @@ export declare const Toolbar: (() => React.JSX.Element) & {
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Layout: () => React.JSX.Element;
+    Layout: typeof Layout;
     Element: ((props: ElementProps) => React.JSX.Element) & {
         original: (props: ElementProps) => React.JSX.Element;
         originalName: string;
@@ -61,4 +63,5 @@ export declare const Toolbar: (() => React.JSX.Element) & {
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
+    Tab: typeof Tab;
 };

package/BaseEditor/config/Toolbar/Toolbar.js CHANGED Viewed

@@ -4,9 +4,10 @@ import { Element } from "../Element.js";
 import { Layout } from "./Layout.js";
 import { Elements } from "../Elements.js";
 import { createGetId } from "../createGetId.js";
+import { Tab } from "./Tab.js";
 const SCOPE = "toolbar";
 const BaseToolbar = makeDecoratable("ToolbarLayout", ()=>/*#__PURE__*/ react.createElement("div", {
-        className: "w-[300px] flex-none",
+        className: "w-[var(--wb-spacing-toolbar)] flex-none",
         "data-affects-preview": "width"
     }, /*#__PURE__*/ react.createElement(Layout, null)));
 const getElementId = createGetId(SCOPE)();
@@ -24,7 +25,8 @@ const Toolbar_Elements = makeDecoratable("ToolbarElements", (props)=>/*#__PURE__
 const Toolbar = Object.assign(BaseToolbar, {
     Layout: Layout,
     Element: BaseToolbarElement,
-    Elements: Toolbar_Elements
+    Elements: Toolbar_Elements,
+    Tab: Tab
 });
 export { Toolbar };

package/BaseEditor/config/Toolbar/Toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/config/Toolbar/Toolbar.js","sources":["../../../../src/BaseEditor/config/Toolbar/Toolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { createGetId } from \"../createGetId.js\";\n\nconst SCOPE = \"toolbar\";\n\nconst BaseToolbar = makeDecoratable(\"ToolbarLayout\", () => {\n return (\n <div className={\"w-[~~300px~~] flex-none\"} data-affects-preview={\"width\"}>\n <Layout />\n </div>\n );\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" \| \"id\">;\n\nconst BaseToolbarElement = makeDecoratable(\"ToolbarElement\", (props: ElementProps) => {\n return (\n <BaseElement\n {...props}\n scope={SCOPE}\n id={getElementId(props.name)}\n before={props.before ? getElementId(props.before) : undefined}\n after={props.after ? getElementId(props.after) : undefined}\n />\n );\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"ToolbarElements\", (props: ElementsProps) => {\n return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const Toolbar = Object.assign(BaseToolbar, {\n Layout,\n Element: BaseToolbarElement,\n Elements\n});\n"],"names":["SCOPE","BaseToolbar","makeDecoratable","Layout","getElementId","createGetId","BaseToolbarElement","props","BaseElement","undefined","Elements","BaseElements","Toolbar","Object"],"mappings":"~~;;;;;;AASA~~,MAAMA,QAAQ;AAEd,MAAMC,cAAcC,gBAAgB,iBAAiB,IAC1C,WAAP,GACI,oBAAC;QAAI,WAAW;~~QAAuB~~,wBAAsB;~~qBACzD~~,oBAACC,QAAMA;AAKnB,MAAMC,eAAeC,YAAYL;AAIjC,MAAMM,qBAAqBJ,gBAAgB,kBAAkB,CAACK,QACnD,WAAP,GACI,oBAACC,SAAWA;QACP,GAAGD,KAAK;QACT,OAAOP;QACP,IAAII,aAAaG,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGH,aAAaG,MAAM,MAAM,IAAIE;QACpD,OAAOF,MAAM,KAAK,GAAGH,aAAaG,MAAM,KAAK,IAAIE;;AAO7D,MAAMC,mBAAWR,gBAAgB,mBAAmB,CAACK,QAC1C,WAAP,GAAO,oBAACI,UAAYA;QAAE,GAAGJ,KAAK;QAAE,OAAOP;;AAGpC,MAAMY,UAAUC,OAAO,MAAM,CAACZ,aAAa;IAC9CE,QAAMA;IACN,SAASG;IACTI,UAAAA;~~AACJ~~"}
1	+ {"version":3,"file":"BaseEditor/config/Toolbar/Toolbar.js","sources":["../../../../src/BaseEditor/config/Toolbar/Toolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { createGetId } from \"../createGetId.js\";\nimport { Tab } from \"./Tab.js\";\n\nconst SCOPE = \"toolbar\";\n\nconst BaseToolbar = makeDecoratable(\"ToolbarLayout\", () => {\n return (\n <div className={\"w-[var(--wb-spacing-toolbar)] flex-none\"} data-affects-preview={\"width\"}>\n <Layout />\n </div>\n );\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" \| \"id\">;\n\nconst BaseToolbarElement = makeDecoratable(\"ToolbarElement\", (props: ElementProps) => {\n return (\n <BaseElement\n {...props}\n scope={SCOPE}\n id={getElementId(props.name)}\n before={props.before ? getElementId(props.before) : undefined}\n after={props.after ? getElementId(props.after) : undefined}\n />\n );\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"ToolbarElements\", (props: ElementsProps) => {\n return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const Toolbar = Object.assign(BaseToolbar, {\n Layout,\n Element: BaseToolbarElement,\n Elements,\n Tab\n});\n"],"names":["SCOPE","BaseToolbar","makeDecoratable","Layout","getElementId","createGetId","BaseToolbarElement","props","BaseElement","undefined","Elements","BaseElements","Toolbar","Object","Tab"],"mappings":";;;;;;;AAUA,MAAMA,QAAQ;AAEd,MAAMC,cAAcC,gBAAgB,iBAAiB,IAC1C,WAAP,GACI,oBAAC;QAAI,WAAW;QAA2C,wBAAsB;qBAC7E,oBAACC,QAAMA;AAKnB,MAAMC,eAAeC,YAAYL;AAIjC,MAAMM,qBAAqBJ,gBAAgB,kBAAkB,CAACK,QACnD,WAAP,GACI,oBAACC,SAAWA;QACP,GAAGD,KAAK;QACT,OAAOP;QACP,IAAII,aAAaG,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGH,aAAaG,MAAM,MAAM,IAAIE;QACpD,OAAOF,MAAM,KAAK,GAAGH,aAAaG,MAAM,KAAK,IAAIE;;AAO7D,MAAMC,mBAAWR,gBAAgB,mBAAmB,CAACK,QAC1C,WAAP,GAAO,oBAACI,UAAYA;QAAE,GAAGJ,KAAK;QAAE,OAAOP;;AAGpC,MAAMY,UAAUC,OAAO,MAAM,CAACZ,aAAa;IAC9CE,QAAMA;IACN,SAASG;IACTI,UAAAA;IACAI,KAAGA;AACP"}

package/BaseEditor/config/TopBar/TopBar.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import React from "react";
 import type { ElementProps as BaseElementProps } from "../Element.js";
 import type { ElementsProps as BaseElementsProps } from "../Elements.js";
+declare const BaseTopBar: () => React.JSX.Element;
 export type ElementProps = Omit<BaseElementProps, "scope" | "id">;
 export type ActionProps = Omit<ElementProps, "group">;
 export type DropdownActionProps = Omit<ElementProps, "group">;
 export type ElementsProps = Omit<BaseElementsProps, "scope">;
-export declare const TopBar: (() => React.JSX.Element) & {
+export declare const TopBar: typeof BaseTopBar & {
     Element: ((props: ElementProps) => React.JSX.Element) & {
         original: (props: ElementProps) => React.JSX.Element;
         originalName: string;
@@ -124,3 +125,4 @@ export declare const TopBar: (() => React.JSX.Element) & {
         MenuLink: (props: import("@webiny/app-admin").OptionsMenuLinkProps) => React.JSX.Element;
     };
 };
+export {};

package/BaseEditor/defaultConfig/Content/AddressBar/AddressBar.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import react, { useEffect, useState } from "react";
-import { BreakpointSelector } from "./BreakpointSelector.js";
 import { PreviewInNewTab } from "./PreviewInNewTab.js";
 import { OpenInNewTab } from "./OpenInNewTab.js";
 import { RefreshPreview } from "./RefreshPreview.js";
@@ -26,9 +25,7 @@ const AddressBar = ()=>{
         className: "w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled"
     }, /*#__PURE__*/ react.createElement(PreviewDomain, null), addressBarUrl), /*#__PURE__*/ react.createElement("div", {
         className: "absolute right-0 top-0"
-    }, /*#__PURE__*/ react.createElement(RefreshPreview, null), /*#__PURE__*/ react.createElement(PreviewInNewTab, null), /*#__PURE__*/ react.createElement(OpenInNewTab, null))), /*#__PURE__*/ react.createElement("div", {
-        className: "flex-none"
-    }, /*#__PURE__*/ react.createElement(BreakpointSelector, null)));
+    }, /*#__PURE__*/ react.createElement(RefreshPreview, null), /*#__PURE__*/ react.createElement(PreviewInNewTab, null), /*#__PURE__*/ react.createElement(OpenInNewTab, null))));
 };
 export { AddressBar };

package/BaseEditor/defaultConfig/Content/AddressBar/AddressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/AddressBar.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { ~~BreakpointSelector } from \"./BreakpointSelector.js\";\nimport {~~ PreviewInNewTab } from \"./PreviewInNewTab.js\";\nimport { OpenInNewTab } from \"./OpenInNewTab.js\";\nimport { RefreshPreview } from \"./RefreshPreview.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { PreviewDomain } from \"./PreviewDomain.js\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\n\nexport const AddressBar = () => {\n const path = useSelectFromDocument(document => document.properties.path);\n\n const { previewDomain } = usePreviewDomain();\n const [addressBarUrl, setAddressBarUrl] = useState<string>(\"\");\n\n useEffect(() => {\n if (!previewDomain) {\n return;\n }\n\n setAddressBarUrl(`${previewDomain}${path}`);\n }, [path, previewDomain]);\n\n return (\n <div\n className=\"w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm\"\n data-affects-preview={\"height\"}\n >\n <div className={\"relative flex-auto\"}>\n <div\n className={\n \"w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled\"\n }\n >\n <PreviewDomain />\n {addressBarUrl}\n </div>\n <div className={\"absolute right-0 top-0\"}>\n <RefreshPreview />\n <PreviewInNewTab />\n <OpenInNewTab />\n </div>\n </div>\n ~~<div className={\"flex-none\"}>\n <BreakpointSelector />\n </div>\n~~ </div>\n );\n};\n"],"names":["AddressBar","path","useSelectFromDocument","document","previewDomain","usePreviewDomain","addressBarUrl","setAddressBarUrl","useState","useEffect","PreviewDomain","RefreshPreview","PreviewInNewTab","OpenInNewTab"~~,"BreakpointSelector"~~],"mappings":"~~;;;;;;;;AASO~~,MAAMA,aAAa;IACtB,MAAMC,OAAOC,sBAAsBC,CAAAA,WAAYA,SAAS,UAAU,CAAC,IAAI;IAEvE,MAAM,EAAEC,aAAa,EAAE,GAAGC;IAC1B,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAiB;IAE3DC,UAAU;QACN,IAAI,CAACL,eACD;QAGJG,iBAAiB,GAAGH,gBAAgBH,MAAM;IAC9C,GAAG;QAACA;QAAMG;KAAc;IAExB,OAAO,WAAP,GACI,oBAAC;QACG,WAAU;QACV,wBAAsB;qBAEtB,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;qBAGJ,oBAACM,eAAaA,OACbJ,gBAAAA,WAAAA,GAEL,oBAAC;QAAI,WAAW;qBACZ,oBAACK,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACC,cAAYA~~,SAAAA,WAAAA,GAGrB,oBAAC~~;~~QAAI,WAAW;qBACZ,oBAACC,oBAAkBA;AAInC~~"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/AddressBar.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { PreviewInNewTab } from \"./PreviewInNewTab.js\";\nimport { OpenInNewTab } from \"./OpenInNewTab.js\";\nimport { RefreshPreview } from \"./RefreshPreview.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { PreviewDomain } from \"./PreviewDomain.js\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\n\nexport const AddressBar = () => {\n const path = useSelectFromDocument(document => document.properties.path);\n\n const { previewDomain } = usePreviewDomain();\n const [addressBarUrl, setAddressBarUrl] = useState<string>(\"\");\n\n useEffect(() => {\n if (!previewDomain) {\n return;\n }\n\n setAddressBarUrl(`${previewDomain}${path}`);\n }, [path, previewDomain]);\n\n return (\n <div\n className=\"w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm\"\n data-affects-preview={\"height\"}\n >\n <div className={\"relative flex-auto\"}>\n <div\n className={\n \"w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled\"\n }\n >\n <PreviewDomain />\n {addressBarUrl}\n </div>\n <div className={\"absolute right-0 top-0\"}>\n <RefreshPreview />\n <PreviewInNewTab />\n <OpenInNewTab />\n </div>\n </div>\n </div>\n );\n};\n"],"names":["AddressBar","path","useSelectFromDocument","document","previewDomain","usePreviewDomain","addressBarUrl","setAddressBarUrl","useState","useEffect","PreviewDomain","RefreshPreview","PreviewInNewTab","OpenInNewTab"],"mappings":";;;;;;;AAQO,MAAMA,aAAa;IACtB,MAAMC,OAAOC,sBAAsBC,CAAAA,WAAYA,SAAS,UAAU,CAAC,IAAI;IAEvE,MAAM,EAAEC,aAAa,EAAE,GAAGC;IAC1B,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAiB;IAE3DC,UAAU;QACN,IAAI,CAACL,eACD;QAGJG,iBAAiB,GAAGH,gBAAgBH,MAAM;IAC9C,GAAG;QAACA;QAAMG;KAAc;IAExB,OAAO,WAAP,GACI,oBAAC;QACG,WAAU;QACV,wBAAsB;qBAEtB,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;qBAGJ,oBAACM,eAAaA,OACbJ,gBAAAA,WAAAA,GAEL,oBAAC;QAAI,WAAW;qBACZ,oBAACK,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACC,cAAYA;AAKjC"}

package/BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.js CHANGED Viewed

@@ -1,32 +1,29 @@
-import react from "react";
-import classnames from "classnames";
-import { Heading, IconButton, Text, Tooltip } from "@webiny/admin-ui";
+import react, { useMemo } from "react";
+import { Text, ToggleGroupPrimitive } from "@webiny/admin-ui";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { InlineSvg } from "../../Toolbar/InsertElements/InlineSvg.js";
 const BreakpointSelector = ()=>{
     const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();
-    return /*#__PURE__*/ react.createElement("div", {
-        className: "align-right bg-neutral-light rounded-md"
-    }, breakpoints.map((bp)=>/*#__PURE__*/ react.createElement(Tooltip, {
-            key: bp.name,
-            content: /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
-                level: 5
-            }, bp.title), /*#__PURE__*/ react.createElement(Text, {
-                size: "md"
-            }, bp.description)),
-            side: "bottom",
-            className: classnames("action-wrapper", {
-                active: bp === breakpoint
-            }),
-            trigger: /*#__PURE__*/ react.createElement(IconButton, {
-                size: "md",
+    const items = useMemo(()=>breakpoints.map((bp)=>({
+                value: bp.name,
                 icon: /*#__PURE__*/ react.createElement(InlineSvg, {
-                    src: bp.icon
+                    src: bp.icon,
+                    className: "size-md"
                 }),
-                variant: breakpoint.name === bp.name ? "tertiary" : "ghost",
-                onClick: ()=>setBreakpoint(bp.name)
-            })
-        })));
+                tooltip: /*#__PURE__*/ react.createElement(Text, {
+                    size: "md"
+                }, /*#__PURE__*/ react.createElement("strong", null, bp.title), bp.description && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("br", null), bp.description))
+            })), [
+        breakpoints
+    ]);
+    return /*#__PURE__*/ react.createElement(ToggleGroupPrimitive, {
+        size: "md",
+        items: items,
+        value: breakpoint.name,
+        onChange: setBreakpoint,
+        variant: "ghost",
+        bordered: false
+    });
 };
 export { BreakpointSelector };

package/BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.tsx"],"sourcesContent":["import React ~~from~~ ~~\"react\";\nimport~~ ~~classNames~~ from \"~~classnames~~\";\nimport { ~~IconButton, Tooltip,~~ Text, ~~Heading~~ } from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\nexport const BreakpointSelector = () => {\n const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();\n\n ~~return~~ ~~(\n <div~~ ~~className~~=~~{\"align-right~~ ~~bg-neutral-light~~ ~~rounded-md~~\~~"}>\~~n {breakpoints.map(bp => {\n ~~return~~ (\n <~~Tooltip\n key~~={bp.~~name~~}~~\n content~~={\n ~~<div>\n <Heading~~ ~~level={5}>{bp.title}</Heading>\~~n <Text size=\"md\">{bp.~~description~~}</~~Text~~>\n ~~</div>\n }~~\n ~~side=\"bottom\"\~~n ~~className={classNames(\"action-wrapper\",~~ {\n ~~active:~~ bp ~~=== breakpoint~~\n })}\n ~~trigger={~~\n <~~IconButton~~\n size={\"md\"}\n ~~icon~~={~~<InlineSvg src={bp.icon~~} ~~/>}~~\n ~~variant~~={breakpoint.name ~~=== bp.name ? \"tertiary\" : \"ghost\"~~}\n ~~onClick~~={~~() =>~~ setBreakpoint~~(bp.name)~~}\n ~~/>\n~~ }\n ~~/>\n );\n~~ })}\n ~~</div>\~~n );\n};\n"],"names":["BreakpointSelector","breakpoint","breakpoints","setBreakpoint","useBreakpoint","bp","~~Tooltip~~","~~Heading~~","~~Text~~","~~classNames~~","~~IconButton~~"~~,"InlineSvg"~~],"mappings":"~~;;;;;AAMO~~,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,aAAa,EAAE,GAAGC;IAEnD,~~OAAO~~,~~WAAP~~,~~GACI~~,~~oBAAC;QAAI~~,~~WAAW;OACXF,~~YAAY,GAAG,~~CAACG~~,CAAAA,~~KACN~~,~~WAAP~~,~~GACI~~,oBAACC,~~SAAOA~~;~~YACJ~~,KAAKD,GAAG,IAAI;~~YACZ~~,~~uBACI~~,~~oBAAC~~,~~2BACG~~,oBAACE,~~SAAOA~~;~~gBAAC~~,~~OAAO~~;~~eAAIF~~,GAAG,KAAK,~~iBAC5B~~,~~oBAACG~~,~~MAAIA;gBAAC~~,~~MAAK;eAAMH~~,~~GAAG~~,~~WAAW;YAGvC~~,~~MAAK;YACL~~,~~WAAWI~~,WAAW~~,kBAAkB~~;~~gBACpC~~,~~QAAQJ,OAAOJ~~;~~YACnB~~;~~YACA~~,~~uBACI~~,~~oBAACS~~,~~YAAUA~~;~~gBACP~~,MAAM;~~gBACN~~,~~oBAAM,oBAACC,WAASA~~;~~oBAAC~~,~~KAAKN~~,~~GAAG,IAAI;;gBAC7B,SAASJ,~~WAAW,IAAI,~~KAAKI,GAAG,IAAI,GAAG,aAAa~~;~~gBACpD~~,SAAS,~~IAAMF,cAAcE,GAAG,IAAI;;;AAQpE~~"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Text, ToggleGroupPrimitive } from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\nexport const BreakpointSelector = () => {\n const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();\n\n const items = useMemo(() => {\n return breakpoints.map(bp => ({\n value: bp.name,\n icon: <InlineSvg src={bp.icon} className={\"size-md\"} />,\n tooltip: (\n <Text size=\"md\">\n <strong>{bp.title}</strong>\n {bp.description && (\n <>\n <br />\n {bp.description}\n </>\n )}\n </Text>\n )\n }));\n }, [breakpoints]);\n\n return (\n <ToggleGroupPrimitive\n size={\"md\"}\n items={items}\n value={breakpoint.name}\n onChange={setBreakpoint}\n variant={\"ghost\"}\n bordered={false}\n />\n );\n};\n"],"names":["BreakpointSelector","breakpoint","breakpoints","setBreakpoint","useBreakpoint","items","useMemo","bp","InlineSvg","Text","ToggleGroupPrimitive"],"mappings":";;;;AAKO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,aAAa,EAAE,GAAGC;IAEnD,MAAMC,QAAQC,QAAQ,IACXJ,YAAY,GAAG,CAACK,CAAAA,KAAO;gBAC1B,OAAOA,GAAG,IAAI;gBACd,MAAM,WAAN,GAAM,oBAACC,WAASA;oBAAC,KAAKD,GAAG,IAAI;oBAAE,WAAW;;gBAC1C,SAAS,WAAT,GACI,oBAACE,MAAIA;oBAAC,MAAK;iCACP,oBAAC,gBAAQF,GAAG,KAAK,GAChBA,GAAG,WAAW,IAAI,WAAJ,GACX,wDACI,oBAAC,aACAA,GAAG,WAAW;YAKnC,KACD;QAACL;KAAY;IAEhB,OAAO,WAAP,GACI,oBAACQ,sBAAoBA;QACjB,MAAM;QACN,OAAOL;QACP,OAAOJ,WAAW,IAAI;QACtB,UAAUE;QACV,SAAS;QACT,UAAU;;AAGtB"}

package/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js CHANGED Viewed

@@ -1,80 +1,20 @@
-import react, { useCallback, useEffect, useState } from "react";
-import { ReactComponent } from "@webiny/icons/language.svg";
-import { Button, DropdownMenu, IconButton, Input, Separator, cn } from "@webiny/admin-ui";
+import react, { useEffect } from "react";
+import { PreviewDomainMenu } from "@webiny/frontend-settings/exports/admin.js";
 import { usePreviewDomain } from "../usePreviewDomain.js";
-import { Bind, Form } from "@webiny/form";
-import { validation } from "@webiny/validation";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { Commands } from "../../../index.js";
 const PreviewDomain = ()=>{
     const editor = useDocumentEditor();
-    const [isOpen, setIsOpen] = useState(false);
-    const { previewDomain, isOverridden, unsetPreviewDomain, setPreviewDomain } = usePreviewDomain();
-    const commitValue = useCallback((data)=>{
-        const value = data.previewDomain;
-        if (value.length > 0) setPreviewDomain(value);
-        else unsetPreviewDomain();
-        setIsOpen(false);
-    }, []);
-    const resetDomain = useCallback(()=>{
-        unsetPreviewDomain();
-        setIsOpen(false);
-    }, []);
+    const { previewDomain } = usePreviewDomain();
     useEffect(()=>{
         if (!previewDomain) return;
         editor.executeCommand(Commands.RefreshPreview);
     }, [
         previewDomain
     ]);
-    const classNames = cn("absolute left-0 top-0", isOverridden ? "fill-accent-default" : "fill-neutral-disabled");
-    return /*#__PURE__*/ react.createElement(DropdownMenu, {
-        open: isOpen,
-        align: "center",
-        side: "bottom",
-        className: "shadow-lg",
-        onOpenChange: setIsOpen,
-        trigger: /*#__PURE__*/ react.createElement(IconButton, {
-            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-            size: "md",
-            onClick: ()=>{},
-            variant: "ghost",
-            className: classNames
-        })
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "p-sm text-sm",
-        style: {
-            width: 300
-        }
-    }, /*#__PURE__*/ react.createElement(Form, {
-        data: {
-            previewDomain
-        },
-        onSubmit: commitValue
-    }, (form)=>/*#__PURE__*/ react.createElement(Bind, {
-            name: "previewDomain",
-            validators: [
-                validation.create("url")
-            ]
-        }, /*#__PURE__*/ react.createElement(Input, {
-            autoFocus: true,
-            label: "Preview Domain",
-            description: /*#__PURE__*/ react.createElement(react.Fragment, null, "Set a custom preview domain for your session.", /*#__PURE__*/ react.createElement("br", null), "This doesn't affect other users."),
-            size: "md",
-            onBlur: ()=>form.submit(),
-            onEnter: ()=>form.submit(),
-            note: 'Hit "Enter" or click outside the menu to apply.'
-        }))), isOverridden ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, {
-        variant: "dimmed",
-        margin: "lg"
-    }), /*#__PURE__*/ react.createElement(Button, {
-        variant: "primary",
-        onClick: resetDomain,
-        text: "Reset Domain",
-        size: "sm"
-    }), /*#__PURE__*/ react.createElement(Separator, {
-        variant: "dimmed",
-        margin: "lg"
-    }), "Resetting will revert to using the default preview domain.") : null));
+    return /*#__PURE__*/ react.createElement(PreviewDomainMenu, {
+        className: "absolute left-0 top-0"
+    });
 };
 export { PreviewDomain };

package/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.tsx"],"sourcesContent":["import React, { ~~useCallback,~~ useEffect, ~~useState~~ } from \"react\";\nimport { ~~ReactComponent~~ ~~as GlobeIcon~~ } from \"@webiny/~~icons~~/~~language.svg\";\nimport { Button, DropdownMenu, IconButton, Separator, Input, cn } from \"@webiny~~/admin~~-ui~~\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\nimport ~~type~~ { ~~GenericFormData } from \"@webiny/form\";\nimport { Bind, Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport {~~ useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const PreviewDomain = () => {\n const editor = useDocumentEditor();\n const ~~[isOpen, setIsOpen] = useState(false);\n\n const~~ { previewDomain, ~~isOverridden, unsetPreviewDomain, setPreviewDomain~~ } ~~=\n usePreviewDomain();\n\n const commitValue~~ = ~~useCallback~~(~~(data: GenericFormData~~) ~~=> {\n const value = data.previewDomain~~;\n ~~if (value.length > 0) {~~\n ~~setPreviewDomain(value);\n } else {\n unsetPreviewDomain();\n }\n setIsOpen(false);\n~~ ~~}, []);\n\n const resetDomain = useCallback(() => {\n unsetPreviewDomain();\n setIsOpen(false);\n }, []);\n\n~~ useEffect(() => {\n if (!previewDomain) {\n return;\n }\n\n editor.executeCommand(Commands.RefreshPreview);\n }, [previewDomain]);\n\n ~~const~~ ~~classNames~~ = ~~cn(~~\~~n \~~"absolute left-0 top-0\"~~,\n isOverridden ? \"fill-accent-default\" : \"fill-neutral-disabled\"\n );\n\n return (\n <DropdownMenu\n open={isOpen~~}\n align=\"center\"\n side=\"bottom\"\n className={\"shadow-lg\"}\n onOpenChange={setIsOpen}\n trigger={\n <IconButton\n icon={<GlobeIcon ~~/>}\~~n ~~size=\"md\"\n onClick={() => {~~}}\n variant={\"ghost\"}\n className={classNames}\n />\n }\n >\n <div className={\"p-sm text-sm\"} style={{ width: 300 }}>\n <Form data={{ previewDomain }} onSubmit={commitValue}>\n {form => (\n <Bind name={\"previewDomain\"} validators={[validation.create(\"url\")]}>\n <Input\n autoFocus={true}\n label={\"Preview Domain\"}\n description={\n <>\n Set a custom preview domain for your session.\n <br />\n This doesn't affect other users.\n </>\n }\n size={\"md\"}\n onBlur={() => form.submit()}\n onEnter={() => form.submit()}\n note={`Hit \"Enter\" or click outside the menu to apply.`}\n />\n </Bind>\n )}\n </Form>\n {isOverridden ? (\n <>\n <Separator variant={\"dimmed\"} margin={\"lg\"} />\n <Button\n variant={\"primary\"}\n onClick={resetDomain}\n text={\"Reset Domain\"}\n size={\"sm\"}\n />\n <Separator variant={\"dimmed\"} margin={\"lg\"} />\n Resetting will revert to using the default preview domain.\n </>\n ) : null}\n </div>\n </DropdownMenu>\n );\n~~};\n~~"],"names":["PreviewDomain","editor","useDocumentEditor","~~isOpen","setIsOpen","useState","~~previewDomain","~~isOverridden","unsetPreviewDomain","setPreviewDomain","~~usePreviewDomain","~~commitValue","useCallback","data","value","resetDomain","~~useEffect","Commands","~~classNames~~"~~,"cn","DropdownMenu","IconButton","GlobeIcon","Form","form","Bind","validation","Input","Separator","Button"~~],"mappings":"~~;;;;;;;;AAUO~~,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACf,MAAM,~~CAACC,QAAQC,UAAU,GAAGC,SAAS;IAErC,MAAM,~~EAAEC,aAAa,~~EAAEC,YAAY,EAAEC,kBAAkB,EAAEC,gBAAgB,~~EAAE,~~GACvEC~~;~~IAEJ~~,~~MAAMC,cAAcC,YAAY,CAACC;QAC7B,MAAMC,QAAQD,KAAK,aAAa;QAChC,IAAIC,MAAM,MAAM,GAAG,GACfL,iBAAiBK;aAEjBN;QAEJJ,~~UAAU;~~IACd,GAAG,EAAE;IAEL,MAAMW,cAAcH,YAAY;QAC5BJ;QACAJ,UAAU;IACd,GAAG,EAAE;IAELY,UAAU;~~QACN,IAAI,~~CAACV~~,eACD;~~QAGJL~~,OAAO,cAAc,~~CAACgB~~,SAAS,cAAc;IACjD,GAAG;~~QAACX~~;KAAc;IAElB,~~MAAMY,aAAaC,GACf,yBACAZ,eAAe,wBAAwB;IAG3C,~~OAAO,WAAP,~~GACI~~,~~oBAACa~~,~~cAAYA~~;~~QACT~~,~~MAAMjB;QACN,OAAM;QACN,MAAK;QACL,~~WAAW~~;QACX,cAAcC;QACd,uBACI,oBAACiB,YAAUA;YACP,oBAAM,oBAACC,gBAASA;YAChB,MAAK;YACL,SAAS,KAAO;YAChB,SAAS;YACT,WAAWJ~~;;qBAInB,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACK,MAAIA;QAAC,MAAM;YAAEjB;QAAc;QAAG,UAAUK;OACpCa,CAAAA,OAAAA,WAAAA,GACG,oBAACC,MAAIA;YAAC,MAAM;YAAiB,YAAY;gBAACC,WAAW,MAAM,CAAC;aAAO;yBAC/D,oBAACC,OAAKA;YACF,WAAW;YACX,OAAO;YACP,2BACI,0CAAE,+DAEE,oBAAC,aAAK;YAId,MAAM;YACN,QAAQ,IAAMH,KAAK,MAAM;YACzB,SAAS,IAAMA,KAAK,MAAM;YAC1B,MAAM;cAKrBjB,eAAe,WAAfA,GACG,wDACI,oBAACqB,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QACH,SAAS;QACT,SAASd;QACT,MAAM;QACN,MAAM;sBAEV,oBAACa,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,gEAGlD;AAIpB"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { PreviewDomainMenu } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const PreviewDomain = () => {\n const editor = useDocumentEditor();\n const { previewDomain } = usePreviewDomain();\n\n useEffect(() => {\n if (!previewDomain) {\n return;\n }\n\n editor.executeCommand(Commands.RefreshPreview);\n }, [previewDomain]);\n\n return <PreviewDomainMenu className={\"absolute left-0 top-0\"} />;\n};\n"],"names":["PreviewDomain","editor","useDocumentEditor","previewDomain","usePreviewDomain","useEffect","Commands","PreviewDomainMenu"],"mappings":";;;;;AAMO,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACf,MAAM,EAAEC,aAAa,EAAE,GAAGC;IAE1BC,UAAU;QACN,IAAI,CAACF,eACD;QAGJF,OAAO,cAAc,CAACK,SAAS,cAAc;IACjD,GAAG;QAACH;KAAc;IAElB,OAAO,WAAP,GAAO,oBAACI,mBAAiBA;QAAC,WAAW;;AACzC"}

package/BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.js CHANGED Viewed

@@ -18,7 +18,10 @@ const usePreviewLink = ()=>{
         url.searchParams.set("wb.path", path);
         return url.toString();
     }, [
-        iframeUrl
+        iframeUrl,
+        id,
+        path,
+        documentType
     ]);
 };
 export { usePreviewLink };

package/BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\n\nexport const usePreviewLink = () => {\n const iframeUrl = useIframeUrl();\n const id = useSelectFromDocument(document => document.id);\n const path = useSelectFromDocument(document => document.properties.path);\n const documentType = useSelectFromDocument(document => document.metadata.documentType);\n\n return useMemo(() => {\n if (!iframeUrl) {\n return \"\";\n }\n const url = new URL(iframeUrl);\n\n // Remove all `wb.` params\n url.searchParams.forEach((_, key) => {\n if (key.startsWith(\"wb.\")) {\n url.searchParams.delete(key);\n }\n });\n\n // Add preview params\n url.searchParams.set(\"wb.preview\", \"true\");\n url.searchParams.set(\"wb.type\", documentType);\n url.searchParams.set(\"wb.id\", String(id));\n url.searchParams.set(\"wb.path\", path);\n return url.toString();\n }, [iframeUrl]);\n};\n"],"names":["usePreviewLink","iframeUrl","useIframeUrl","id","useSelectFromDocument","document","path","documentType","useMemo","url","URL","_","key","String"],"mappings":";;;AAIO,MAAMA,iBAAiB;IAC1B,MAAMC,YAAYC;IAClB,MAAMC,KAAKC,sBAAsBC,CAAAA,WAAYA,SAAS,EAAE;IACxD,MAAMC,OAAOF,sBAAsBC,CAAAA,WAAYA,SAAS,UAAU,CAAC,IAAI;IACvE,MAAME,eAAeH,sBAAsBC,CAAAA,WAAYA,SAAS,QAAQ,CAAC,YAAY;~~IAErF~~,OAAOG,QAAQ;QACX,IAAI,CAACP,WACD,OAAO;QAEX,MAAMQ,MAAM,IAAIC,IAAIT;QAGpBQ,IAAI,YAAY,CAAC,OAAO,CAAC,CAACE,GAAGC;YACzB,IAAIA,IAAI,UAAU,CAAC,QACfH,IAAI,YAAY,CAAC,MAAM,CAACG;QAEhC;~~QAGAH~~,IAAI,YAAY,CAAC,GAAG,CAAC,cAAc;QACnCA,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWF;QAChCE,IAAI,YAAY,CAAC,GAAG,CAAC,SAASI,OAAOV;QACrCM,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWH;QAChC,OAAOG,IAAI,QAAQ;IACvB,GAAG;QAACR;~~KAAU~~;~~AAClB~~"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\n\nexport const usePreviewLink = () => {\n const iframeUrl = useIframeUrl();\n const id = useSelectFromDocument(document => document.id);\n const path = useSelectFromDocument(document => document.properties.path);\n const documentType = useSelectFromDocument(document => document.metadata.documentType);\n // // Set when the edited document is an A/B variant (see variantDocument.ts). When present, the\n // // preview must open the variant's draft — not the page the document borrows its identity from.\n // const previewVariantId = useSelectFromDocument(\n // document =>\n // (document.metadata as Record<string, any>).wbVariantPreviewId as string \| undefined\n // );\n\n return useMemo(() => {\n if (!iframeUrl) {\n return \"\";\n }\n const url = new URL(iframeUrl);\n\n // Remove all `wb.` params\n url.searchParams.forEach((_, key) => {\n if (key.startsWith(\"wb.\")) {\n url.searchParams.delete(key);\n }\n });\n\n // if (previewVariantId) {\n // // Variant draft preview — the site renders this variant's draft content on its page.\n // url.searchParams.set(\"wb-variant-draft\", previewVariantId);\n // return url.toString();\n // }\n\n // Add preview params\n url.searchParams.set(\"wb.preview\", \"true\");\n url.searchParams.set(\"wb.type\", documentType);\n url.searchParams.set(\"wb.id\", String(id));\n url.searchParams.set(\"wb.path\", path);\n return url.toString();\n }, [iframeUrl, id, path, documentType /previewVariantId/]);\n};\n"],"names":["usePreviewLink","iframeUrl","useIframeUrl","id","useSelectFromDocument","document","path","documentType","useMemo","url","URL","_","key","String"],"mappings":";;;AAIO,MAAMA,iBAAiB;IAC1B,MAAMC,YAAYC;IAClB,MAAMC,KAAKC,sBAAsBC,CAAAA,WAAYA,SAAS,EAAE;IACxD,MAAMC,OAAOF,sBAAsBC,CAAAA,WAAYA,SAAS,UAAU,CAAC,IAAI;IACvE,MAAME,eAAeH,sBAAsBC,CAAAA,WAAYA,SAAS,QAAQ,CAAC,YAAY;IAQrF,OAAOG,QAAQ;QACX,IAAI,CAACP,WACD,OAAO;QAEX,MAAMQ,MAAM,IAAIC,IAAIT;QAGpBQ,IAAI,YAAY,CAAC,OAAO,CAAC,CAACE,GAAGC;YACzB,IAAIA,IAAI,UAAU,CAAC,QACfH,IAAI,YAAY,CAAC,MAAM,CAACG;QAEhC;QASAH,IAAI,YAAY,CAAC,GAAG,CAAC,cAAc;QACnCA,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWF;QAChCE,IAAI,YAAY,CAAC,GAAG,CAAC,SAASI,OAAOV;QACrCM,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWH;QAChC,OAAOG,IAAI,QAAQ;IACvB,GAAG;QAACR;QAAWE;QAAIG;QAAMC;KAAkC;AAC/D"}

package/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js CHANGED Viewed

@@ -5,9 +5,9 @@ const breadcrumbs = css({
     flexDirection: "row",
     padding: 0,
     position: "absolute",
-    left: 300,
+    left: "var(--wb-spacing-toolbar)",
     bottom: 0,
-    width: "calc(100% - 600px)",
+    width: "calc(100% - calc(var(--wb-spacing-sidebar) * 2))",
     height: "31px",
     backgroundColor: "var(--color-neutral-dimmed)",
     borderTop: "1px solid var( --color-neutral-dimmed)",

package/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\n\nexport const breadcrumbs = css({\n display: \"flex\",\n zIndex: 100,\n flexDirection: \"row\",\n padding: 0,\n position: \"absolute\",\n left: ~~300~~,\n bottom: 0,\n width: \"calc(100% - ~~600px~~)\",\n height: \"31px\",\n backgroundColor: \"var(--color-neutral-dimmed)\",\n borderTop: \"1px solid var( --color-neutral-dimmed)\",\n fontSize: \"12px\",\n overflow: \"hidden\",\n \"> li\": {\n cursor: \"pointer\",\n display: \"flex\",\n \"& .element\": {\n color: \"var(--text-neutral-strong)\",\n textDecoration: \"none\",\n textTransform: \"capitalize\",\n padding: \"5px 0 5px 30px\",\n background: \"hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)\",\n position: \"relative\",\n display: \"block\"\n },\n \"& .element::after\": {\n content: '\" \"',\n display: \"block\",\n width: \"0\",\n height: \"0\",\n borderTop: \"50px solid transparent\",\n borderBottom: \"50px solid transparent\",\n borderLeft: \"20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1) \",\n position: \"absolute\",\n top: \"50%\",\n marginTop: \"-50px\",\n left: \"100%\",\n zIndex: 2\n },\n \"& .element::before\": {\n content: '\" \"',\n display: \"block\",\n width: \"0\",\n height: \"0\",\n borderTop: \"50px solid transparent\",\n borderBottom: \"50px solid transparent\",\n borderLeft: \"20px solid hsla(0, 0%, 100%, 1)\",\n position: \"absolute\",\n top: \"50%\",\n marginTop: \"-50px\",\n marginLeft: \"1px\",\n left: \"100%\",\n zIndex: 1\n }\n },\n \"& li:first-child .element\": { paddingLeft: \"10px\" },\n\n // Handle active state\n \"& li .element:hover\": {\n background: \"var(--color-neutral-muted)\"\n },\n \"& li .element:hover:after\": {\n borderLeftColor: \"var(--color-neutral-muted) !important\"\n }\n});\n"],"names":["breadcrumbs","css"],"mappings":";AAEO,MAAMA,cAAcC,IAAI;IAC3B,SAAS;IACT,QAAQ;IACR,eAAe;IACf,SAAS;IACT,UAAU;IACV,MAAM;IACN,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,iBAAiB;IACjB,WAAW;IACX,UAAU;IACV,UAAU;IACV,QAAQ;QACJ,QAAQ;QACR,SAAS;QACT,cAAc;YACV,OAAO;YACP,gBAAgB;YAChB,eAAe;YACf,SAAS;YACT,YAAY;YACZ,UAAU;YACV,SAAS;QACb;QACA,qBAAqB;YACjB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,MAAM;YACN,QAAQ;QACZ;QACA,sBAAsB;YAClB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,YAAY;YACZ,MAAM;YACN,QAAQ;QACZ;IACJ;IACA,6BAA6B;QAAE,aAAa;IAAO;IAGnD,uBAAuB;QACnB,YAAY;IAChB;IACA,6BAA6B;QACzB,iBAAiB;IACrB;AACJ"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\n\nexport const breadcrumbs = css({\n display: \"flex\",\n zIndex: 100,\n flexDirection: \"row\",\n padding: 0,\n position: \"absolute\",\n left: \"var(--wb-spacing-toolbar)\",\n bottom: 0,\n width: \"calc(100% - calc(var(--wb-spacing-sidebar) * 2))\",\n height: \"31px\",\n backgroundColor: \"var(--color-neutral-dimmed)\",\n borderTop: \"1px solid var( --color-neutral-dimmed)\",\n fontSize: \"12px\",\n overflow: \"hidden\",\n \"> li\": {\n cursor: \"pointer\",\n display: \"flex\",\n \"& .element\": {\n color: \"var(--text-neutral-strong)\",\n textDecoration: \"none\",\n textTransform: \"capitalize\",\n padding: \"5px 0 5px 30px\",\n background: \"hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)\",\n position: \"relative\",\n display: \"block\"\n },\n \"& .element::after\": {\n content: '\" \"',\n display: \"block\",\n width: \"0\",\n height: \"0\",\n borderTop: \"50px solid transparent\",\n borderBottom: \"50px solid transparent\",\n borderLeft: \"20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1) \",\n position: \"absolute\",\n top: \"50%\",\n marginTop: \"-50px\",\n left: \"100%\",\n zIndex: 2\n },\n \"& .element::before\": {\n content: '\" \"',\n display: \"block\",\n width: \"0\",\n height: \"0\",\n borderTop: \"50px solid transparent\",\n borderBottom: \"50px solid transparent\",\n borderLeft: \"20px solid hsla(0, 0%, 100%, 1)\",\n position: \"absolute\",\n top: \"50%\",\n marginTop: \"-50px\",\n marginLeft: \"1px\",\n left: \"100%\",\n zIndex: 1\n }\n },\n \"& li:first-child .element\": { paddingLeft: \"10px\" },\n\n // Handle active state\n \"& li .element:hover\": {\n background: \"var(--color-neutral-muted)\"\n },\n \"& li .element:hover:after\": {\n borderLeftColor: \"var(--color-neutral-muted) !important\"\n }\n});\n"],"names":["breadcrumbs","css"],"mappings":";AAEO,MAAMA,cAAcC,IAAI;IAC3B,SAAS;IACT,QAAQ;IACR,eAAe;IACf,SAAS;IACT,UAAU;IACV,MAAM;IACN,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,iBAAiB;IACjB,WAAW;IACX,UAAU;IACV,UAAU;IACV,QAAQ;QACJ,QAAQ;QACR,SAAS;QACT,cAAc;YACV,OAAO;YACP,gBAAgB;YAChB,eAAe;YACf,SAAS;YACT,YAAY;YACZ,UAAU;YACV,SAAS;QACb;QACA,qBAAqB;YACjB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,MAAM;YACN,QAAQ;QACZ;QACA,sBAAsB;YAClB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,YAAY;YACZ,MAAM;YACN,QAAQ;QACZ;IACJ;IACA,6BAA6B;QAAE,aAAa;IAAO;IAGnD,uBAAuB;QACnB,YAAY;IAChB;IACA,6BAA6B;QACzB,iBAAiB;IACrB;AACJ"}

package/BaseEditor/defaultConfig/Content/ContentPreviewConfig.js CHANGED Viewed

@@ -3,9 +3,14 @@ import { EditorConfig } from "../../index.js";
 import { Breadcrumbs } from "./Breadcrumbs/index.js";
 import { DocumentPreview } from "./Preview/DocumentPreview.js";
 import { AddressBar } from "./AddressBar/AddressBar.js";
+import { BreakpointSelector } from "./AddressBar/BreakpointSelector.js";
 const ContentPreviewConfig = ()=>{
     const { Ui } = EditorConfig;
-    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Ui.Content.Element, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Ui.TopBar.Element, {
+        name: "breakpointSelector",
+        group: "center",
+        element: /*#__PURE__*/ react.createElement(BreakpointSelector, null)
+    }), /*#__PURE__*/ react.createElement(Ui.Content.Element, {
         name: "addressBar",
         element: /*#__PURE__*/ react.createElement(AddressBar, null)
     }), /*#__PURE__*/ react.createElement(Ui.Content.Element, {

package/BaseEditor/defaultConfig/Content/ContentPreviewConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/ContentPreviewConfig.js","sources":["../../../../src/BaseEditor/defaultConfig/Content/ContentPreviewConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { Breadcrumbs } from \"./Breadcrumbs/index.js\";\nimport { DocumentPreview } from \"./Preview/DocumentPreview.js\";\nimport { AddressBar } from \"./AddressBar/AddressBar.js\";\n\nexport const ContentPreviewConfig = () => {\n const { Ui } = EditorConfig;\n\n return (\n <>\n <Ui.Content.Element name=\"addressBar\" element={<AddressBar />} />\n <Ui.Content.Element name=\"iframe\" element={<DocumentPreview />} />\n <Ui.Content.Element\n name={\"breadcrumbs\"}\n element={\n <Ui.IsNotReadOnly>\n <Breadcrumbs />\n </Ui.IsNotReadOnly>\n }\n />\n </>\n );\n};\n"],"names":["ContentPreviewConfig","Ui","EditorConfig","AddressBar","DocumentPreview","Breadcrumbs"],"mappings":"~~;;;;;AAMO~~,MAAMA,uBAAuB;IAChC,MAAM,EAAEC,EAAE,EAAE,GAAGC;IAEf,OAAO,WAAP,GACI,wDACI,oBAACD,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAa,uBAAS,~~oBAACE~~,YAAUA;sBAC1D,~~oBAACF~~,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAS,uBAAS,~~oBAACG~~,iBAAeA;sBAC3D,~~oBAACH~~,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,uBACI,oBAACA,GAAG,aAAa,sBACb,~~oBAACI~~,aAAWA;;AAMpC"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/ContentPreviewConfig.js","sources":["../../../../src/BaseEditor/defaultConfig/Content/ContentPreviewConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { Breadcrumbs } from \"./Breadcrumbs/index.js\";\nimport { DocumentPreview } from \"./Preview/DocumentPreview.js\";\nimport { AddressBar } from \"./AddressBar/AddressBar.js\";\nimport { BreakpointSelector } from \"./AddressBar/BreakpointSelector.js\";\n\nexport const ContentPreviewConfig = () => {\n const { Ui } = EditorConfig;\n\n return (\n <>\n <Ui.TopBar.Element\n name={\"breakpointSelector\"}\n group={\"center\"}\n element={<BreakpointSelector />}\n />\n <Ui.Content.Element name=\"addressBar\" element={<AddressBar />} />\n <Ui.Content.Element name=\"iframe\" element={<DocumentPreview />} />\n <Ui.Content.Element\n name={\"breadcrumbs\"}\n element={\n <Ui.IsNotReadOnly>\n <Breadcrumbs />\n </Ui.IsNotReadOnly>\n }\n />\n </>\n );\n};\n"],"names":["ContentPreviewConfig","Ui","EditorConfig","BreakpointSelector","AddressBar","DocumentPreview","Breadcrumbs"],"mappings":";;;;;;AAOO,MAAMA,uBAAuB;IAChC,MAAM,EAAEC,EAAE,EAAE,GAAGC;IAEf,OAAO,WAAP,GACI,wDACI,oBAACD,GAAG,MAAM,CAAC,OAAO;QACd,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,oBAAkBA;sBAEhC,oBAACF,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAa,uBAAS,oBAACG,YAAUA;sBAC1D,oBAACH,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAS,uBAAS,oBAACI,iBAAeA;sBAC3D,oBAACJ,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,uBACI,oBAACA,GAAG,aAAa,sBACb,oBAACK,aAAWA;;AAMpC"}