@idealyst/components 1.2.16 → 1.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.16",
+    "@idealyst/theme": "^1.2.18",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -106,7 +106,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.16",
+    "@idealyst/theme": "^1.2.18",
     "@idealyst/tooling": "^1.2.4",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/View/View.styles.tsx

@@ -92,4 +92,15 @@ export const viewStyles = defineStyle('View', (theme: Theme) => ({
             boxSizing: 'border-box',
         },
     }),
+    // Web-only: Wrapper for scrollable view
+    scrollableWrapper: {
+        _web: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            position: 'relative',
+            boxSizing: 'border-box',
+            minHeight: 0, // Important for flex children to allow shrinking
+        },
+    },
 }));

package/src/View/View.web.tsx

@@ -47,6 +47,8 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
   // Call style as function to get theme-reactive styles
   /** @ts-ignore */
   const webProps = getWebProps((viewStyles.view as any)({}));
+  /** @ts-ignore */
+  const wrapperWebProps = getWebProps(viewStyles.scrollableWrapper);
 
   const mergedRef = useMergeRefs(ref, webProps.ref);
 
@@ -54,7 +56,7 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
   // Wrapper: sizing and margin (positioning in parent layout)
   // Content: absolutely positioned with overflow:auto, visual styles (padding, background, border)
   if (scrollable) {
-    // Extract layout/sizing styles for the wrapper, visual styles go to content
+    // Split user styles: layout/sizing to wrapper, visual styles to content
     const styleObj = (style as React.CSSProperties) || {};
     const {
       // Sizing - goes to wrapper
@@ -82,49 +84,46 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
       ...contentStyles
     } = styleObj;
 
-    const wrapperStyles: React.CSSProperties = {
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'relative',
-      boxSizing: 'border-box',
-      // If no explicit sizing, flex-grow to fill remaining space
-      ...(width === undefined && height === undefined && flex === undefined && { flex: 1 }),
-      // Apply sizing
-      width,
-      height,
-      minWidth,
-      minHeight: minHeight ?? 0, // Important for flex children to allow shrinking
-      maxWidth,
-      maxHeight,
-      // Apply flex properties
-      flex,
-      flexGrow,
-      flexShrink,
-      flexBasis,
-      alignSelf,
-      // Apply margin
-      margin,
-      marginTop,
-      marginRight,
-      marginBottom,
-      marginLeft,
-      marginBlock,
-      marginInline,
+    // Determine flex behavior:
+    // - If explicit flex is provided, use it
+    // - If explicit width/height are provided (without flex), disable flex
+    // - Otherwise, let Unistyles' flex:1 apply
+    const hasExplicitSize = width !== undefined || height !== undefined;
+    const flexValue = flex !== undefined ? flex : (hasExplicitSize ? 'none' : undefined);
+
+    // Only include defined values in wrapper styles
+    const wrapperUserStyles: React.CSSProperties = {
+      ...(width !== undefined && { width }),
+      ...(height !== undefined && { height }),
+      ...(minWidth !== undefined && { minWidth }),
+      ...(minHeight !== undefined && { minHeight }),
+      ...(maxWidth !== undefined && { maxWidth }),
+      ...(maxHeight !== undefined && { maxHeight }),
+      ...(flexValue !== undefined && { flex: flexValue }),
+      ...(flexGrow !== undefined && { flexGrow }),
+      ...(flexShrink !== undefined && { flexShrink }),
+      ...(flexBasis !== undefined && { flexBasis }),
+      ...(alignSelf !== undefined && { alignSelf }),
+      ...(margin !== undefined && { margin }),
+      ...(marginTop !== undefined && { marginTop }),
+      ...(marginRight !== undefined && { marginRight }),
+      ...(marginBottom !== undefined && { marginBottom }),
+      ...(marginLeft !== undefined && { marginLeft }),
+      ...(marginBlock !== undefined && { marginBlock }),
+      ...(marginInline !== undefined && { marginInline }),
     };
 
     return (
-      <div style={wrapperStyles}>
+      <div {...wrapperWebProps} style={wrapperUserStyles}>
         <div
           {...webProps}
           style={{
-            // Content is block (not flex) for natural scrolling behavior
-            display: 'block',
-            // Absolutely positioned to fill wrapper
+            // Critical: position/overflow must be enforced for scrolling
             position: 'absolute',
             inset: 0,
             overflow: 'auto',
             boxSizing: 'border-box',
-            // Apply visual styles (padding, background, border, etc.)
+            // User's visual styles
             ...contentStyles,
           }}
           ref={mergedRef}

package/src/examples/ViewExamples.tsx

@@ -165,6 +165,50 @@ export const ViewExamples = () => {
           </View>
         </View>
       </View>
+
+      {/* Scrollable with Flex Example */}
+      <View gap="md">
+        <Text typography="subtitle1">Scrollable with Flex</Text>
+        <Text typography="body2" color="secondary">
+          200x300px container with 100px header and flex:1 scrollable area
+        </Text>
+        <View
+          border="thin"
+          radius="md"
+          style={{ width: 200, height: 300 }}
+        >
+          {/* Fixed 100px header */}
+          <View
+            background="tertiary"
+            padding="sm"
+            style={{ height: 100, justifyContent: 'center', alignItems: 'center' }}
+          >
+            <Text typography="subtitle2">Header (100px)</Text>
+          </View>
+          {/* Flex scrollable content */}
+          <View
+            scrollable
+            background="secondary"
+            padding="md"
+            style={{ flex: 1 }}
+          >
+            <View>
+              <Text typography="body2">Scrollable content below header</Text>
+              <Text typography="body2">Line 2</Text>
+              <Text typography="body2">Line 3</Text>
+              <Text typography="body2">Line 4</Text>
+              <Text typography="body2">Line 5</Text>
+              <Text typography="body2">Line 6</Text>
+              <Text typography="body2">Line 7</Text>
+              <Text typography="body2">Line 8</Text>
+              <Text typography="body2">Line 9</Text>
+              <Text typography="body2">Line 10</Text>
+              <Text typography="body2">Line 11</Text>
+              <Text typography="body2">Line 12: End</Text>
+            </View>
+          </View>
+        </View>
+      </View>
     </View>
     </Screen>
   );