@bigtablet/design-system 1.16.1 → 1.16.2

package/dist/index.css

@@ -689,11 +689,6 @@
   margin-top: 0;
   margin-bottom: 0.25rem;
 }
-.select_list_portal {
-  position: fixed;
-  margin-top: 0;
-  margin-bottom: 0;
-}
 .select_option {
   width: 100%;
   box-sizing: border-box;

package/dist/index.js

@@ -316,10 +316,8 @@ var Select = ({
   const [isOpen, setIsOpen] = React3.useState(false);
   const [activeIndex, setActiveIndex] = React3.useState(-1);
   const [dropUp, setDropUp] = React3.useState(false);
-  const [listPosition, setListPosition] = React3.useState({ top: 0, left: 0, width: 0 });
   const wrapperRef = React3.useRef(null);
   const controlRef = React3.useRef(null);
-  const listRef = React3.useRef(null);
   const currentOption = React3.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
@@ -334,10 +332,10 @@ var Select = ({
   );
   React3.useEffect(() => {
     const onDocClick = (e) => {
-      const target = e.target;
-      if (wrapperRef.current?.contains(target)) return;
-      if (listRef.current?.contains(target)) return;
-      setIsOpen(false);
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
     };
     document.addEventListener("mousedown", onDocClick);
     return () => document.removeEventListener("mousedown", onDocClick);
@@ -408,33 +406,14 @@ var Select = ({
     const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
     setActiveIndex(idx >= 0 ? idx : Math.max(0, options.findIndex((o) => !o.disabled)));
   }, [isOpen, options, currentValue]);
-  const updatePosition = React3.useCallback(() => {
-    if (!controlRef.current) return;
+  React3.useLayoutEffect(() => {
+    if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 40, 288);
     const spaceBelow = window.innerHeight - rect.bottom;
     const spaceAbove = rect.top;
-    const shouldDropUp = spaceBelow < listHeight && spaceAbove > spaceBelow;
-    setDropUp(shouldDropUp);
-    setListPosition({
-      top: shouldDropUp ? rect.top - listHeight - 4 : rect.bottom + 4,
-      left: rect.left,
-      width: rect.width
-    });
-  }, [options.length]);
-  React3.useLayoutEffect(() => {
-    if (!isOpen) return;
-    updatePosition();
-  }, [isOpen, updatePosition]);
-  React3.useEffect(() => {
-    if (!isOpen) return;
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [isOpen, updatePosition]);
+    setDropUp(spaceBelow < listHeight && spaceAbove > spaceBelow);
+  }, [isOpen, options.length]);
   const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
   const controlClassName = [
     "select_control",
@@ -443,50 +422,10 @@ var Select = ({
     isOpen && "is_open",
     disabled && "is_disabled"
   ].filter(Boolean).join(" ");
-  const renderList = () => /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref: listRef,
-      id: `${selectId}_listbox`,
-      role: "listbox",
-      className: `select_list select_list_portal${dropUp ? " select_list_up" : ""}`,
-      style: {
-        position: "fixed",
-        top: listPosition.top,
-        left: listPosition.left,
-        width: listPosition.width
-      },
-      children: options.map((opt, i) => {
-        const selected = currentValue === opt.value;
-        const active = i === activeIndex;
-        const optionClassName = [
-          "select_option",
-          selected && "is_selected",
-          active && "is_active",
-          opt.disabled && "is_disabled"
-        ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ jsxs(
-          "li",
-          {
-            role: "option",
-            "aria-selected": selected,
-            className: optionClassName,
-            onMouseEnter: () => !opt.disabled && setActiveIndex(i),
-            onClick: () => {
-              if (opt.disabled) return;
-              setValue(opt.value);
-              setIsOpen(false);
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { children: opt.label }),
-              selected && /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
-            ]
-          },
-          opt.value
-        );
-      })
-    }
-  );
+  const listClassName = [
+    "select_list",
+    dropUp && "select_list_up"
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: rootClassName, style: fullWidth ? { width: "100%" } : void 0, children: [
     label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "select_label", children: label }),
     /* @__PURE__ */ jsxs(
@@ -515,7 +454,43 @@ var Select = ({
         ]
       }
     ),
-    isOpen && typeof document !== "undefined" && createPortal(renderList(), document.body)
+    isOpen && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: `${selectId}_listbox`,
+        role: "listbox",
+        className: listClassName,
+        children: options.map((opt, i) => {
+          const selected = currentValue === opt.value;
+          const active = i === activeIndex;
+          const optionClassName = [
+            "select_option",
+            selected && "is_selected",
+            active && "is_active",
+            opt.disabled && "is_disabled"
+          ].filter(Boolean).join(" ");
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              role: "option",
+              "aria-selected": selected,
+              className: optionClassName,
+              onMouseEnter: () => !opt.disabled && setActiveIndex(i),
+              onClick: () => {
+                if (opt.disabled) return;
+                setValue(opt.value);
+                setIsOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: opt.label }),
+                selected && /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
+              ]
+            },
+            opt.value
+          );
+        })
+      }
+    )
   ] });
 };
 var Switch = ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.16.1",
+  "version": "1.16.2",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",