@thewhileloop/whileui 4.2.0 → 4.2.3

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/blocks/layout/sheet.js

@@ -79,7 +79,7 @@ export function Sheet({ open, onOpenChange, children, maxHeight = 'full', maxWid
         widthStyle,
         frostedSurface.surfaceStyle,
     ];
-    return (_jsx(OverlayHost, { open: mounted, animationType: "none", onRequestClose: onClose, children: _jsxs(View, { className: "flex-1 justify-end", children: [_jsx(Animated.View, { style: [
+    return (_jsx(OverlayHost, { open: mounted, animationType: "none", onRequestClose: open ? onClose : undefined, children: _jsxs(View, { className: "flex-1 justify-end", children: [_jsx(Animated.View, { style: [
                         StyleSheet.absoluteFill,
                         { backgroundColor: frosted ? 'transparent' : colors.overlay },
                         backdropStyle,

package/dist/blocks/navigation/drawer-menu.js

@@ -125,5 +125,5 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
                     frostedSurface.surfaceStyle,
                     style,
                 ], className: drawerPanelClassName(frosted, className), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-1 pb-8", style: { paddingTop: contentTopPadding }, children: [header && _jsx(View, { className: "px-5 pb-4 mb-2 border-b border-border", children: header }), _jsx(DrawerSectionList, { sections: sections, activeKey: activeKey, onSelect: handleItemPress, interaction: interaction, visual: visual }), footer && _jsx(View, { className: "px-5 py-4 mt-auto border-t border-border", children: footer })] })] })] }));
-    return (_jsx(OverlayHost, { open: mounted, animationType: "none", onRequestClose: onClose, children: drawerTree }));
+    return (_jsx(OverlayHost, { open: mounted, animationType: "none", onRequestClose: visible ? onClose : undefined, children: drawerTree }));
 }

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/dist/lib/theme-colors.d.ts

@@ -1,8 +1,7 @@
 import { type ThemeColors } from './theme-contract';
 export type { ThemeColors } from './theme-contract';
 export declare function useThemeColors(): ThemeColors;
-/** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
-export declare function useIconColors(): {
+export interface IconColors {
     foreground: string;
     muted: string;
     primary: string;
@@ -12,6 +11,8 @@ export declare function useIconColors(): {
     success: string;
     info: string;
     destructive: string;
-};
+}
+/** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
+export declare function useIconColors(): IconColors;
 /** Alias for useThemeColors. Returns RN-safe color strings (hex/rgb/rgba) for RefreshControl, LinearGradient, charts. */
 export declare const useThemeTokens: typeof useThemeColors;

package/dist/lib/theme-colors.js

@@ -41,10 +41,29 @@ function resolveThemeToken(cssValue, appValue) {
     }
     return parseThemeColor(cssValue) ?? parseThemeColor(appValue);
 }
+// Every themed component calls this hook on every render, and parsing 104 colour
+// strings plus deriving the palette cost about 0.16 ms per call in Node, several times
+// that under Hermes. The inputs only change with the theme, so the result is derived
+// once per distinct snapshot and shared: the same object comes back until the CSS
+// variables change, which also keeps it stable for downstream memoisation.
+const resolvedThemeColors = new Map();
+const RESOLVED_THEME_LIMIT = 8;
 export function useThemeColors() {
     const { theme } = useUniwind();
     const values = useCSSVariable(THEME_TOKEN_VARIABLES);
     const scheme = theme === 'dark' ? 'dark' : 'light';
+    const key = `${scheme}\u0001${values.join('\u0001')}`;
+    const cached = resolvedThemeColors.get(key);
+    if (cached)
+        return cached;
+    const resolved = resolveThemeColors(values, scheme);
+    if (resolvedThemeColors.size >= RESOLVED_THEME_LIMIT) {
+        resolvedThemeColors.delete(resolvedThemeColors.keys().next().value);
+    }
+    resolvedThemeColors.set(key, resolved);
+    return resolved;
+}
+function resolveThemeColors(values, scheme) {
     const fallbackPalette = scheme === 'dark' ? WHILEUI_DARK_THEME_COLORS : WHILEUI_LIGHT_THEME_COLORS;
     const defined = {};
     let index = 0;
@@ -61,10 +80,14 @@ export function useThemeColors() {
     const derived = deriveThemeColors(base, scheme);
     return { ...derived, ...defined, placeholder: derived.placeholder };
 }
+const iconColorsByTheme = new WeakMap();
 /** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
 export function useIconColors() {
     const c = useThemeColors();
-    return {
+    const cached = iconColorsByTheme.get(c);
+    if (cached)
+        return cached;
+    const icons = {
         foreground: c.foreground,
         muted: c.mutedForeground,
         primary: c.primary,
@@ -75,6 +98,8 @@ export function useIconColors() {
         info: c.info,
         destructive: c.destructive,
     };
+    iconColorsByTheme.set(c, icons);
+    return icons;
 }
 /** Alias for useThemeColors. Returns RN-safe color strings (hex/rgb/rgba) for RefreshControl, LinearGradient, charts. */
 export const useThemeTokens = useThemeColors;

package/dist/lib/visual-tokens.js

@@ -28,11 +28,24 @@ function resolveVisualToken(spec, value) {
     }
     return parseRatio(value, spec.fallback, spec.min ?? 0, spec.max ?? 1);
 }
+// Resolved once per distinct CSS snapshot and shared, for the same reason as
+// `useThemeColors`: 83 parses per component per render add up on a list screen, and a
+// stable object lets callers memoise on it.
+const resolvedVisualTokens = new Map();
+const RESOLVED_VISUAL_LIMIT = 8;
 export function useVisualTokens() {
     const values = useCSSVariable(VISUAL_TOKEN_VARIABLES);
+    const key = values.join('\u0001');
+    const cached = resolvedVisualTokens.get(key);
+    if (cached)
+        return cached;
     const resolved = {};
     VISUAL_TOKEN_SPECS.forEach((spec, index) => {
         resolved[spec.key] = resolveVisualToken(spec, values[index]);
     });
+    if (resolvedVisualTokens.size >= RESOLVED_VISUAL_LIMIT) {
+        resolvedVisualTokens.delete(resolvedVisualTokens.keys().next().value);
+    }
+    resolvedVisualTokens.set(key, resolved);
     return resolved;
 }

package/dist/metro.cjs

@@ -12,6 +12,11 @@ const { withUniwindConfig } = require('uniwind/metro');
 const NEEDS_REAL_REACT_NATIVE = ['expo-asset', 'expo-font', '@expo/vector-icons'];
 
 function withWhileUIMetro(config, options) {
+  if (!options || typeof options.cssEntryFile !== 'string') {
+    throw new Error(
+      "withWhileUIMetro(config, options): pass Uniwind's options, at least { cssEntryFile: './global.css' }"
+    );
+  }
   const { exemptFromUniwindRewrite = [], ...uniwindOptions } = options;
   const wrapped = withUniwindConfig(config, uniwindOptions);
   const exempt = [...NEEDS_REAL_REACT_NATIVE, ...exemptFromUniwindRewrite];
@@ -19,7 +24,8 @@ function withWhileUIMetro(config, options) {
 
   wrapped.resolver.resolveRequest = (context, moduleName, platform) => {
     if (moduleName === 'react-native') {
-      const origin = context.originModulePath ?? '';
+      // Metro reports Windows paths with backslashes; match either separator.
+      const origin = (context.originModulePath ?? '').replace(/\\/g, '/');
       if (exempt.some((pkg) => origin.includes(`node_modules/${pkg}/`))) {
         return context.resolveRequest(context, moduleName, platform);
       }

package/package.json

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