cetec-design-system 3.2.0-0 → 3.2.1-0

package/dist/index.js

@@ -2649,7 +2649,8 @@ const menuFn = memo((props = {}) => {
 const menuVariantKeys = [
   "layer",
   "density",
-  "panel"
+  "panel",
+  "scrollable"
 ];
 const getVariantProps$a = (variants) => ({ ...menuDefaultVariants, ...compact(variants) });
 const menu = /* @__PURE__ */ Object.assign(menuFn, {
@@ -2670,6 +2671,9 @@ const menu = /* @__PURE__ */ Object.assign(menuFn, {
     ],
     "panel": [
       "true"
+    ],
+    "scrollable": [
+      "true"
     ]
   },
   splitVariantProps(props) {
@@ -23238,9 +23242,19 @@ const Select = (props) => {
     middleware: createOverlayMiddleware({
       offset: offset2,
       extras: [
+        // Floating UI only positions the listbox; without a height cap a long
+        // option list overflows the viewport on whichever side flip() picks.
+        // Only measured values are written here; the `menu` recipe's
+        // `scrollable` variant applies the cap and scrolling. `padding`
+        // mirrors the overlay middleware's default `shiftPadding`.
         size({
-          apply({ rects, elements }) {
+          padding: 8,
+          apply({ rects, elements, availableHeight }) {
             elements.floating.style.minWidth = `${rects.reference.width}px`;
+            elements.floating.style.setProperty(
+              "--available-height",
+              `${Math.max(availableHeight, 0)}px`
+            );
           }
         })
       ]
@@ -23248,6 +23262,14 @@ const Select = (props) => {
   });
   const itemRefs = useRef([]);
   const labelsRef = useRef([]);
+  const { isPositioned } = floating;
+  useLayoutEffect(() => {
+    var _a;
+    if (!isOpen || !isPositioned || initialActiveIndex === null) {
+      return;
+    }
+    (_a = itemRefs.current[initialActiveIndex]) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+  }, [isOpen, isPositioned]);
   const click = useClick(floating.context, {
     enabled: !disabled
   });
@@ -23279,7 +23301,11 @@ const Select = (props) => {
   );
   const selectedOptions = getSelectedOptions(options, value, multiple);
   const classes = select({ size: size$12, multiple, autoSize });
-  const menuClasses = menu({ density, layer: floatingLayer });
+  const menuClasses = menu({
+    density,
+    layer: floatingLayer,
+    scrollable: true
+  });
   const hasValue = value !== null && value !== void 0 && value !== "";
   const chipSize = resolveChipSize(size$12);
   const accessibleName = typeof displayValue === "string" && displayValue.length > 0 ? displayValue : placeholder;