@alpaca-headless/alpaca-headless-nextjs 1.0.246 → 1.0.281

package/dist/esm/components/RichTextEditor.js

@@ -1,92 +0,0 @@
-"use client";
-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;
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState, useMemo, useCallback, useRef, } from "react";
-import { useEditContext } from "../editor/editContext";
-import { isFieldActionExecuting } from "../editor/utils";
-import { getFieldContextMenu } from "../editor/ContextMenu";
-import { LockedFieldIndicator } from "./LockedFieldIndicator";
-export function RichTextEditor(_a) {
-    var _b, _c, _d, _e;
-    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
-    const editContext = useEditContext();
-    const [value, setValue] = useState("");
-    const [editedValue, setEditedValue] = useState();
-    const ref = useRef(null);
-    if (!editContext)
-        return;
-    const { updateContentEditingFields } = editContext;
-    const liveField = editContext.getLiveField(field);
-    useEffect(() => {
-        if (!liveField)
-            return;
-        if (editedValue != liveField.value &&
-            "<p>" + editedValue + "</p>" != liveField.value) {
-            // console.log(
-            //   "editedValue:" + editedValue + " liveField.value " + liveField.value
-            // );
-            setValue(liveField.value);
-        }
-    }, [liveField === null || liveField === void 0 ? void 0 : liveField.value]);
-    useEffect(() => {
-        if (!liveField)
-            return;
-        setValue(liveField.value); // Otherwise react would not update the field after the refresh
-    }, [updateContentEditingFields]);
-    useEffect(() => {
-        if (liveField) {
-            setValue(field.value);
-            liveField.value = field.value;
-        }
-        editContext.registerAsRenderedField(field);
-    }, [field]);
-    const setFieldValue = (val) => {
-        if (val != editedValue) {
-            setEditedValue(val);
-            if (editContext)
-                editContext.editField({ field, value: val, refresh: "none" });
-        }
-    };
-    const eventHandler = useCallback((e) => {
-        setFieldValue(e.currentTarget.innerHTML);
-    }, [editContext.editField]);
-    let className = (_b = props.className) !== null && _b !== void 0 ? _b : "";
-    className += " a-cursor-text";
-    if (isFieldActionExecuting(field, editContext))
-        className += " a-executing-action a-focus-shadow ";
-    const isLocked = (((_c = liveField._editor) === null || _c === void 0 ? void 0 : _c.lockedBy) &&
-        ((_e = (_d = liveField._editor) === null || _d === void 0 ? void 0 : _d.lockedBy) === null || _e === void 0 ? void 0 : _e.sessionId) != editContext.sessionId) ||
-        false;
-    const onContextMenu = getFieldContextMenu(field, editContext, []);
-    return useMemo(() => {
-        var _a, _b;
-        const properies = Object.assign(Object.assign({}, props), { className, contentEditable: ((_a = field._editor) === null || _a === void 0 ? void 0 : _a.canWrite) && !isLocked, suppressContentEditableWarning: true, onInput: eventHandler, placeholder: "[" + ((_b = field._editor) === null || _b === void 0 ? void 0 : _b.name) + "]", dangerouslySetInnerHTML: {
-                __html: value,
-            }, onFocus: () => {
-                var _a;
-                editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, true);
-            }, onBlur: () => {
-                editContext.setFocusedField(undefined, false);
-            }, onClick: () => {
-                var _a, _b, _c;
-                if (!((_a = field._editor) === null || _a === void 0 ? void 0 : _a.canWrite) || !((_b = field._editor) === null || _b === void 0 ? void 0 : _b.hasLock))
-                    editContext.setFocusedField((_c = field._editor) === null || _c === void 0 ? void 0 : _c.descriptor, true);
-            }, onContextMenu,
-            ref });
-        const element = React.createElement(tag || "div", properies);
-        if (isLocked) {
-            return (_jsxs(_Fragment, { children: [_jsx(LockedFieldIndicator, { field: liveField, elementRef: ref }), " ", element] }));
-        }
-        return element;
-    }, [value, className, isLocked, ref]);
-}

package/dist/esm/components/RichTextEditorWrapper.js

@@ -1,7 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import dynamic from "next/dynamic";
-const RichTextEditor = dynamic(() => import("./RichTextEditor").then((dnd) => dnd.RichTextEditor), { ssr: false });
-export function RichTextEditorWrapper(props) {
-    return _jsx(RichTextEditor, Object.assign({}, props));
-}

package/dist/esm/components/Slot.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import "server-only";
-import { Placeholder } from "./Placeholder";
-export default function Section({ component }) {
-    return (_jsx(_Fragment, { children: _jsx(Placeholder, { name: "ph-slot-content", content: component }) }));
-}

package/dist/esm/components/Text.js

@@ -1,29 +0,0 @@
-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;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import "server-only";
-import React from "react";
-import { useAlpacaContext } from "../alpacaContext";
-import { TextEditorWrapper } from "./TextEditorWrapper";
-export function Text(_a) {
-    var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
-    if (!field)
-        return;
-    if (field.jsonValue) {
-        field = field.jsonValue;
-    }
-    if (useAlpacaContext().pageContext.pageEditing) {
-        return (_jsx("div", { children: _jsx(TextEditorWrapper, Object.assign({ field: field, tag: tag }, props)) }));
-    }
-    else
-        return React.createElement(tag || "div", props, field.value);
-}

package/dist/esm/components/TextEditor.js

@@ -1,78 +0,0 @@
-"use client";
-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;
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from "react";
-import { useEditContext } from "../editor/editContext";
-import { isFieldActionExecuting } from "../editor/utils";
-import { getFieldContextMenu } from "../editor/ContextMenu";
-import { LockedFieldIndicator } from "./LockedFieldIndicator";
-export function TextEditor(_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
-    const editContext = useEditContext();
-    const [value, setValue] = useState("");
-    const [editedValue, setEditedValue] = useState();
-    const ref = useRef(null);
-    if (!editContext)
-        return;
-    const { updateContentEditingFields } = editContext;
-    const liveField = editContext.getLiveField(field);
-    useEffect(() => {
-        if (!liveField)
-            return;
-        if (editedValue != liveField.value)
-            setValue(liveField.value);
-    }, [liveField === null || liveField === void 0 ? void 0 : liveField.value]);
-    useEffect(() => {
-        if (liveField) {
-            setValue(field.value);
-            liveField.value = field.value;
-        }
-        editContext.registerAsRenderedField(field);
-    }, [field]);
-    useEffect(() => {
-        if (!liveField)
-            return;
-        setValue(liveField.value); // Otherwise react would not update the field after the refresh
-    }, [updateContentEditingFields]);
-    let className = (_b = props.className) !== null && _b !== void 0 ? _b : "";
-    className += " a-cursor-text";
-    if (isFieldActionExecuting(field, editContext)) {
-        className += " a-executing-action a-focus-shadow ";
-    }
-    const onContextMenu = getFieldContextMenu(field, editContext, []);
-    const isLocked = (((_c = liveField._editor) === null || _c === void 0 ? void 0 : _c.lockedBy) &&
-        ((_e = (_d = liveField._editor) === null || _d === void 0 ? void 0 : _d.lockedBy) === null || _e === void 0 ? void 0 : _e.sessionId) != editContext.sessionId) ||
-        false;
-    const properies = Object.assign(Object.assign({}, props), { className, contentEditable: ((_f = field._editor) === null || _f === void 0 ? void 0 : _f.canWrite) && !isLocked, suppressContentEditableWarning: true, onInput: (e) => setFieldValue(e.currentTarget.textContent), placeholder: "[" + ((_g = field._editor) === null || _g === void 0 ? void 0 : _g.name) + "]", onFocus: () => {
-            var _a;
-            editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, true);
-        }, onBlur: () => {
-            editContext.setFocusedField(undefined, false);
-        }, onClick: () => {
-            var _a, _b, _c;
-            if (!((_a = field._editor) === null || _a === void 0 ? void 0 : _a.canWrite) || !((_b = field._editor) === null || _b === void 0 ? void 0 : _b.hasLock))
-                editContext.setFocusedField((_c = field._editor) === null || _c === void 0 ? void 0 : _c.descriptor, true);
-        }, ref,
-        onContextMenu });
-    const setFieldValue = (val) => {
-        setEditedValue(val);
-        if (editContext)
-            editContext.editField({ field, value: val, refresh: "none" });
-    };
-    const element = React.createElement(tag || "div", properies, value);
-    if (isLocked) {
-        return (_jsxs(_Fragment, { children: [_jsx(LockedFieldIndicator, { elementRef: ref, field: liveField }), " ", element] }));
-    }
-    return element;
-}

package/dist/esm/components/TextEditorWrapper.js

@@ -1,19 +0,0 @@
-"use client";
-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;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import dynamic from "next/dynamic";
-const TextEditor = dynamic(() => import("./TextEditor").then((dnd) => dnd.TextEditor), { ssr: false });
-export function TextEditorWrapper(_a) {
-    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
-    return _jsx(TextEditor, Object.assign({ field: field, tag: tag }, props));
-}

package/dist/esm/components/Translate.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "server-only";
-import { useAlpacaContext } from "../alpacaContext";
-import dynamic from "next/dynamic";
-const TranslateEditor = dynamic(() => import("./TranslateEditor").then((dnd) => dnd.TranslateEditor), { ssr: false });
-export function Translate({ text }) {
-    const context = useAlpacaContext();
-    const dictionary = context.dictionary;
-    if (context.pageContext.pageEditing)
-        return _jsx(TranslateEditor, { text: text });
-    return dictionary[text] || text;
-}

package/dist/esm/components/TranslateEditor.js

@@ -1,24 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { useEditContext } from "../editor/editContext";
-import { TextEditor } from "./TextEditor";
-export function TranslateEditor({ text }) {
-    const context = useEditContext();
-    if (!context || !context.dictionary)
-        return text;
-    const dictionary = context.dictionary;
-    useEffect(() => {
-        if (Object.keys(dictionary).indexOf(text) < 0 &&
-            context.unresolvedDictionaryKeys.indexOf(text) < 0) {
-            context.setUnresolvedDictionaryKeys([
-                ...context.unresolvedDictionaryKeys,
-                text,
-            ]);
-        }
-    }, []);
-    if (dictionary[text]) {
-        return _jsx(TextEditor, { field: dictionary[text] });
-    }
-    return (_jsx("span", { className: "a-p-1 a-ring-2 a-ring-red-500", onClick: () => console.log("create dictionary entry"), children: text }));
-}

package/dist/esm/components/index.js

@@ -1,7 +0,0 @@
-export * from "./Placeholder";
-export * from "./Text";
-export * from "./Picture";
-export * from "./RichText";
-export * from "./Image";
-export * from "./Link";
-export * from "./Translate";

package/dist/esm/components/picture-shared.js

@@ -1,26 +0,0 @@
-export function getRenderedPictureVariant(params, variants) {
-    var _a, _b;
-    const variantName = (_a = params.variant) !== null && _a !== void 0 ? _a : "auto";
-    const variant = variantName.toLocaleLowerCase() === "auto" && params.aspectRatio
-        ? getBestMatchingVariant(variants, params.aspectRatio)
-        : (_b = variants.find((v) => v.name.toLowerCase() == variantName.toLowerCase())) !== null && _b !== void 0 ? _b : variants[0];
-    return variant;
-}
-export function getBestMatchingVariant(variants, aspectRatio) {
-    var _a;
-    if (!aspectRatio)
-        return ((_a = variants.find((v) => v.name.toLowerCase() == "default")) !== null && _a !== void 0 ? _a : variants[0]);
-    let minDistance = 1000000;
-    let bestMatch = undefined;
-    for (let i = 0; i < variants.length; i++) {
-        const variant = variants[i];
-        if (!variant.src)
-            continue;
-        const distance = Math.abs(aspectRatio - variant.aspectRatio);
-        if (distance < minDistance) {
-            minDistance = distance;
-            bestMatch = variant;
-        }
-    }
-    return bestMatch !== null && bestMatch !== void 0 ? bestMatch : variants[0];
-}

package/dist/esm/editor/ComponentInfo.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CopyToClipboardButton } from "./ui/CopyToClipboardButton";
-import { Section } from "./ui/Section";
-export function ComponentInfo({ component, }) {
-    var _a;
-    if (!(component === null || component === void 0 ? void 0 : component.fields))
-        return;
-    const hostingPageItem = component._editor.hostingPageItem ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "a-font-bold", children: "Source:" }), _jsxs("div", { children: [component._editor.hostingPageItem.path, " (ID:", " ", component._editor.hostingPageItem.id, ")"] })] })) : null;
-    const linkedComponent = component._editor.linkedComponentItem ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "a-font-bold", children: "Source:" }), _jsxs("div", { children: [component._editor.linkedComponentItem.path, " (", component._editor.linkedComponentItem.id, ")"] })] })) : null;
-    return (_jsxs("div", { children: [_jsx("h2", { className: "a-py-3 a-px-3 a-text-l a-font-bold a-my-2", children: component.name }), _jsx(Section, { title: "Info", children: _jsxs("div", { className: "a-grid a-grid-cols-[min-content_1fr] a-gap-3 a-text-xs a-bg-gray-100", children: [_jsx("div", { className: "a-font-bold", children: "ID:" }), _jsxs("div", { children: [component.id, " ", _jsx(CopyToClipboardButton, { text: component.id })] }), _jsx("div", { className: "a-font-bold", children: "Template" }), _jsxs("div", { children: [component.componentType, " (", component.templateId, _jsx(CopyToClipboardButton, { text: component.templateId }), ")"] }), _jsx("div", { className: "a-font-bold", children: "Languages" }), _jsx("div", { children: (_a = component._editor.translations) === null || _a === void 0 ? void 0 : _a.join(", ") }), hostingPageItem, linkedComponent] }) })] }));
-}

package/dist/esm/editor/ConfirmationDialog.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, forwardRef, useImperativeHandle } from "react";
-import { Dialog } from "primereact/dialog";
-import { Button } from "primereact/button";
-const ConfirmationDialog = forwardRef((_props, ref) => {
-    const [visible, setVisible] = useState(false);
-    const [props, setProps] = useState();
-    useImperativeHandle(ref, () => ({
-        confirm: (props) => {
-            setVisible(true);
-            setProps(props);
-        },
-    }));
-    const handleAccept = () => {
-        props === null || props === void 0 ? void 0 : props.accept();
-        setVisible(false);
-    };
-    const handleReject = () => {
-        if (props === null || props === void 0 ? void 0 : props.reject)
-            props.reject();
-        setVisible(false);
-    };
-    const handleCancel = () => {
-        setVisible(false);
-    };
-    const dialogFooter = (_jsxs("div", { children: [_jsx(Button, { label: (props === null || props === void 0 ? void 0 : props.acceptLabel) || "Yes", icon: (props === null || props === void 0 ? void 0 : props.acceptIcon) || "pi pi-check", onClick: handleAccept, className: "p-button-text" }), (props === null || props === void 0 ? void 0 : props.rejectLabel) && (_jsx(Button, { label: props === null || props === void 0 ? void 0 : props.rejectLabel, icon: (props === null || props === void 0 ? void 0 : props.rejectIcon) || "pi pi-times", onClick: handleReject, className: "p-button-text" })), (props === null || props === void 0 ? void 0 : props.showCancel) && (_jsx(Button, { label: "Cancel", icon: "pi pi-ban", onClick: handleCancel, className: "p-button-text" }))] }));
-    return (_jsx(Dialog, { header: (props === null || props === void 0 ? void 0 : props.header) || "Confirm", visible: visible, style: { width: "50vw" }, footer: dialogFooter, onHide: handleCancel, children: _jsxs("div", { className: "a-pt-3 a-flex a-items-center a-gap-2", children: [(props === null || props === void 0 ? void 0 : props.icon) && _jsx("i", { className: props.icon + " a-text-3xl" }), props === null || props === void 0 ? void 0 : props.message] }) }));
-});
-export default ConfirmationDialog;

package/dist/esm/editor/ContentTree.js

@@ -1,224 +0,0 @@
-"use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ProgressSpinner } from "primereact/progressspinner";
-import { useEditContext } from ".";
-import { Tree, } from "primereact/tree";
-import { useEffect, useRef, useState } from "react";
-import { getChildren } from "./services/contentService";
-import { ContextMenu } from "primereact/contextmenu";
-import { createItem, loadInsertOptions } from "./services/editService";
-import ItemNameDialog from "./ItemNameDialog";
-import { getDeleteItemCommand } from "./itemCommands";
-export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, secondarySelectedItemId, }) {
-    const [treeNodes, setTreeNodes] = useState([]);
-    const [selectedKeys, setSelectedKeys] = useState();
-    const [expandedKeys, setExpandedKeys] = useState();
-    const treeContainerRef = useRef(null);
-    const editContext = useEditContext();
-    const [selectedNodeScrolledIntoView, setSelectedNodeScrolledIntoView] = useState(false);
-    const cm = useRef(null);
-    const [menu, setMenu] = useState([]);
-    const itemNameDialogRef = useRef(null);
-    const loadOnExpand = (event) => __awaiter(this, void 0, void 0, function* () {
-        const node = event.node;
-        yield loadChildren(node);
-    });
-    function loadChildren(node) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!node.children) {
-                node.loading = true;
-                const nodes = yield loadNodeChildren(node);
-                node.children = nodes;
-                let value = [...treeNodes];
-                setTreeNodes(value);
-                node.loading = false;
-            }
-        });
-    }
-    function refreshNode(node) {
-        node.children = undefined;
-        loadChildren(node);
-    }
-    const loadNodeChildren = (node) => __awaiter(this, void 0, void 0, function* () {
-        if (!editContext)
-            return [];
-        let children = yield getChildren(node.key, editContext.sessionId, templateIds, includeEmbeddedItems !== null && includeEmbeddedItems !== void 0 ? includeEmbeddedItems : false);
-        if (filter)
-            children = filter(children);
-        return children.map((x) => ({
-            key: x.id,
-            label: x.name,
-            iconUrl: x.icon,
-            isDraggable: isDraggable && isDraggable(x),
-            data: x,
-            leaf: !x.hasChildren,
-            parent: node,
-        }));
-    });
-    useEffect(() => {
-        const newExpandedKeys = getExpandedKeys();
-        setExpandedKeys(newExpandedKeys);
-        preLoadNodes(newExpandedKeys);
-        setTreeNodes(treeNodes);
-    }, []);
-    function getExpandedKeys() {
-        const newExpandedKeys = {};
-        newExpandedKeys[rootItemId.toLocaleLowerCase()] = true;
-        if (!expandIdPath)
-            return newExpandedKeys;
-        const idPathArray = expandIdPath.split("/");
-        idPathArray.forEach((x) => {
-            if (x !== "")
-                newExpandedKeys[x.substring(1, x.length - 1).toLowerCase()] = true;
-        });
-        return newExpandedKeys;
-    }
-    function preLoadNodes(expandedKeys) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rootNodes = yield loadNodeChildren({ key: rootItemId });
-            yield doPreloadNodes(expandedKeys, rootNodes);
-            setExpandedKeys(Object.assign({}, expandedKeys));
-            setTreeNodes([...rootNodes]);
-        });
-    }
-    function doPreloadNodes(expandedKeys, treeNodes) {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (let i = 0; i < treeNodes.length; i++) {
-                if (expandedKeys[treeNodes[i].key]) {
-                    const children = yield loadNodeChildren(treeNodes[i]);
-                    treeNodes[i].children = children;
-                    yield doPreloadNodes(expandedKeys, children);
-                }
-            }
-        });
-    }
-    const nodeDictionary = {};
-    createMap(treeNodes, nodeDictionary);
-    function createMap(treeNodes, nodeDictionary) {
-        treeNodes.forEach((n) => {
-            if (n.key)
-                nodeDictionary[n.key] = n;
-            if (n.children)
-                createMap(n.children, nodeDictionary);
-        });
-    }
-    const nodeTemplate = (node, options) => {
-        let label = _jsx("span", { children: node.label });
-        if (node.url) {
-            label = (_jsx("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "a-text-primary hover:a-underline a-font-semibold", children: node.label }));
-        }
-        return (_jsxs("span", { onDragStart: (event) => {
-                handleDragStart(event, node.data);
-            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `a-flex a-items-center a-gap-2 ${node.isDraggable ? "a-cursor-grab" : ""} ${options.className}   ${node.data.id == secondarySelectedItemId ? "a-selected-secondary" : ""}`, children: [_jsx("img", { src: node.iconUrl, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), label, node.loading && (_jsx(ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
-    };
-    function handleDragStart(event, item) {
-        if (dragStart)
-            dragStart(item);
-        event.stopPropagation();
-    }
-    function handleDragEnd() {
-        if (dragEnd)
-            dragEnd();
-    }
-    useEffect(() => {
-        const newSelectedKeys = {};
-        selectedItemIds === null || selectedItemIds === void 0 ? void 0 : selectedItemIds.forEach((x) => {
-            if (x.startsWith("{") && x.endsWith("}") && x.length > 2)
-                x = x.substring(1, x.length - 1);
-            newSelectedKeys[x.toLowerCase()] = true;
-        });
-        if (selectionMode == "single" &&
-            selectedItemIds &&
-            selectedItemIds.length > 0)
-            setSelectedKeys(Object.keys(newSelectedKeys)[0]);
-        else
-            setSelectedKeys(newSelectedKeys);
-    }, [selectedItemIds]);
-    useEffect(() => {
-        const scrollNodeIntoView = () => {
-            if (!treeContainerRef.current)
-                return;
-            const selectedNodeElement = treeContainerRef.current.querySelector(`li[aria-selected="true"]`);
-            if (selectedNodeElement) {
-                setSelectedNodeScrolledIntoView(true);
-                selectedNodeElement.scrollIntoView({
-                    behavior: "smooth",
-                    block: "center",
-                    inline: "center",
-                });
-            }
-        };
-        if (!selectedNodeScrolledIntoView)
-            scrollNodeIntoView();
-    }, [treeNodes]);
-    function insertItem(node, parent, templateId) {
-        var _a;
-        (_a = itemNameDialogRef.current) === null || _a === void 0 ? void 0 : _a.show({
-            accept: (name) => __awaiter(this, void 0, void 0, function* () {
-                yield createItem(parent, templateId, name);
-                editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
-                node.expanded = true;
-                refreshNode(node);
-            }),
-        });
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(ItemNameDialog, { ref: itemNameDialogRef }), _jsx(ContextMenu, { model: menu, ref: cm, className: "a-text-sm" }), _jsx("div", { className: className, onDragEnterCapture: (ev) => ev.stopPropagation(), onDragOverCapture: (ev) => ev.stopPropagation(), onDragLeaveCapture: (ev) => ev.stopPropagation(), ref: treeContainerRef, children: _jsx(Tree, { value: treeNodes, expandedKeys: expandedKeys, onToggle: (e) => setExpandedKeys(e.value), nodeTemplate: nodeTemplate, 
-                    //dragdropScope={isDraggable ? "alpaca" : undefined}
-                    className: "a-w-full a-h-full alpaca-no-border a-p-0 a-text-xs", onExpand: loadOnExpand, selectionMode: selectionMode == "none" ? undefined : selectionMode, pt: { container: { className: "a-h-full" } }, onNodeDoubleClick: (e) => {
-                        onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e.node.data);
-                    }, onSelectionChange: (ev) => {
-                        if (onSelectionChange && selectionMode == "multiple") {
-                            const selectedKeys = Object.keys(ev.value);
-                            const selectedNodes = selectedKeys
-                                .filter((key) => nodeDictionary[key])
-                                .map((key) => nodeDictionary[key]);
-                            onSelectionChange(selectedNodes.map((x) => x.data));
-                        }
-                        if (onSelectionChange && selectionMode == "single") {
-                            onSelectionChange(nodeDictionary[ev.value].data);
-                        }
-                    }, selectionKeys: selectedKeys, onContextMenu: (e) => __awaiter(this, void 0, void 0, function* () {
-                        var _a, _b;
-                        e.originalEvent.preventDefault();
-                        const item = e.node.data;
-                        const insertOptions = yield loadInsertOptions(item);
-                        const contextMenuItems = [
-                            {
-                                label: "Insert",
-                                disabled: insertOptions.length == 0,
-                                icon: "pi pi-plus",
-                                items: insertOptions.length === 0
-                                    ? undefined
-                                    : insertOptions.map((x) => ({
-                                        label: x.name,
-                                        icon: (_jsx("img", { className: "p-menuitem-icon", src: x.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() })),
-                                        command: () => {
-                                            insertItem(e.node, item, x.id);
-                                        },
-                                    })),
-                            },
-                            {
-                                label: "Delete",
-                                icon: "pi pi-trash",
-                                command: getDeleteItemCommand(item, editContext, () => {
-                                    const parent = e.node.parent;
-                                    if (parent) {
-                                        refreshNode(parent);
-                                    }
-                                }),
-                                disabled: item.id == ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.page) === null || _a === void 0 ? void 0 : _a.id),
-                            },
-                        ];
-                        setMenu(contextMenuItems);
-                        (_b = cm.current) === null || _b === void 0 ? void 0 : _b.show(e.originalEvent);
-                    }) }) })] }));
-}