@bigtablet/design-system 1.15.0 → 1.16.0

package/dist/index.css

@@ -683,6 +683,12 @@
   overflow-x: hidden;
   padding: 0.25rem 0;
 }
+.select_list_up {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
 .select_option {
   width: 100%;
   box-sizing: border-box;

package/dist/index.js

@@ -315,7 +315,9 @@ 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 wrapperRef = React3.useRef(null);
+  const controlRef = React3.useRef(null);
   const currentOption = React3.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
@@ -413,6 +415,14 @@ var Select = ({
       )
     );
   }, [isOpen, options, currentValue]);
+  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;
+    setDropUp(spaceBelow < listHeight && spaceAbove > spaceBelow);
+  }, [isOpen, options.length]);
   const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
   const controlClassName = [
     "select_control",
@@ -439,6 +449,7 @@ var Select = ({
         /* @__PURE__ */ jsxs(
           "button",
           {
+            ref: controlRef,
             id: selectId,
             type: "button",
             className: controlClassName,
@@ -466,7 +477,7 @@ var Select = ({
           {
             id: `${selectId}_listbox`,
             role: "listbox",
-            className: "select_list",
+            className: `select_list${dropUp ? " select_list_up" : ""}`,
             children: options.map((opt, i) => {
               const selected = currentValue === opt.value;
               const active = i === activeIndex;

package/package.json

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