@thewhileloop/whileui 4.2.0 → 4.2.1

package/README.md

@@ -1490,7 +1490,8 @@ itself to the collision-available viewport, and wraps long option labels inside
 | blurTintToken | `'surfaceElevated' \| 'surfaceTranslucent' \| 'card' \| 'popover'` | `'popover'`   |
 
 `SelectContent` keeps its listbox inside the safe area by default; pass `insets` only to
-change that margin. Inside a Dialog, Sheet or other WhileUI overlay it renders in that
+change that margin. A list taller than the screen scrolls inside the listbox on every
+platform. Inside a Dialog, Sheet or other WhileUI overlay it renders in that
 overlay's layer automatically. Option values must be non-empty strings: the web
 primitive rejects `""`, so model "none" as an explicit value such as `'none'`.
 

package/dist/components/select/select.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Platform, ScrollView, StyleSheet, View, } from 'react-native';
+import { Platform, ScrollView, StyleSheet, useWindowDimensions, View, } from 'react-native';
 import * as SelectPrimitive from '@rn-primitives/select';
 import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
 import { Text } from '../text';
@@ -68,6 +68,11 @@ const SelectContent = React.forwardRef(({ className, children, portalHost, posit
     // without every caller reading the safe area itself.
     const defaultInsets = useOverlayInsets();
     const resolvedInsets = { ...defaultInsets, ...insets };
+    // Web caps the listbox with the primitive's available-height variable. Native has
+    // no equivalent: a list longer than the screen ran under the status bar with
+    // nothing to scroll, so the options get a scroll owner bounded by the insets.
+    const { height: windowHeight } = useWindowDimensions();
+    const nativeMaxHeight = windowHeight - resolvedInsets.top - resolvedInsets.bottom;
     // Radix applies its collision variables to the listbox wrapper, while
     // @rn-primitives renders our visual surface one level inside it. Keep the sizing
     // on that surface as inline web CSS: the Viewport's own `width: 100%` otherwise
@@ -94,7 +99,7 @@ const SelectContent = React.forwardRef(({ className, children, portalHost, posit
                     }, className: cn('border-border relative z-50 overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', Platform.select({
                         web: cn('overflow-y-auto overflow-x-hidden', props.side === 'bottom' && 'translate-y-1', props.side === 'top' && '-translate-y-1'),
                         native: 'p-1',
-                    }), className), ...props, children: [frostedSurface.overlay, _jsx(SelectPrimitive.Viewport, { className: "p-1", children: children })] }) }) }) }));
+                    }), className), ...props, children: [frostedSurface.overlay, _jsx(SelectPrimitive.Viewport, { className: "p-1", children: Platform.OS === 'web' ? (children) : (_jsx(ScrollView, { style: { maxHeight: nativeMaxHeight }, bounces: false, keyboardShouldPersistTaps: "handled", children: children })) })] }) }) }) }));
 });
 SelectContent.displayName = 'SelectContent';
 const SelectItem = React.forwardRef(({ className, children, style: styleProp, ...props }, ref) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhileloop/whileui",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "WhileUI Native — Copy-paste components for React Native. You own the code.",
   "license": "MIT",
   "repository": {