@nascentdigital/funnel-editor 4.5.0 → 4.5.2

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

@@ -1,13 +1,17 @@
-import { RequiredBy } from '@nascentdigital/funnel-core';
+import { RequiredBy, Transform } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
 import { Popup } from './Popup';
-export declare const QuickPicker: import("react").ForwardRefExoticComponent<QuickPicker.Props & import("react").RefAttributes<QuickPicker.Ref<string, QuickPicker.Item<string>>>>;
+export declare const QuickPicker: import("react").ForwardRefExoticComponent<QuickPicker.Props<string, QuickPicker.Item<string>> & import("react").RefAttributes<QuickPicker.Ref<string, QuickPicker.Item<string>>>>;
 export declare namespace QuickPicker {
-    type Item<TId extends string = string> = {
+    type Item<TId extends string> = {
         id: TId;
     };
-    type Props = {
+    type ItemVariant = 'card';
+    type Props<TId extends string, TItem extends Item<TId>> = {
+        variant: ItemVariant;
         title: string;
         description?: string;
+        renderItem: Transform<TItem, ReactNode>;
     };
     interface Ref<TId extends string, TItem extends Item<TId>> {
         readonly isOpen: boolean;

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

@@ -21,7 +21,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const Popup_1 = require("./Popup");
 // component
-exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ title, description }, ref) {
+exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, title, description, renderItem }, ref) {
     // bind state
     const [opened, setOpened] = (0, react_1.useState)(false);
     const [deferral, setDeferral] = (0, react_1.useState)();
@@ -38,6 +38,7 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ title, desc
         },
         open: async (_a) => {
             var { items, selectedItem } = _a, popupProps = __rest(_a, ["items", "selectedItem"]);
+            console.debug('[QuickPicker] opening with', { items, selectedItem });
             // reset
             setItems(items);
             setSelectedItem(selectedItem);
@@ -55,19 +56,11 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ title, desc
         close: () => { var _a; return (_a = deferralRef.current) === null || _a === void 0 ? void 0 : _a.resolve(undefined); }
     }), []);
     // helpers
-    const onPick = (e) => {
-        // stop propagation
-        e.preventDefault();
-        e.stopPropagation();
+    const onPick = (item) => {
         // resolve
-        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(selectedItem);
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(item);
     };
-    const onClose = (e) => {
-        // stop propagation
-        if (e) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
+    const onClose = () => {
         // ignore if already complete
         if (deferral === null || deferral === void 0 ? void 0 : deferral.isComplete) {
             return;
@@ -79,17 +72,37 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ title, desc
         // handle keys
         switch (e.key) {
             case 'Enter':
-                onPick(e);
+                // stop propagation
+                e.preventDefault();
+                e.stopPropagation();
+                // pick
+                onPick(selectedItem);
                 break;
             case 'Escape':
-                onClose(e);
+                // stop propagation
+                e.preventDefault();
+                e.stopPropagation();
+                // close
+                onClose();
                 break;
         }
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, (popupProps !== null && popupProps !== void 0 ? popupProps : {}), { className: (0, classnames_1.default)('glass-overlay w-[372px] flex flex-col gap-l8 p-l8 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-md', {
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, (popupProps !== null && popupProps !== void 0 ? popupProps : {}), { className: (0, classnames_1.default)('glass-overlay w-[420px] max-w-full flex flex-col gap-l8 pt-l8 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-md', {
             'opacity-none': !opened,
             'opacity-full': opened
-        }), animation: "out", open: !!deferral, onOpened: () => setOpened(true), onClose: onClose, onClosed: () => setOpened(false), children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "heading-sm text-content-primary", children: title }), description &&
-                        (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary", children: description })] }), (0, jsx_runtime_1.jsx)("section", { children: "Items" })] })));
+        }), animation: "out", open: !!deferral, onOpened: () => setOpened(true), onClose: onClose, onClosed: () => setOpened(false), children: [(0, jsx_runtime_1.jsxs)("section", { className: "px-l8", children: [(0, jsx_runtime_1.jsx)("h3", { className: "heading-sm text-content-primary", children: title }), description &&
+                        (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary", children: description })] }), (0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)({
+                    'flex flex-wrap items-center gap-l5 max-h-[240px] px-l8 pb-l8 overflow-y-scroll': variant === 'card'
+                }), children: items.map(item => renderCard({
+                    item,
+                    content: renderItem(item),
+                    selected: item.id === selectedItem,
+                    onSelect: itemId => onPick(itemId)
+                })) })] })));
 });
+function renderCard({ item, content, selected, onSelect }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard w-[116px] h-[88px]', {
+            'FieldCard-selected': selected
+        }), onClick: () => onSelect(item.id), children: content }, item.id));
+}

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/core/domain/BlockConfiguration.d.ts

@@ -16,8 +16,10 @@ export declare class BlockConfiguration {
     constructor({ block: blockOrSectionBlock, assetStore }: BlockConfiguration.ConstructorArgs);
     get editableFields(): ReadonlyArray<FieldModel.Config>;
     set editableFields(fields: ReadonlyArray<FieldModel.Config>);
+    get blocksFields(): FieldModel.Config[];
+    get blockFieldData(): Schema.Block.Data.ForFields<Schema.Fields>;
     get desktopFields(): FieldModel.Config[];
-    get mobileFields(): FieldModel.Config[];
+    get mobileFields(): never[];
     get nameField(): FieldModel.Config | undefined;
     get themeField(): FieldModel.Config | undefined;
     get layoutField(): Field<Schema.EnumField<Schema.EnumField.Options<PanelLayout>>> | undefined;

package/dist/core/domain/BlockConfiguration.js

@@ -47,19 +47,41 @@ class BlockConfiguration {
         this._editableFields = fields;
         this.raiseEvent('changed');
     }
-    get desktopFields() {
+    get blocksFields() {
         return [
             this.nameField,
-            this.themeField,
-            this._editableFields.find(field => field.id === 'contentAlign')
+            this.themeField
         ].filter(funnel_core_1.Value.isDefined);
     }
-    get mobileFields() {
+    get blockFieldData() {
+        const { assetStore, block } = this;
+        return block.fields.reduce((data, field) => {
+            // link assets
+            const fieldValue = field.value;
+            if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.type) === 'asset') {
+                const assetData = funnel_core_1.Schema.AssetField.Value.fromData(fieldValue);
+                const asset = (assetData === null || assetData === void 0 ? void 0 : assetData.id)
+                    ? assetStore.getAsset(assetData === null || assetData === void 0 ? void 0 : assetData.id)
+                    : undefined;
+                data[field.id] = assetData && asset
+                    ? funnel_core_1.Schema.AssetField.LinkedValue.toData(funnel_core_1.Schema.AssetField.Value.toLinked(assetData, asset))
+                    : fieldValue;
+            }
+            else {
+                data[field.id] = field.value;
+            }
+            // keep reducing
+            return data;
+        }, {});
+    }
+    get desktopFields() {
         return [
-            this.nameField,
-            this.themeField
+            this._editableFields.find(field => field.id === 'contentAlign')
         ].filter(funnel_core_1.Value.isDefined);
     }
+    get mobileFields() {
+        return [].filter(funnel_core_1.Value.isDefined);
+    }
     get nameField() {
         const { block, sectionBlock } = this;
         return sectionBlock
@@ -175,30 +197,12 @@ class BlockConfiguration {
     }
     sync() {
         // recompute the editable fields
-        const { assetStore, block, fields, editableFields } = this;
+        const { block, blockFieldData: fieldData, fields, editableFields } = this;
         const configData = editableFields.reduce((data, field) => {
             data[field.id] = field.value;
             // keep reducing
             return data;
         }, {});
-        const fieldData = block.fields.reduce((data, field) => {
-            // link assets
-            const fieldValue = field.value;
-            if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.type) === 'asset') {
-                const assetData = funnel_core_1.Schema.AssetField.Value.fromData(fieldValue);
-                const asset = (assetData === null || assetData === void 0 ? void 0 : assetData.id)
-                    ? assetStore.getAsset(assetData === null || assetData === void 0 ? void 0 : assetData.id)
-                    : undefined;
-                data[field.id] = assetData && asset
-                    ? funnel_core_1.Schema.AssetField.LinkedValue.toData(funnel_core_1.Schema.AssetField.Value.toLinked(assetData, asset))
-                    : fieldValue;
-            }
-            else {
-                data[field.id] = field.value;
-            }
-            // keep reducing
-            return data;
-        }, {});
         // get customized schema (if there are effects)
         const blockSchema = block.schema;
         const { getConfig, getLayout } = blockSchema;

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,52 +11,30 @@ 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)();
     const panelLayoutPickerRef = (0, react_2.useRef)(null);
-    const { modified = false, valid = false } = configuration !== null && configuration !== void 0 ? configuration : {};
+    const { modified = false, valid = false, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration !== null && configuration !== void 0 ? configuration : {};
+    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;
@@ -65,7 +43,7 @@ exports.BlockConfigEditor = (0, react_2.forwardRef)(function BlockConfigEditor(_
         if (!layoutField) {
             return;
         }
-        // pick new layout (if ignore if skipped)
+        // pick new layout
         const { schema: layoutSchema, value: layoutData } = layoutField;
         const selectedLayout = await ((_a = panelLayoutPickerRef.current) === null || _a === void 0 ? void 0 : _a.open({
             anchor: e.currentTarget,
@@ -77,8 +55,9 @@ exports.BlockConfigEditor = (0, react_2.forwardRef)(function BlockConfigEditor(_
             })),
             selectedItem: layoutData === null || layoutData === void 0 ? void 0 : layoutData.value
         }));
-        if (!selectedLayout) {
-            return;
+        // update if something was picked
+        if (selectedLayout) {
+            layoutField.value = funnel_core_1.Schema.EnumField.Value.toData(selectedLayout);
         }
     };
     // skip if there's no config
@@ -86,8 +65,22 @@ 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" })] }), (0, jsx_runtime_1.jsx)(core_1.Tabs, { items: blockViews, selectedItem: blockView, onSelect: setBlockView }), (0, jsx_runtime_1.jsx)("h4", { className: "heading-sm text-content-primary", children: "Settings" }), (0, jsx_runtime_1.jsx)("section", { className: "stacked p-l10 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 }) }, blockView) }) }), (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: (blockView === 'desktop' ? configuration.desktopFields : configuration.mobileFields).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, title: "Pick Block Layout", description: "Select an available layout for this block." })] }));
-});
+    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':
+            return ((0, jsx_runtime_1.jsx)("div", { children: "Stack H" }));
+        case 'stack.v':
+            return ((0, jsx_runtime_1.jsx)("div", { children: "Stack V" }));
+        case 'nested':
+            return ((0, jsx_runtime_1.jsx)("div", { children: "Nested" }));
+        default:
+            return ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
+    }
+}
 const blockViews = [
     { id: 'desktop', label: 'Desktop' },
     { id: 'mobile', label: 'Mobile' },

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

@@ -1,8 +1,10 @@
-export declare function BlockPreview({ className, variant }: BlockPreview.Props): import("react/jsx-runtime").JSX.Element;
+import { BlockConfiguration } from '../../../core';
+export declare function BlockPreview({ className, variant, configuration }: BlockPreview.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace BlockPreview {
     type Variant = 'desktop' | 'mobile';
     type Props = {
         className?: string;
         variant: Variant;
+        configuration: BlockConfiguration;
     };
 }