@nascentdigital/funnel-editor 4.6.7 → 5.0.2

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

@@ -17,7 +17,7 @@ const RichTextField_1 = require("./RichTextField");
 const TextField_1 = require("./TextField");
 const TimestampField_1 = require("./TimestampField");
 // component
-function FieldEditor({ className, field, variant, size = 'md', standalone = false, autoFocus: autoFocusRaw = false, disabled = false, secured = false, onValidChanged = funnel_core_1.Fn.NoOp }) {
+function FieldEditor({ className, field, variant, size = 'md', standalone = false, autoFocus: autoFocusRaw = false, disabled = false, secured = false, disableDelete = false, onValidChanged = funnel_core_1.Fn.NoOp }) {
     // bind state + hooks
     const wasValidRef = (0, react_1.useRef)(field.valid);
     const dialog = (0, feedback_1.useDialog)();
@@ -61,37 +61,37 @@ function FieldEditor({ className, field, variant, size = 'md', standalone = fals
     if (field instanceof funnel_core_1.Field) {
         switch (schema.type) {
             case 'text':
-                return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: className, field: field, size: size, variant: variant, autoFocus: autoFocus, disabled: disabled, secured: secured }));
+                return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: className, field: field, size: size, variant: variant, autoFocus: autoFocus, disabled: disabled, secured: secured, disableDelete: disableDelete }));
             case 'richtext':
-                return ((0, jsx_runtime_1.jsx)(RichTextField_1.RichTextField, { className: className, field: field, autoFocus: autoFocus, disabled: disabled }));
+                return ((0, jsx_runtime_1.jsx)(RichTextField_1.RichTextField, { className: className, field: field, autoFocus: autoFocus, disabled: disabled, disableDelete: disableDelete }));
             case 'enum':
-                return ((0, jsx_runtime_1.jsx)(EnumField_1.EnumField, { className: className, field: field, size: size, variant: variant, disabled: disabled }));
+                return ((0, jsx_runtime_1.jsx)(EnumField_1.EnumField, { className: className, field: field, size: size, variant: variant, disabled: disabled, disableDelete: disableDelete }));
             case 'boolean':
-                return ((0, jsx_runtime_1.jsx)(BooleanField_1.BooleanField, { className: className, field: field, size: size, variant: variant }));
+                return ((0, jsx_runtime_1.jsx)(BooleanField_1.BooleanField, { className: className, field: field, size: size, variant: variant, disableDelete: disableDelete }));
             case 'date':
-                return ((0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: className, field: field, size: size, variant: variant }));
+                return ((0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: className, field: field, size: size, variant: variant, disableDelete: disableDelete }));
             case 'timestamp':
-                return ((0, jsx_runtime_1.jsx)(TimestampField_1.TimestampField, { className: className, field: field, size: size, variant: variant, autoFocus: autoFocus, disabled: disabled, secured: secured }));
+                return ((0, jsx_runtime_1.jsx)(TimestampField_1.TimestampField, { className: className, field: field, size: size, variant: variant, autoFocus: autoFocus, disabled: disabled, disableDelete: disableDelete, secured: secured }));
             case 'link':
             case 'asset':
             case 'embedded.video':
             case 'collection':
             case 'page':
-                return ((0, jsx_runtime_1.jsx)(FieldCard_1.FieldCard, { className: className, field: field, deletable: field.canOptOut, onDelete: onDelete }));
+                return ((0, jsx_runtime_1.jsx)(FieldCard_1.FieldCard, { className: className, field: field, deletable: field.canOptOut && !disableDelete, onDelete: onDelete }));
             case 'form':
                 return ((0, jsx_runtime_1.jsx)(FormEditor_1.FormEditor, { form: field }));
             case 'dynamic.pages':
-                return ((0, jsx_runtime_1.jsx)(DynamicPagesEditor_1.DynamicPagesEditor, { dynamicPages: field }));
+                return ((0, jsx_runtime_1.jsx)(DynamicPagesEditor_1.DynamicPagesEditor, { dynamicPages: field, disableDelete: disableDelete }));
             default:
                 return ((0, jsx_runtime_1.jsxs)("b", { className: className, children: ["No support for: ", schema.type, "!"] }));
         }
     }
     // or list
     else if (field instanceof funnel_core_1.FieldList) {
-        return ((0, jsx_runtime_1.jsx)(ListEditor_1.ListEditor, { className: className, list: field }));
+        return ((0, jsx_runtime_1.jsx)(ListEditor_1.ListEditor, { className: className, list: field, disableDelete: disableDelete }));
     }
     // or object
     else {
-        return ((0, jsx_runtime_1.jsx)(FieldCard_1.FieldCard, { className: className, field: field, deletable: field.canOptOut, onDelete: onDelete }));
+        return ((0, jsx_runtime_1.jsx)(FieldCard_1.FieldCard, { className: className, field: field, deletable: field.canOptOut && !disableDelete, onDelete: onDelete }));
     }
 }

package/dist/core/components/fields/FieldLayout.d.ts

@@ -1,7 +1,7 @@
 import { Callback, Field } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
 import { FieldSize } from './FieldSize';
-export declare function FieldLayout({ field, className, label: rawLabel, variant, size, onActiveChanged, children }: FieldLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare function FieldLayout({ field, className, label: rawLabel, variant, size, disableDelete, onActiveChanged, children }: FieldLayout.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace FieldLayout {
     type Variant = 'default' | 'wide' | 'minimal';
     type Props = {
@@ -12,6 +12,7 @@ export declare namespace FieldLayout {
         label?: string;
         secured?: boolean;
         disabled?: boolean;
+        disableDelete?: boolean;
         locked?: boolean;
         onActiveChanged?: Callback<boolean>;
         children: ReactNode;

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

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldLayout = FieldLayout;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const feedback_1 = require("../feedback");
 const visuals_1 = require("../visuals");
 const FieldErrorController_1 = require("./FieldErrorController");
 const FieldHeader_1 = require("./FieldHeader");
-const classnames_1 = __importDefault(require("classnames"));
 // component
-function FieldLayout({ field, className, label: rawLabel, variant = 'default', size = 'md', onActiveChanged = funnel_core_1.Fn.NoOp, children }) {
+function FieldLayout({ field, className, label: rawLabel, variant = 'default', size = 'md', disableDelete, onActiveChanged = funnel_core_1.Fn.NoOp, children }) {
     var _a;
     // bind props + hook
     const { schema, name = 'Unknown', canOptOut = false } = field !== null && field !== void 0 ? field : {};
@@ -56,7 +56,7 @@ function FieldLayout({ field, className, label: rawLabel, variant = 'default', s
             'flex flex-col gap-l2': variant !== 'wide',
             'grid grid-cols-subgrid items-center': variant === 'wide'
         }), onPointerEnter: onActive, onPointerLeave: onInactive, children: [!minimal &&
-                (0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { fieldId: field === null || field === void 0 ? void 0 : field.id, size: size, label: label, tip: description, active: active || (field === null || field === void 0 ? void 0 : field.editing) === true, onDelete: canOptOut ? onOptOut : undefined }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)({
+                (0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { fieldId: field === null || field === void 0 ? void 0 : field.id, size: size, label: label, tip: description, active: active || (field === null || field === void 0 ? void 0 : field.editing) === true, onDelete: canOptOut && !disableDelete ? onOptOut : undefined }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)({
                     'min-w-[200px]': size === 'md',
                     'min-w-[180px]': size !== 'sm',
                     'min-w-[120px]': size !== 'xs'

package/dist/core/components/fields/ListEditor.d.ts

@@ -1,8 +1,9 @@
 import { FieldList } from '@nascentdigital/funnel-core';
-export declare function ListEditor({ className, list }: ListEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare function ListEditor({ className, list, disableDelete }: ListEditor.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace ListEditor {
     type Props = {
         className?: string;
         list: FieldList;
+        disableDelete?: boolean;
     };
 }

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

@@ -14,7 +14,7 @@ const interaction_1 = require("../interaction");
 const FieldCard_1 = require("./FieldCard");
 const list_1 = require("./list");
 // component
-function ListEditor({ className, list }) {
+function ListEditor({ className, list, disableDelete }) {
     // bind props + memos
     const { schema, composition, items } = list;
     const { description, max } = schema;
@@ -68,7 +68,7 @@ function ListEditor({ className, list }) {
                         ?
                             (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex justify-center items-center p-l6 select-none', 'label-md text-ix-disabled-content bg-ix-disabled rounded-md', {
                                     'min-h-[200px]': composition !== 'simple'
-                                }), children: schema.required
+                                }), children: schema.required || disableDelete
                                     ?
                                         (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "No items to display" })
                                     :
@@ -109,14 +109,13 @@ function renderControls({ list, dialog, itemIds, multiSelectRef, multiSelect, se
         multiSelect.setSelectedIds([]);
         multiSelect.setSelecting(false);
     };
-    console.debug('[ListEditor] no list to render', { itemIds, composition: list.composition });
     // handle homogeneous list
     const itemCount = items.length;
     const { selecting = false, selectedIds = [] } = multiSelect !== null && multiSelect !== void 0 ? multiSelect : {};
     const selectedItemCount = selectedIds.length;
     const canAddMore = itemCount < schema.max;
-    return ((0, jsx_runtime_1.jsxs)("nav", { className: "w-full flex flex-wrap items-center gap-l5 my-l5", children: [itemTypes.map(([itemSchemaId, itemSchema]) => (0, jsx_runtime_1.jsxs)(list_1.CreateFieldButton, { size: "sm", schema: itemSchema, onCreated: data => onCreateItem(itemSchemaId, data), onEditing: setEditing, disabled: !canAddMore || selecting, children: ["Add ", funnel_core_1.StringUtils.articleFor(itemSchema.name), " ", itemSchema.name] }, itemSchemaId)), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), itemIds.length > 0 && list.composition !== 'simple' &&
-                (0, jsx_runtime_1.jsx)(interaction_1.MultiSelectControls, { ref: multiSelectRef, ids: itemIds, actions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "destructive", size: "sm", onClick: onDeleteSelected, disabled: selectedItemCount === 0, children: "Delete" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("nav", { className: "w-full flex flex-wrap items-center gap-l5 my-l5", children: [itemTypes.map(([itemSchemaId, itemSchema]) => (0, jsx_runtime_1.jsxs)(list_1.CreateFieldButton, { size: "xs", schema: itemSchema, onCreated: data => onCreateItem(itemSchemaId, data), onEditing: setEditing, disabled: !canAddMore || selecting, children: ["Add ", funnel_core_1.StringUtils.articleFor(itemSchema.name), " ", itemSchema.name] }, itemSchemaId)), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), itemIds.length > 0 && list.composition !== 'simple' &&
+                (0, jsx_runtime_1.jsx)(interaction_1.MultiSelectControls, { ref: multiSelectRef, ids: itemIds, actions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "destructive", size: "xs", onClick: onDeleteSelected, disabled: selectedItemCount === 0, children: "Delete" }) })] }));
 }
 function renderItem({ list, item, multiSelect, selecting, selectedIds, onEditing }) {
     var _a;
@@ -146,7 +145,7 @@ function renderItem({ list, item, multiSelect, selecting, selectedIds, onEditing
                 // just add
                 : [...ids, id]);
         };
-        console.debug('[ListEditor] rendering item', { itemId: item.id, selecting, selectedIds });
+        // render item
         return ((0, jsx_runtime_1.jsxs)("div", { className: "FieldCard relative w-[212px] h-[170px] overflow-hidden", onClick: onToggleSelection, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute -inset-1 opacity-backdrop", children: content }), (0, jsx_runtime_1.jsx)(feedback_1.SelectionDecorator, { className: "absolute top-l4 right-l4 z-supersurface pointer-events-none", selected: selected })] }, id));
     }
 }

package/dist/core/components/fields/OptInField.d.ts

@@ -1,8 +1,9 @@
 import { FieldModel } from '@nascentdigital/funnel-core';
-export declare function OptInField({ className, field }: OptInField.Props): import("react/jsx-runtime").JSX.Element;
+export declare function OptInField({ className, field, disabled }: OptInField.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace OptInField {
     type Props = {
         className?: string;
         field: FieldModel;
+        disabled?: boolean;
     };
 }

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 }) {
+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), 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/RichTextEditor.js

@@ -178,7 +178,7 @@ function RichTextEditor({ id, variant = 'area', className, placeholder = DEFAULT
                         'bg-surface2 outline outline-1 outline-border-l1 rounded-md': isFixed,
                         'hover:outline-ix-primary/[.35] focus-within:outline-ix-primary hover:focus-within:outline-ix-primary': isFixed,
                         'focus-within:ring-2 focus-within:ring-ix-primary/[0.35] focus-within:ring-offset-1': isFixed
-                    }), children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: (0, classnames_1.default)('min-h-full body-sm text-content-primary cursor-text', {
+                    }), tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: (0, classnames_1.default)('min-h-full body-sm text-content-primary cursor-text', {
                                     'field focus-visible:field-focused text-nowrap overflow-x-scroll scrollbar-hide': isField,
                                     'h-40 flex items-center px-l5': isField,
                                     '[&>p]:text-nowrap [&:not(:focus-visible)>p]:ellipsis [&>p]:interpolate': isField,

package/dist/core/components/fields/RichTextField.d.ts

@@ -1,9 +1,10 @@
 import { Field, Schema } from '@nascentdigital/funnel-core';
 import { RichTextEditor } from './RichTextEditor';
-export declare function RichTextField({ id, className, field, minimal, autoFocus, disabled }: RichTextField.Props): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextField({ id, className, field, minimal, autoFocus, disabled, disableDelete }: RichTextField.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace RichTextField {
     type Props = Pick<RichTextEditor.Props, 'id' | 'className' | 'autoFocus' | 'disabled'> & {
         field: Field<Schema.RichTextField>;
         minimal?: boolean;
+        disableDelete?: boolean;
     };
 }

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

@@ -7,9 +7,9 @@ const hooks_1 = require("../../hooks");
 const FieldLayout_1 = require("./FieldLayout");
 const RichTextEditor_1 = require("./RichTextEditor");
 // component
-function RichTextField({ id, className, field, minimal = false, autoFocus = false, disabled = false }) {
+function RichTextField({ id, className, field, minimal = false, autoFocus = false, disabled = false, disableDelete = false }) {
     // bind props + state + hooks
-    const { schema, required, value: data } = field;
+    const { schema, value: data } = field;
     const { capabilities, semantics } = schema;
     // bind field
     (0, hooks_1.useField)(field);
@@ -19,8 +19,6 @@ function RichTextField({ id, className, field, minimal = false, autoFocus = fals
         // update field
         field.value = funnel_core_1.Schema.RichTextField.Value.toData(change.getData());
     };
-    // create editor
-    const editor = ((0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { id: id, variant: semantics, placeholder: schema.hint, required: required, disabled: disabled, autoFocus: autoFocus, richText: data === null || data === void 0 ? void 0 : data.value, options: capabilities, onChange: onChange }));
     // or within field
-    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: minimal ? 'minimal' : 'default', children: editor }));
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: minimal ? 'minimal' : 'default', disableDelete: disableDelete, children: (0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { id: id, variant: semantics, placeholder: schema.hint, required: field.required, disabled: disabled, autoFocus: autoFocus, richText: data === null || data === void 0 ? void 0 : data.value, options: capabilities, onChange: onChange }) }));
 }

package/dist/core/components/fields/TextField.d.ts

@@ -7,6 +7,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<H
     variant?: FieldLayout.Variant;
     size?: FieldSize;
     disabled?: boolean;
+    disableDelete?: boolean;
     secured?: boolean;
     controls?: ReactNode;
 } & import("react").RefAttributes<TextField.Ref>>;
@@ -16,6 +17,7 @@ export declare namespace TextField {
         variant?: FieldLayout.Variant;
         size?: FieldSize;
         disabled?: boolean;
+        disableDelete?: boolean;
         secured?: boolean;
         controls?: ReactNode;
     };

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

@@ -28,7 +28,7 @@ const FieldLayout_1 = require("./FieldLayout");
 // component
 exports.TextField = (0, react_1.forwardRef)(function TextField(_a, ref) {
     var _b, _c;
-    var { id: externalId, className, field, size = 'md', autoFocus = false, onKeyDown = funnel_core_1.Fn.NoOp, disabled = false, secured = false, variant, controls } = _a, props = __rest(_a, ["id", "className", "field", "size", "autoFocus", "onKeyDown", "disabled", "secured", "variant", "controls"]);
+    var { id: externalId, className, field, size = 'md', autoFocus = false, onKeyDown = funnel_core_1.Fn.NoOp, disabled = false, disableDelete = false, secured = false, variant, controls } = _a, props = __rest(_a, ["id", "className", "field", "size", "autoFocus", "onKeyDown", "disabled", "disableDelete", "secured", "variant", "controls"]);
     // bind props + state + hooks
     const { schema } = field;
     const isPassword = schema.semantics === 'password' || schema.semantics === 'password-input';
@@ -106,7 +106,7 @@ exports.TextField = (0, react_1.forwardRef)(function TextField(_a, ref) {
     // render
     return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, {
             'w-full': variant !== 'wide'
-        }), field: field, size: size, disabled: disabled, secured: secured, variant: variant, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full flex items-center gap-l5'), children: [(0, jsx_runtime_1.jsxs)("div", { className: inputClassNames, children: [mask
+        }), field: field, size: size, disabled: disabled, disableDelete: disableDelete, secured: secured, variant: variant, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full flex items-center gap-l5'), children: [(0, jsx_runtime_1.jsxs)("div", { className: inputClassNames, children: [mask
                             ?
                                 (0, jsx_runtime_1.jsx)(client_1.MaskedInput, Object.assign({ ref: maskRef, id: id, className: "flex-1", name: `field-${field.id}`, placeholder: schema.hint, autoComplete: autoComplete, mask: mask, initialValue: (_b = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : '', onValueChanged: value => field.value = funnel_core_1.Schema.TextField.Value.toData(value), onFocus: () => field.editing = true, onBlur: () => field.editing = false, onKeyDown: onKeyDown, disabled: disabled || locked }, props, (schema.semantics === 'password'
                                     ?

package/dist/core/components/fields/TimestampField.d.ts

@@ -1,7 +1,7 @@
 import { Field, Schema } from '@nascentdigital/funnel-core';
 import { FieldLayout } from './FieldLayout';
 import { FieldSize } from './FieldSize';
-export declare function TimestampField({ className, field, variant, size, disabled, secured }: TimestampField.Props): import("react/jsx-runtime").JSX.Element;
+export declare function TimestampField({ className, field, variant, size, disabled, disableDelete, secured }: TimestampField.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace TimestampField {
     type Props = {
         className?: string;
@@ -10,6 +10,7 @@ export declare namespace TimestampField {
         size?: FieldSize;
         autoFocus?: boolean;
         disabled?: boolean;
+        disableDelete?: boolean;
         secured?: boolean;
     };
 }

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

@@ -11,9 +11,9 @@ const hooks_1 = require("../../hooks");
 const interaction_1 = require("../interaction");
 const FieldLayout_1 = require("./FieldLayout");
 // component
-function TimestampField({ className, field, variant, size = 'md', disabled = false, secured = false }) {
+function TimestampField({ className, field, variant, size = 'md', disabled = false, disableDelete = false, secured = false }) {
     // bind state + hooks
-    const { id, name, value: data, schema, required } = field;
+    const { id, name, value: data, schema } = field;
     const { hint, minTime, maxTime, defaultHour } = schema;
     const sandboxed = field.sandboxed;
     const locked = secured && !sandboxed;
@@ -36,7 +36,7 @@ function TimestampField({ className, field, variant, size = 'md', disabled = fal
         field.rollback();
     };
     // render
-    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, 'TextField-root'), field: field, variant: variant, size: size, disabled: disabled, secured: secured, children: (0, jsx_runtime_1.jsxs)("div", { className: "FieldLayout-inputWrap TextField-inputWrap", children: [(0, jsx_runtime_1.jsx)(interaction_1.DateTimePicker, { className: "FieldLayout-input TextField-input", minTime: funnel_core_1.Timestamp.coerceToDate(minTime), maxTime: funnel_core_1.Timestamp.coerceToDate(maxTime), defaultHour: defaultHour, placeholder: hint !== null && hint !== void 0 ? hint : 'Please select a date', date: date, onChange: onDateChanged, disabled: disabled || locked }), !required &&
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, 'TextField-root'), field: field, variant: variant, size: size, disabled: disabled, disableDelete: disableDelete, secured: secured, children: (0, jsx_runtime_1.jsxs)("div", { className: "FieldLayout-inputWrap TextField-inputWrap", children: [(0, jsx_runtime_1.jsx)(interaction_1.DateTimePicker, { className: "FieldLayout-input TextField-input", minTime: funnel_core_1.Timestamp.coerceToDate(minTime), maxTime: funnel_core_1.Timestamp.coerceToDate(maxTime), defaultHour: defaultHour, placeholder: hint !== null && hint !== void 0 ? hint : 'Please select a date', date: date, onChange: onDateChanged, disabled: disabled || locked }), !field.required &&
                     (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "destructive", size: "sm", disabled: date === undefined || locked, onClick: () => field.value = undefined, children: "Clear" }), secured &&
                     (locked
                         // unlock

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,21 +38,22 @@ 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, anchorField, accessibleField, descriptionField } = (0, useAssetFields_1.useAssetFields)();
+    const { nameField, descriptionField } = (0, useAssetFields_1.useAssetFields)();
     const [shared, setShared] = (0, react_2.useState)(false);
     const editorApi = (0, client_1.useEditorApi)();
     const assetStore = (0, hooks_1.useAssetStore)();
-    const { valid, modified } = checkFields({ asset, nameField, anchorField, accessibleField, descriptionField, shared });
+    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');
@@ -62,19 +74,7 @@ exports.AssetEditor = (0, react_2.forwardRef)(function AssetEditor(_, ref) {
         // bind fields to asset
         nameField.reset(funnel_core_1.Schema.TextField.Value.toData(asset.name));
         descriptionField.reset(asset.description ? funnel_core_1.Schema.TextField.Value.toData(asset.description) : null);
-        if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)) {
-            anchorField.reset(funnel_core_1.Schema.EnumField.Value.toData(asset.metadata.crop));
-        }
-        else if (funnel_core_1.Schema.AssetField.LinkedValue.Video.filter(asset)) {
-            anchorField.reset(funnel_core_1.Schema.EnumField.Value.toData(asset.metadata.crop));
-            const accessible = asset.metadata.accessible;
-            accessibleField.reset(funnel_core_1.Schema.EnumField.Value.toData(accessible === 'system'
-                ? accessible
-                : accessible
-                    ? 'true'
-                    : 'false'));
-        }
-    }, [asset, nameField, anchorField, accessibleField, descriptionField]);
+    }, [asset, nameField, descriptionField]);
     // helpers
     const onValidate = () => {
         // update error level
@@ -92,8 +92,7 @@ exports.AssetEditor = (0, react_2.forwardRef)(function AssetEditor(_, ref) {
         // handle update
         try {
             // create meta
-            const metadata = await getAssetMetadata({ asset, anchorField, accessibleField });
-            console.debug('[AssetEditor/onUpdate] updating asset', { asset, metadata });
+            const metadata = await getAssetMetadata({ asset });
             // upload new file
             const updatedAsset = await editorApi.updateAsset({
                 id: asset.id,
@@ -111,7 +110,6 @@ exports.AssetEditor = (0, react_2.forwardRef)(function AssetEditor(_, ref) {
             assetStore.addAsset(updatedAsset);
             // complete
             setResult(updatedAsset.value);
-            console.debug('[AssetEditor/upload] completed upload');
         }
         // handle errors
         catch (e) {
@@ -132,30 +130,26 @@ 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, anchorField, descriptionField, accessibleField, 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, anchorField, accessibleField }) {
-    var _a;
+async function getAssetMetadata({ asset }) {
     const { type, metadata } = asset;
     switch (funnel_core_1.FileType.coerce(type)) {
         case 'image':
-            return Object.assign(Object.assign({}, metadata), { crop: funnel_core_1.Schema.EnumField.Value.fromData(anchorField.value) });
+            return Object.assign(Object.assign({}, metadata), { crop: 'center' });
         case 'video': {
-            const accessible = (_a = funnel_core_1.Schema.EnumField.Value.fromData(accessibleField.value)) !== null && _a !== void 0 ? _a : 'system';
-            return Object.assign(Object.assign({}, metadata), { crop: funnel_core_1.Schema.EnumField.Value.fromData(anchorField.value), accessible: accessible === 'system'
-                    ? 'system'
-                    : accessible === 'true' });
+            return Object.assign(Object.assign({}, metadata), { crop: 'center', accessible: 'system' });
         }
         default:
             return metadata;
     }
 }
-function checkFields({ asset, nameField, anchorField, accessibleField, descriptionField, shared }) {
+function checkFields({ asset, nameField, descriptionField, shared }) {
     // skip if there's no asset
     if (!asset) {
         return { valid: false, modified: false };
@@ -165,26 +159,19 @@ function checkFields({ asset, nameField, anchorField, accessibleField, descripti
     const isVisual = fieldType === 'image' || fieldType === 'icon' || fieldType === 'video';
     let valid = nameField.valid;
     if (valid && isVisual) {
-        valid = anchorField.valid &&
-            (!descriptionField.exists || descriptionField.valid);
-        console.debug('[checkFields]', descriptionField);
+        valid = !descriptionField.exists || descriptionField.valid;
     }
     // check if modified
-    let modified = (asset.scope === 'global') !== shared
+    const modified = (asset.scope === 'global') !== shared
         || nameField.modified
         || descriptionField.modified;
-    if (!modified && isVisual) {
-        modified = anchorField.modified
-            || (fieldType === 'video' && accessibleField.modified);
-    }
-    console.debug('[checkFields]', { valid, modified });
     // return validity
     return {
         valid,
         modified
     };
 }
-function renderFields({ asset, nameField, anchorField, descriptionField, accessibleField, shared, setShared }) {
+function renderFields({ asset, nameField, descriptionField, shared, setShared }) {
     // skip if there's no asset
     if (!asset) {
         return null;
@@ -197,13 +184,6 @@ function renderFields({ asset, nameField, anchorField, descriptionField, accessi
     const fieldType = funnel_core_1.FileType.coerce(asset.type);
     const isVisual = fieldType === 'image' || fieldType === 'icon' || fieldType === 'video';
     if (isVisual) {
-        // add anchor
-        fields.push((0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: anchorField }, "anchor"));
-        // add accessible flag (for videos)
-        if (fieldType === 'video') {
-            fields.push((0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: accessibleField }, "accessible"));
-        }
-        // get description
         fields.push(descriptionField.exists
             ? (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: descriptionField }, "desc")
             : (0, jsx_runtime_1.jsx)(OptInField_1.OptInField, { field: descriptionField }, "desc.option"));

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

@@ -9,7 +9,6 @@ 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("react");
-const client_1 = require("../../../client");
 const hooks_1 = require("../../../hooks");
 const feedback_1 = require("../../feedback");
 const interaction_1 = require("../../interaction");
@@ -26,7 +25,7 @@ exports.AssetPicker = (0, react_1.forwardRef)(function AssetPicker(_, ref) {
     const [tagFilters, setTagFilters] = (0, react_1.useState)([]);
     const [globalFilter, setGlobalFilter] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)();
-    const editorApi = (0, client_1.useEditorApi)();
+    const assetRepo = (0, hooks_1.useAssetRepository)();
     const assetStore = (0, hooks_1.useAssetStore)();
     const fileTypes = (0, react_1.useMemo)(() => getFileTypeOptions(schema), [schema]);
     const tags = (0, react_1.useMemo)(() => getTagOptions(schema, assets), [schema, assets]);
@@ -57,8 +56,9 @@ exports.AssetPicker = (0, react_1.forwardRef)(function AssetPicker(_, ref) {
         const scope = assetStore.getSearchScope();
         console.debug('[AssetPicker] fetching files for', { fileTypes, tag: schema.tags, scope });
         // fetch files
-        editorApi
-            .getAssets({
+        assetRepo
+            .search({
+            brand: funnel_core_1.AppConfig.brand(),
             fileType: fileTypes,
             scope: assetStore.getSearchScope(),
             tags: schema.tags.map(funnel_core_1.Schema.Tag.toData),
@@ -70,7 +70,7 @@ exports.AssetPicker = (0, react_1.forwardRef)(function AssetPicker(_, ref) {
             .catch(e => {
             setError(feedback_1.ErrorMessage.coerce(e));
         });
-    }, [editorApi, assetStore, schema, fileTypes]);
+    }, [assetRepo, assetStore, schema, fileTypes]);
     // helpers
     const onPick = (asset) => {
         // store asset (if not switching to uploader)
@@ -99,7 +99,7 @@ exports.AssetPicker = (0, react_1.forwardRef)(function AssetPicker(_, ref) {
                                 : filters.filter(filter => filter !== fileType)), onToggleAll: () => setFileTypeFilters([]), renderLabel: filter => funnel_core_1.StringUtils.capitalize(filter) }), tags.length > 1 &&
                         (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Tags", multiselect: true, options: tags, selectedOptions: tagFilters, onToggle: (tag, selected) => setTagFilters(tags => selected
                                 ? [...tags, tag]
-                                : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters([]), renderLabel: tag => VisualTag.getName(tag) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(interaction_1.Checkbox, { className: "shrink-0", checked: globalFilter, onChange: setGlobalFilter, children: "Include Library Items" })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ schema, error, assets, fileTypeFilters, tagFilters, onPick }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center p-l8 border-t border-solid border-border-l1", children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", iconLeft: "Upload", disabled: assets === undefined, onClick: () => onPick('upload'), children: "Upload new asset" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" })] })] })] }));
+                                : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters([]), renderLabel: tag => VisualTag.getName(tag) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(interaction_1.Checkbox, { className: "shrink-0", checked: globalFilter, onChange: setGlobalFilter, children: "Include Library Items" })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ schema, error, assets, fileTypeFilters, tagFilters, onPick }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center p-l8 border-t border-solid border-border-l1", children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", iconLeft: "Upload", disabled: assets === undefined, onClick: () => onPick('upload'), children: "Upload new asset" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" })] })] })] }));
 });
 function getFileTypeOptions(schema) {
     // skip if there's no schema

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;
 }