@apteva/apteva-kit 0.1.111 → 0.1.112

package/dist/index.js

@@ -1439,7 +1439,74 @@ function Table({ widget, onAction }) {
 
 // src/components/Widgets/widget-library/Form.tsx
 
-
+var _reactdom = require('react-dom');
+
+function PortalDropdown({
+  anchorRef,
+  open,
+  onClose,
+  width,
+  children
+}) {
+  const dropdownRef = _react.useRef.call(void 0, null);
+  const [pos, setPos] = _react.useState.call(void 0, { top: 0, left: 0, width: 0 });
+  _react.useEffect.call(void 0, () => {
+    if (!open || !anchorRef.current) return;
+    const update = () => {
+      const rect = anchorRef.current.getBoundingClientRect();
+      setPos({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, anchorRef]);
+  _react.useEffect.call(void 0, () => {
+    if (!open) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (dropdownRef.current && !dropdownRef.current.contains(target) && anchorRef.current && !anchorRef.current.contains(target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, onClose, anchorRef]);
+  _react.useEffect.call(void 0, () => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  if (!open) return null;
+  return _reactdom.createPortal.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: dropdownRef,
+        className: "apteva-widget",
+        style: {
+          position: "absolute",
+          top: pos.top,
+          left: pos.left,
+          width: width === "match" ? pos.width : void 0,
+          zIndex: 99999
+        },
+        children
+      }
+    ),
+    document.body
+  );
+}
 function CustomSelect({
   name,
   value,
@@ -1449,17 +1516,10 @@ function CustomSelect({
   onChange
 }) {
   const [open, setOpen] = _react.useState.call(void 0, false);
-  const ref = _react.useRef.call(void 0, null);
+  const triggerRef = _react.useRef.call(void 0, null);
   const selected = _optionalChain([options, 'optionalAccess', _18 => _18.find, 'call', _19 => _19((o) => o.value === value)]);
-  _react.useEffect.call(void 0, () => {
-    if (!open) return;
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: "apteva-select relative", children: [
+  const close = _react.useCallback.call(void 0, () => setOpen(false), []);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-select relative", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "select",
       {
@@ -1480,6 +1540,7 @@ function CustomSelect({
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "button",
       {
+        ref: triggerRef,
         type: "button",
         onClick: () => setOpen(!open),
         className: "apteva-select-trigger w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-colors text-left",
@@ -1498,14 +1559,14 @@ function CustomSelect({
         ]
       }
     ),
-    open && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-select-dropdown absolute z-50 w-full mt-1 rounded-lg border shadow-lg overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "max-h-48 overflow-y-auto py-1", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PortalDropdown, { anchorRef: triggerRef, open, onClose: close, width: "match", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-select-dropdown rounded-lg border shadow-lg overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "max-h-48 overflow-y-auto py-1", children: [
       _optionalChain([options, 'optionalAccess', _22 => _22.map, 'call', _23 => _23((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
           type: "button",
           onClick: () => {
             onChange(opt.value);
-            setOpen(false);
+            close();
           },
           className: `apteva-select-option w-full text-left px-3 py-2 text-sm transition-colors ${opt.value === value ? "apteva-select-option-active" : ""}`,
           children: opt.label
@@ -1513,7 +1574,7 @@ function CustomSelect({
         opt.value
       ))]),
       (!options || options.length === 0) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-2 text-sm apteva-select-placeholder", children: "No options" })
-    ] }) })
+    ] }) }) })
   ] });
 }
 function CustomDatePicker({
@@ -1524,7 +1585,8 @@ function CustomDatePicker({
   onChange
 }) {
   const [open, setOpen] = _react.useState.call(void 0, false);
-  const ref = _react.useRef.call(void 0, null);
+  const triggerRef = _react.useRef.call(void 0, null);
+  const close = _react.useCallback.call(void 0, () => setOpen(false), []);
   const parseDate = (v) => {
     if (v) {
       const [y, m, d] = v.split("-").map(Number);
@@ -1536,14 +1598,6 @@ function CustomDatePicker({
   const parsed = parseDate(value);
   const [viewYear, setViewYear] = _react.useState.call(void 0, parsed.year);
   const [viewMonth, setViewMonth] = _react.useState.call(void 0, parsed.month);
-  _react.useEffect.call(void 0, () => {
-    if (!open) return;
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
   _react.useEffect.call(void 0, () => {
     if (value) {
       const p = parseDate(value);
@@ -1570,7 +1624,7 @@ function CustomDatePicker({
     const m = String(viewMonth + 1).padStart(2, "0");
     const d = String(day).padStart(2, "0");
     onChange(`${viewYear}-${m}-${d}`);
-    setOpen(false);
+    close();
   };
   const formatDisplay = (v) => {
     if (!v) return "";
@@ -1588,7 +1642,7 @@ function CustomDatePicker({
     const now = /* @__PURE__ */ new Date();
     return now.getFullYear() === viewYear && now.getMonth() === viewMonth && now.getDate() === day;
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: "apteva-datepicker relative", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-datepicker relative", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "input",
       {
@@ -1606,6 +1660,7 @@ function CustomDatePicker({
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "button",
       {
+        ref: triggerRef,
         type: "button",
         onClick: () => setOpen(!open),
         className: "apteva-datepicker-trigger w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-colors text-left",
@@ -1615,7 +1670,7 @@ function CustomDatePicker({
         ]
       }
     ),
-    open && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-datepicker-dropdown absolute z-50 mt-1 rounded-lg border shadow-lg overflow-hidden", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PortalDropdown, { anchorRef: triggerRef, open, onClose: close, width: "auto", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-datepicker-dropdown rounded-lg border shadow-lg overflow-hidden", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-datepicker-header flex items-center justify-between px-3 py-2", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", onClick: prevMonth, className: "apteva-datepicker-nav p-1 rounded transition-colors", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-datepicker-title text-sm font-semibold", children: [
@@ -1648,7 +1703,7 @@ function CustomDatePicker({
           );
         })
       ] })
-    ] })
+    ] }) })
   ] });
 }
 function Form({ widget, onAction }) {