@dragunio/fe-libs 0.1.3 → 0.1.4

package/dist/index.js

@@ -439,6 +439,7 @@ function Drawer({ open, onClose, title, footer, side = "right", width = 400, ful
 
 // packages/form-controls/src/index.tsx
 var import_react6 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function getFieldError(error, errorMessage) {
   if (errorMessage !== void 0 && errorMessage !== null) return errorMessage;
@@ -524,13 +525,30 @@ var Selection = (0, import_react6.forwardRef)(function Selection2({ className, l
   const [query, setQuery] = (0, import_react6.useState)("");
   const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
   const rootRef = (0, import_react6.useRef)(null);
+  const menuRef = (0, import_react6.useRef)(null);
+  const [menuPosition, setMenuPosition] = (0, import_react6.useState)(null);
   (0, import_react6.useEffect)(() => {
     const close = (event) => {
-      if (!rootRef.current?.contains(event.target)) setOpen(false);
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target)) setOpen(false);
     };
     document.addEventListener("mousedown", close);
     return () => document.removeEventListener("mousedown", close);
   }, []);
+  (0, import_react6.useLayoutEffect)(() => {
+    if (!open) return;
+    const updateMenuPosition = () => {
+      const rect = rootRef.current?.getBoundingClientRect();
+      if (rect) setMenuPosition({ top: rect.bottom + 7, left: rect.left, width: rect.width });
+    };
+    updateMenuPosition();
+    window.addEventListener("resize", updateMenuPosition);
+    document.addEventListener("scroll", updateMenuPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateMenuPosition);
+      document.removeEventListener("scroll", updateMenuPosition, true);
+    };
+  }, [open]);
   const filteredOptions = options.filter((option) => !query || (option.searchText ?? (typeof option.label === "string" ? option.label : String(option.value))).toLowerCase().includes(query.toLowerCase()));
   const commit = (next) => {
     if (!isControlled) setInternalValue(next);
@@ -582,7 +600,7 @@ var Selection = (0, import_react6.forwardRef)(function Selection2({ className, l
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
       ] }),
       clearable && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
-      open && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: listboxId, className: "fe-selection__menu", role: "listbox", "aria-multiselectable": multiple || void 0, children: [
+      open && menuPosition && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: menuRef, id: listboxId, className: "fe-selection__menu", style: { position: "fixed", top: menuPosition.top, left: menuPosition.left, width: menuPosition.width }, role: "listbox", "aria-multiselectable": multiple || void 0, children: [
         searchable && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-selection__search", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { autoFocus: true, value: query, onChange: (event) => {
@@ -597,7 +615,7 @@ var Selection = (0, import_react6.forwardRef)(function Selection2({ className, l
             isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
           ] }, String(option.value));
         }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
-      ] })
+      ] }), document.body)
     ] }),
     helperText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__helper", children: helperText })
   ] });
@@ -899,7 +917,7 @@ var Skeleton = Object.assign(SkeletonBase, {
 
 // packages/modal/src/index.tsx
 var import_react9 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function Modal({
   open,
@@ -929,7 +947,7 @@ function Modal({
   }, [onClose, open]);
   if (!open || typeof document === "undefined") return null;
   const hasFooter = footer || actions.length > 0;
-  return (0, import_react_dom2.createPortal)(
+  return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
       if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
     }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(

package/dist/index.mjs

@@ -389,9 +389,11 @@ import {
   forwardRef as forwardRef3,
   useEffect as useEffect3,
   useId,
+  useLayoutEffect,
   useRef as useRef2,
   useState as useState3
 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function getFieldError(error, errorMessage) {
   if (errorMessage !== void 0 && errorMessage !== null) return errorMessage;
@@ -477,13 +479,30 @@ var Selection = forwardRef3(function Selection2({ className, label, helperText,
   const [query, setQuery] = useState3("");
   const [activeIndex, setActiveIndex] = useState3(0);
   const rootRef = useRef2(null);
+  const menuRef = useRef2(null);
+  const [menuPosition, setMenuPosition] = useState3(null);
   useEffect3(() => {
     const close = (event) => {
-      if (!rootRef.current?.contains(event.target)) setOpen(false);
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target)) setOpen(false);
     };
     document.addEventListener("mousedown", close);
     return () => document.removeEventListener("mousedown", close);
   }, []);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const updateMenuPosition = () => {
+      const rect = rootRef.current?.getBoundingClientRect();
+      if (rect) setMenuPosition({ top: rect.bottom + 7, left: rect.left, width: rect.width });
+    };
+    updateMenuPosition();
+    window.addEventListener("resize", updateMenuPosition);
+    document.addEventListener("scroll", updateMenuPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateMenuPosition);
+      document.removeEventListener("scroll", updateMenuPosition, true);
+    };
+  }, [open]);
   const filteredOptions = options.filter((option) => !query || (option.searchText ?? (typeof option.label === "string" ? option.label : String(option.value))).toLowerCase().includes(query.toLowerCase()));
   const commit = (next) => {
     if (!isControlled) setInternalValue(next);
@@ -535,7 +554,7 @@ var Selection = forwardRef3(function Selection2({ className, label, helperText,
         /* @__PURE__ */ jsx7("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx7("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
       ] }),
       clearable && selectedOptions.length > 0 && /* @__PURE__ */ jsx7("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
-      open && /* @__PURE__ */ jsxs7("div", { id: listboxId, className: "fe-selection__menu", role: "listbox", "aria-multiselectable": multiple || void 0, children: [
+      open && menuPosition && createPortal2(/* @__PURE__ */ jsxs7("div", { ref: menuRef, id: listboxId, className: "fe-selection__menu", style: { position: "fixed", top: menuPosition.top, left: menuPosition.left, width: menuPosition.width }, role: "listbox", "aria-multiselectable": multiple || void 0, children: [
         searchable && /* @__PURE__ */ jsxs7("div", { className: "fe-selection__search", children: [
           /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2315" }),
           /* @__PURE__ */ jsx7("input", { autoFocus: true, value: query, onChange: (event) => {
@@ -550,7 +569,7 @@ var Selection = forwardRef3(function Selection2({ className, label, helperText,
             isSelected && /* @__PURE__ */ jsx7("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
           ] }, String(option.value));
         }) : /* @__PURE__ */ jsx7("p", { className: "fe-selection__empty", children: "No matching options" }) })
-      ] })
+      ] }), document.body)
     ] }),
     helperText && /* @__PURE__ */ jsx7("span", { className: "fe-selection__helper", children: helperText })
   ] });
@@ -852,7 +871,7 @@ var Skeleton = Object.assign(SkeletonBase, {
 
 // packages/modal/src/index.tsx
 import { useEffect as useEffect4, useId as useId4, useRef as useRef3 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function Modal({
   open,
@@ -882,7 +901,7 @@ function Modal({
   }, [onClose, open]);
   if (!open || typeof document === "undefined") return null;
   const hasFooter = footer || actions.length > 0;
-  return createPortal2(
+  return createPortal3(
     /* @__PURE__ */ jsx12("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
       if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
     }, children: /* @__PURE__ */ jsxs11(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dragunio/fe-libs",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Reusable React components, icons, and table primitives.",
   "license": "MIT",
   "repository": {