fix: resolve PR review comments for InfoGroup native implementation [resolved by agent]

Co-authored-by: admin <admin>

Author: rzp-slash[bot]

packages/blade/src/components/InfoGroup/InfoGroup.native.tsx

@@ -226,7 +226,7 @@ const _InfoItemValue = (
       ref={ref as never}
       display="flex"
       flexDirection="row"
-      alignItems="flex-start"
+      alignItems="center"
       // Horizontal: `flex={1}` grows the value to fill the row beside the fixed label column.
       // Vertical: the value sits BELOW the label inside a flex COLUMN, where `flex={1}` would
       // (wrongly) grow it along the vertical axis; instead stretch it to the full cell width so
@@ -400,7 +400,8 @@ const InfoItem = assignWithoutSideEffects(React.forwardRef(_InfoItem), {
  * column count with an equal-width wrapping flex layout (each cell gets width `100 / N %`).
  *
  * We only need to handle the two shapes InfoGroup actually uses:
- *   - `repeat(N, ...)` / `repeat(min(N, ...), ...)`  -> N  (web default is `repeat(min(4, count), 1fr)`)
+ *   - `repeat(N, ...)` / `repeat(min(N, M), ...)` / `repeat(max(N, M), ...)`  -> N or min/max(N, M)
+ *     (web default is `repeat(min(4, count), 1fr)`)
  *   - an explicit track list, e.g. `1fr`, `1fr 1fr`, `50% 50%` -> number of tracks
  *   - undefined / unrecognized -> `min(4, childCount)` (mirrors the web default)
  */
@@ -413,13 +414,26 @@ const getVerticalColumnCount = (
   const template = String(gridTemplateColumns ?? '').trim();
   if (!template) return fallback;
 
-  // `repeat(N, ...)` / `repeat(min(N, ...), ...)` -> the leading integer is the column count.
-  const repeatMatch = /repeat\(\s*(?:min|max|minmax)?\(?\s*(\d+)/i.exec(template);
-  if (repeatMatch) {
-    const parsed = parseInt(repeatMatch[1], 10);
+  // `repeat(N, ...)` -> N is the column count.
+  // `repeat(min(N, M), ...)` -> Math.min(N, M) is the column count.
+  // `repeat(max(N, M), ...)` -> Math.max(N, M) is the column count.
+  // `repeat(minmax(N, M), ...)` -> N is a reasonable default (the min track count).
+  const simpleRepeatMatch = /repeat\(\s*(\d+)/i.exec(template);
+  if (simpleRepeatMatch) {
+    const parsed = parseInt(simpleRepeatMatch[1], 10);
     return parsed > 0 ? parsed : fallback;
   }
 
+  const minRepeatMatch = /repeat\(\s*min\(\s*(\d+)\s*,\s*(\d+)/i.exec(template);
+  if (minRepeatMatch) {
+    return Math.min(parseInt(minRepeatMatch[1], 10), parseInt(minRepeatMatch[2], 10));
+  }
+
+  const maxRepeatMatch = /repeat\(\s*max\(\s*(\d+)\s*,\s*(\d+)/i.exec(template);
+  if (maxRepeatMatch) {
+    return Math.max(parseInt(maxRepeatMatch[1], 10), parseInt(maxRepeatMatch[2], 10));
+  }
+
   // Explicit track list -> number of whitespace-separated tracks.
   const tracks = template.split(/\s+/).filter(Boolean).length;
   return tracks > 0 ? tracks : fallback;
@@ -506,7 +520,9 @@ const _InfoGroup = (
         {!isHorizontal
           ? React.Children.map(children, (child, index) => {
               if (!React.isValidElement(child)) return child;
-              const isLastColumn = index % verticalColumnCount === verticalColumnCount - 1;
+              const isLastColumn =
+                index % verticalColumnCount === verticalColumnCount - 1 ||
+                index === childCount - 1;
               const isLastRow = Math.floor(index / verticalColumnCount) === verticalRowCount - 1;
               return (
                 <BaseBox

packages/blade/src/components/InfoGroup/__tests__/InfoGroup.native.test.tsx

@@ -55,10 +55,7 @@ describe('<InfoGroup /> (native)', () => {
   });
 
   it('should render InfoGroup with gridTemplateColumns prop without crashing (prop is ignored on native)', () => {
-    // gridTemplateColumns is a web-only CSS prop; on native it resolves to `never`.
-    // We cast it here to verify the component doesn't crash when it receives the prop.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const gridTemplateColumns = '50% 50%' as any;
+    const gridTemplateColumns = '50% 50%';
     const { toJSON } = renderWithTheme(
       <InfoGroup gridTemplateColumns={gridTemplateColumns}>
         <InfoItem>
@@ -279,9 +276,7 @@ describe('<InfoGroup /> (native)', () => {
 
   it('should render vertical InfoGroup with gridTemplateColumns="1fr" as a single stacked column', () => {
     const { toJSON } = renderWithTheme(
-      // gridTemplateColumns is a web CSS type; cast for the native emulation path.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      <InfoGroup itemOrientation="vertical" isHighlighted gridTemplateColumns={'1fr' as any}>
+      <InfoGroup itemOrientation="vertical" isHighlighted gridTemplateColumns={'1fr'}>
         <InfoItem>
           <InfoItemKey>Account Holder</InfoItemKey>
           <InfoItemValue>Saurabh Daware</InfoItemValue>
@@ -297,8 +292,7 @@ describe('<InfoGroup /> (native)', () => {
 
   it('should render vertical InfoGroup with gridTemplateColumns="1fr 1fr" as two equal columns', () => {
     const { toJSON } = renderWithTheme(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      <InfoGroup itemOrientation="vertical" gridTemplateColumns={'1fr 1fr' as any}>
+      <InfoGroup itemOrientation="vertical" gridTemplateColumns={'1fr 1fr'}>
         <InfoItem>
           <InfoItemKey>Account Holder</InfoItemKey>
           <InfoItemValue>Saurabh Daware</InfoItemValue>
@@ -318,8 +312,7 @@ describe('<InfoGroup /> (native)', () => {
 
   it('should render vertical InfoGroup with gridTemplateColumns="repeat(2, 1fr)" as two equal columns', () => {
     const { toJSON } = renderWithTheme(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      <InfoGroup itemOrientation="vertical" gridTemplateColumns={'repeat(2, 1fr)' as any}>
+      <InfoGroup itemOrientation="vertical" gridTemplateColumns={'repeat(2, 1fr)'}>
         <InfoItem>
           <InfoItemKey>Account Holder</InfoItemKey>
           <InfoItemValue>Saurabh Daware</InfoItemValue>

packages/blade/src/components/InfoGroup/types.ts

@@ -3,6 +3,7 @@ import type { StringChildrenType, TestID } from '~utils/types';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { BoxProps } from '~components/Box';
 import type { TextColors } from '~components/Typography/BaseText/types';
+import type { Platform } from '~utils';
 
 export type InfoGroupProps = {
   /**
@@ -32,10 +33,13 @@ export type InfoGroupProps = {
   /**
    * Custom grid template columns for the InfoGroup layout
    *
+   * On web this accepts CSS grid template column values (e.g. `'1fr 1fr'`, `'repeat(2, 1fr)'`).
+   * On native this accepts a string that is parsed to emulate the column count (e.g. `'1fr 1fr'`, `'repeat(2, 1fr)'`).
+   *
    * @default 'max-content 1fr' for horizontal itemOrientation
    * @default 'repeat(min(4, ${React.Children.count(children)}), 1fr)' for vertical itemOrientation
    */
-  gridTemplateColumns?: BoxProps['gridAutoColumns'];
+  gridTemplateColumns?: Platform.Select<{ web: BoxProps['gridAutoColumns']; native: string }>;
 
   /**
    * Children should be InfoItem components