@hero-design/rn 8.138.1 → 8.138.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.138.2
+
+### Patch Changes
+
+- [#5551](https://github.com/Thinkei/hero-design/pull/5551) [`ddfb78e`](https://github.com/Thinkei/hero-design/commit/ddfb78e02e1a5098b0170271e21254e0bb2aa8fe) Thanks [@ttkien](https://github.com/ttkien)! - [List.Group] Fix missing divider between rows wrapped in a Fragment
+
 ## 8.138.1
 
 ### Patch Changes

package/es/index.js

@@ -15935,6 +15935,14 @@ var StyledListGroupContainer = index$c(View)(function (_ref) {
   };
 });
 
+var _flattenFragments = function flattenFragments(children) {
+  return React__default.Children.toArray(children).flatMap(function (child) {
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.type === React__default.Fragment) {
+      return _flattenFragments(child.props.children);
+    }
+    return [child];
+  });
+};
 var ERROR_CARD_VARIANT_UNSUPPORTED = 'List.Item with variant="card" is not supported inside List.Group. Use the default full-width variant instead.';
 // Typed `<T,>` rather than `ReactNode` so flatMap's inferred element type
 // stays narrow instead of widening to plain ReactNode, which broke type-check.
@@ -15951,7 +15959,7 @@ var ListGroup = function ListGroup(_ref) {
     style = _ref.style,
     marginHorizontal = _ref.marginHorizontal,
     testID = _ref.testID;
-  var rows = React__default.Children.toArray(children);
+  var rows = _flattenFragments(children);
   var lastIndex = rows.length - 1;
   var content = rows.flatMap(function (row, index) {
     if (/*#__PURE__*/React__default.isValidElement(row) && row.type === ListItem && row.props.variant === 'card') {

package/lib/index.js

@@ -15964,6 +15964,14 @@ var StyledListGroupContainer = index$c(reactNative.View)(function (_ref) {
   };
 });
 
+var _flattenFragments = function flattenFragments(children) {
+  return React__namespace.default.Children.toArray(children).flatMap(function (child) {
+    if (/*#__PURE__*/React__namespace.default.isValidElement(child) && child.type === React__namespace.default.Fragment) {
+      return _flattenFragments(child.props.children);
+    }
+    return [child];
+  });
+};
 var ERROR_CARD_VARIANT_UNSUPPORTED = 'List.Item with variant="card" is not supported inside List.Group. Use the default full-width variant instead.';
 // Typed `<T,>` rather than `ReactNode` so flatMap's inferred element type
 // stays narrow instead of widening to plain ReactNode, which broke type-check.
@@ -15980,7 +15988,7 @@ var ListGroup = function ListGroup(_ref) {
     style = _ref.style,
     marginHorizontal = _ref.marginHorizontal,
     testID = _ref.testID;
-  var rows = React__namespace.default.Children.toArray(children);
+  var rows = _flattenFragments(children);
   var lastIndex = rows.length - 1;
   var content = rows.flatMap(function (row, index) {
     if (/*#__PURE__*/React__namespace.default.isValidElement(row) && row.type === ListItem && row.props.variant === 'card') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.138.1",
+  "version": "8.138.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/List/ListGroup.tsx

@@ -7,6 +7,18 @@ import type { ListItemProps } from './ListItem';
 import { StyledListGroupContainer } from './StyledListGroup';
 import type { MarginHorizontal } from './StyledListGroup';
 
+const flattenFragments = (children: ReactNode): ReactNode[] => {
+  return React.Children.toArray(children).flatMap((child) => {
+    if (
+      React.isValidElement<{ children?: ReactNode }>(child) &&
+      child.type === React.Fragment
+    ) {
+      return flattenFragments(child.props.children);
+    }
+    return [child];
+  });
+};
+
 export const ERROR_CARD_VARIANT_UNSUPPORTED =
   'List.Item with variant="card" is not supported inside List.Group. Use the default full-width variant instead.';
 
@@ -49,7 +61,7 @@ const ListGroup = ({
   marginHorizontal,
   testID,
 }: ListGroupProps): ReactElement => {
-  const rows = React.Children.toArray(children);
+  const rows = flattenFragments(children);
   const lastIndex = rows.length - 1;
 
   const content: ReactNode[] = rows.flatMap((row, index) => {