@verma-consulting/design-library 0.1.42 → 0.1.43

package/dist/index.js

@@ -1285,6 +1285,39 @@ var useStyles2 = (0, import_styles14.makeStyles)((theme) => ({
     whiteSpace: "pre-wrap"
   }
 }));
+function createSearchableSelectPopperOptions() {
+  return {
+    modifiers: [
+      {
+        name: "searchableSelectViewportMaxHeight",
+        enabled: true,
+        phase: "beforeWrite",
+        requires: ["computeStyles"],
+        fn({ state }) {
+          if (typeof window === "undefined") return;
+          const padding = 12;
+          const vh = window.innerHeight;
+          const ref = state.rects.reference;
+          const refBottom = ref.y + ref.height;
+          const spaceBelow = vh - refBottom - padding;
+          const spaceAbove = ref.y - padding;
+          const placement = state.placement || "bottom-start";
+          const isTop = placement.startsWith("top");
+          const available = Math.max(0, isTop ? spaceAbove : spaceBelow);
+          const maxH = Math.min(available, vh * 0.7);
+          state.styles.popper = state.styles.popper || {};
+          Object.assign(state.styles.popper, {
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0,
+            maxHeight: `${maxH}px`,
+            overflow: "hidden"
+          });
+        }
+      }
+    ]
+  };
+}
 var SearchableSelect = import_react6.default.memo(
   ({
     name,
@@ -1354,6 +1387,10 @@ var SearchableSelect = import_react6.default.memo(
     }, [selected, multiple]);
     const isValueEmpty = !value.trim();
     const showClear = onClear != null;
+    const searchableSelectPopperOptions = (0, import_react6.useMemo)(
+      () => createSearchableSelectPopperOptions(),
+      []
+    );
     return editMode ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.FormControl, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_material13.Autocomplete,
       {
@@ -1412,8 +1449,22 @@ var SearchableSelect = import_react6.default.memo(
         },
         slotProps: {
           popper: {
-            // Open above when there is more room above the field (Popper auto placement).
-            placement: "auto"
+            // Align with field width; only flip vertically (never left/right like placement "auto").
+            placement: "bottom-start",
+            modifiers: [
+              {
+                name: "flip",
+                options: {
+                  fallbackPlacements: [
+                    "top-start",
+                    "top",
+                    "bottom-start",
+                    "bottom"
+                  ]
+                }
+              }
+            ],
+            popperOptions: searchableSelectPopperOptions
           },
           paper: {
             sx: {
@@ -1421,10 +1472,12 @@ var SearchableSelect = import_react6.default.memo(
               backdropFilter: "blur(12px) saturate(150%)",
               border: `1px solid ${(0, import_styles13.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
               boxShadow: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.34) 0px 10px 26px" : "rgba(15, 23, 42, 0.16) 0px 8px 24px",
+              flex: 1,
+              minHeight: 0,
+              maxHeight: "100%",
               overflow: "hidden",
               display: "flex",
               flexDirection: "column",
-              maxHeight: "min(55vh, calc(100dvh - 96px))",
               "& .MuiAutocomplete-option": {
                 "&[aria-selected='true']": {
                   backgroundColor: (0, import_styles13.alpha)(
@@ -1444,9 +1497,10 @@ var SearchableSelect = import_react6.default.memo(
         },
         ListboxProps: {
           sx: {
+            // Override MUI default maxHeight: 40vh so the panel height comes from the Popper modifier only.
+            maxHeight: "none",
             flex: "1 1 auto",
             minHeight: 0,
-            maxHeight: "min(50vh, calc(100dvh - 120px))",
             overflowY: "auto",
             WebkitOverflowScrolling: "touch",
             overscrollBehavior: "contain",