@bigtablet/design-system 1.15.0 → 1.16.1

package/dist/index.css

@@ -683,6 +683,17 @@
   overflow-x: hidden;
   padding: 0.25rem 0;
 }
+.select_list_up {
+  top: auto;
+  bottom: 100%;
+  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.d.ts

@@ -109,7 +109,7 @@ interface SelectProps {
     className?: string;
     textAlign?: "left" | "center";
 }
-declare const Select: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, variant, fullWidth, className, textAlign }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, variant, fullWidth, className, textAlign, }: SelectProps) => react_jsx_runtime.JSX.Element;
 
 interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     checked?: boolean;

package/dist/index.js

@@ -315,7 +315,11 @@ var Select = ({
   const currentValue = isControlled ? value ?? null : internalValue;
   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]
@@ -330,10 +334,10 @@ var Select = ({
   );
   React3.useEffect(() => {
     const onDocClick = (e) => {
-      if (!wrapperRef.current) return;
-      if (!wrapperRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
+      const target = e.target;
+      if (wrapperRef.current?.contains(target)) return;
+      if (listRef.current?.contains(target)) return;
+      setIsOpen(false);
     };
     document.addEventListener("mousedown", onDocClick);
     return () => document.removeEventListener("mousedown", onDocClick);
@@ -381,9 +385,7 @@ var Select = ({
       case "Home":
         e.preventDefault();
         setIsOpen(true);
-        setActiveIndex(
-          options.findIndex((o) => !o.disabled)
-        );
+        setActiveIndex(options.findIndex((o) => !o.disabled));
         break;
       case "End":
         e.preventDefault();
@@ -403,16 +405,36 @@ var Select = ({
   };
   React3.useEffect(() => {
     if (!isOpen) return;
-    const idx = options.findIndex(
-      (o) => o.value === currentValue && !o.disabled
-    );
-    setActiveIndex(
-      idx >= 0 ? idx : Math.max(
-        0,
-        options.findIndex((o) => !o.disabled)
-      )
-    );
+    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;
+    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]);
   const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
   const controlClassName = [
     "select_control",
@@ -421,92 +443,80 @@ var Select = ({
     isOpen && "is_open",
     disabled && "is_disabled"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs(
-    "div",
+  const renderList = () => /* @__PURE__ */ jsx(
+    "ul",
     {
-      ref: wrapperRef,
-      className: rootClassName,
-      style: fullWidth ? { width: "100%" } : void 0,
-      children: [
-        label && /* @__PURE__ */ jsx(
-          "label",
-          {
-            htmlFor: selectId,
-            className: "select_label",
-            children: label
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
+      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",
           {
-            id: selectId,
-            type: "button",
-            className: controlClassName,
-            "aria-haspopup": "listbox",
-            "aria-expanded": isOpen,
-            "aria-controls": `${selectId}_listbox`,
-            onClick: () => !disabled && setIsOpen((o) => !o),
-            onKeyDown,
-            disabled,
+            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",
-                {
-                  className: currentOption ? "select_value" : "select_placeholder",
-                  style: textAlign === "left" ? { textAlign: "start" } : void 0,
-                  children: currentOption ? currentOption.label : placeholder
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+              /* @__PURE__ */ jsx("span", { children: opt.label }),
+              selected && /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
             ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsx(
-          "ul",
-          {
-            id: `${selectId}_listbox`,
-            role: "listbox",
-            className: "select_list",
-            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
-              );
-            })
-          }
-        )
-      ]
+          },
+          opt.value
+        );
+      })
     }
   );
+  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(
+      "button",
+      {
+        ref: controlRef,
+        id: selectId,
+        type: "button",
+        className: controlClassName,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": `${selectId}_listbox`,
+        onClick: () => !disabled && setIsOpen((o) => !o),
+        onKeyDown,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: currentOption ? "select_value" : "select_placeholder",
+              style: textAlign === "left" ? { textAlign: "start" } : void 0,
+              children: currentOption ? currentOption.label : placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+        ]
+      }
+    ),
+    isOpen && typeof document !== "undefined" && createPortal(renderList(), document.body)
+  ] });
 };
 var Switch = ({
   checked,

package/package.json

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