@duke333/builder-ui 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // src/ready/BuilderProvider.tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
@@ -466,7 +468,7 @@ function builderErrorMessage(error, fallback) {
 }
 
 // src/ready/BuilderRuntimeComponents.tsx
-import { useMemo as useMemo4, useState as useState4 } from "react";
+import { useMemo as useMemo4, useState as useState5 } from "react";
 import { FormProvider as FormProvider2, useForm as useForm2 } from "react-hook-form";
 
 // src/runtime/runtimeUtils.ts
@@ -591,7 +593,8 @@ function ReadyFields({ formId, viewId, schema, extraItems = [] }) {
 }
 
 // src/ready/ReadyOverlay.tsx
-import { useEffect, useId, useRef as useRef3 } from "react";
+import { useEffect, useId, useRef as useRef3, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ReadyOverlay({
   open,
@@ -603,10 +606,14 @@ function ReadyOverlay({
 }) {
   const panelRef = useRef3(null);
   const onCloseRef = useRef3(onClose);
+  const [portalRoot, setPortalRoot] = useState2(null);
   onCloseRef.current = onClose;
   const titleId = useId();
   useEffect(() => {
-    if (!open) return;
+    setPortalRoot(document.body);
+  }, []);
+  useEffect(() => {
+    if (!open || !portalRoot) return;
     const previous = document.activeElement;
     panelRef.current?.focus();
     const onKeyDown = (event) => {
@@ -636,29 +643,32 @@ function ReadyOverlay({
       document.body.style.overflow = overflow;
       previous?.focus();
     };
-  }, [open]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsx3("div", { className: "builder-overlay", role: "presentation", onMouseDown: (event) => event.target === event.currentTarget && onClose(), children: /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ref: panelRef,
-      className: `builder-overlay__panel builder-overlay__panel--${presentation}`,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": titleId,
-      tabIndex: -1,
-      children: [
-        /* @__PURE__ */ jsxs3("header", { className: "builder-overlay__header", children: [
-          /* @__PURE__ */ jsxs3("div", { children: [
-            /* @__PURE__ */ jsx3("h2", { id: titleId, className: "builder-title", children: title }),
-            description ? /* @__PURE__ */ jsx3("p", { className: "builder-description", children: description }) : null
+  }, [open, portalRoot]);
+  if (!open || !portalRoot) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx3("div", { className: "builder-overlay", role: "presentation", onMouseDown: (event) => event.target === event.currentTarget && onClose(), children: /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: panelRef,
+        className: `builder-overlay__panel builder-overlay__panel--${presentation}`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxs3("header", { className: "builder-overlay__header", children: [
+            /* @__PURE__ */ jsxs3("div", { children: [
+              /* @__PURE__ */ jsx3("h2", { id: titleId, className: "builder-title", children: title }),
+              description ? /* @__PURE__ */ jsx3("p", { className: "builder-description", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsx3("button", { type: "button", className: "builder-icon-button", "aria-label": "\u0425\u0430\u0430\u0445", onClick: onClose, children: "\xD7" })
           ] }),
-          /* @__PURE__ */ jsx3("button", { type: "button", className: "builder-icon-button", "aria-label": "\u0425\u0430\u0430\u0445", onClick: onClose, children: "\xD7" })
-        ] }),
-        /* @__PURE__ */ jsx3("div", { className: "builder-overlay__body", children })
-      ]
-    }
-  ) });
+          /* @__PURE__ */ jsx3("div", { className: "builder-overlay__body", children })
+        ]
+      }
+    ) }),
+    portalRoot
+  );
 }
 function ReadyConfirmDialog({
   open,
@@ -682,16 +692,16 @@ function ReadyErrorState({ title, description }) {
 }
 
 // src/ready/ReadySubform.tsx
-import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 // src/ready/ReadyTable.tsx
-import { useMemo as useMemo2, useState as useState2 } from "react";
+import { useMemo as useMemo2, useState as useState3 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function useReadyTableState({ pageSize = 20 } = {}) {
-  const [page, setPage] = useState2(1);
-  const [search, setSearchValue] = useState2("");
-  const [sort, setSort] = useState2();
+  const [page, setPage] = useState3(1);
+  const [search, setSearchValue] = useState3("");
+  const [sort, setSort] = useState3();
   return {
     query: { page, pageSize, search: search || void 0, sort },
     page,
@@ -710,7 +720,7 @@ function useReadyTableState({ pageSize = 20 } = {}) {
   };
 }
 function useReadyTable(args) {
-  const [selectedIds, setSelectedIds] = useState2([]);
+  const [selectedIds, setSelectedIds] = useState3([]);
   return useMemo2(
     () => ({
       ...args,
@@ -843,8 +853,8 @@ function makeDraftEntry(viewId, values, editing) {
 }
 function ReadySubform({ subform, parentEntry, rows, onRowsChange }) {
   const { hooks, notify } = useBuilderRuntime();
-  const [open, setOpen] = useState3(false);
-  const [editing, setEditing] = useState3(null);
+  const [open, setOpen] = useState4(false);
+  const [editing, setEditing] = useState4(null);
   const initialized = useRef4(false);
   const parentValue = linkedValue(parentEntry, subform.parentField);
   const viewQuery = hooks.useRuntimeBuilderView(subform.viewId, Boolean(subform.viewId));
@@ -998,7 +1008,7 @@ function childPayload(row, includeIdentity) {
 }
 function BuilderEntryEditor({ view, editing, open, onClose }) {
   const { hooks, notify } = useBuilderRuntime();
-  const [subforms, setSubforms] = useState4({});
+  const [subforms, setSubforms] = useState5({});
   const save = hooks.useSaveBuilderViewEntry(view.id);
   const createComposite = hooks.useCreateCompositeBuilderViewEntry(view.id);
   const updateComposite = hooks.useUpdateCompositeBuilderViewEntry(view.id);
@@ -1041,9 +1051,9 @@ function BuilderEntryEditor({ view, editing, open, onClose }) {
 }
 function BuilderView({ viewId }) {
   const { hooks, notify } = useBuilderRuntime();
-  const [editing, setEditing] = useState4(null);
-  const [editorOpen, setEditorOpen] = useState4(false);
-  const [pendingDelete, setPendingDelete] = useState4(null);
+  const [editing, setEditing] = useState5(null);
+  const [editorOpen, setEditorOpen] = useState5(false);
+  const [pendingDelete, setPendingDelete] = useState5(null);
   const viewQuery = hooks.useRuntimeBuilderView(viewId);
   const state = useReadyTableState();
   const entriesQuery = hooks.useBuilderViewEntries(viewId, state.query);
@@ -2018,7 +2028,7 @@ function createBuilderDefaultListEditorBody(options) {
 }
 
 // src/admin/BuilderDefaultEntityManager.tsx
-import { useMemo as useMemo5, useState as useState5 } from "react";
+import { useMemo as useMemo5, useState as useState6 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var styles2 = {
   page: {
@@ -2115,7 +2125,7 @@ var styles2 = {
 };
 function createBuilderDefaultEntityManagerComponent(deps) {
   return function BuilderDefaultEntityManager() {
-    const [state, setState] = useState5({
+    const [state, setState] = useState6({
       page: 1,
       pageSize: 20,
       search: ""
@@ -2938,11 +2948,11 @@ function createBuilderAdminPages({
 }
 
 // src/admin/BuilderEntityManager.tsx
-import { useCallback as useCallback2, useMemo as useMemo6, useState as useState6 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo6, useState as useState7 } from "react";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function createBuilderEntityManagerComponent(deps) {
   return function BuilderEntityManager() {
-    const [pendingDelete, setPendingDelete] = useState6(null);
+    const [pendingDelete, setPendingDelete] = useState7(null);
     const state = deps.useDataTableState({ pageSize: 20 });
     const query = deps.hooks.useEntities(state.query);
     const remove = deps.hooks.useDelete();
@@ -3002,9 +3012,9 @@ function createBuilderEntityManagerComponent(deps) {
 }
 function createBuilderEntityDialogManagerComponent(deps) {
   return function BuilderEntityDialogManager() {
-    const [editing, setEditing] = useState6(null);
-    const [isEditorOpen, setEditorOpen] = useState6(false);
-    const [pendingDelete, setPendingDelete] = useState6(null);
+    const [editing, setEditing] = useState7(null);
+    const [isEditorOpen, setEditorOpen] = useState7(false);
+    const [pendingDelete, setPendingDelete] = useState7(null);
     const state = deps.useDataTableState({ pageSize: 20 });
     const query = deps.hooks.useEntities(state.query);
     const remove = deps.hooks.useDelete();
@@ -3374,7 +3384,7 @@ function createDynamicListComponent(deps) {
 }
 
 // src/components/DynamicView.tsx
-import { useMemo as useMemo10, useState as useState7 } from "react";
+import { useMemo as useMemo10, useState as useState8 } from "react";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var interactiveRowTargetSelector = "button,a,input,select,textarea,[role='button'],[role='menuitem'],[data-builder-row-action]";
 function hasClosest(target) {
@@ -3387,9 +3397,9 @@ function shouldHandleDynamicViewRowClick(event) {
 }
 function createDynamicViewComponent(deps) {
   return function DynamicView({ viewId }) {
-    const [editing, setEditing] = useState7(null);
-    const [isDialogOpen, setDialogOpen] = useState7(false);
-    const [pendingDelete, setPendingDelete] = useState7(null);
+    const [editing, setEditing] = useState8(null);
+    const [isDialogOpen, setDialogOpen] = useState8(false);
+    const [pendingDelete, setPendingDelete] = useState8(null);
     const viewQuery = deps.hooks.useRuntimeBuilderView(viewId);
     const state = deps.useDataTableState({ pageSize: 20 });
     const entriesQuery = deps.hooks.useBuilderViewEntries(viewId, state.query);
@@ -3483,7 +3493,7 @@ function createDynamicViewComponent(deps) {
 }
 
 // src/components/RuntimeEntryDialog.tsx
-import { useEffect as useEffect6, useMemo as useMemo11, useState as useState8 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo11, useState as useState9 } from "react";
 import { FormProvider as FormProvider6, useForm as useForm7 } from "react-hook-form";
 import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function isDbTableSource(source) {
@@ -3518,7 +3528,7 @@ function createRuntimeEntryDialogComponent(deps) {
     onSave,
     isSaving
   }) {
-    const [draftSubforms, setDraftSubforms] = useState8({});
+    const [draftSubforms, setDraftSubforms] = useState9({});
     const compositeCreate = deps.useCreateCompositeEntry?.(view.id);
     const compositeUpdate = deps.useUpdateCompositeEntry?.(view.id);
     const form = useForm7({
@@ -3704,7 +3714,7 @@ function validateBuilderFrontendSetup(config) {
 // src/index.ts
 var builderUiPackage = {
   name: "@duke333/builder-ui",
-  version: "0.2.0"
+  version: "0.2.2"
 };
 export {
   BUILDER_EDITOR_NONE_VALUE,