@alpaca-headless/alpaca-headless-nextjs 1.0.20 → 1.0.26

package/dist/esm/components/Placeholder.js

@@ -12,6 +12,8 @@ import { EditFrame } from "../editor/EditFrame";
 import { useAlpacaContext, } from "..";
 import { PlaceholderDropZoneHost } from "../editor/PlaceholderDropZoneHost";
 import Slot from "./Slot";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorFallbackWithDetails, ErrorFallback } from "./Error";
 export function Placeholder({ name, content, }) {
     return __awaiter(this, void 0, void 0, function* () {
         const data = yield content;
@@ -44,11 +46,16 @@ export function Placeholder({ name, content, }) {
         const components = yield Promise.all(promises);
         if (context.pageContext.pageEditing) {
             return (_jsxs(_Fragment, { children: [components.map(({ Component, data, parent }, index) => {
-                        return (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), _jsx(EditFrame, { componentId: data.id, children: _jsx(Component, { component: data }) }, data.id)] }));
+                        try {
+                            return (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), _jsx(EditFrame, { componentId: data.id, children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallbackWithDetails, children: _jsx(Component, { component: data }) }) }, data.id)] }));
+                        }
+                        catch (e) {
+                            return (_jsxs("div", { children: ["Error rendering component ", data.name, ": ", e.message] }));
+                        }
                     }), _jsx(PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, placeholder: placeholderData, index: components.length + 1 })] }));
         }
         else
-            return (_jsx(_Fragment, { children: components.map(({ Component, data }) => (_jsx(_Fragment, { children: _jsx(Component, { component: data }) }))) }));
+            return (_jsx(_Fragment, { children: components.map(({ Component, data }) => (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: _jsx(Component, { component: data }) }) }))) }));
     });
 }
 function ComponentNotFound({ component }) {

package/dist/esm/components/RichText.js

@@ -27,9 +27,12 @@ export function RichText(_a) {
     return __awaiter(this, void 0, void 0, function* () {
         if (!field)
             return;
+        if (field.jsonValue) {
+            field = field.jsonValue;
+        }
         const internalProps = Object.assign(Object.assign({}, props), { dangerouslySetInnerHTML: {
                 __html: field.value,
-            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: '[' + field.name + ']' });
+            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: "[" + field.name + "]" });
         if (useAlpacaContext().pageContext.pageEditing)
             return _jsx(RichTextEditor, Object.assign({ field: field, tag: tag }, props));
         return React.createElement(tag || "div", Object.assign(props, internalProps));

package/dist/esm/components/RichTextEditor.js

@@ -20,10 +20,7 @@ export function RichTextEditor(_a) {
     if (!editContext)
         return;
     const { updateContentEditingFields } = editContext;
-    const component = editContext.getComponentById(field.itemId);
-    if (!component)
-        return;
-    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    const liveField = editContext.getLiveField(field);
     useEffect(() => {
         if (editedValue != liveField.value &&
             "<p>" + editedValue + "</p>" != liveField.value) {

package/dist/esm/components/Text.js

@@ -30,8 +30,9 @@ export function Text(_a) {
         if (field.jsonValue) {
             field = field.jsonValue;
         }
-        if (useAlpacaContext().pageContext.pageEditing)
-            return _jsx(TextEditor, Object.assign({ field: field, tag: tag }, props));
+        if (useAlpacaContext().pageContext.pageEditing) {
+            return (_jsx("div", { children: _jsx(TextEditor, Object.assign({ field: field, tag: tag }, props)) }));
+        }
         else
             return React.createElement(tag || "div", props, field.value);
     });

package/dist/esm/components/TextEditor.js

@@ -20,10 +20,7 @@ export function TextEditor(_a) {
     if (!editContext)
         return;
     const { updateContentEditingFields } = editContext;
-    const component = editContext.getComponentById(field.itemId);
-    if (!component)
-        return;
-    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    const liveField = editContext.getLiveField(field);
     useEffect(() => {
         if (editedValue != liveField.value)
             setValue(liveField.value);

package/dist/esm/editor/AiTerminal.js

@@ -42,7 +42,7 @@ export function AiTerminal({ requestRefresh, selection, }) {
                 handleResponse(response, callback, false);
                 if (response.editOperations.length) {
                     if (new Date().getTime() - lastRefresh > 500) {
-                        requestRefresh(false);
+                        requestRefresh("delayed");
                         router.refresh();
                         lastRefresh = new Date().getTime();
                     }

package/dist/esm/editor/ComponentPalette.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabPanel, TabView } from "primereact/tabview";
 import { useEditContext } from "..";
 import ContentTree from "./ContentTree";
 export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
@@ -28,25 +29,25 @@ export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
     //     editContext!.droppedInPlaceholder(key, parseInt(index));
     //   }
     // }
-    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "a-text-xl a-font-bold a-mb-8", children: "New" }), _jsx("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
-                    function handleDragStart(event) {
-                        dragStart({ type: "template", templateId: option.id });
-                        event.stopPropagation();
-                    }
-                    function handleDragEnd() {
-                        dragEnd();
-                    }
-                    return (_jsxs("div", { 
-                        //    onClick={directInsert}
-                        draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "p-3 shadow-md flex items-center flex-col gap-1 cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
-                }) }), _jsx("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
-                    dragStart({
-                        type: "link-component",
-                        templateId: itemNode.templateId,
-                        componentId: itemNode.id,
-                    });
-                }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
-                    (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined })] }));
+    return (_jsxs(TabView, { children: [_jsx(TabPanel, { header: "New", children: _jsx("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
+                        function handleDragStart(event) {
+                            dragStart({ type: "template", templateId: option.id });
+                            event.stopPropagation();
+                        }
+                        function handleDragEnd() {
+                            dragEnd();
+                        }
+                        return (_jsxs("div", { 
+                            //    onClick={directInsert}
+                            draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-3 a-shadow-md a-flex a-items-center a-flex-col a-gap-1 a-cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
+                    }) }) }), _jsx(TabPanel, { header: "Existing", children: _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
+                        dragStart({
+                            type: "link-component",
+                            templateId: itemNode.templateId,
+                            componentId: itemNode.id,
+                        });
+                    }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
+                        (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined }) })] }));
 }
 function collectInsertOptions(page, placeholderKeys) {
     const insertOptionsMap = new Map();

package/dist/esm/editor/ComponentTree.js

@@ -105,7 +105,7 @@ export function ComponentTree({ page, selection, }) {
     createMap(treeNodes, nodeDictionary);
     const nodeTemplate = (node, options) => {
         var _a;
-        let label = (_jsxs("span", { "data-key": node.key, className: "flex", children: [node.label, (_a = node.tags) === null || _a === void 0 ? void 0 : _a.map((x) => (_jsx(Tag, { icon: x.icon, value: x.value, severity: x.severity, onClick: x.onClick, style: { backgroundColor: x.color, marginLeft: "8px" } }, x.value)))] }));
+        let label = (_jsxs("span", { "data-key": node.key, className: "a-flex", children: [node.label, (_a = node.tags) === null || _a === void 0 ? void 0 : _a.map((x) => (_jsx(Tag, { icon: x.icon, value: x.value, severity: x.severity, onClick: x.onClick, style: { backgroundColor: x.color, marginLeft: "8px" } }, x.value)))] }));
         return _jsx("span", { className: options.className, children: label });
     };
     const menu = [

package/dist/esm/editor/EditorClient.js

@@ -74,6 +74,7 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
     const searchParams = useSearchParams();
     const [selection, setSelection] = useState([]);
     const [selectedForInsertion, setSelectedForInsertion] = useState("");
+    const [liveUpdatingFields, setLiveUpdatingFields] = useState([]);
     const [currentEditOperation, setCurrentEditOperation] = useState();
     const [dictionary, setDictionary] = useState(dictionaryObject);
     const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = useState([]);
@@ -141,23 +142,33 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                     setSelection([result.componentId]);
                 }
                 if (!currentEditOperation.noRefresh)
-                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod);
+                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod
+                        ? "waitForQuietPeriod"
+                        : "delayed");
             }
         });
         sync();
     }, [currentEditOperation]);
-    const requestRefresh = (waitForQuietPeriod) => {
-        console.log("request refresh with " + waitForQuietPeriod);
-        if (waitForQuietPeriod && refreshTimer) {
+    const requestRefresh = (mode) => {
+        if (mode === "immediate") {
+            console.log("Immediate refresh requested");
+            clearTimeout(refreshTimer);
+            router.refresh();
+            setRefreshCompletedFlag(!refreshCompletedFlag);
+            setRefreshTimer(undefined);
+            return;
+        }
+        console.log("request refresh with mode: " + mode);
+        if (mode === "waitForQuietPeriod" && refreshTimer) {
             clearTimeout(refreshTimer);
         }
-        if (!refreshTimer || waitForQuietPeriod) {
+        if (!refreshTimer || mode === "waitForQuietPeriod") {
             setRefreshTimer(setTimeout(() => {
                 console.log("refreshing");
                 router.refresh();
                 setRefreshCompletedFlag(!refreshCompletedFlag);
                 setRefreshTimer(undefined);
-            }, waitForQuietPeriod ? 2000 : 1000));
+            }, mode === "waitForQuietPeriod" ? 2000 : 1000));
         }
     };
     const saveAndRefresh = (callback) => __awaiter(this, void 0, void 0, function* () {
@@ -262,6 +273,16 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
             }
         });
     }
+    const getLiveField = (field) => {
+        const existingField = liveUpdatingFields.find((f) => f.id === field.id &&
+            f.language === field.language &&
+            f.version === field.version &&
+            f.itemId === field.itemId);
+        if (existingField)
+            return existingField;
+        setLiveUpdatingFields([...liveUpdatingFields, field]);
+        return field;
+    };
     const selectedComponent = selection.length === 1 && page ? getComponentById(selection[0]) : null;
     const editField = (field, value, noRefresh = true) => {
         var _a;
@@ -294,6 +315,7 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
         op.noRefresh = noRefresh;
         op.refreshAfterQuietPeriod = !noRefresh;
         op.value = value;
+        getLiveField(field).value = value;
         function getField(fields, id) {
             return Object.values(fields).find((f) => f.id === id);
         }
@@ -343,10 +365,12 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
             dragObject,
             dictionary,
             setDictionary,
+            requestRefresh,
             refreshCompletedFlag,
             unresolvedDictionaryKeys,
             setUnresolvedDictionaryKeys,
             updateContentEditingFields,
+            getLiveField,
             showToast: () => { },
             removeComponent: (componentId, callback) => {
                 confirmDialog({
@@ -432,7 +456,7 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                     setCurrentEditOperation(op);
                 setDragObject(undefined);
             }),
-        }, children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmDialog, {}), _jsx(Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), pt: {
+        }, children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmDialog, {}), _jsx(Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), header: "Insert component", pt: {
                             mask: {
                                 onDragOver: () => setHidePalette(true),
                                 style: {
@@ -449,5 +473,5 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                                     setHidePalette(false);
                                 }
                                 setSelectedForInsertion("");
-                            } })) }), _jsxs(BlockUI, { blocked: uiBlocked, template: spinner, children: [_jsx(Menubar, { model: menuItems, end: endContent }), _jsxs(Splitter, { children: [_jsx(SplitterPanel, { size: 25, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { className: "a-overflow-hidden a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && (_jsxs(TabPanel, { header: "Fields", children: [_jsx(ComponentInfo, { component: selectedComponent }), _jsx(FieldList, { fields: selectedComponent.fields })] })), selectedComponent && (_jsx(TabPanel, { header: "GraphQL", style: { height: "100%" }, children: _jsx(GraphQL, { component: selectedComponent }) })), _jsxs(TabPanel, { header: "Page", children: [page && _jsx(PageInfo, { page: page }), page && _jsx(FieldList, { fields: page.fields })] }), _jsx(TabPanel, { header: "Dictionary", children: _jsx(DictionaryEditor, { dictionary: dictionary }) }), _jsx(TabPanel, { header: "Debug", children: _jsx(Debug, { component: selectedComponent, page: page }) })] }) })] }) }), _jsx(SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: _jsx("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), _jsx(SplitterPanel, { size: 20, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
+                            } })) }), _jsxs(BlockUI, { blocked: uiBlocked, template: spinner, children: [_jsx(Menubar, { model: menuItems, end: endContent }), _jsxs(Splitter, { children: [_jsx(SplitterPanel, { size: 30, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 30, className: "a-overflow-hidden a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && (_jsxs(TabPanel, { header: "Fields", children: [_jsx(ComponentInfo, { component: selectedComponent }), _jsx(FieldList, { fields: selectedComponent.fields })] })), selectedComponent && (_jsx(TabPanel, { header: "GraphQL", style: { height: "100%" }, children: _jsx(GraphQL, { component: selectedComponent }) })), _jsxs(TabPanel, { header: "Page", children: [page && _jsx(PageInfo, { page: page }), page && _jsx(FieldList, { fields: page.fields })] }), _jsx(TabPanel, { header: "Dictionary", children: _jsx(DictionaryEditor, { dictionary: dictionary }) }), _jsx(TabPanel, { header: "Debug", children: _jsx(Debug, { component: selectedComponent, page: page }) })] }) })] }) }), _jsx(SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: _jsx("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), _jsx(SplitterPanel, { size: 15, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
 }

package/dist/esm/editor/FieldList.js

@@ -1,12 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEditContext, } from "..";
 import { InputText } from "primereact/inputtext";
 import { Checkbox } from "primereact/checkbox";
 import { SingleLineText } from "./fieldTypes/SingleLineText";
 import { RichTextEditor } from "./fieldTypes/RichTextEditor";
 export function FieldList({ fields }) {
-    if (!fields)
-        return;
+    const editContext = useEditContext();
+    if (!editContext)
+        if (!fields)
+            return;
     if (!Array.isArray(fields))
         fields = Object.values(fields);
     const sections = fields.reduce((acc, value) => {
@@ -20,10 +23,12 @@ export function FieldList({ fields }) {
     }, {});
     const sectionList = Object.values(sections);
     sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
-    return (_jsx("div", { className: "a-p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section])] }, section))) }));
+    return (_jsx("div", { className: "a-p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section], editContext)] }, section))) }));
 }
-function getSectionFields(fields) {
-    return fields.map((field) => (_jsxs("div", { children: [_jsx("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? (_jsx("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
+function getSectionFields(fields, editContext) {
+    return fields
+        .map((field) => editContext.getLiveField(field))
+        .map((field) => (_jsxs("div", { children: [_jsx("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? (_jsx("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
 }
 function getFieldEditor(field) {
     switch (field.type) {

package/dist/esm/editor/GraphQL.js

@@ -73,11 +73,10 @@ export function GraphQL({ component }) {
             type: "jsonValue",
         };
         const prettyQuery = format(query);
-        console.log(query);
-        console.log(prettyQuery);
         setQuery(prettyQuery);
         editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, prettyQuery, false);
         setShowSpinner(true);
+        editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
     }
-    return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), _jsx(Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 absolute", children: [_jsx(TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: _jsx("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), _jsx(TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(JSONPretty, { data: component.graphql }) }) })] }) })] }));
+    return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), _jsx(Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", children: [_jsx(TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: _jsx("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), _jsx(TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(JSONPretty, { data: component.graphql }) }) })] }) })] }));
 }

package/dist/esm/editor/MediaSelector.js

@@ -8,13 +8,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Sidebar } from "primereact/sidebar";
 import ContentTree from "./ContentTree";
 import { Splitter, SplitterPanel } from "primereact/splitter";
 import { useEffect, useState } from "react";
 import { getChildren } from "./contentService";
 import { useEditContext } from "./editContext";
 import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
 export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
     const [selectedFolderId, setSelectedFolderId] = useState();
     const [images, setImages] = useState();
@@ -37,17 +37,17 @@ export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
             }
         });
     }
-    return (_jsx(Sidebar, { style: { width: "60%" }, position: "right", visible: visible, onHide: onHide, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs(Splitter, { className: "flex-1 border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, children: _jsx(ContentTree, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
+    return (_jsx(Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(Splitter, { className: "a-flex-1 a-border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, children: _jsx(ContentTree, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
                                                 if (selection.length)
                                                     setSelectedFolderId(selection[0]);
                                                 else
                                                     setSelectedFolderId(undefined);
-                                            } }) }), _jsx(SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), _jsx(SplitterPanel, { className: "alpaca-overflow-scroll relative", children: _jsx("div", { className: "grid grid-cols-3 gap-2 absolute inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
-                                    return (_jsxs("div", { className: "flex flex-col justify-between hover:shadow-md cursor-pointer p-1", onDoubleClick: () => {
+                                            } }) }), _jsx(SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), _jsx(SplitterPanel, { className: "alpaca-overflow-scroll a-relative", children: _jsx("div", { className: "a-grid a-grid-cols-3 a-gap-2 a-absolute a-inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
+                                    return (_jsxs("div", { className: "a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
                                             onMediaSelected(t.id);
                                             onHide();
-                                        }, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl }), _jsx("div", { className: "text-xs break-all", children: t.name })] }));
-                                }) }) })] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: () => onHide(), children: "Cancel" }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
+                                        }, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl }), _jsx("div", { className: "a-text-xs a-break-all", children: t.name })] }));
+                                }) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [_jsx(Button, { onClick: () => onHide(), children: "Cancel" }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
                                 onMediaSelected(selectedImage.id);
                                 onHide();
                             }, children: "Select" })] })] }) }));