@verma-consulting/design-library 0.1.41 → 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,
       {
@@ -1411,12 +1448,36 @@ var SearchableSelect = import_react6.default.memo(
           }
         },
         slotProps: {
+          popper: {
+            // 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: {
               background: glassBackground,
               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",
               "& .MuiAutocomplete-option": {
                 "&[aria-selected='true']": {
                   backgroundColor: (0, import_styles13.alpha)(
@@ -1434,6 +1495,18 @@ 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,
+            overflowY: "auto",
+            WebkitOverflowScrolling: "touch",
+            overscrollBehavior: "contain",
+            touchAction: "pan-y"
+          }
+        },
         renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_material13.TextField,
           {