@nascentdigital/funnel-editor 4.5.7 → 4.6.0

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

@@ -18,6 +18,7 @@ __exportStar(require("./asset/AssetPreview"), exports);
 __exportStar(require("./DateField"), exports);
 __exportStar(require("./FieldEditor"), exports);
 __exportStar(require("./FieldErrorController"), exports);
+__exportStar(require("./FieldHeader"), exports);
 __exportStar(require("./FieldSize"), exports);
 __exportStar(require("./FieldsPanel"), exports);
 __exportStar(require("./RichTextEditor"), exports);

package/dist/core/components/fields/link/LinkEditor.d.ts

@@ -1,4 +1,4 @@
-import { Language, Rect, Schema } from '@nascentdigital/funnel-core';
+import { Language, Schema } from '@nascentdigital/funnel-core';
 export declare const LinkEditor: import("react").ForwardRefExoticComponent<LinkEditor.Props & import("react").RefAttributes<LinkEditor.Ref>>;
 export declare namespace LinkEditor {
     type Props = {
@@ -11,6 +11,6 @@ export declare namespace LinkEditor {
     type Options = {
         schema: Schema.LinkField;
         initialValue?: Schema.Field.Data<Schema.LinkField>;
-        anchor: HTMLElement | Rect;
+        anchor: string;
     };
 }

package/dist/core/components/fields/link/LinkEditor.js

@@ -216,6 +216,10 @@ exports.LinkEditor = (0, react_1.forwardRef)(function LinkEditor({ region, langu
         // touch
         touch();
     };
+    // skip if params are missing
+    if (!anchor) {
+        return null;
+    }
     // render
     return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { title: `${initialValue ? 'Edit' : 'Create'} ${name}`, open: !!deferral && !deferral.isComplete, anchor: anchor, anchorOffset: 4, canSave: canSave, onSave: onSave, onClose: onCancel, disabled: pickingPage, children: [description &&
                 (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), (0, jsx_runtime_1.jsxs)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: labelField, autoFocus: true }), pickedPage

package/dist/core/components/fields/list/CreateFieldButton.d.ts

@@ -1,6 +1,6 @@
 import { Callback, Schema } from '@nascentdigital/funnel-core';
 import { Button } from '../../interaction';
-export declare function CreateFieldButton({ schema, onCreated, onEditing, children, ...props }: CreateFieldButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare function CreateFieldButton({ schema, className, onCreated, onEditing, children, ...props }: CreateFieldButton.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace CreateFieldButton {
     type Props = Omit<Button.Props, 'onClick' | 'variant' | 'iconLeft' | 'iconRight'> & {
         schema: Schema.Field.Type;

package/dist/core/components/fields/list/CreateFieldButton.js

@@ -19,11 +19,10 @@ const interaction_1 = require("../../interaction");
 const factories_1 = require("../factories");
 // component
 function CreateFieldButton(_a) {
-    var { schema, onCreated, onEditing = funnel_core_1.Fn.NoOp, children } = _a, props = __rest(_a, ["schema", "onCreated", "onEditing", "children"]);
+    var { schema, className, onCreated, onEditing = funnel_core_1.Fn.NoOp, children } = _a, props = __rest(_a, ["schema", "className", "onCreated", "onEditing", "children"]);
     // bind props + state
     const [creating, setCreating] = (0, react_1.useState)(false);
-    const rootElementRef = (0, react_1.useRef)(null);
-    const rootElement = rootElementRef.current;
+    const id = (0, react_1.useId)();
     const onCreatedRef = (0, react_1.useRef)(onCreated);
     onCreatedRef.current = onCreated;
     // helpers
@@ -40,6 +39,6 @@ function CreateFieldButton(_a) {
         setCreating(false);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, Object.assign({}, props, { ref: rootElementRef, onClick: onCreateStart, variant: "text", iconLeft: "Plus", children: children })), creating && rootElement &&
-                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: schema, anchor: rootElement, onCommit: onCreate, onCancel: onCreateCancel })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, Object.assign({}, props, { anchorId: id, onClick: onCreateStart, variant: "text", iconLeft: "Plus", children: children })), creating &&
+                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: schema, anchor: id, onCommit: onCreate, onCancel: onCreateCancel })] }));
 }

package/dist/core/components/fields/list/CreateFieldCard.js

@@ -9,6 +9,7 @@ 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
@@ -16,8 +17,7 @@ function CreateFieldCard({ className, schema, field, onClick, onCreated = funnel
     // bind props + state
     const { name } = schema;
     const [creating, setCreating] = (0, react_1.useState)(false);
-    const rootElementRef = (0, react_1.useRef)(null);
-    const rootElement = rootElementRef.current;
+    const id = (0, react_1.useId)();
     const onCreatedRef = (0, react_1.useRef)(onCreated);
     onCreatedRef.current = onCreated;
     // helpers
@@ -47,6 +47,6 @@ function CreateFieldCard({ className, schema, field, onClick, onCreated = funnel
         onCreatedRef.current(data);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("section", { ref: rootElementRef, className: (0, classnames_1.default)(className, 'h-full outline outline-1 outline-transparent overflow-hidden cursor-pointer interpolate', 'bg-surface1 border border-dashed border-border-l1 rounded-md', 'hover:bg-ix-primary-hover/tint0 hover:border-ix-primary hover:border-solid', 'focus-visible:bg-ix-primary-hover/tint0 focus-visible:border-ix-primary focus-visible:border-solid focus-visible:outline-ix-primary', 'active:scale-[.97] active:interpolate-fast'), onClick: onCreateStart, onKeyDown: client_1.OnKey.enter(onCreateStart), tabIndex: 0, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full flex flex-col justify-center items-center pointer-events-none interpolate", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l5 p-l5", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-l5 text-ix-secondary bg-ix-primary rounded-full", children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Plus", size: "sm" }) }), (0, jsx_runtime_1.jsxs)("span", { className: "block label-md text-content-primary text-center", children: ["Add ", name] })] }) }) }), !onClick && creating && rootElement &&
-                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { anchor: rootElement, itemSchema: schema, field: field, onCommit: onCreateComplete, onCancel: onCreateCancel })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Popup.AnchorElement, { tag: "div", anchorId: id, className: (0, classnames_1.default)(className, 'h-full outline outline-1 outline-transparent overflow-hidden cursor-pointer interpolate', 'bg-surface1 border border-dashed border-border-l1 rounded-md', 'hover:bg-ix-primary-hover/tint0 hover:border-ix-primary hover:border-solid', 'focus-visible:bg-ix-primary-hover/tint0 focus-visible:border-ix-primary focus-visible:border-solid focus-visible:outline-ix-primary', 'active:scale-[.97] active:interpolate-fast'), onClick: onCreateStart, onKeyDown: client_1.OnKey.enter(onCreateStart), tabIndex: 0, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full flex flex-col justify-center items-center pointer-events-none interpolate", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l5 p-l5", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-l5 text-ix-secondary bg-ix-primary rounded-full", children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Plus", size: "sm" }) }), (0, jsx_runtime_1.jsxs)("span", { className: "block label-md text-content-primary text-center", children: ["Add ", name] })] }) }) }), !onClick && creating &&
+                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { anchor: id, itemSchema: schema, field: field, onCommit: onCreateComplete, onCancel: onCreateCancel })] }));
 }

package/dist/core/components/fields/page/PagePicker.js

@@ -256,7 +256,7 @@ function renderPicker({ site, language, disabledIds, error, pageFilters, pageFil
     }
 }
 function renderPageRef({ language, template, disabledIds, ref, onPick, setTagTooltip }) {
-    var _a, _b;
+    var _a, _b, _c;
     // resolve props
     const title = (_a = ref === null || ref === void 0 ? void 0 : ref.name) !== null && _a !== void 0 ? _a : template.name;
     const path = (ref === null || ref === void 0 ? void 0 : ref.slug) ? `/${ref.slug}` : funnel_core_1.Localized.Maybe.get(template.route, language);
@@ -278,11 +278,13 @@ function renderPageRef({ language, template, disabledIds, ref, onPick, setTagToo
         }
     };
     // render
+    const id = (_b = ref === null || ref === void 0 ? void 0 : ref.id) !== null && _b !== void 0 ? _b : template.type;
+    const anchorId = `page-picker-tip-${id}`;
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex items-center px-l7 py-l4 select-none interpolate', 'even:bg-modal-background rounded-md', {
             'hover:bg-modal-surface2/tint2 cursor-pointer': !disabled,
             'cursor-default': disabled
         }), onClick: onClick, tabIndex: disabled ? undefined : 0, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full flex items-center gap-l8 select-none interpolate', {
                 'opacity-disabled': disabled
             }), onClick: onClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 shrink-0 flex flex-col", children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-sm text-content-primary ellipsis", children: title }), (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-tertiary ellipsis", children: path })] }), tags.length > 0 &&
-                    (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [visibleTags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)), tooltipTags.length > 0 && ((0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: `+${tooltipTags.length}`, onPointerEnter: e => setTagTooltip({ anchor: e.currentTarget, tags: tooltipTags }), onPointerLeave: () => setTagTooltip(undefined) }))] })] }) }, (_b = ref === null || ref === void 0 ? void 0 : ref.id) !== null && _b !== void 0 ? _b : template.type));
+                    (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [visibleTags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)), tooltipTags.length > 0 && ((0, jsx_runtime_1.jsx)(feedback_1.Badge, { anchorId: anchorId, variant: "outlinedTiny", status: "draft", label: `+${tooltipTags.length}`, onPointerEnter: e => setTagTooltip({ anchor: anchorId, tags: tooltipTags }), onPointerLeave: () => setTagTooltip(undefined) }))] })] }) }, (_c = ref === null || ref === void 0 ? void 0 : ref.id) !== null && _c !== void 0 ? _c : template.type));
 }

package/dist/core/components/fields/richtext/FloatingToolbarPlugin.js

@@ -16,6 +16,7 @@ function FloatingToolbarPlugin({ options }) {
     const [open, setOpen] = (0, react_1.useState)(false);
     const [anchorRect, setAnchorRect] = (0, react_1.useState)();
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const id = (0, react_1.useId)();
     const toolbarActiveRef = (0, react_1.useRef)(false);
     // register commands
     (0, react_1.useEffect)(() => {
@@ -56,7 +57,7 @@ function FloatingToolbarPlugin({ options }) {
             .pipe((0, rxjs_1.debounce)(({ open }) => open ? (0, rxjs_1.interval)(200) : (0, rxjs_1.interval)(0)))
             .subscribe(({ open, anchor }) => {
             // update open state
-            setAnchorRect(anchor);
+            setAnchorRect(prevAnchor => anchor !== null && anchor !== void 0 ? anchor : prevAnchor);
             setOpen(open);
             // ignore command if unchanged
             if (wasOpen !== open) {
@@ -75,7 +76,7 @@ function FloatingToolbarPlugin({ options }) {
         return () => subscription.unsubscribe();
     }, [editor, openEvent$]);
     // render nothing
-    return ((0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: "bg-surface2 p-l5 border border-solid border-border-l2 rounded-full shadow-popup", open: open, anchor: anchorRect, anchorOffset: 8, placement: "top", disableOverlay: true, onClose: () => openEvent$.next({ open: false }), children: (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { options: options, onInteractionChange: state => toolbarActiveRef.current = state !== 'none' }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Popup.AnchorElement, { tag: "div", anchorId: id, className: "fixed pointer-events-none opacity-none", style: interaction_1.Popup.getAnchorFrame(anchorRect) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: "bg-surface2 p-l5 border border-solid border-border-l2 rounded-full shadow-popup", open: open, anchor: id, anchorOffset: 8, placement: "top", disableOverlay: true, onClose: () => openEvent$.next({ open: false }), children: (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { options: options, onInteractionChange: state => toolbarActiveRef.current = state !== 'none' }) })] }));
 }
 // extension
 (function (FloatingToolbarPlugin) {

package/dist/core/components/fields/richtext/LinkEditor.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkEditor = LinkEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,6 +9,7 @@ const link_1 = require("@lexical/link");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const utils_1 = require("@lexical/utils");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
 const lexical_1 = require("lexical");
 const react_1 = require("react");
 const interaction_1 = require("../../interaction");
@@ -13,6 +17,8 @@ const interaction_1 = require("../../interaction");
 function LinkEditor() {
     // bind state + hooks
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const id = (0, react_1.useId)();
+    const anchorRef = (0, react_1.useRef)(null);
     const linkInputRef = (0, react_1.useRef)(null);
     // handle listener
     (0, react_1.useEffect)(() => {
@@ -28,17 +34,24 @@ function LinkEditor() {
             const [selectedNode] = (_a = selection === null || selection === void 0 ? void 0 : selection.getNodes()) !== null && _a !== void 0 ? _a : [];
             let anchorNode = selectedNode && funnel_core_1.LexicalUtils.findContainer(selectedNode, [link_1.LinkNode]);
             const anchorUrl = anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.getURL();
-            const anchor = funnel_core_1.LexicalUtils.getSelectionRect({ editor, selection, coerce: true, allowEmpty: true });
-            if (!anchor) {
+            const anchorRect = funnel_core_1.LexicalUtils.getSelectionRect({ editor, selection, coerce: true, allowEmpty: true });
+            const anchorFrame = interaction_1.Popup.getAnchorFrame(anchorRect);
+            const anchor = anchorRef.current;
+            if (!anchorFrame || !anchor) {
                 return true;
             }
             // raise opened
             editor.dispatchCommand(LinkEditor.OPENED_COMMAND, undefined);
+            // reposition anchor
+            anchor.style.left = anchorFrame.left;
+            anchor.style.top = anchorFrame.top;
+            anchor.style.width = anchorFrame.width;
+            anchor.style.height = anchorFrame.height;
             // open link input
             linkInput
                 .open({
                 schema: linkSchema,
-                anchor,
+                anchor: id,
                 initialValue: anchorUrl,
                 placement: 'top',
                 anchorOffset: 2
@@ -93,7 +106,7 @@ function LinkEditor() {
         }, lexical_1.COMMAND_PRIORITY_EDITOR));
     }, [editor]);
     // render
-    return ((0, jsx_runtime_1.jsx)(interaction_1.QuickInput, { ref: linkInputRef }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, classnames_1.default)(interaction_1.Popup.anchorClassName, 'fixed pointer-events-none opacity-none'), style: interaction_1.Popup.getAnchorStyle(id) }), (0, jsx_runtime_1.jsx)(interaction_1.QuickInput, { ref: linkInputRef })] }));
 }
 // extension
 (function (LinkEditor) {

package/dist/core/components/fields/richtext/LinkPopup.js

@@ -23,9 +23,11 @@ function LinkPopup() {
     var _a, _b;
     // bind state + hooks
     const [linkContext, setLinkContext] = (0, react_1.useState)();
+    const [linkAnchorRect, setLinkAnchorRect] = (0, react_1.useState)();
     const [editingLink, setEditingLink] = (0, react_1.useState)(false);
     const [toolbarVisible, setToolbarVisible] = (0, react_1.useState)(false);
     const [ready, setReady] = (0, react_1.useState)(false);
+    const id = (0, react_1.useId)();
     const { activeRef, active } = (0, useEditorActive_1.useEditorActive)();
     const linkContextRef = (0, react_1.useRef)(linkContext);
     linkContextRef.current = linkContext;
@@ -65,13 +67,15 @@ function LinkPopup() {
             const linkContext = linkContextRef.current;
             if (linkKey !== lastLinkKeyRef.current || !!linkContext) {
                 setLastLinkKey(linkKey);
+                const anchorRect = linkKey === lastLinkKeyRef.current
+                    ? (_a = linkContext === null || linkContext === void 0 ? void 0 : linkContext.anchor) !== null && _a !== void 0 ? _a : anchor
+                    : anchor;
                 setLinkContext({
-                    anchor: linkKey === lastLinkKeyRef.current
-                        ? (_a = linkContext === null || linkContext === void 0 ? void 0 : linkContext.anchor) !== null && _a !== void 0 ? _a : anchor
-                        : anchor,
+                    anchor: anchorRect,
                     url: linkNode.getURL(),
                     label: linkNode.getTextContent()
                 });
+                setLinkAnchorRect(anchorRect);
             }
         }
         // or close/clear
@@ -155,10 +159,10 @@ function LinkPopup() {
         editor.dispatchCommand(LinkPopup.CLOSED_COMMAND, undefined);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.Popup, { className: (0, classnames_1.default)('glass-overlay h-36 w-[330px] flex items-center gap-l5 px-l5 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-full', {
-            'opacity-none': !ready,
-            'opacity-full': ready
-        }), open: !!linkContext && !editingLink && !toolbarVisible, anchor: linkContext === null || linkContext === void 0 ? void 0 : linkContext.anchor, anchorOffset: 4, placement: "top", animation: "out", disableOverlay: true, onOpened: onOpened, onClosed: onClosed, children: [(0, jsx_runtime_1.jsx)(link_2.default, { className: (0, classnames_1.default)('flex-1 self-stretch flex items-center cursor-pointer', 'body-sm text-content-tertiary align-middle ellipsis'), href: (_a = linkContext === null || linkContext === void 0 ? void 0 : linkContext.url) !== null && _a !== void 0 ? _a : '#', target: "_blank", children: (_b = linkContext === null || linkContext === void 0 ? void 0 : linkContext.url) !== null && _b !== void 0 ? _b : '' }), (0, jsx_runtime_1.jsx)("div", { className: "h-20 divider-y" }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "Pencil", size: "xs", onClick: onEdit }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "Trash", size: "xs", onClick: onDelete })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Popup.AnchorElement, { tag: "div", anchorId: id, className: "fixed pointer-events-none opacity-none", style: interaction_1.Popup.getAnchorFrame(linkAnchorRect) }), (0, jsx_runtime_1.jsxs)(interaction_1.Popup, { className: (0, classnames_1.default)('glass-overlay h-36 w-[330px] flex items-center gap-l5 px-l5 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-full', {
+                    'opacity-none': !ready,
+                    'opacity-full': ready
+                }), open: !!linkContext && !editingLink && !toolbarVisible, anchor: id, anchorOffset: 4, placement: "top", animation: "out", disableOverlay: true, onOpened: onOpened, onClosed: onClosed, children: [(0, jsx_runtime_1.jsx)(link_2.default, { className: (0, classnames_1.default)('flex-1 self-stretch flex items-center cursor-pointer', 'body-sm text-content-tertiary align-middle ellipsis'), href: (_a = linkContext === null || linkContext === void 0 ? void 0 : linkContext.url) !== null && _a !== void 0 ? _a : '#', target: "_blank", children: (_b = linkContext === null || linkContext === void 0 ? void 0 : linkContext.url) !== null && _b !== void 0 ? _b : '' }), (0, jsx_runtime_1.jsx)("div", { className: "h-20 divider-y" }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "Pencil", size: "xs", onClick: onEdit }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "Trash", size: "xs", onClick: onDelete })] })] }));
 }
 // extension
 (function (LinkPopup) {

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

@@ -1,9 +1,10 @@
 import { User } from '@nascentdigital/funnel-cms';
 import { HTMLAttributes } from 'react';
-export declare function AvatarButton({ className, user, disabled, ...props }: AvatarButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarButton({ anchorId, className, style, user, disabled, ...props }: AvatarButton.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace AvatarButton {
     type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
         user: User;
+        anchorId?: string;
         disabled?: boolean;
     };
 }

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

@@ -18,11 +18,12 @@ exports.AvatarButton = AvatarButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
+const Popup_1 = require("./Popup");
 // component
 function AvatarButton(_a) {
-    var { className, user, disabled = false } = _a, props = __rest(_a, ["className", "user", "disabled"]);
+    var { anchorId, className, style, user, disabled = false } = _a, props = __rest(_a, ["anchorId", "className", "style", "user", "disabled"]);
     // bind memos
     const initials = (0, react_1.useMemo)(() => user.username.substring(0, 1).toUpperCase() || '?', [user]);
     // render
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: (0, classnames_1.default)(className, 'iconbutton iconbutton-avatar iconbutton-sm'), disabled: disabled }, props, { children: (0, jsx_runtime_1.jsx)("span", { className: "heading-xs", children: initials }) })));
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: (0, classnames_1.default)(className, anchorId ? Popup_1.Popup.anchorClassName : undefined, 'iconbutton iconbutton-avatar iconbutton-sm'), style: anchorId ? Popup_1.Popup.getAnchorStyle(anchorId, style) : style, disabled: disabled }, props, { children: (0, jsx_runtime_1.jsx)("span", { className: "heading-xs", children: initials }) })));
 }

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { Icon } from '../visuals';
 export declare const Button: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+    anchorId?: string;
     variant?: Button.Variant;
     size?: Button.Size;
     iconLeft?: Icon.Variant;
@@ -10,6 +11,7 @@ export declare const Button: import("react").ForwardRefExoticComponent<HTMLAttri
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export declare namespace Button {
     type Props = HTMLAttributes<HTMLButtonElement> & {
+        anchorId?: string;
         variant?: Variant;
         size?: Size;
         iconLeft?: Icon.Variant;

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

@@ -21,11 +21,12 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const visuals_1 = require("../visuals");
 const Loader_1 = require("./Loader");
+const Popup_1 = require("./Popup");
 // component
 exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
-    var { className, variant = 'primary', size = 'md', iconLeft, iconRight, loading = false, disabled = false, children } = _a, props = __rest(_a, ["className", "variant", "size", "iconLeft", "iconRight", "loading", "disabled", "children"]);
+    var { anchorId, className, style, variant = 'primary', size = 'md', iconLeft, iconRight, loading = false, disabled = false, children } = _a, props = __rest(_a, ["anchorId", "className", "style", "variant", "size", "iconLeft", "iconRight", "loading", "disabled", "children"]);
     // render
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, getButtonClassnames({ variant, size, loading, disabled })), type: "button", disabled: disabled || loading }, props, { children: [loading &&
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, anchorId ? Popup_1.Popup.anchorClassName : undefined, getButtonClassnames({ variant, size, loading, disabled })), style: anchorId ? Popup_1.Popup.getAnchorStyle(anchorId, style) : style, type: "button", disabled: disabled || loading }, props, { children: [loading &&
                 (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "sm" }), iconLeft && !loading &&
                 (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconLeft, size: size }), children, iconRight &&
                 (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconRight, size: size })] })));

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

@@ -59,12 +59,12 @@ function Combobox({ id: externalId, className, size = 'md', maxRows = 6, rowHeig
         setOpen(false);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, id: id, className: (0, classnames_1.default)(className, 'flex items-center justify-between gap-l5 px-l5', 'bg-surface1 border border-solid border-border-l1 rounded-full select-none appearance-none', 'disabled:opacity-disabled', {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, id: id, className: (0, classnames_1.default)(className, Popup_1.Popup.anchorClassName, 'flex items-center justify-between gap-l5 px-l5', 'bg-surface1 border border-solid border-border-l1 rounded-full select-none appearance-none', 'disabled:opacity-disabled', {
                     'min-w-[200px] h-40': size === 'md',
                     'min-w-[180px] h-32': size === 'sm',
                     'min-w-[120px] h-24': size === 'xs',
                     'pointer-events-none': open
-                }), type: "button", disabled: disabled, role: "combobox", "aria-expanded": open, "aria-controls": popupId, "aria-owns": popupId, onClick: onOpen, onKeyDown: client_1.OnKey.enter(onOpen), children: [renderSelection(selectedOption), (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-primary", variant: "ChevronDown" })] }), (0, jsx_runtime_1.jsx)(Popup_1.Popup, { open: open, anchor: button, anchorOffset: 2, placement: "bottom", onClose: onOptionsClose, children: (0, jsx_runtime_1.jsx)("div", { id: popupId, className: (0, classnames_1.default)('flex flex-col bg-surface2 shadow-popup overflow-y-scroll', {
+                }), style: Popup_1.Popup.getAnchorStyle(id), type: "button", disabled: disabled, role: "combobox", "aria-expanded": open, "aria-controls": popupId, "aria-owns": popupId, onClick: onOpen, onKeyDown: client_1.OnKey.enter(onOpen), children: [renderSelection(selectedOption), (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-primary", variant: "ChevronDown" })] }), (0, jsx_runtime_1.jsx)(Popup_1.Popup, { open: open, anchor: id, anchorOffset: 2, placement: "bottom", onClose: onOptionsClose, children: (0, jsx_runtime_1.jsx)("div", { id: popupId, className: (0, classnames_1.default)('flex flex-col bg-surface2 shadow-popup overflow-y-scroll', {
                         'py-l4 rounded-lg': size === 'md',
                         'py-l3 rounded-md': size !== 'md'
                     }), style: {

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { Icon } from '../visuals';
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLButtonElement>, "children"> & {
+    anchorId?: string;
     variant?: IconButton.Variant;
     icon: Icon.Variant;
     size?: Extract<Icon.Size, "md" | "sm" | "xs" | "xxs">;
@@ -9,6 +10,7 @@ export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export declare namespace IconButton {
     type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
+        anchorId?: string;
         variant?: Variant;
         icon: Icon.Variant;
         size?: Extract<Icon.Size, 'md' | 'sm' | 'xs' | 'xxs'>;

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

@@ -20,11 +20,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const visuals_1 = require("../visuals");
+const Popup_1 = require("./Popup");
 // component
 exports.IconButton = (0, react_1.forwardRef)(function IconButton(_a, ref) {
-    var { className, variant = 'util', icon, size = 'md', active = false, disabled = false } = _a, props = __rest(_a, ["className", "variant", "icon", "size", "active", "disabled"]);
+    var { anchorId, className, style, variant = 'util', icon, size = 'md', active = false, disabled = false } = _a, props = __rest(_a, ["anchorId", "className", "style", "variant", "icon", "size", "active", "disabled"]);
     // render
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, getIconButtonClassnames({ variant, size, active, disabled })), disabled: disabled }, props, { children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: icon, size: size }) })));
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, anchorId ? Popup_1.Popup.anchorClassName : undefined, getIconButtonClassnames({ variant, size, active, disabled })), style: anchorId ? Popup_1.Popup.getAnchorStyle(anchorId, style) : style, disabled: disabled }, props, { children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: icon, size: size }) })));
 });
 function getIconButtonClassnames({ variant, size, active, disabled }) {
     return (0, classnames_1.default)('iconbutton', {

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

@@ -1,6 +1,6 @@
 import { AnchorHTMLAttributes } from 'react';
 import { IconButton } from './IconButton';
-export declare const IconLink: import("react").ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & Pick<IconButton.Props, "disabled" | "size" | "icon" | "variant"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const IconLink: import("react").ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & Pick<IconButton.Props, "size" | "disabled" | "icon" | "variant"> & import("react").RefAttributes<HTMLAnchorElement>>;
 export declare namespace IconLink {
     type Props = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & Pick<IconButton.Props, 'variant' | 'icon' | 'size' | 'disabled'>;
 }

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

@@ -1,11 +1,11 @@
 import { Callback, Provider, Transform } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
 import { Popup } from './Popup';
-export declare function MiniEditor({ className, title, open, wide, disabled, renderSaveLabel, canSave, disableSave, onSave: onSaveRaw, onClose: onCloseRaw, customActions, children, ...popupProps }: MiniEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare function MiniEditor({ className, title, open, size, disabled, renderSaveLabel, canSave, disableSave, onSave: onSaveRaw, onClose: onCloseRaw, customActions, children, ...popupProps }: MiniEditor.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace MiniEditor {
     type Props = PopupProps & {
         title: string;
-        wide?: boolean;
+        size?: Size;
         disabled?: boolean;
         renderSaveLabel?: Transform<State, string>;
         canSave?: Provider<boolean> | Provider.Async<boolean>;
@@ -13,6 +13,7 @@ export declare namespace MiniEditor {
         onSave?: Callback.Void | Callback.AsyncVoid;
         customActions?: ReactNode;
     };
+    type Size = 'md' | 'sm' | 'xs';
     type State = 'editing' | 'validating' | 'saving' | 'error' | 'saved';
 }
 type PopupProps = Pick<Popup.Props, 'className' | 'open' | 'anchor' | 'anchorOffset' | 'placement' | 'onOpened' | 'onClose' | 'onClosed' | 'children'>;

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

@@ -23,7 +23,7 @@ const Button_1 = require("./Button");
 const Popup_1 = require("./Popup");
 // component
 function MiniEditor(_a) {
-    var { className, title, open, wide, disabled = false, renderSaveLabel = onRenderSaveLabel, canSave = funnel_core_1.Fn.True, disableSave = false, onSave: onSaveRaw = funnel_core_1.Fn.NoOp, onClose: onCloseRaw = funnel_core_1.Fn.NoOp, customActions, children } = _a, popupProps = __rest(_a, ["className", "title", "open", "wide", "disabled", "renderSaveLabel", "canSave", "disableSave", "onSave", "onClose", "customActions", "children"]);
+    var { className, title, open, size = 'md', disabled = false, renderSaveLabel = onRenderSaveLabel, canSave = funnel_core_1.Fn.True, disableSave = false, onSave: onSaveRaw = funnel_core_1.Fn.NoOp, onClose: onCloseRaw = funnel_core_1.Fn.NoOp, customActions, children } = _a, popupProps = __rest(_a, ["className", "title", "open", "size", "disabled", "renderSaveLabel", "canSave", "disableSave", "onSave", "onClose", "customActions", "children"]);
     // bind state + refs
     const [state, setState] = (0, react_1.useState)('editing');
     // reset state on open
@@ -94,10 +94,12 @@ function MiniEditor(_a) {
     };
     // render
     const locked = disabled || state === 'validating' || state === 'saving' || state === 'saved';
-    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, popupProps, { className: (0, classnames_1.default)(className, 'max-h-[90dvh]', 'flex flex-col gap-l8 p-l8 shadow-miniEditor interpolate', 'bg-background border border-solid border-border-l1 rounded-md', {
-            'w-[420px] max-w-[420px]': !wide
-        }), open: open, disabled: disabled, disableDismiss: locked, onKeyDown: onKeyDown, onClose: onClose, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-md text-content-primary", children: title }), children, (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end items-center gap-l4 pt-l6", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
-                        (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex justify-end items-center gap-l4", children: customActions }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "sm", loading: state === 'saving', disabled: disableSave || locked, onClick: onSave, children: renderSaveLabel(state) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, popupProps, { className: (0, classnames_1.default)(className, 'max-h-[90dvh]', 'flex flex-col p-l8 shadow-miniEditor interpolate', 'bg-background border border-solid border-border-l1 rounded-md', {
+            'w-[420px] max-w-[420px] gap-l8': size === 'md',
+            'w-[320px] gap-l6': size === 'sm',
+            'w-[288px] gap-l6': size === 'xs'
+        }), open: open, disabled: disabled, disableDismiss: locked, onKeyDown: onKeyDown, onClose: onClose, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-md text-content-primary", children: title }), children, (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end items-center gap-l4 pt-l6", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: size === 'md' ? 'sm' : 'xs', disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
+                        (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex justify-end items-center gap-l4", children: customActions }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: size === 'md' ? 'sm' : 'xs', loading: state === 'saving', disabled: disableSave || locked, onClick: onSave, children: renderSaveLabel(state) })] })] })));
 }
 function onRenderSaveLabel(state) {
     switch (state) {

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

@@ -1,10 +1,10 @@
 import { Callback, Placement, Rect } from '@nascentdigital/funnel-core';
-import { Variants } from 'framer-motion';
-import { CSSProperties, HTMLAttributes } from 'react';
-export declare function Popup({ className, style, anchor, placement, anchorOffset, viewportPadding, animation, backdrop, disabled, disableDismiss, disableOverlay, open, onOpened: onOpenedRaw, onClose, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, children, ...props }: Popup.Props): import("react/jsx-runtime").JSX.Element | null;
+import { HTMLContainer } from '@nascentdigital/funnel-ui';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+export declare function Popup({ className, style, anchor, anchorOffset, placement, viewportPadding, animation, backdrop, disabled, disableDismiss, disableOverlay, open, onOpened: onOpenedRaw, onClose, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, children, ...props }: Popup.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Popup {
     type Props = HTMLAttributes<HTMLDivElement> & {
-        anchor?: Rect | Element | string | null | undefined;
+        anchor?: Anchor;
         anchorOffset?: number;
         placement?: Placement;
         viewportPadding?: number;
@@ -18,17 +18,22 @@ export declare namespace Popup {
         onClose?: Callback.Void;
         onClosed?: Callback.Void;
     };
+    type Anchor = string | ReactNode;
     type Animation = 'in' | 'out' | 'in-out';
     type Backdrop = 'none' | 'glass';
+    const anchorClassName: "anchor/[--nd-popup-anchor]";
+    function getAnchorStyle(anchorId: string, styles?: CSSProperties): CSSProperties;
+    type Frame = {
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+    };
+    function getAnchorFrame(frame?: Rect): Frame | undefined;
+    function AnchorElement<TTag extends HTMLContainer.Tag>({ anchorId, tag, className, style, ...props }: AnchorElement.Props<TTag>): import("react/jsx-runtime").JSX.Element;
+    namespace AnchorElement {
+        type Props<TTag extends HTMLContainer.Tag = 'div'> = HTMLContainer.Props<TTag> & {
+            anchorId: string;
+        };
+    }
 }
-export declare const animations: Variants;
-type GetPopupPlacementStyleArgs = Pick<Popup.Props, 'anchor' | 'anchorOffset' | 'placement' | 'viewportPadding'> & {
-    contentElement: HTMLDivElement | null;
-};
-type PopupPlacement = {
-    containerClassName?: string;
-    className?: string;
-    style?: CSSProperties;
-};
-export declare function getPopupPlacement({ anchor, anchorOffset, placement, viewportPadding, contentElement }: GetPopupPlacementStyleArgs): PopupPlacement;
-export {};