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

package/inputRenderers/LexicalInput/wbStaticToolbar.css

@@ -1,11 +1,19 @@
+/*
+ * Mirrors @webiny/lexical-editor's StaticToolbar.css, scoped to `.wb-static-toolbar`.
+ * The dropdown menu (`.lexical-dropdown`) is styled by the shared file (always imported),
+ * so only the toolbar rules + website-builder-only bits live here.
+ */
 .wb-static-toolbar {
   display: flex;
   position: relative;
   padding: 4px;
   vertical-align: middle;
-  border: 1px solid #eee;
+  border: 1px solid var(--border-color-neutral-muted);
+  /* No divider between toolbar and body: the body carries the bottom border. */
+  border-bottom: none;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
   will-change: transform;
-  background: #fff;
+  background: var(--color-neutral-base);
   flex-wrap: wrap;
   z-index: 1;
 }
@@ -13,8 +21,10 @@
 .wb-static-toolbar button.popup-item {
   border: 0;
   display: flex;
-  background: #fff;
-  border-radius: 10px;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: var(--radius-md);
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
@@ -28,43 +38,33 @@
   margin-right: 2px;
 }
 
-.wb-static-toolbar button.popup-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  margin-top: 2px;
-  vertical-align: -0.25em;
+.wb-static-toolbar button.popup-item .format {
   display: flex;
-}
-
-.wb-static-toolbar button.popup-item:disabled i.format {
-  opacity: 0.2;
+  height: 16px;
+  width: 16px;
+  flex-shrink: 0;
 }
 
 .wb-static-toolbar button.popup-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.wb-static-toolbar button.popup-item.active i {
-  opacity: 1;
+  background-color: var(--color-primary-subtle);
 }
 
 .wb-static-toolbar .popup-item:hover:not([disabled]) {
-  background-color: #eee;
+  /* Matches admin-ui ghost IconButton hover (bg-neutral-dark/5). */
+  background-color: color-mix(in oklab, var(--color-neutral-dark) 5%, transparent);
 }
 
 .wb-static-toolbar select.popup-item {
   border: 0;
   display: flex;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   padding: 8px;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 70px;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
 }
 
@@ -76,12 +76,11 @@
 .wb-static-toolbar .popup-item .text {
   display: flex;
   line-height: 20px;
-  width: 200px;
+  width: 70px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
-  width: 70px;
   overflow: hidden;
   height: 20px;
   text-align: left;
@@ -89,25 +88,20 @@
 
 .wb-static-toolbar .popup-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   user-select: none;
-  line-height: 16px;
-  background-size: contain;
 }
 
-.wb-static-toolbar i.chevron-down {
-  margin-top: 3px;
+.wb-static-toolbar .chevron-down {
   width: 16px;
   height: 16px;
   display: flex;
+  flex-shrink: 0;
   user-select: none;
 }
 
-.wb-static-toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
+.wb-static-toolbar .chevron-down.inside {
   margin-left: -25px;
   margin-top: 11px;
   margin-right: 10px;
@@ -116,30 +110,20 @@
 
 .wb-static-toolbar .divider {
   width: 1px;
-  background-color: #eee;
+  background-color: var(--border-color-neutral-dimmed);
   margin: 0 4px;
 }
 
-.wb-static-toolbar .icon.bullet-list,
-.wb-static-toolbar .icon.bullet {
-  background-image: url("./icons/list-ul.svg");
-}
-
-.wb-static-toolbar .icon.numbered-list,
-.wb-static-toolbar .icon.number {
-  background-image: url("./icons/list-ol.svg");
-}
-
 .wb-static-toolbar .link-editor .button.active,
 .wb-static-toolbar .button.active {
-  background-color: rgb(223, 232, 250);
+  background-color: var(--color-primary-subtle);
 }
 
 .wb-static-toolbar button.toolbar-item {
   border: 0;
   display: flex;
   background: none;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
@@ -156,33 +140,26 @@
   margin-right: 2px;
 }
 
-.wb-static-toolbar button.toolbar-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  vertical-align: -0.25em;
+.wb-static-toolbar button.toolbar-item .format {
   display: flex;
-  opacity: 0.6;
+  height: 16px;
+  width: 16px;
+  flex-shrink: 0;
 }
 
 .wb-static-toolbar button.toolbar-item:disabled .icon,
 .wb-static-toolbar button.toolbar-item:disabled .text,
-.wb-static-toolbar button.toolbar-item:disabled i.format,
 .wb-static-toolbar button.toolbar-item:disabled .chevron-down {
   opacity: 0.2;
 }
 
 .wb-static-toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.wb-static-toolbar button.toolbar-item.active i {
-  opacity: 1;
+  background-color: var(--color-primary-subtle);
 }
 
 .wb-static-toolbar .toolbar-item:hover:not([disabled]) {
-  background-color: #eee;
+  /* Matches admin-ui ghost IconButton hover (bg-neutral-dark/5). */
+  background-color: color-mix(in oklab, var(--color-neutral-dark) 5%, transparent);
 }
 
 .wb-static-toolbar .toolbar-item.font-family .text {
@@ -194,12 +171,20 @@
   width: 150px;
 }
 
+/* Fixed-width label so the trigger doesn't resize as the selected heading changes. */
+.wb-static-toolbar .block-type-dropdown .dropdown-button-text {
+  width: 92px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .wb-static-toolbar .toolbar-item .text {
   display: flex;
   line-height: 20px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
   overflow: hidden;
   height: 20px;
@@ -209,56 +194,40 @@
 
 .wb-static-toolbar .toolbar-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
-}
-
-.wb-static-toolbar i.chevron-down {
-  margin-top: 3px;
   width: 16px;
   height: 16px;
-  display: flex;
   user-select: none;
 }
 
-.wb-static-toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  margin-left: -25px;
-  margin-top: 11px;
-  margin-right: 10px;
-  pointer-events: none;
+/*
+ * Toolbar icons are inline SVGs from @webiny/icons (shared action components);
+ * color via `fill`.
+ */
+.wb-static-toolbar .format,
+.wb-static-toolbar .icon {
+  fill: var(--fill-neutral-xstrong);
 }
 
-.wb-static-toolbar .divider {
-  width: 1px;
-  background-color: #eee;
-  margin: 0 4px;
+.wb-static-toolbar .chevron-down {
+  fill: var(--fill-neutral-strong);
 }
 
-.lexical-dropdown-container {
-  position: absolute;
-  bottom: -5px;
-  left: 0;
-}
-
-.wb-static-toolbar button.item i {
-  opacity: 0.6;
-}
-
-.wb-static-toolbar button.item.dropdown-item-active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.wb-static-toolbar button.item.dropdown-item-active i {
-  opacity: 1;
+.wb-static-toolbar button:disabled .format,
+.wb-static-toolbar button:disabled .icon,
+.wb-static-toolbar button:disabled .chevron-down {
+  fill: var(--fill-neutral-disabled);
 }
 
+/* Website-builder-only: fullscreen/expand toggle (still a background-image glyph). */
 .wb-static-toolbar i.expand {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   background-image: url("./icons/fullscreen.svg");
 }
+
+.lexical-dropdown-container {
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+}

package/inputRenderers/ObjectInput/DrawerDepthContext.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tracks how deeply nested the current object panel is. Used to compute stacking order and width -
+ * a nested object opens a new panel that renders over its parent within the sidebar.
+ */
+export declare const DrawerDepthContext: import("react").Context<number>;
+export declare const useDrawerDepth: () => number;

package/inputRenderers/ObjectInput/DrawerDepthContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+const DrawerDepthContext = createContext(0);
+const useDrawerDepth = ()=>useContext(DrawerDepthContext);
+export { DrawerDepthContext, useDrawerDepth };
+
+//# sourceMappingURL=DrawerDepthContext.js.map

package/inputRenderers/ObjectInput/DrawerDepthContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/DrawerDepthContext.js","sources":["../../../src/inputRenderers/ObjectInput/DrawerDepthContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Tracks how deeply nested the current object panel is. Used to compute stacking order and width -\n * a nested object opens a new panel that renders over its parent within the sidebar.\n */\nexport const DrawerDepthContext = createContext(0);\n\nexport const useDrawerDepth = () => useContext(DrawerDepthContext);\n"],"names":["DrawerDepthContext","createContext","useDrawerDepth","useContext"],"mappings":";AAMO,MAAMA,qBAAqBC,cAAc;AAEzC,MAAMC,iBAAiB,IAAMC,WAAWH"}

package/inputRenderers/ObjectInput/ObjectAddButton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ObjectAddButtonProps {
+    text?: string;
+    onClick: () => void;
+}
+/**
+ * The "Add" button shown below a list of object rows.
+ */
+export declare const ObjectAddButton: ({ text, onClick }: ObjectAddButtonProps) => React.JSX.Element;
+export {};

package/inputRenderers/ObjectInput/ObjectAddButton.js

@@ -0,0 +1,13 @@
+import react from "react";
+import { Button } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+const ObjectAddButton = ({ text = "Add", onClick })=>/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Button, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: text,
+        onClick: onClick
+    }));
+export { ObjectAddButton };
+
+//# sourceMappingURL=ObjectAddButton.js.map

package/inputRenderers/ObjectInput/ObjectAddButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectAddButton.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectAddButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface ObjectAddButtonProps {\n    text?: string;\n    onClick: () => void;\n}\n\n/**\n * The \"Add\" button shown below a list of object rows.\n */\nexport const ObjectAddButton = ({ text = \"Add\", onClick }: ObjectAddButtonProps) => {\n    return (\n        <div>\n            <Button\n                variant={\"ghost\"}\n                size={\"sm\"}\n                icon={<AddIcon />}\n                text={text}\n                onClick={onClick}\n            />\n        </div>\n    );\n};\n"],"names":["ObjectAddButton","text","onClick","Button","AddIcon"],"mappings":";;;AAYO,MAAMA,kBAAkB,CAAC,EAAEC,OAAO,KAAK,EAAEC,OAAO,EAAwB,GACpE,WAAP,GACI,oBAAC,2BACG,oBAACC,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAAOA;QACd,MAAMH;QACN,SAASC"}

package/inputRenderers/ObjectInput/ObjectEmptyState.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ObjectEmptyStateProps {
+    text?: string;
+    addText?: string;
+    onAdd: () => void;
+}
+/**
+ * The empty placeholder shown when a list object field has no items yet.
+ */
+export declare const ObjectEmptyState: ({ text, addText, onAdd }: ObjectEmptyStateProps) => React.JSX.Element;
+export {};

package/inputRenderers/ObjectInput/ObjectEmptyState.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { Button, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+const ObjectEmptyState = ({ text = "Add your first item here", addText = "Add", onAdd })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center justify-center gap-sm rounded-md border border-dashed border-neutral-dimmed px-sm py-lg"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, text), /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: addText,
+        onClick: onAdd
+    }));
+export { ObjectEmptyState };
+
+//# sourceMappingURL=ObjectEmptyState.js.map

package/inputRenderers/ObjectInput/ObjectEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectEmptyState.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectEmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface ObjectEmptyStateProps {\n    text?: string;\n    addText?: string;\n    onAdd: () => void;\n}\n\n/**\n * The empty placeholder shown when a list object field has no items yet.\n */\nexport const ObjectEmptyState = ({\n    text = \"Add your first item here\",\n    addText = \"Add\",\n    onAdd\n}: ObjectEmptyStateProps) => {\n    return (\n        <div\n            className={\n                \"flex flex-col items-center justify-center gap-sm rounded-md border border-dashed border-neutral-dimmed px-sm py-lg\"\n            }\n        >\n            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                {text}\n            </Text>\n            <Button\n                variant={\"secondary\"}\n                size={\"sm\"}\n                icon={<AddIcon />}\n                text={addText}\n                onClick={onAdd}\n            />\n        </div>\n    );\n};\n"],"names":["ObjectEmptyState","text","addText","onAdd","Text","Button","AddIcon"],"mappings":";;;AAaO,MAAMA,mBAAmB,CAAC,EAC7BC,OAAO,0BAA0B,EACjCC,UAAU,KAAK,EACfC,KAAK,EACe,GACb,WAAP,GACI,oBAAC;QACG,WACI;qBAGJ,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBH,OAAAA,WAAAA,GAEL,oBAACI,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAAOA;QACd,MAAMJ;QACN,SAASC"}

package/inputRenderers/ObjectInput/ObjectFieldHeader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ObjectFieldHeaderProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}
+/**
+ * The bold field label with its description stacked below it, shown above a list of object rows.
+ */
+export declare const ObjectFieldHeader: ({ label, description }: ObjectFieldHeaderProps) => React.JSX.Element | null;
+export {};

package/inputRenderers/ObjectInput/ObjectFieldHeader.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { Label, Text } from "@webiny/admin-ui";
+const ObjectFieldHeader = ({ label, description })=>{
+    if (!label) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col"
+    }, /*#__PURE__*/ react.createElement(Label, {
+        text: label,
+        className: "pb-xs"
+    }), description ? /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "font-normal text-neutral-strong"
+    }, description) : null);
+};
+export { ObjectFieldHeader };
+
+//# sourceMappingURL=ObjectFieldHeader.js.map

package/inputRenderers/ObjectInput/ObjectFieldHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectFieldHeader.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectFieldHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { Label, Text } from \"@webiny/admin-ui\";\n\ninterface ObjectFieldHeaderProps {\n    label?: React.ReactNode;\n    description?: React.ReactNode;\n}\n\n/**\n * The bold field label with its description stacked below it, shown above a list of object rows.\n */\nexport const ObjectFieldHeader = ({ label, description }: ObjectFieldHeaderProps) => {\n    if (!label) {\n        return null;\n    }\n\n    return (\n        <div className={\"flex flex-col\"}>\n            <Label text={label} className={\"pb-xs\"} />\n            {description ? (\n                <Text size={\"sm\"} className={\"font-normal text-neutral-strong\"}>\n                    {description}\n                </Text>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["ObjectFieldHeader","label","description","Label","Text"],"mappings":";;AAWO,MAAMA,oBAAoB,CAAC,EAAEC,KAAK,EAAEC,WAAW,EAA0B;IAC5E,IAAI,CAACD,OACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,OAAKA;QAAC,MAAMF;QAAO,WAAW;QAC9BC,cAAc,WAAdA,GACG,oBAACE,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBF,eAEL;AAGhB"}

package/inputRenderers/ObjectInput/ObjectFieldPanel.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface ObjectFieldPanelProps {
+    open: boolean;
+    onClose: () => void;
+    title: React.ReactNode;
+    depth: number;
+    children: React.ReactNode;
+}
+/**
+ * A panel holding an object's fields. It is portaled into the editor sidebar and overlays it
+ * (right-aligned, slightly narrower so the backdrop shows as a thin strip on the left). A nested
+ * object opens another, narrower panel over this one with its own backdrop; backdrops stack and
+ * persist, so each deeper level dims its parent further. Closes on the header button, its own
+ * backdrop, or Escape.
+ */
+export declare const ObjectFieldPanel: ({ open, onClose, title, depth, children }: ObjectFieldPanelProps) => React.ReactPortal | null;
+export {};

package/inputRenderers/ObjectInput/ObjectFieldPanel.js

@@ -0,0 +1,93 @@
+import react, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Button, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/close.svg";
+import { DrawerDepthContext } from "./DrawerDepthContext.js";
+const PANEL_WIDTH = 312;
+const NEST_INSET = 16;
+const TRANSITION_MS = 250;
+const ANCHOR_SELECTOR = "[data-role='wb-object-panel-anchor']";
+const Z_BASE = 50;
+const ObjectFieldPanel = ({ open, onClose, title, depth, children })=>{
+    const [host] = useState(()=>"u" > typeof document ? document.querySelector(ANCHOR_SELECTOR) : null);
+    const [rendered, setRendered] = useState(open);
+    const [entered, setEntered] = useState(false);
+    useEffect(()=>{
+        if (open) return void setRendered(true);
+        setEntered(false);
+        const timeout = setTimeout(()=>setRendered(false), TRANSITION_MS);
+        return ()=>clearTimeout(timeout);
+    }, [
+        open
+    ]);
+    useEffect(()=>{
+        if (!rendered || !open) return;
+        let inner = 0;
+        const outer = requestAnimationFrame(()=>{
+            inner = requestAnimationFrame(()=>setEntered(true));
+        });
+        return ()=>{
+            cancelAnimationFrame(outer);
+            cancelAnimationFrame(inner);
+        };
+    }, [
+        rendered,
+        open
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const onKeyDown = (event)=>{
+            if ("Escape" === event.key) onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return ()=>window.removeEventListener("keydown", onKeyDown);
+    }, [
+        open,
+        onClose
+    ]);
+    if (!rendered || !host) return null;
+    const panelZIndex = Z_BASE + 2 * depth;
+    const panelWidth = PANEL_WIDTH - depth * NEST_INSET;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute top-0 bottom-0 left-0",
+        style: {
+            width: "50%",
+            backgroundColor: "rgba(25, 28, 32, 0.2)",
+            zIndex: panelZIndex - 1,
+            opacity: entered ? 1 : 0,
+            transition: "opacity 200ms ease"
+        },
+        onClick: onClose
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute top-0 bottom-0 right-0 flex shadow-lg",
+        style: {
+            width: panelWidth,
+            zIndex: panelZIndex,
+            transform: entered ? "translateX(0)" : "translateX(100%)",
+            transition: "transform 250ms ease"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-px h-full shrink-0 bg-neutral-dimmed"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col flex-1 min-w-0 bg-neutral-base"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between gap-sm px-md py-md"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "font-semibold truncate text-neutral-primary"
+    }, title), /*#__PURE__*/ react.createElement(Button, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: onClose
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 overflow-y-auto p-md"
+    }, /*#__PURE__*/ react.createElement(DrawerDepthContext.Provider, {
+        value: depth + 1
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, children)))))), host);
+};
+export { ObjectFieldPanel };
+
+//# sourceMappingURL=ObjectFieldPanel.js.map

package/inputRenderers/ObjectInput/ObjectFieldPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectFieldPanel.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectFieldPanel.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { DrawerDepthContext } from \"./DrawerDepthContext.js\";\n\n/**\n * Width of the first object-field panel. Slightly narrower than the editor sidebar (329px) so the\n * backdrop shows as a thin strip on its left edge.\n */\nconst PANEL_WIDTH = 312;\n\n/**\n * Each nested panel is this much narrower than its parent, so the stack of open panels is visible\n * (the dimmed parent peeks out on the left).\n */\nconst NEST_INSET = 16;\n\n/**\n * Duration of the enter/exit transitions. The panel stays mounted this long after closing so the\n * slide-out / fade-out can play before it unmounts.\n */\nconst TRANSITION_MS = 250;\n\n/**\n * The editor sidebar carries this attribute (see `config/Sidebar/Sidebar.tsx`). Object panels are\n * portaled into it and overlay it, so they stay confined to the sidebar (no app-wide overlay).\n */\nconst ANCHOR_SELECTOR = \"[data-role='wb-object-panel-anchor']\";\n\n/**\n * Base z-index for object panels. Each level of nesting adds 2: one slot for the panel and one for\n * its backdrop, which sits directly beneath it. Backdrops stack, so each deeper panel dims the\n * parent panel a little more.\n */\nconst Z_BASE = 50;\n\ninterface ObjectFieldPanelProps {\n    open: boolean;\n    onClose: () => void;\n    title: React.ReactNode;\n    depth: number;\n    children: React.ReactNode;\n}\n\n/**\n * A panel holding an object's fields. It is portaled into the editor sidebar and overlays it\n * (right-aligned, slightly narrower so the backdrop shows as a thin strip on the left). A nested\n * object opens another, narrower panel over this one with its own backdrop; backdrops stack and\n * persist, so each deeper level dims its parent further. Closes on the header button, its own\n * backdrop, or Escape.\n */\nexport const ObjectFieldPanel = ({\n    open,\n    onClose,\n    title,\n    depth,\n    children\n}: ObjectFieldPanelProps) => {\n    const [host] = useState<HTMLElement | null>(() =>\n        typeof document !== \"undefined\"\n            ? document.querySelector<HTMLElement>(ANCHOR_SELECTOR)\n            : null\n    );\n    const [rendered, setRendered] = useState(open);\n    const [entered, setEntered] = useState(false);\n\n    // Mount on open; on close, play the exit transition (slide out + fade out) before unmounting.\n    useEffect(() => {\n        if (open) {\n            setRendered(true);\n            return;\n        }\n        setEntered(false);\n        const timeout = setTimeout(() => setRendered(false), TRANSITION_MS);\n        return () => clearTimeout(timeout);\n    }, [open]);\n\n    // Enter transition: once mounted and open, flip to the on-screen state after the browser paints\n    // the initial off-screen / transparent state. A double rAF guarantees that first paint.\n    useEffect(() => {\n        if (!rendered || !open) {\n            return;\n        }\n        let inner = 0;\n        const outer = requestAnimationFrame(() => {\n            inner = requestAnimationFrame(() => setEntered(true));\n        });\n        return () => {\n            cancelAnimationFrame(outer);\n            cancelAnimationFrame(inner);\n        };\n    }, [rendered, open]);\n\n    useEffect(() => {\n        if (!open) {\n            return;\n        }\n        const onKeyDown = (event: KeyboardEvent) => {\n            if (event.key === \"Escape\") {\n                onClose();\n            }\n        };\n        window.addEventListener(\"keydown\", onKeyDown);\n        return () => window.removeEventListener(\"keydown\", onKeyDown);\n    }, [open, onClose]);\n\n    if (!rendered || !host) {\n        return null;\n    }\n\n    const panelZIndex = Z_BASE + depth * 2;\n    const panelWidth = PANEL_WIDTH - depth * NEST_INSET;\n\n    return createPortal(\n        <>\n            <div\n                className={\"absolute top-0 bottom-0 left-0\"}\n                style={{\n                    width: \"50%\",\n                    backgroundColor: \"rgba(25, 28, 32, 0.2)\",\n                    zIndex: panelZIndex - 1,\n                    opacity: entered ? 1 : 0,\n                    transition: \"opacity 200ms ease\"\n                }}\n                onClick={onClose}\n            />\n            <div\n                className={\"absolute top-0 bottom-0 right-0 flex shadow-lg\"}\n                style={{\n                    width: panelWidth,\n                    zIndex: panelZIndex,\n                    transform: entered ? \"translateX(0)\" : \"translateX(100%)\",\n                    transition: \"transform 250ms ease\"\n                }}\n            >\n                <div className={\"w-px h-full shrink-0 bg-neutral-dimmed\"} />\n                <div className={\"flex flex-col flex-1 min-w-0 bg-neutral-base\"}>\n                    <div className={\"flex items-center justify-between gap-sm px-md py-md\"}>\n                        <Text size={\"md\"} className={\"font-semibold truncate text-neutral-primary\"}>\n                            {title}\n                        </Text>\n                        <Button\n                            variant={\"ghost\"}\n                            size={\"sm\"}\n                            icon={<CloseIcon />}\n                            onClick={onClose}\n                        />\n                    </div>\n                    <div className={\"flex-1 overflow-y-auto p-md\"}>\n                        <DrawerDepthContext.Provider value={depth + 1}>\n                            <div className={\"flex flex-col gap-md\"}>{children}</div>\n                        </DrawerDepthContext.Provider>\n                    </div>\n                </div>\n            </div>\n        </>,\n        host\n    );\n};\n"],"names":["PANEL_WIDTH","NEST_INSET","TRANSITION_MS","ANCHOR_SELECTOR","Z_BASE","ObjectFieldPanel","open","onClose","title","depth","children","host","useState","document","rendered","setRendered","entered","setEntered","useEffect","timeout","setTimeout","clearTimeout","inner","outer","requestAnimationFrame","cancelAnimationFrame","onKeyDown","event","window","panelZIndex","panelWidth","createPortal","Text","Button","CloseIcon","DrawerDepthContext"],"mappings":";;;;;AAUA,MAAMA,cAAc;AAMpB,MAAMC,aAAa;AAMnB,MAAMC,gBAAgB;AAMtB,MAAMC,kBAAkB;AAOxB,MAAMC,SAAS;AAiBR,MAAMC,mBAAmB,CAAC,EAC7BC,IAAI,EACJC,OAAO,EACPC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACY;IACpB,MAAM,CAACC,KAAK,GAAGC,SAA6B,IACxC,AAAoB,MAApB,OAAOC,WACDA,SAAS,aAAa,CAAcV,mBACpC;IAEV,MAAM,CAACW,UAAUC,YAAY,GAAGH,SAASN;IACzC,MAAM,CAACU,SAASC,WAAW,GAAGL,SAAS;IAGvCM,UAAU;QACN,IAAIZ,MAAM,YACNS,YAAY;QAGhBE,WAAW;QACX,MAAME,UAAUC,WAAW,IAAML,YAAY,QAAQb;QACrD,OAAO,IAAMmB,aAAaF;IAC9B,GAAG;QAACb;KAAK;IAITY,UAAU;QACN,IAAI,CAACJ,YAAY,CAACR,MACd;QAEJ,IAAIgB,QAAQ;QACZ,MAAMC,QAAQC,sBAAsB;YAChCF,QAAQE,sBAAsB,IAAMP,WAAW;QACnD;QACA,OAAO;YACHQ,qBAAqBF;YACrBE,qBAAqBH;QACzB;IACJ,GAAG;QAACR;QAAUR;KAAK;IAEnBY,UAAU;QACN,IAAI,CAACZ,MACD;QAEJ,MAAMoB,YAAY,CAACC;YACf,IAAIA,AAAc,aAAdA,MAAM,GAAG,EACTpB;QAER;QACAqB,OAAO,gBAAgB,CAAC,WAAWF;QACnC,OAAO,IAAME,OAAO,mBAAmB,CAAC,WAAWF;IACvD,GAAG;QAACpB;QAAMC;KAAQ;IAElB,IAAI,CAACO,YAAY,CAACH,MACd,OAAO;IAGX,MAAMkB,cAAczB,SAASK,AAAQ,IAARA;IAC7B,MAAMqB,aAAa9B,cAAcS,QAAQR;IAEzC,OAAO,WAAP,GAAO8B,aAAa,WAADA,GACf,wDACI,oBAAC;QACG,WAAW;QACX,OAAO;YACH,OAAO;YACP,iBAAiB;YACjB,QAAQF,cAAc;YACtB,SAASb,UAAU,IAAI;YACvB,YAAY;QAChB;QACA,SAAST;sBAEb,oBAAC;QACG,WAAW;QACX,OAAO;YACH,OAAOuB;YACP,QAAQD;YACR,WAAWb,UAAU,kBAAkB;YACvC,YAAY;QAChB;qBAEA,oBAAC;QAAI,WAAW;sBAChB,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACgB,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBxB,QAAAA,WAAAA,GAEL,oBAACyB,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAASA;QAChB,SAAS3B;uBAGjB,oBAAC;QAAI,WAAW;qBACZ,oBAAC4B,mBAAmB,QAAQ;QAAC,OAAO1B,QAAQ;qBACxC,oBAAC;QAAI,WAAW;OAAyBC,gBAM7DC;AAER"}

package/inputRenderers/ObjectInput/ObjectInputRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ElementInputRendererProps } from "../../BaseEditor/config/ElementInput.js";
+/**
+ * Renderer for object fields (`Webiny/Object`). Routes to the single or list variant; both recurse
+ * back into the generic `InputField` for their child inputs.
+ */
+export declare const ObjectInputRenderer: ({ node, element, bindings }: ElementInputRendererProps) => React.JSX.Element | null;

package/inputRenderers/ObjectInput/ObjectInputRenderer.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { ObjectField } from "../../BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectField.js";
+import { ObjectListField } from "../../BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.js";
+const ObjectInputRenderer = ({ node, element, bindings })=>{
+    if (!node || !element) return null;
+    if (node.list) return /*#__PURE__*/ react.createElement(ObjectListField, {
+        element: element,
+        node: node,
+        bindings: bindings
+    });
+    return /*#__PURE__*/ react.createElement(ObjectField, {
+        element: element,
+        node: node,
+        bindings: bindings
+    });
+};
+export { ObjectInputRenderer };
+
+//# sourceMappingURL=ObjectInputRenderer.js.map

package/inputRenderers/ObjectInput/ObjectInputRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectInputRenderer.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectInputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/config/ElementInput.js\";\nimport { ObjectField } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectField.js\";\nimport { ObjectListField } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.js\";\n\n/**\n * Renderer for object fields (`Webiny/Object`). Routes to the single or list variant; both recurse\n * back into the generic `InputField` for their child inputs.\n */\nexport const ObjectInputRenderer = ({ node, element, bindings }: ElementInputRendererProps) => {\n    if (!node || !element) {\n        return null;\n    }\n\n    if (node.list) {\n        return <ObjectListField element={element} node={node} bindings={bindings} />;\n    }\n\n    return <ObjectField element={element} node={node} bindings={bindings} />;\n};\n"],"names":["ObjectInputRenderer","node","element","bindings","ObjectListField","ObjectField"],"mappings":";;;AASO,MAAMA,sBAAsB,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,EAA6B;IACtF,IAAI,CAACF,QAAQ,CAACC,SACV,OAAO;IAGX,IAAID,KAAK,IAAI,EACT,OAAO,WAAP,GAAO,oBAACG,iBAAeA;QAAC,SAASF;QAAS,MAAMD;QAAM,UAAUE;;IAGpE,OAAO,WAAP,GAAO,oBAACE,aAAWA;QAAC,SAASH;QAAS,MAAMD;QAAM,UAAUE;;AAChE"}

package/inputRenderers/ObjectInput/ObjectRow.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface ObjectRowProps {
+    title: React.ReactNode;
+    onOpen: () => void;
+    actions?: React.ReactNode;
+}
+/**
+ * A clickable row representing an object (a single object field, or one item of a list). Resting,
+ * it shows the title. On hover it tints and reveals its trailing actions (reorder / remove) - rows
+ * without actions (a single object field) just tint.
+ */
+export declare const ObjectRow: ({ title, onOpen, actions }: ObjectRowProps) => React.JSX.Element;
+export {};

package/inputRenderers/ObjectInput/ObjectRow.js

@@ -0,0 +1,28 @@
+import react from "react";
+import { Text } from "@webiny/admin-ui";
+const ObjectRow = ({ title, onOpen, actions })=>/*#__PURE__*/ react.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        onClick: onOpen,
+        onKeyDown: (event)=>{
+            if ("Enter" === event.key || " " === event.key) {
+                event.preventDefault();
+                onOpen();
+            }
+        },
+        style: {
+            height: 40
+        },
+        className: "group flex items-center justify-between gap-xs rounded-md border border-neutral-dimmed-darker px-sm-extra cursor-pointer transition-colors bg-neutral-base hover:bg-neutral-light"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-1 items-center min-w-0"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "truncate text-neutral-strong"
+    }, title)), actions ? /*#__PURE__*/ react.createElement("div", {
+        className: "hidden group-hover:flex items-center gap-xs shrink-0",
+        onClick: (event)=>event.stopPropagation()
+    }, actions) : null);
+export { ObjectRow };
+
+//# sourceMappingURL=ObjectRow.js.map

package/inputRenderers/ObjectInput/ObjectRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectRow.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"@webiny/admin-ui\";\n\ninterface ObjectRowProps {\n    title: React.ReactNode;\n    onOpen: () => void;\n    actions?: React.ReactNode;\n}\n\n/**\n * A clickable row representing an object (a single object field, or one item of a list). Resting,\n * it shows the title. On hover it tints and reveals its trailing actions (reorder / remove) - rows\n * without actions (a single object field) just tint.\n */\nexport const ObjectRow = ({ title, onOpen, actions }: ObjectRowProps) => {\n    return (\n        <div\n            role={\"button\"}\n            tabIndex={0}\n            onClick={onOpen}\n            onKeyDown={event => {\n                if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    onOpen();\n                }\n            }}\n            // Fixed height + vertical centering keeps the row the same height whether or not the\n            // (taller) hover actions are shown.\n            style={{ height: 40 }}\n            className={\n                \"group flex items-center justify-between gap-xs rounded-md border border-neutral-dimmed-darker px-sm-extra cursor-pointer transition-colors bg-neutral-base hover:bg-neutral-light\"\n            }\n        >\n            <div className={\"flex flex-1 items-center min-w-0\"}>\n                <Text size={\"sm\"} className={\"truncate text-neutral-strong\"}>\n                    {title}\n                </Text>\n            </div>\n            {actions ? (\n                <div\n                    className={\"hidden group-hover:flex items-center gap-xs shrink-0\"}\n                    onClick={event => event.stopPropagation()}\n                >\n                    {actions}\n                </div>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["ObjectRow","title","onOpen","actions","event","Text"],"mappings":";;AAcO,MAAMA,YAAY,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAEC,OAAO,EAAkB,GACzD,WAAP,GACI,oBAAC;QACG,MAAM;QACN,UAAU;QACV,SAASD;QACT,WAAWE,CAAAA;YACP,IAAIA,AAAc,YAAdA,MAAM,GAAG,IAAgBA,AAAc,QAAdA,MAAM,GAAG,EAAU;gBAC5CA,MAAM,cAAc;gBACpBF;YACJ;QACJ;QAGA,OAAO;YAAE,QAAQ;QAAG;QACpB,WACI;qBAGJ,oBAAC;QAAI,WAAW;qBACZ,oBAACG,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBJ,SAGRE,UAAU,WAAVA,GACG,oBAAC;QACG,WAAW;QACX,SAASC,CAAAA,QAASA,MAAM,eAAe;OAEtCD,WAEL"}