@nascentdigital/funnel-editor 4.4.18

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

@@ -0,0 +1,219 @@
+"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.RichTextEditor = RichTextEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LexicalAutoFocusPlugin_1 = require("@lexical/react/LexicalAutoFocusPlugin");
+const LexicalCheckListPlugin_1 = require("@lexical/react/LexicalCheckListPlugin");
+const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
+const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
+const LexicalEditorRefPlugin_1 = require("@lexical/react/LexicalEditorRefPlugin");
+const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
+const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
+const LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
+const LexicalHorizontalRulePlugin_1 = require("@lexical/react/LexicalHorizontalRulePlugin");
+const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
+const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
+const LexicalOnChangePlugin_1 = require("@lexical/react/LexicalOnChangePlugin");
+const LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
+const utils_1 = require("@lexical/utils");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+const richtext_1 = require("./richtext");
+// component
+function RichTextEditor({ id, variant = 'area', className, placeholder = DEFAULT_PLACEHOLDER, required = false, disabled = false, autoFocus = false, standalone = false, richText, options: optionsRaw, onChange = funnel_core_1.Fn.NoOp, onFocus = funnel_core_1.Fn.NoOp, onBlur = funnel_core_1.Fn.NoOp }) {
+    // sync change callback/ref
+    const latestRawOptions = (0, client_1.useLatestValue)(optionsRaw !== null && optionsRaw !== void 0 ? optionsRaw : {});
+    const options = (0, react_1.useMemo)(() => funnel_core_1.Schema.RichTextField.Capabilities.parse(latestRawOptions), [latestRawOptions]);
+    const [isEmpty, setIsEmpty] = (0, react_1.useState)(false);
+    const editorRef = (0, react_1.useRef)(null);
+    const localHash = (0, react_1.useMemo)(() => funnel_core_1.Value.uuid(), []);
+    const focusedRef = (0, react_1.useRef)(false);
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    onChangeRef.current = onChange;
+    // sync state (via data)
+    const currentRichTextRef = (0, react_1.useRef)(richText);
+    // bind hooks
+    const onEditorChanged = (0, react_1.useCallback)((editorState, editor, tags) => {
+        // skip if not focused
+        if (!focusedRef.current) {
+            return;
+        }
+        // create/track change
+        const richText = Object.assign(Object.assign({}, editor.toJSON()), { hash: localHash });
+        currentRichTextRef.current = richText;
+        // invoke callback
+        const onChange = onChangeRef.current;
+        onChange({
+            type: 'changed',
+            getData: () => { var _a; return (_a = currentRichTextRef.current) !== null && _a !== void 0 ? _a : richText; }
+        });
+    }, [localHash]);
+    const editorConfig = (0, react_1.useMemo)(() => {
+        // create new editor state
+        const editorState = (currentRichTextRef === null || currentRichTextRef === void 0 ? void 0 : currentRichTextRef.current)
+            ? JSON.stringify(currentRichTextRef.current.editorState)
+            : DEFAULT_EDITOR_STATE;
+        // return config
+        const _a = funnel_ui_1.RichText.config, { nodes } = _a, config = __rest(_a, ["nodes"]);
+        return Object.assign(Object.assign({}, config), { nodes: [...Array.from(nodes), LexicalHorizontalRuleNode_1.HorizontalRuleNode], theme: (0, richtext_1.getTheme)(variant, options), editorState,
+            onError });
+    }, [variant, options]);
+    // reload if data changes
+    (0, react_1.useEffect)(() => {
+        // ignore if there's no data
+        if (!richText) {
+            return;
+        }
+        // or ignore if data is the same as local
+        else if (richText.hash === localHash) {
+            return;
+        }
+        // or ignore if currently focused
+        else if (focusedRef.current) {
+            return;
+        }
+        // sync editor state
+        const editor = editorRef.current;
+        if (editor) {
+            // update active editor state
+            currentRichTextRef.current = richText;
+            // update to new state
+            editor.setEditorState(editor.parseEditorState(richText.editorState));
+        }
+    }, [localHash, richText]);
+    // enable/disable
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.setEditable(!disabled);
+    }, [disabled]);
+    // blur/focus callbacks
+    (0, react_1.useEffect)(() => {
+        // skip if editor isn't bound (should never occur)
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        // set initial empty state
+        editor.read(() => {
+            const text = (0, lexical_1.$getRoot)().getTextContent();
+            setIsEmpty(text.trim().length === 0);
+        });
+        // bind callbacks
+        return (0, utils_1.mergeRegister)(
+        // text changes
+        editor.registerTextContentListener(text => {
+            setIsEmpty(text.trim().length === 0);
+        }), 
+        // focus handler
+        editor.registerCommand(lexical_1.FOCUS_COMMAND, () => {
+            // track change
+            focusedRef.current = true;
+            // raise focus
+            onFocus(editor.getRootElement());
+            // allow event bubbling
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), 
+        // blur handler
+        editor.registerCommand(lexical_1.BLUR_COMMAND, () => {
+            // track change
+            focusedRef.current = false;
+            // raise blur
+            onBlur(editor.getRootElement());
+            // allow event bubbling
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW));
+    }, [onFocus, onBlur]);
+    // check if this editor got focused on mount
+    (0, react_1.useEffect)(() => {
+        // skip if editor isn't bound (should never occur)
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        // determine focus state
+        const isFocused = editor.getRootElement() === document.activeElement;
+        // track state
+        focusedRef.current = isFocused;
+        // raise focus
+        if (isFocused) {
+            onFocus(editor.getRootElement());
+        }
+    }, [onFocus]);
+    // render
+    const isField = variant === 'field';
+    const isArea = variant === 'area';
+    const isEditor = variant === 'editor';
+    return ((0, jsx_runtime_1.jsx)(LexicalComposer_1.LexicalComposer, { initialConfig: editorConfig, children: (0, jsx_runtime_1.jsxs)("div", { id: id, className: (0, classnames_1.default)(className, {
+                'h-full max-h-full grid grid-rows-[min-content_1fr] gap-l8 overflow-hidden': standalone,
+                'p-l8 border border-solid border-border-l1 rounded-lg': standalone,
+            }), children: [isEditor
+                    ? (0, jsx_runtime_1.jsx)(richtext_1.Toolbar, { options: options })
+                    : (0, jsx_runtime_1.jsx)(richtext_1.FloatingToolbarPlugin, { options: options }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('group relative', {
+                        'p-l5 overflow-y-scroll appearance-none scrollbar-thin': !isField,
+                        'field focus-within:field-focused rounded-lg': isArea,
+                        'h-[80px] max-h-[80px]': isArea,
+                        'h-[400px] max-h-[400px]': isEditor && !standalone,
+                        'h-full max-h-ful overflow-y-scroll scrollbar-thin cursor-text interpolate': standalone,
+                        'bg-surface1 outline outline-1 outline-border-l1 rounded-lg': standalone,
+                        'hover:outline-ix-primary/[.35] focus-within:outline-ix-primary hover:focus-within:outline-ix-primary': standalone,
+                        'focus-within:ring-2 focus-within:ring-ix-primary/[0.35] focus-within:ring-offset-1': standalone
+                    }), 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,
+                                    '[&>p]:w-full': isField && isEmpty,
+                                    'outline-none': !isField
+                                }), "aria-placeholder": placeholder, placeholder: funnel_core_1.Fn.Null, required: required, "aria-required": required }), placeholder: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 pointer-events-none interpolate-fast', 'body-sm text-content-secondary ellipsis', 'group-focus-within:opacity-none', {
+                                    'flex items-center px-l5': isField,
+                                    'p-l5': !isField
+                                }), children: placeholder }), ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(richtext_1.SanitizerPlugin, { capabilities: options !== null && options !== void 0 ? options : {}, maxParagraphs: isField ? 1 : undefined }), (options === null || options === void 0 ? void 0 : options.lists) &&
+                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalCheckListPlugin_1.CheckListPlugin, {})] }), (options === null || options === void 0 ? void 0 : options.hr) &&
+                            (0, jsx_runtime_1.jsx)(LexicalHorizontalRulePlugin_1.HorizontalRulePlugin, {}), ((options === null || options === void 0 ? void 0 : options.priority) || (options === null || options === void 0 ? void 0 : options.accent) || (options === null || options === void 0 ? void 0 : options.subtle)) &&
+                            (0, jsx_runtime_1.jsx)(richtext_1.StyledTextPlugin, {}), (options === null || options === void 0 ? void 0 : options.links) &&
+                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(richtext_1.LinkEditor, {}), (0, jsx_runtime_1.jsx)(richtext_1.LinkPopup, {})] }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), autoFocus &&
+                            (0, jsx_runtime_1.jsx)(LexicalAutoFocusPlugin_1.AutoFocusPlugin, { defaultSelection: "rootStart" }), (0, jsx_runtime_1.jsx)(LexicalEditorRefPlugin_1.EditorRefPlugin, { editorRef: editorRef }), (0, jsx_runtime_1.jsx)(LexicalOnChangePlugin_1.OnChangePlugin, { ignoreSelectionChange: true, onChange: onEditorChanged })] })] }) }));
+}
+// helpers
+const DEFAULT_EDITOR_STATE = JSON.stringify({
+    "root": {
+        "type": "root",
+        "format": "",
+        "indent": 0,
+        "version": 1,
+        "children": [
+            {
+                "type": "paragraph",
+                "format": "",
+                "indent": 0,
+                "version": 1,
+                "children": [],
+                "direction": null,
+                "textStyle": "",
+                "textFormat": 0
+            }
+        ],
+        "direction": null
+    }
+});
+const DEFAULT_PLACEHOLDER = 'Please provide some text...';
+function onError(error, editor) {
+    console.error(error);
+}

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

@@ -0,0 +1,10 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import { RichTextEditor } from './RichTextEditor';
+export declare function RichTextField({ id, className, field, minimal, autoFocus, standalone, disabled }: 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>;
+        standalone?: boolean;
+        minimal?: boolean;
+    };
+}

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextField = RichTextField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+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, standalone = false, disabled = false }) {
+    // bind props + state + hooks
+    const { schema, required, value: data } = field;
+    const { capabilities, size } = schema;
+    const variant = (0, react_1.useMemo)(() => size === 'lg'
+        ? 'editor'
+        : size === 'md'
+            ? 'area'
+            : 'field', [size]);
+    // bind field
+    (0, hooks_1.useField)(field);
+    // helpers
+    const onChange = (change) => {
+        // TODO: debounce this
+        // 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: variant, placeholder: schema.hint, required: required, disabled: disabled, autoFocus: autoFocus, standalone: standalone, richText: data === null || data === void 0 ? void 0 : data.value, options: capabilities, onChange: onChange }));
+    // render standalone
+    if (standalone) {
+        return editor;
+    }
+    // or within field
+    else {
+        return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: minimal ? 'minimal' : 'default', children: editor }));
+    }
+}

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

@@ -0,0 +1,25 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import { HTMLAttributes, ReactNode } from 'react';
+import { FieldLayout } from './FieldLayout';
+export declare const TextField: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "defaultValue" | "onFocus" | "onBlur" | "onChange"> & {
+    field: Field<Schema.TextField>;
+    variant?: FieldLayout.Variant;
+    disabled?: boolean;
+    secured?: boolean;
+    small?: boolean;
+    controls?: ReactNode;
+} & import("react").RefAttributes<TextField.Ref>>;
+export declare namespace TextField {
+    type Props = Omit<HTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur'> & {
+        field: Field<Schema.TextField>;
+        variant?: FieldLayout.Variant;
+        disabled?: boolean;
+        secured?: boolean;
+        small?: boolean;
+        controls?: ReactNode;
+    };
+    interface Ref {
+        focus(): void;
+        coerce(value: string): void;
+    }
+}

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

@@ -0,0 +1,191 @@
+"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.TextField = void 0;
+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 rxjs_1 = require("rxjs");
+const hooks_1 = require("../../hooks");
+const interaction_1 = require("../interaction");
+const FieldErrorController_1 = require("./FieldErrorController");
+const FieldLayout_1 = require("./FieldLayout");
+// component
+exports.TextField = (0, react_1.forwardRef)(function TextField(_a, ref) {
+    var _b, _c;
+    var { id: externalId, className, field, autoFocus = false, onKeyDown = funnel_core_1.Fn.NoOp, disabled = false, secured = false, variant, small = false, controls } = _a, props = __rest(_a, ["id", "className", "field", "autoFocus", "onKeyDown", "disabled", "secured", "variant", "small", "controls"]);
+    // bind props + state + hooks
+    const { schema } = field;
+    const isPassword = schema.semantics === 'password' || schema.semantics === 'password-input';
+    const sandboxed = field.sandboxed;
+    const locked = secured && !sandboxed;
+    const internalId = (0, react_1.useId)();
+    const id = externalId !== null && externalId !== void 0 ? externalId : internalId;
+    const [passwordHidden, setPasswordHidden] = (0, react_1.useState)(isPassword);
+    const mask = (0, react_1.useMemo)(() => getMask(schema), [schema]);
+    const autoComplete = (0, react_1.useMemo)(() => getAutoComplete(schema), [schema]);
+    const maskRef = (0, react_1.useRef)(null);
+    const errorLevel = (0, react_1.useContext)(FieldErrorController_1.FieldErrorContext);
+    const errors = field.getErrors(errorLevel);
+    const hasErrors = errors.length > 0;
+    const inputClassNames = (0, react_1.useMemo)(() => (0, classnames_1.default)('field', 'w-full flex items-center gap-l5 px-l5', {
+        'h-40': !small,
+        'h-32': small,
+        'field-error': hasErrors,
+        'field-disabled': disabled || locked
+    }), [small, disabled, locked, hasErrors]);
+    // bind field
+    (0, hooks_1.useField)(field);
+    // bind ref
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        focus: () => {
+            const element = document.getElementById(id);
+            element === null || element === void 0 ? void 0 : element.focus();
+        },
+        coerce: (value) => {
+            var _a;
+            if (mask) {
+                (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value);
+            }
+            else {
+                field.value = funnel_core_1.Schema.TextField.Value.toData(value);
+            }
+        }
+    }), [id, mask, field]);
+    // sync field with mask
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        // update field immediately
+        (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.setValue((_b = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : '');
+        // update whenever field gets reset
+        const subscription = field.events$
+            .pipe((0, rxjs_1.filter)(e => e.type === 'reset'))
+            .subscribe(() => { var _a, _b; return (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.setValue((_b = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : ''); });
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [field]);
+    // autofocus
+    (0, react_1.useEffect)(() => {
+        if (autoFocus || sandboxed) {
+            const element = funnel_core_1.Browser.getElement(`#${CSS.escape(id)}`);
+            element === null || element === void 0 ? void 0 : element.focus();
+        }
+    }, [id, autoFocus, sandboxed]);
+    // helpers
+    const onSandbox = () => {
+        // sandbox field (triggers autofocus - see above)
+        field.sandbox();
+    };
+    const onCommit = () => {
+        // commit field
+        field.commit();
+    };
+    const onRollback = () => {
+        var _a, _b;
+        // rollback field
+        field.rollback();
+        // re-sync mask with field value
+        (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.setValue((_b = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : '');
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, {
+            'w-full': variant !== 'wide'
+        }), field: field, disabled: disabled, secured: secured, variant: variant, children: (0, jsx_runtime_1.jsxs)("div", { className: "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'
+                                    ?
+                                        {
+                                            'data-1p-ignore': 'true',
+                                            'data-bwignore': 'true',
+                                            'data-lpignore': 'true',
+                                            'data-form-type': 'other',
+                                        }
+                                    : {})))
+                            :
+                                (0, jsx_runtime_1.jsx)("input", Object.assign({ id: id, className: "flex-1", type: getInputType(schema, passwordHidden), name: `field-${field.id}`, placeholder: schema.hint, autoComplete: autoComplete, value: (_c = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _c !== void 0 ? _c : '', onChange: e => field.value = funnel_core_1.Schema.TextField.Value.toData(e.target.value), onFocus: () => field.editing = true, onBlur: () => field.editing = false, onKeyDown: onKeyDown, disabled: disabled || locked }, props, (schema.semantics === 'password'
+                                    ?
+                                        {
+                                            'data-1p-ignore': 'true',
+                                            'data-bwignore': 'true',
+                                            'data-lpignore': 'true',
+                                            'data-form-type': 'other',
+                                        }
+                                    : {}))), isPassword &&
+                            (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { className: "", variant: passwordHidden ? 'secondary' : 'primary', icon: passwordHidden ? 'EyeOff' : 'Eye', size: "xs", onClick: () => setPasswordHidden(!passwordHidden) })] }), controls, secured &&
+                    (locked
+                        // unlock
+                        ?
+                            (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "secondary", icon: locked ? 'LockOpen' : 'Lock', onClick: onSandbox })
+                        :
+                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "secondary", icon: "X", onClick: onRollback }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "primary", icon: "Check", disabled: !field.modified || !field.valid, onClick: onCommit })] }))] }) }));
+});
+// helpers
+function getMask(schema) {
+    // determine regex/mask based on semantics
+    let mask;
+    switch (schema.semantics) {
+        case 'slug':
+            mask = {
+                mask: /^(?!.*--)[a-z\d]+(-?|([a-z\d]+))*$/
+            };
+            break;
+        case 'email':
+            mask = {
+                mask: /^(?!.*\.\.)(?!.*@@)[a-z\d]+([a-z\d._-]+)*(@([a-z\d-_]+(\.|[a-z\d])*)?)?$/,
+                prepare: (text) => text === null || text === void 0 ? void 0 : text.toLowerCase()
+            };
+            break;
+        case 'phone':
+            mask = {
+                mask: '(000) 000-0000'
+            };
+            break;
+        case 'phone-intl':
+            mask = {
+                mask: [
+                    { mask: '(000) 000-0000' },
+                    { mask: '+00 0 0000 0000' },
+                    { mask: '+00 00 0000 0000' },
+                    { mask: '+000 000 0000000' }
+                ]
+            };
+            break;
+    }
+    // return mask
+    return mask;
+}
+function getInputType(schema, passwordHidden) {
+    switch (schema.semantics) {
+        case 'email':
+            return 'email';
+        case 'password':
+        case 'password-input':
+            return passwordHidden ? 'password' : 'text';
+        default:
+            return 'text';
+    }
+}
+function getAutoComplete(schema) {
+    switch (schema.semantics) {
+        case 'email':
+        case 'password':
+            return schema.semantics;
+        default:
+            return 'off';
+    }
+}

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

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

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

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimestampField = TimestampField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../../hooks");
+const interaction_1 = require("../interaction");
+const FieldLayout_1 = require("./FieldLayout");
+// component
+function TimestampField({ className, field, variant, disabled = false, secured = false }) {
+    // bind state + hooks
+    const { id, name, value: data, schema, required } = field;
+    const { hint, minTime, maxTime, defaultHour } = schema;
+    const sandboxed = field.sandboxed;
+    const locked = secured && !sandboxed;
+    const date = funnel_core_1.Timestamp.coerceToDate(funnel_core_1.Schema.TimestampField.Value.fromData(field.value));
+    // sync field
+    (0, hooks_1.useField)(field);
+    // helpers
+    const onDateChanged = (date) => {
+        field.value = date
+            ? funnel_core_1.Schema.TimestampField.Value.toData(funnel_core_1.Timestamp.fromDate(date, schema.timezone))
+            : undefined;
+    };
+    const onSandbox = () => {
+        field.sandbox();
+    };
+    const onCommit = () => {
+        field.commit();
+    };
+    const onRollback = () => {
+        field.rollback();
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, 'TextField-root'), field: field, variant: variant, 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 &&
+                    (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
+                        ?
+                            (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "secondary", icon: locked ? 'LockOpen' : 'Lock', onClick: onSandbox })
+                        :
+                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "secondary", icon: "X", onClick: onRollback }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "primary", icon: "Check", disabled: !field.modified || !field.valid, onClick: onCommit })] }))] }) }));
+}

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

@@ -0,0 +1,6 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import type { FieldCard } from '../FieldCard';
+export declare function AssetCard({ className, field, ...props }: AssetCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AssetCard {
+    type Props = FieldCard.Props.For<Field<Schema.AssetField>>;
+}

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

@@ -0,0 +1,71 @@
+"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.AssetCard = AssetCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const FieldCardLayout_1 = require("../FieldCardLayout");
+const AssetPreview_1 = require("./AssetPreview");
+// component
+function AssetCard(_a) {
+    var { className, field } = _a, props = __rest(_a, ["className", "field"]);
+    // bind props + state
+    const [active, setActive] = (0, react_1.useState)(false);
+    const { value: data } = field;
+    const value = funnel_core_1.Schema.AssetField.Value.fromData(data);
+    const store = (0, hooks_1.useAssetStore)();
+    const asset = value ? store.getAsset(value.id) : undefined;
+    // sync field
+    (0, hooks_1.useField)(field);
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldCardLayout_1.FieldCardLayout, Object.assign({}, props, { className: className, field: field, onActiveChanged: setActive, children: (0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { className: "rounded-xs overflow-hidden", asset: asset === null || asset === void 0 ? void 0 : asset.value, active: active }) })));
+}
+// helpers
+function getIcon(mimeType) {
+    const fileType = mimeType && funnel_core_1.FileType.coerce(mimeType);
+    switch (fileType) {
+        case 'image':
+            return 'Image';
+        case 'video':
+            return 'SquarePlay';
+        default:
+            return 'Image';
+    }
+}
+function getAssetInfo(asset) {
+    // skip if there's no asset
+    if (!asset) {
+        return 'Unavailable';
+    }
+    // image
+    const { type, size } = asset;
+    const fileExtension = funnel_core_1.MimeType.getFileExtension(type);
+    const fileSize = new funnel_core_1.ByteSize(size).components();
+    if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)) {
+        const { metadata } = asset;
+        return metadata.dimensions
+            ? `${fileExtension} - ${metadata.dimensions.width}×${metadata.dimensions.height} - ${fileSize.size} ${fileSize.units}`
+            : `${fileExtension} - ${fileSize.size} ${fileSize.units}`;
+    }
+    // video
+    else if (funnel_core_1.Schema.AssetField.LinkedValue.Video.filter(asset)) {
+        const { metadata } = asset;
+        return `${fileExtension} - ${metadata.dimensions.width}×${metadata.dimensions.height} - ${fileSize.size} ${fileSize.units}`;
+    }
+    // others
+    else {
+        return `${fileExtension} - ${fileSize.size} ${fileSize.units}`;
+    }
+}

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

@@ -0,0 +1,13 @@
+import { Rect, Schema } from '@nascentdigital/funnel-core';
+export declare const AssetEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<AssetEditor.Ref>>;
+export declare namespace AssetEditor {
+    type Props = {};
+    interface Ref {
+        edit(options: Options): Promise<Schema.AssetField.LinkedValue | undefined>;
+    }
+    type Options = {
+        schema: Schema.AssetField;
+        asset: Schema.AssetField.LinkedValue;
+        anchor: HTMLElement | Rect;
+    };
+}