@nascentdigital/funnel-editor 4.5.1 → 4.5.2

package/dist/core/components/interaction/SideSheet.d.ts

@@ -0,0 +1,26 @@
+import { Callback, Provider, Transform } from '@nascentdigital/funnel-core';
+import { HTMLMotionProps, Variants } from 'framer-motion';
+import { PropsWithChildren, ReactNode } from 'react';
+export declare function SideSheet({ className, title, wide, backdrop, disabled, disableDismiss, disableOverlay, disableSave, canSave, renderSaveLabel, onSave: onSaveRaw, open, onOpened: onOpenedRaw, onClose: onCloseRaw, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, customActions, children, ...props }: SideSheet.Props): import("react").ReactPortal | null;
+export declare namespace SideSheet {
+    type Props = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren & {
+        title: ReactNode;
+        wide?: boolean;
+        backdrop?: Backdrop;
+        disabled?: boolean;
+        disableDismiss?: boolean;
+        disableOverlay?: boolean;
+        disableSave?: boolean;
+        canSave?: Provider<boolean> | Provider.Async<boolean>;
+        renderSaveLabel?: Transform<State, string>;
+        onSave?: Callback.Void | Callback.AsyncVoid;
+        customActions?: ReactNode;
+        open?: boolean;
+        onOpened?: Callback.Void;
+        onClose?: Callback.Void;
+        onClosed?: Callback.Void;
+    };
+    type State = 'editing' | 'validating' | 'saving' | 'error' | 'saved';
+    type Backdrop = 'none' | 'glass';
+}
+export declare const Animations: Record<'background' | 'slideRight', Variants>;

package/dist/core/components/interaction/SideSheet.js

@@ -0,0 +1,200 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Animations = void 0;
+exports.SideSheet = SideSheet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const react_dom_1 = require("react-dom");
+const Button_1 = require("./Button");
+// component
+function SideSheet(_a) {
+    var { className, title, wide, backdrop = 'none', disabled = false, disableDismiss = false, disableOverlay = false, disableSave = false, canSave = funnel_core_1.Fn.True, renderSaveLabel = onRenderSaveLabel, onSave: onSaveRaw = funnel_core_1.Fn.NoOp, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose: onCloseRaw = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, onKeyDown: onKeyDownRaw, customActions, children } = _a, props = __rest(_a, ["className", "title", "wide", "backdrop", "disabled", "disableDismiss", "disableOverlay", "disableSave", "canSave", "renderSaveLabel", "onSave", "open", "onOpened", "onClose", "onClosed", "onKeyDown", "customActions", "children"]);
+    // bind state + hooksb= + refs
+    const [state, setState] = (0, react_2.useState)('editing');
+    const locked = disabled || state === 'validating' || state === 'saving' || state === 'saved';
+    const id = (0, react_2.useId)();
+    const openRef = (0, react_2.useRef)(open);
+    openRef.current = open;
+    const onOpenedRef = (0, react_2.useRef)(onOpenedRaw);
+    onOpenedRef.current = onOpenedRaw;
+    const onClosedRef = (0, react_2.useRef)(onClosedRaw);
+    onClosedRef.current = onClosedRaw;
+    // reset state on open
+    (0, react_2.useEffect)(() => {
+        if (open) {
+            setState('editing');
+        }
+    }, [open]);
+    // lock tab focus
+    (0, react_2.useEffect)(() => {
+        // lock when opened
+        let unlock = undefined;
+        if (open) {
+            unlock = funnel_core_1.Browser.lockFocus(`#${CSS.escape(id)}`);
+        }
+        // unlock on unmount
+        return () => unlock && unlock();
+    }, [open, id]);
+    // skip for SSR
+    if (!funnel_core_1.Browser.available) {
+        return null;
+    }
+    // helpers
+    const onSave = async (e) => {
+        console.debug('[SideSheet/onSave]', { state, disabled, open });
+        // consume event
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // ignore if state is invalid
+        if (state !== 'editing' && state !== 'error') {
+            return;
+        }
+        // try to save
+        try {
+            // update state
+            setState('validating');
+            // skip if not valid
+            const valid = await Promise.resolve(canSave());
+            if (!valid) {
+                setState('error');
+                return;
+            }
+            // update state
+            setState('saving');
+            // try to save
+            await Promise.resolve(onSaveRaw());
+            // mark as saved
+            setState('saved');
+        }
+        // handle error
+        catch (e) {
+            console.warn('[SideSheet/onSave] error', e);
+            // update state
+            setState('error');
+        }
+    };
+    const onClose = (e) => {
+        // consume event
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // close
+        onCloseRaw();
+    };
+    const onKeyDown = async (e) => {
+        // ignore if disabled OR state is invalid
+        if (disabled || (state !== 'editing' && state !== 'error')) {
+            return;
+        }
+        // cancel on escape
+        switch (e.key) {
+            case 'Escape':
+                if (!disableDismiss) {
+                    onClose(e);
+                }
+                break;
+            case 'Enter':
+                await onSave(e);
+                break;
+        }
+    };
+    const onAnimationComplete = (definition) => {
+        if (definition === 'visible') {
+            onOpenedRef.current();
+        }
+        else if (definition === 'exit') {
+            onClosedRef.current();
+        }
+    };
+    const onBackdropClick = (e) => {
+        // close only if the backdrop is directly clicked
+        const target = e.target;
+        if ((target === null || target === void 0 ? void 0 : target.id) === id) {
+            // stop bubbling
+            e.stopPropagation();
+            // close
+            onClose();
+        }
+    };
+    // render
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: open &&
+            (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('fixed inset-0 z-popup', {
+                    'pointer-events-none': disableOverlay
+                }), variants: exports.Animations.background, initial: "initial", animate: "animate", exit: "exit", onAnimationComplete: definition => onAnimationComplete(definition), onClick: disableDismiss || locked ? undefined : onBackdropClick, layout: true, children: [backdrop !== 'none' &&
+                        (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, classnames_1.default)('fixed inset-0 z-backdrop pointer-events-none', {
+                                'backdrop-blur-[9px] bg-glass/backdrop will-change-[backdrop-filter]': backdrop === 'glass'
+                            }) }, "backdrop"), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'fixed right-0 inset-y-0 pointer-events-none', {
+                            'w-full sm:w-[380px]': !wide,
+                            'w-full md:w-screen-sm': wide,
+                        }), variants: exports.Animations.slideRight, initial: "initial", animate: "animate", exit: "exit", onKeyDown: onKeyDown, tabIndex: -1, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'w-full h-full max-h-full pointer-events-auto', 'flex flex-col', 'bg-background border-l border-solid border-border-l1 rounded-tl-md rounded-bl-md'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-md text-content-primary p-l8", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-scroll", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end items-center gap-l4 p-l8", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
+                                            (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex justify-end items-center gap-l4", children: customActions }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "sm", loading: state === 'saving', disabled: disableSave || locked, onClick: onSave, children: renderSaveLabel(state) })] })] }) }))] }, id) }), document.body);
+}
+// helpers
+exports.Animations = {
+    background: {
+        hidden: {
+            opacity: 0
+        },
+        visible: {
+            opacity: 1,
+            transition: {
+                ease: 'easeIn',
+                duration: 0.3,
+                when: 'beforeChildren'
+            }
+        },
+        exit: {
+            opacity: 0,
+            transition: {
+                ease: 'easeIn',
+                duration: 0.15,
+                bounce: 0,
+                when: 'afterChildren'
+            }
+        }
+    },
+    slideRight: {
+        initial: {
+            x: '100%'
+        },
+        animate: {
+            x: '0'
+        },
+        exit: {
+            x: '100%'
+        }
+    }
+};
+function onRenderSaveLabel(state) {
+    switch (state) {
+        case 'editing':
+        case 'validating':
+        case 'error':
+            return 'Save';
+        case 'saving':
+            return 'Saving...';
+        case 'saved':
+            return 'Saved';
+    }
+}

package/dist/core/components/interaction/index.d.ts

@@ -25,6 +25,7 @@ export * from './Profile';
 export * from './QuickInput';
 export * from './QuickPicker';
 export * from './SegmentedButton';
+export * from './SideSheet';
 export * from './Sortable';
 export * from './Tabs';
 export * from './Toggle';

package/dist/core/components/interaction/index.js

@@ -41,6 +41,7 @@ __exportStar(require("./Profile"), exports);
 __exportStar(require("./QuickInput"), exports);
 __exportStar(require("./QuickPicker"), exports);
 __exportStar(require("./SegmentedButton"), exports);
+__exportStar(require("./SideSheet"), exports);
 __exportStar(require("./Sortable"), exports);
 __exportStar(require("./Tabs"), exports);
 __exportStar(require("./Toggle"), exports);

package/dist/page/components/config/BlockConfig.js

@@ -9,8 +9,7 @@ const LegacyBlockConfigEditor_1 = require("./LegacyBlockConfigEditor");
 // component
 function BlockConfig({ className, block: blockOrSectionBlock }) {
     // bind ref
-    const editorRef = (0, react_1.useRef)(null);
-    const legacyEditorRef = (0, react_1.useRef)(null);
+    const [configuration, setConfiguration] = (0, react_1.useState)();
     // skip if there's no config
     const block = blockOrSectionBlock instanceof core_1.SectionBlock
         ? blockOrSectionBlock.block
@@ -19,25 +18,11 @@ function BlockConfig({ className, block: blockOrSectionBlock }) {
     if (config.length === 0) {
         return undefined;
     }
-    // helpers
-    const onEdit = async (event) => {
-        var _a, _b;
-        // use new configurator (if enabled)
-        if (process.env.NEXT_PUBLIC_EDITOR_BLOCK_CONFIG === 'experimental') {
-            await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-                block: blockOrSectionBlock,
-                anchor: event.currentTarget
-            }));
-        }
-        // or use legacy version
-        else {
-            await ((_b = legacyEditorRef.current) === null || _b === void 0 ? void 0 : _b.edit({
-                block: blockOrSectionBlock,
-                anchor: event.currentTarget
-            }));
-        }
-    };
     // render
     const valid = config.every(field => field.valid);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.StatusChip, { className: className, variant: valid ? 'success' : 'error', onClick: onEdit, children: "Configure" }), (0, jsx_runtime_1.jsx)(BlockConfigEditor_1.BlockConfigEditor, { ref: editorRef }), (0, jsx_runtime_1.jsx)(LegacyBlockConfigEditor_1.LegacyBlockConfigEditor, { ref: legacyEditorRef })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.StatusChip, { className: className, variant: valid ? 'success' : 'error', onClick: () => setConfiguration(block.getConfiguration()), children: "Configure" }), process.env.NEXT_PUBLIC_EDITOR_BLOCK_CONFIG === 'experimental'
+                ?
+                    (0, jsx_runtime_1.jsx)(BlockConfigEditor_1.BlockConfigEditor, { configuration: configuration, onClose: () => setConfiguration(undefined) })
+                :
+                    (0, jsx_runtime_1.jsx)(LegacyBlockConfigEditor_1.LegacyBlockConfigEditor, { configuration: configuration, onClose: () => setConfiguration(undefined) })] }));
 }

package/dist/page/components/config/BlockConfigEditor.d.ts

@@ -1,13 +1,9 @@
-import { Rect } from '@nascentdigital/funnel-core';
-import { Block, SectionBlock } from '../../../core';
-export declare const BlockConfigEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<BlockConfigEditor.Ref>>;
+import { Callback } from '@nascentdigital/funnel-core';
+import { BlockConfiguration } from '../../../core';
+export declare function BlockConfigEditor({ configuration, onClose }: BlockConfigEditor.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace BlockConfigEditor {
-    type Props = {};
-    interface Ref {
-        edit(options: Options): Promise<void>;
-    }
-    type Options = {
-        block: Block | SectionBlock;
-        anchor: HTMLElement | Rect;
+    type Props = {
+        configuration?: BlockConfiguration;
+        onClose: Callback.Void;
     };
 }

package/dist/page/components/config/BlockConfigEditor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockConfigEditor = void 0;
+exports.BlockConfigEditor = BlockConfigEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const client_1 = require("@nascentdigital/funnel-ui/client");
@@ -11,11 +11,8 @@ const core_1 = require("../../../core");
 const hooks_1 = require("../../hooks");
 const BlockPreview_1 = require("./BlockPreview");
 // editor
-exports.BlockConfigEditor = (0, react_2.forwardRef)(function BlockConfigEditor(_, ref) {
+function BlockConfigEditor({ configuration, onClose }) {
     // bind state + hooks
-    const [deferral, setDeferral] = (0, react_2.useState)(undefined);
-    const [configuration, setConfiguration] = (0, react_2.useState)();
-    const [anchor, setAnchor] = (0, react_2.useState)();
     const [blockView, setBlockView] = (0, react_2.useState)('desktop');
     const pageController = (0, hooks_1.usePageController)();
     const touch = (0, client_1.useTouch)();
@@ -24,40 +21,20 @@ exports.BlockConfigEditor = (0, react_2.forwardRef)(function BlockConfigEditor(_
     const settingsFields = blockView === 'desktop' ? desktopFields : mobileFields;
     // sync w/ configuration
     (0, core_1.useBlockConfiguration)(configuration);
-    // bind ref
-    (0, react_2.useImperativeHandle)(ref, () => ({
-        edit: async ({ block, anchor }) => {
-            // reset state
-            setConfiguration(block.getConfiguration());
-            setAnchor(anchor);
+    // reset to desktop when open
+    (0, react_2.useEffect)(() => {
+        if (configuration) {
             setBlockView('desktop');
-            // create deferral
-            const deferral = new funnel_core_1.Deferral();
-            setDeferral(deferral);
-            // wait until deferral is resolved
-            return deferral.promise;
         }
-    }), []);
+    }, [configuration]);
     // helpers
     const onSave = async () => {
         // save config
         configuration === null || configuration === void 0 ? void 0 : configuration.save();
         // wait for page to save
         await (0, rxjs_1.firstValueFrom)(pageController.saved$);
-        // complete (we're done)
-        deferral === null || deferral === void 0 ? void 0 : deferral.resolve();
-        // refresh
-        touch();
-    };
-    const onCancel = () => {
-        // skip if missing or already completed
-        if (!deferral || deferral.isComplete) {
-            return;
-        }
-        // cancel
-        deferral.resolve(undefined);
-        // touch
-        touch();
+        // complete
+        onClose();
     };
     const onChangePanelLayout = async (e) => {
         var _a;
@@ -88,10 +65,10 @@ exports.BlockConfigEditor = (0, react_2.forwardRef)(function BlockConfigEditor(_
         return null;
     }
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(core_1.MiniEditor, { className: "w-[550px] max-w-full", title: "Block Configuration", open: !!deferral && !deferral.isComplete, anchor: anchor, anchorOffset: 4, onSave: onSave, onClose: onCancel, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration.isConfigInDefault, onClick: () => configuration.reset(), children: "Reset to Default" }), wide: true, children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex items-center gap-l4", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-sm text-content-primary flex-1", children: "Layout" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "ArrowLeftRight", children: "Rearrange" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), blocksFields.length > 0 &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(core_1.SideSheet, { title: "Block Configuration", open: !!configuration, onSave: onSave, onClose: onClose, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration.isConfigInDefault, onClick: () => configuration.reset(), children: "Reset to Default" }), wide: true, children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex items-center gap-l4", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-sm text-content-primary flex-1", children: "Layout" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "ArrowLeftRight", children: "Rearrange" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), blocksFields.length > 0 &&
                         (0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) }), (0, jsx_runtime_1.jsx)(core_1.Tabs, { items: blockViews, selectedItem: blockView, onSelect: setBlockView }), (0, jsx_runtime_1.jsx)("section", { className: "stacked p-l6 bg-surface1 rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(core_1.Animate, { effect: "fade", present: true, children: (0, jsx_runtime_1.jsx)(BlockPreview_1.BlockPreview, { variant: blockView, configuration: configuration }) }, blockView) }) }), settingsFields.length > 0 &&
                         (0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: settingsFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) }), (0, jsx_runtime_1.jsx)("hr", { className: "divider border-border-l1" })] }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: panelLayoutPickerRef, variant: "card", title: "Pick Block Layout", description: "Select an available layout for this block.", renderItem: (item) => renderPanelLayoutItem(item) })] }));
-});
+}
 function renderPanelLayoutItem(item) {
     switch (item.id) {
         case 'stack.h':

package/dist/page/components/config/LegacyBlockConfigEditor.d.ts

@@ -1,13 +1,9 @@
-import { Rect } from '@nascentdigital/funnel-core';
-import { Block, SectionBlock } from '../../../core';
-export declare const LegacyBlockConfigEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<LegacyBlockConfigEditor.Ref>>;
+import { Callback } from '@nascentdigital/funnel-core';
+import { BlockConfiguration } from '../../../core';
+export declare function LegacyBlockConfigEditor({ configuration, onClose }: LegacyBlockConfigEditor.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace LegacyBlockConfigEditor {
-    type Props = {};
-    interface Ref {
-        edit(options: Options): Promise<void>;
-    }
-    type Options = {
-        block: Block | SectionBlock;
-        anchor: HTMLElement | Rect;
+    type Props = {
+        configuration?: BlockConfiguration;
+        onClose: Callback.Void;
     };
 }

package/dist/page/components/config/LegacyBlockConfigEditor.js

@@ -1,63 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LegacyBlockConfigEditor = void 0;
+exports.LegacyBlockConfigEditor = LegacyBlockConfigEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const client_1 = require("@nascentdigital/funnel-ui/client");
 const react_1 = require("react");
 const rxjs_1 = require("rxjs");
 const core_1 = require("../../../core");
 const hooks_1 = require("../../hooks");
 // editor
-exports.LegacyBlockConfigEditor = (0, react_1.forwardRef)(function LegacyBlockConfigEditor(_, ref) {
+function LegacyBlockConfigEditor({ configuration, onClose }) {
     // bind state + hooks
-    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
-    const [configuration, setConfiguration] = (0, react_1.useState)();
-    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [closing, setClosing] = (0, react_1.useState)(false);
     const pageController = (0, hooks_1.usePageController)();
-    const touch = (0, client_1.useTouch)();
     const { modified = false, valid = false } = configuration !== null && configuration !== void 0 ? configuration : {};
     // sync w/ configuration
     (0, core_1.useBlockConfiguration)(configuration);
-    // bind ref
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        edit: async ({ block, anchor }) => {
-            // reset state
-            setConfiguration(block.getConfiguration());
-            setAnchor(anchor);
-            // create deferral
-            const deferral = new funnel_core_1.Deferral();
-            setDeferral(deferral);
-            // wait until deferral is resolved
-            return deferral.promise;
+    // reset closing on new open
+    (0, react_1.useEffect)(() => {
+        if (configuration) {
+            setClosing(false);
         }
-    }), []);
+    }, [configuration]);
     // helpers
     const onSave = async () => {
         // save config
         configuration === null || configuration === void 0 ? void 0 : configuration.save();
         // wait for page to save
         await (0, rxjs_1.firstValueFrom)(pageController.saved$);
-        // complete (we're done)
-        deferral === null || deferral === void 0 ? void 0 : deferral.resolve();
-        // refresh
-        touch();
+        // complete
+        onClose();
     };
-    const onCancel = () => {
-        // skip if missing or already completed
-        if (!deferral || deferral.isComplete) {
-            return;
-        }
-        // cancel
-        deferral.resolve(undefined);
-        // touch
-        touch();
-    };
-    // skip if there's no config
-    if (!configuration) {
-        return null;
-    }
     // render
-    const { layout } = configuration;
-    return ((0, jsx_runtime_1.jsx)(core_1.MiniEditor, { title: "Block Configuration", open: !!deferral && !deferral.isComplete, anchor: anchor, anchorOffset: 4, onSave: onSave, onClose: onCancel, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration.isConfigInDefault, onClick: () => configuration.reset(), children: "Reset to Default" }), wide: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-start items-start gap-l9", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col items-start gap-l8", children: [(0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "desktop", layout: layout }), (0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "mobile", layout: layout })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-[max-content_1fr] auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: configuration.editableFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) })] }) }));
-});
+    const { layout } = configuration !== null && configuration !== void 0 ? configuration : {};
+    return ((0, jsx_runtime_1.jsx)(core_1.SideSheet, { title: "Block Configuration", backdrop: "none", open: !!configuration || closing, onSave: onSave, onClose: onClose, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration === null || configuration === void 0 ? void 0 : configuration.isConfigInDefault, onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.reset(), children: "Reset to Default" }), wide: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l9 p-l8", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-wrap justify-center items-start gap-l8", children: [(0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "desktop", layout: layout }), (0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "mobile", layout: layout })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-[max-content_1fr] auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: configuration === null || configuration === void 0 ? void 0 : configuration.editableFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) })] }) }));
+}

package/dist/styles/index.css

@@ -4711,9 +4711,6 @@ video {
 .w-\[50px\]{
     width: 50px;
 }
-.w-\[550px\]{
-    width: 550px;
-}
 .w-\[64px\]{
     width: 64px;
 }
@@ -4723,6 +4720,9 @@ video {
 .w-full{
     width: 100%;
 }
+.w-screen-sm{
+    width: 600px;
+}
 .min-w-18{
     min-width: 18px;
 }
@@ -5035,6 +5035,12 @@ video {
     border-top-left-radius: 18px;
     border-top-right-radius: 18px;
 }
+.rounded-bl-md{
+    border-bottom-left-radius: 12px;
+}
+.rounded-tl-md{
+    border-top-left-radius: 12px;
+}
 .border{
     border-width: 1px;
 }
@@ -6201,6 +6207,10 @@ video {
         width: 80%;
     }
 
+    .sm\:w-\[380px\]{
+        width: 380px;
+    }
+
     .sm\:max-w-screen-sm{
         max-width: 480px;
     }
@@ -6231,6 +6241,10 @@ video {
         width: 280px;
     }
 
+    .md\:w-screen-sm{
+        width: 600px;
+    }
+
     .md\:grid-cols-3{
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -89,5 +89,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "3348c90ff56f3dd931ab564f8a6ad13d454a4ca1"
+  "gitHead": "5b63f9cd8843cc111b4458c71aa031a974455241"
 }