@nascentdigital/funnel-editor 5.0.1 → 5.0.2

package/dist/components.d.ts

@@ -14,6 +14,7 @@ export * from './core/repository/PageTarget';
 export * from './core/repository/SerializeCollectionUpdate';
 export * from './core/repository/SerializePageUpdate';
 export * from './core/repository/TagSerializer';
+export * from './core/splash';
 export * from './page/hooks';
 export * from './page/components/SettingsEditor';
 export * from './collection/hooks';

package/dist/components.js

@@ -34,6 +34,7 @@ __exportStar(require("./core/repository/PageTarget"), exports);
 __exportStar(require("./core/repository/SerializeCollectionUpdate"), exports);
 __exportStar(require("./core/repository/SerializePageUpdate"), exports);
 __exportStar(require("./core/repository/TagSerializer"), exports);
+__exportStar(require("./core/splash"), exports);
 // page
 __exportStar(require("./page/hooks"), exports);
 __exportStar(require("./page/components/SettingsEditor"), exports);

package/dist/core/components/fields/OptInField.js

@@ -5,19 +5,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptInField = OptInField;
 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 classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const interaction_1 = require("../interaction");
 const visuals_1 = require("../visuals");
+const factories_1 = require("./factories");
 // component
 function OptInField({ className, field, disabled = false }) {
+    // bind hooks
+    const id = (0, react_1.useId)();
+    const [factoryDeferral, setFactoryDeferral] = (0, react_1.useState)(undefined);
     // helpers
     const onOptIn = (e) => {
         // consume event
         e.preventDefault();
         e.stopPropagation();
+        // stage add (if opting in)
+        if (factories_1.FieldValueFactory.isCompatibleField(field)) {
+            const create = async () => {
+                // try to create
+                try {
+                    // create deferral
+                    const deferral = new funnel_core_1.Deferral();
+                    setFactoryDeferral(deferral);
+                    // wait for completion
+                    const result = await deferral.promise;
+                    // create value on success
+                    if (result) {
+                        // opt-in field + bind data
+                        field.optIn();
+                        field.value = result;
+                        // close factory
+                        setFactoryDeferral(undefined);
+                    }
+                    // or cancel
+                    else {
+                        setFactoryDeferral(undefined);
+                    }
+                }
+                // or cancel on failure
+                catch (e) {
+                    setFactoryDeferral(undefined);
+                }
+            };
+            create().catch(console.error);
+        }
         // toggle opt-in
-        field.optIn();
+        else {
+            field.optIn();
+        }
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, classnames_1.default)(className, 'flex items-center gap-l2 pl-l1 pr-l2 overflow-hidden select-none appearance-none cursor-pointer interpolate', 'border-2 border-solid border-transparent rounded-full', 'outline outline-offset-1 outline-transparent', 'hover:border-ix-primary', 'focus-visible:border-ix-primary focus-visible:outline-ix-primary', 'active:scale-[.95] active:interpolate-fast'), onClick: onOptIn, onKeyDown: client_1.OnKey.enter(onOptIn), disabled: disabled, children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-ix-primary", variant: "CirclePlus", size: "sm" }), (0, jsx_runtime_1.jsxs)("span", { className: "label-sm label-strong text-content-primary", children: ["Add ", field.name] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Popup.AnchorElement, { tag: "div", anchorId: id, children: (0, jsx_runtime_1.jsxs)("button", { className: (0, classnames_1.default)(className, 'flex items-center gap-l2 pl-l1 pr-l2 overflow-hidden select-none appearance-none cursor-pointer interpolate', 'border-2 border-solid border-transparent rounded-full', 'outline outline-offset-1 outline-transparent', 'hover:border-ix-primary', 'focus-visible:border-ix-primary focus-visible:outline-ix-primary', 'active:scale-[.95] active:interpolate-fast'), onClick: onOptIn, onKeyDown: client_1.OnKey.enter(onOptIn), disabled: disabled, children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-ix-primary", variant: "CirclePlus", size: "sm" }), (0, jsx_runtime_1.jsxs)("span", { className: "label-sm label-strong text-content-primary", children: ["Add ", field.name] })] }) }), factories_1.FieldValueFactory.isCompatibleField(field) && factoryDeferral &&
+                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: field.schema, field: field, anchor: id, anchorOffset: 4, placement: "bottom", onCommit: result => factoryDeferral === null || factoryDeferral === void 0 ? void 0 : factoryDeferral.resolve(result), onCancel: () => factoryDeferral === null || factoryDeferral === void 0 ? void 0 : factoryDeferral.resolve(undefined) })] }));
 }

package/dist/core/components/fields/asset/AssetEditor.d.ts

@@ -6,9 +6,8 @@ export declare namespace AssetEditor {
     interface Ref {
         edit(options: Options): Promise<Schema.AssetField.LinkedValue | undefined>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Schema.AssetField;
         asset: Schema.AssetField.LinkedValue;
-        anchor: Popup.Anchor;
     };
 }

package/dist/core/components/fields/asset/AssetEditor.js

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -27,7 +38,7 @@ exports.AssetEditor = (0, react_2.forwardRef)(function AssetEditor(_, ref) {
     const [result, setResult] = (0, react_2.useState)();
     const [schema, setSchema] = (0, react_2.useState)();
     const [asset, setAsset] = (0, react_2.useState)();
-    const [anchor, setAnchor] = (0, react_2.useState)();
+    const [popupProps, setPopupProps] = (0, react_2.useState)();
     const [errorLevel, setErrorLevel] = (0, react_2.useState)('none');
     const [error, setError] = (0, react_2.useState)();
     const { nameField, descriptionField } = (0, useAssetFields_1.useAssetFields)();
@@ -37,11 +48,12 @@ exports.AssetEditor = (0, react_2.forwardRef)(function AssetEditor(_, ref) {
     const { valid, modified } = checkFields({ asset, nameField, descriptionField, shared });
     // export service
     (0, react_2.useImperativeHandle)(ref, () => ({
-        edit: async ({ schema, asset, anchor }) => {
+        edit: async (_a) => {
+            var { schema, asset } = _a, popupProps = __rest(_a, ["schema", "asset"]);
             // reset state
             setSchema(schema);
             setAsset(asset);
-            setAnchor(anchor);
+            setPopupProps(popupProps);
             setErrorLevel('none');
             setError(undefined);
             setShared(asset.scope === 'global');
@@ -118,12 +130,12 @@ exports.AssetEditor = (0, react_2.forwardRef)(function AssetEditor(_, ref) {
         deferral.resolve(result !== null && result !== void 0 ? result : undefined);
     };
     // skip if we don't have any params
-    if (!deferral || !schema || !anchor) {
+    if (!deferral || !schema || !popupProps) {
         return null;
     }
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { className: "flex flex-col gap-l8", title: "Edit Asset", open: result === undefined, placement: "right", anchor: anchor, anchorOffset: 4, canSave: onValidate, disableSave: !valid || !modified, renderSaveLabel: state => state === 'saving' ? 'Updating...' : 'Update', onSave: onUpdate, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }), schema.description && !error &&
-                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: schema.description }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('relative h-[210px] overflow-hidden', 'border border-solid border-border-l2 rounded-md'), children: [(0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { asset: asset }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-x-0 bottom-l5 z-overlay pointer-events-none', 'flex flex-col justify-center items-center px-l6'), children: (0, jsx_runtime_1.jsx)(AssetSpecs_1.AssetSpecs, { asset: asset }) })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: renderFields({ asset, nameField, descriptionField, shared, setShared }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, Object.assign({ className: "flex flex-col gap-l8", title: "Edit Asset", open: result === undefined, canSave: onValidate, disableSave: !valid || !modified, renderSaveLabel: state => state === 'saving' ? 'Updating...' : 'Update', onSave: onUpdate, onClose: onCancel, onClosed: onPickerClosed }, popupProps, { children: [(0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }), schema.description && !error &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: schema.description }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('relative h-[210px] overflow-hidden', 'border border-solid border-border-l2 rounded-md'), children: [(0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { asset: asset }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-x-0 bottom-l5 z-overlay pointer-events-none', 'flex flex-col justify-center items-center px-l6'), children: (0, jsx_runtime_1.jsx)(AssetSpecs_1.AssetSpecs, { asset: asset }) })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: renderFields({ asset, nameField, descriptionField, shared, setShared }) }) })] })));
 });
 async function getAssetMetadata({ asset }) {
     const { type, metadata } = asset;

package/dist/core/components/fields/asset/AssetUploader.d.ts

@@ -6,9 +6,8 @@ export declare namespace AssetUploader {
     interface Ref {
         upload(options: Options): Promise<Result>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Schema.AssetField;
-        anchor: Popup.Anchor;
     };
     type Result = Schema.Field.LinkedData<Schema.AssetField> | 'pick' | undefined;
 }

package/dist/core/components/fields/asset/AssetUploader.js

@@ -1,4 +1,15 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetUploader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -22,7 +33,7 @@ exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
     const [result, setResult] = (0, react_2.useState)();
     const [uploading, setUploading] = (0, react_2.useState)(false);
     const [schema, setSchema] = (0, react_2.useState)();
-    const [anchor, setAnchor] = (0, react_2.useState)();
+    const [popupProps, setPopupProps] = (0, react_2.useState)();
     const [errorLevel, setErrorLevel] = (0, react_2.useState)('none');
     const [error, setError] = (0, react_2.useState)();
     const [assetInfo, setAssetInfo] = (0, react_2.useState)();
@@ -33,10 +44,11 @@ exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
     const assetOptions = (0, react_2.useMemo)(() => getAssetOptions(schema), [schema]);
     // export service
     (0, react_2.useImperativeHandle)(ref, () => ({
-        upload: async ({ schema, anchor }) => {
+        upload: async (_a) => {
+            var { schema } = _a, popupProps = __rest(_a, ["schema"]);
             // reset state
             setSchema(schema);
-            setAnchor(anchor);
+            setPopupProps(popupProps);
             setErrorLevel('none');
             setError(undefined);
             setShared(false);
@@ -132,12 +144,12 @@ exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
         deferral.resolve(result !== null && result !== void 0 ? result : undefined);
     };
     // skip if we don't have any params
-    if (!deferral || !schema || !anchor) {
+    if (!deferral || !schema || !popupProps) {
         return null;
     }
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { className: "flex flex-col gap-l8", title: "Upload Asset", open: result === undefined, placement: "right", anchor: anchor, anchorOffset: 4, canSave: onValidate, disableSave: !(assetInfo === null || assetInfo === void 0 ? void 0 : assetInfo.isValid), renderSaveLabel: () => 'Upload', customActions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", iconLeft: "ImageDown", disabled: uploading, onClick: () => setResult('pick'), children: "Open Library" }), onSave: onUpload, onClose: onCancel, onClosed: onPickerClosed, children: [schema.description &&
-                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: schema.description }), (0, jsx_runtime_1.jsx)(AssetSelectorPane_1.AssetSelectorPane, { options: assetOptions, onAssetChanged: onAssetChanged }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: renderAssetInfo({ assetInfo, nameField, descriptionField, shared, setShared, uploading }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, Object.assign({ className: "flex flex-col gap-l8", title: "Upload Asset", open: result === undefined, canSave: onValidate, disableSave: !(assetInfo === null || assetInfo === void 0 ? void 0 : assetInfo.isValid), renderSaveLabel: () => 'Upload', customActions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", iconLeft: "ImageDown", disabled: uploading, onClick: () => setResult('pick'), children: "Open Library" }), onSave: onUpload, onClose: onCancel, onClosed: onPickerClosed }, popupProps, { children: [schema.description &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: schema.description }), (0, jsx_runtime_1.jsx)(AssetSelectorPane_1.AssetSelectorPane, { options: assetOptions, onAssetChanged: onAssetChanged }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: renderAssetInfo({ assetInfo, nameField, descriptionField, shared, setShared, uploading }) }) })] })));
 });
 function getAssetOptions(schema) {
     // return empty options if there's no schema

package/dist/core/components/fields/collection/CollectionEditor.d.ts

@@ -1,4 +1,5 @@
 import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const CollectionEditor: import("react").ForwardRefExoticComponent<CollectionEditor.Props & import("react").RefAttributes<CollectionEditor.Ref>>;
 export declare namespace CollectionEditor {
     type Props = {
@@ -7,7 +8,7 @@ export declare namespace CollectionEditor {
     interface Ref {
         edit(options: Options): Promise<Schema.Field.Data<Schema.CollectionField> | undefined>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Schema.CollectionField;
         collectionSchema: Schema.Collection;
         value?: Schema.CollectionField.Value;

package/dist/core/components/fields/collection/CollectionEditor.js

@@ -1,4 +1,15 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollectionEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -21,6 +32,7 @@ exports.CollectionEditor = (0, react_1.forwardRef)(function CollectionEditor({ l
     const [schema, setSchema] = (0, react_1.useState)();
     const [collectionSchema, setCollectionSchema] = (0, react_1.useState)();
     const [initialValue, setInitialValue] = (0, react_1.useState)();
+    const [popupProps, setPopupProps] = (0, react_1.useState)();
     const [field, setField] = (0, react_1.useState)();
     const [shared, setShared] = (0, react_1.useState)(false);
     const page = (0, hooks_1.usePossiblePage)();
@@ -32,11 +44,13 @@ exports.CollectionEditor = (0, react_1.forwardRef)(function CollectionEditor({ l
     (0, hooks_1.useCollectionFieldProxy)(field);
     // export service
     (0, react_1.useImperativeHandle)(ref, () => ({
-        edit: async ({ schema, collectionSchema, value }) => {
+        edit: async (_a) => {
+            var { schema, collectionSchema, value } = _a, popupProps = __rest(_a, ["schema", "collectionSchema", "value"]);
             // reset state
             setSchema(schema);
             setCollectionSchema(collectionSchema);
             setInitialValue(value);
+            setPopupProps(popupProps);
             setField(undefined);
             setShared(false);
             // create deferral
@@ -69,8 +83,8 @@ exports.CollectionEditor = (0, react_1.forwardRef)(function CollectionEditor({ l
             setShared(!field.isNew && field.isRef);
         });
     }, [language, collectionRepository, collectionStore, schema, collectionSchema, initialValue]);
-    // skip if there's no schema
-    if (!schema || !collectionSchema) {
+    // skip if not ready
+    if (!schema || !collectionSchema || !popupProps) {
         return null;
     }
     // helpers

package/dist/core/components/fields/embed/EmbeddedVideoEditor.d.ts

@@ -1,4 +1,5 @@
 import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const EmbeddedVideoEditor: import("react").ForwardRefExoticComponent<EmbeddedVideoEditor.Props & import("react").RefAttributes<EmbeddedVideoEditor.Ref>>;
 export declare namespace EmbeddedVideoEditor {
     type Props = {
@@ -7,9 +8,8 @@ export declare namespace EmbeddedVideoEditor {
     interface Ref {
         edit(options: Options): Promise<Schema.Field.Data<Schema.EmbeddedVideoField> | undefined>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Schema.EmbeddedVideoField;
         initialValue?: Schema.Field.Data<Schema.EmbeddedVideoField>;
-        anchor: string;
     };
 }

package/dist/core/components/fields/embed/EmbeddedVideoEditor.js

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -22,7 +33,7 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
     const [deferral, setDeferral] = (0, react_1.useState)(undefined);
     const [schema, setSchema] = (0, react_1.useState)();
     const [initialValue, setInitialValue] = (0, react_1.useState)();
-    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [popupProps, setPopupProps] = (0, react_1.useState)();
     const [state, setState] = (0, react_1.useState)('initializing');
     const touch = (0, client_1.useTouch)();
     const { uriField } = (0, hooks_1.useTempFields)({
@@ -40,11 +51,12 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
     const video = video$.value;
     // export service
     (0, react_1.useImperativeHandle)(ref, () => ({
-        edit: async ({ schema, initialValue, anchor }) => {
+        edit: async (_a) => {
+            var { schema, initialValue } = _a, popupProps = __rest(_a, ["schema", "initialValue"]);
             // reset state
             setSchema(schema);
             setInitialValue(initialValue);
-            setAnchor(anchor);
+            setPopupProps(popupProps);
             setState('initializing');
             // setup inputs
             const video = initialValue === null || initialValue === void 0 ? void 0 : initialValue.value;
@@ -154,8 +166,8 @@ exports.EmbeddedVideoEditor = (0, react_1.forwardRef)(function EmbeddedVideoEdit
         touch();
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { title: `${initialValue ? 'Edit' : 'Add'} ${name}`, open: !!deferral && !deferral.isComplete, placement: "right", anchor: anchor, anchorOffset: 4, canSave: canSave, onSave: onSave, onClose: onCancel, disabled: false, children: [description &&
-                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), renderPreview({ state, video }), (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: "none", children: (0, jsx_runtime_1.jsx)(TextField_1.TextField, { field: uriField }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, Object.assign({ title: `${initialValue ? 'Edit' : 'Add'} ${name}`, open: !!deferral && !deferral.isComplete, canSave: canSave, onSave: onSave, onClose: onCancel, disabled: state === 'validating' }, popupProps, { children: [description &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), renderPreview({ state, video }), (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: "none", children: (0, jsx_runtime_1.jsx)(TextField_1.TextField, { field: uriField }) })] })));
 });
 async function getVideoThumbnailUrl(video) {
     // skip if there's no video

package/dist/core/components/fields/factories/AssetFactory.d.ts

@@ -1,10 +1,10 @@
 import { Callback, Schema } from '@nascentdigital/funnel-core';
-export declare function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw }: AssetFactory.Props): import("react/jsx-runtime").JSX.Element;
+import { Popup } from '../../interaction';
+export declare function AssetFactory({ schema, assetId, onCommit, onCancel: onCancelRaw, ...popupProps }: AssetFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace AssetFactory {
-    type Props = {
+    type Props = Popup.Props.Delegated & {
         schema: Schema.AssetField;
         assetId?: Schema.Asset.Id;
-        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.AssetField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/AssetFactory.js

@@ -1,4 +1,15 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetFactory = AssetFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -8,14 +19,15 @@ const hooks_1 = require("../../../hooks");
 const interaction_1 = require("../../interaction");
 const asset_1 = require("../asset");
 // component
-function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw }) {
+function AssetFactory(_a) {
+    var { schema, assetId, onCommit, onCancel: onCancelRaw } = _a, popupProps = __rest(_a, ["schema", "assetId", "onCommit", "onCancel"]);
     // bind refs
     const menu = (0, interaction_1.useMenuController)();
     const pickerRef = (0, react_1.useRef)(null);
     const uploaderRef = (0, react_1.useRef)(null);
     const editorRef = (0, react_1.useRef)(null);
-    const anchorRef = (0, react_1.useRef)(anchor);
-    anchorRef.current = anchor;
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
     const onCommitRef = (0, react_1.useRef)(onCommit);
     onCommitRef.current = onCommit;
     const onCancelRef = (0, react_1.useRef)(onCancelRaw);
@@ -35,7 +47,7 @@ function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw
             menu.items = createMenuItems;
         }
         // open menu
-        menu.open(anchorRef.current);
+        menu.open(popupPropsRef.current.anchor);
     }, [menu, assetId]);
     // helpers
     const onPick = async () => {
@@ -60,10 +72,7 @@ function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw
     const onUpload = async () => {
         var _a;
         // launch uploader
-        const asset = await ((_a = uploaderRef.current) === null || _a === void 0 ? void 0 : _a.upload({
-            schema,
-            anchor
-        }));
+        const asset = await ((_a = uploaderRef.current) === null || _a === void 0 ? void 0 : _a.upload(Object.assign({ schema }, (popupPropsRef.current))));
         // cancel if no visual was selected
         if (!asset) {
             onCancel();
@@ -85,11 +94,7 @@ function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw
             return;
         }
         // perform edit
-        const updatedAsset = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-            schema,
-            asset: asset.value,
-            anchor
-        }));
+        const updatedAsset = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema, asset: asset.value }, (popupPropsRef.current))));
         // always cancel
         onCancel();
     };

package/dist/core/components/fields/factories/CollectionFactory.d.ts

@@ -1,11 +1,11 @@
 import { Callback, Language, Schema } from '@nascentdigital/funnel-core';
-export declare function CollectionFactory({ schema, language, collection: initialValue, anchor, onCommit, onCancel: onCancelRaw }: CollectionFactory.Props): import("react/jsx-runtime").JSX.Element;
+import { Popup } from '../../interaction';
+export declare function CollectionFactory({ schema, language, collection: initialValue, onCommit, onCancel: onCancelRaw, ...popupProps }: CollectionFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace CollectionFactory {
-    type Props = {
+    type Props = Popup.Props.Delegated & {
         schema: Schema.CollectionField;
         language: Language;
         collection?: Schema.CollectionField.Value;
-        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.CollectionField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/CollectionFactory.js

@@ -1,4 +1,15 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollectionFactory = CollectionFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -7,13 +18,14 @@ const react_1 = require("react");
 const interaction_1 = require("../../interaction");
 const collection_1 = require("../collection");
 // component
-function CollectionFactory({ schema, language, collection: initialValue, anchor, onCommit, onCancel: onCancelRaw }) {
+function CollectionFactory(_a) {
+    var { schema, language, collection: initialValue, onCommit, onCancel: onCancelRaw } = _a, popupProps = __rest(_a, ["schema", "language", "collection", "onCommit", "onCancel"]);
     // bind refs
     const menu = (0, interaction_1.useMenuController)();
     const pickerRef = (0, react_1.useRef)(null);
     const editorRef = (0, react_1.useRef)(null);
-    const anchorRef = (0, react_1.useRef)(anchor);
-    anchorRef.current = anchor;
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
     const onCommitRef = (0, react_1.useRef)(onCommit);
     onCommitRef.current = onCommit;
     const onCancelRef = (0, react_1.useRef)(onCancelRaw);
@@ -55,7 +67,7 @@ function CollectionFactory({ schema, language, collection: initialValue, anchor,
             ];
         }
         // open menu
-        menu.open(anchorRef.current);
+        menu.open(popupPropsRef.current.anchor);
     }, [menu, collectionOptions, initialValue]);
     // helpers
     const onPick = async () => {
@@ -76,10 +88,8 @@ function CollectionFactory({ schema, language, collection: initialValue, anchor,
     const onCreate = async (collectionSchema) => {
         var _a;
         // start picker (cancel if nothing was picked
-        const collection = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-            schema,
-            collectionSchema
-        }));
+        const collection = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema,
+            collectionSchema }, (popupPropsRef.current))));
         if (!collection) {
             onCancel();
         }
@@ -98,11 +108,8 @@ function CollectionFactory({ schema, language, collection: initialValue, anchor,
             throw new funnel_core_1.IllegalStateError(`Unable to resolve "${collectionType}" Collection`);
         }
         // start picker (cancel if nothing was picked
-        const collection = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-            schema,
-            collectionSchema,
-            value: initialValue
-        }));
+        const collection = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema,
+            collectionSchema, value: initialValue }, (popupPropsRef.current))));
         if (!collection) {
             onCancel();
         }

package/dist/core/components/fields/factories/EmbeddedVideoFactory.d.ts

@@ -1,11 +1,11 @@
 import { Callback, Language, Schema } from '@nascentdigital/funnel-core';
-export declare function EmbeddedVideoFactory({ schema, initialValue, language, anchor, onCommit, onCancel }: EmbeddedVideoFactory.Props): import("react/jsx-runtime").JSX.Element;
+import { Popup } from '../../interaction';
+export declare function EmbeddedVideoFactory({ schema, initialValue, language, onCommit, onCancel, ...popupProps }: EmbeddedVideoFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace EmbeddedVideoFactory {
-    type Props = {
+    type Props = Popup.Props.Delegated & {
         schema: Schema.EmbeddedVideoField;
         initialValue?: Schema.Field.Data<Schema.EmbeddedVideoField>;
         language: Language;
-        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.EmbeddedVideoField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/EmbeddedVideoFactory.js

@@ -1,15 +1,27 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmbeddedVideoFactory = EmbeddedVideoFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const embed_1 = require("../embed");
 // component
-function EmbeddedVideoFactory({ schema, initialValue, language, anchor, onCommit, onCancel }) {
+function EmbeddedVideoFactory(_a) {
+    var { schema, initialValue, language, onCommit, onCancel } = _a, popupProps = __rest(_a, ["schema", "initialValue", "language", "onCommit", "onCancel"]);
     // bind refs
     const editorRef = (0, react_1.useRef)(null);
-    const anchorRef = (0, react_1.useRef)(anchor);
-    anchorRef.current = anchor;
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
     const onCommitRef = (0, react_1.useRef)(onCommit);
     onCommitRef.current = onCommit;
     const onCancelRef = (0, react_1.useRef)(onCancel);
@@ -20,11 +32,8 @@ function EmbeddedVideoFactory({ schema, initialValue, language, anchor, onCommit
         const onEdit = async () => {
             var _a;
             // start editor (cancel if dismissed)
-            const value = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-                schema,
-                initialValue,
-                anchor: anchorRef.current
-            }));
+            const value = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema,
+                initialValue }, (popupPropsRef.current))));
             if (!value) {
                 onCancelRef.current();
             }

package/dist/core/components/fields/factories/FieldValueFactory.d.ts

@@ -1,11 +1,13 @@
-import { Callback, Field, ObjectField, Schema } from '@nascentdigital/funnel-core';
-export declare function FieldValueFactory<T extends Schema.Field.Type>({ anchor, itemSchema, field, onCommit, onCancel }: FieldValueFactory.Props<T>): import("react/jsx-runtime").JSX.Element | null;
+import { Callback, Field, FieldModel, ObjectField, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
+export declare function FieldValueFactory<T extends Schema.Field.Type>({ itemSchema, field, onCommit, onCancel, ...popupProps }: FieldValueFactory.Props<T>): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace FieldValueFactory {
-    type Props<T extends Schema.Field.Type = Schema.Field.Type> = {
-        anchor: string;
+    type Props<T extends Schema.Field.Type = Schema.Field.Type> = Popup.Props.Delegated & {
+        field?: CompatibleField<T>;
         itemSchema: T;
-        field?: Field<T> | ObjectField;
         onCommit?: Callback<Schema.Field.Data<T>>;
         onCancel?: Callback.Void;
     };
+    type CompatibleField<T extends Schema.Field.Type = Schema.Field.Type> = Field<T> | ObjectField;
+    function isCompatibleField(field: FieldModel | undefined): field is CompatibleField;
 }