@hero-design/rn 8.138.0 → 8.138.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#5549](https://github.com/Thinkei/hero-design/pull/5549) [`59baec0`](https://github.com/Thinkei/hero-design/commit/59baec09b5e2e744e76b075c54d6613a65025b92) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [List.Item] Fix childrenContainerTopMargin applied unconditionally when title is absent
+
 ## 8.138.0
 
 ### Minor Changes

package/es/index.js

@@ -15770,13 +15770,15 @@ var StyledContentContainer = index$c(View)(function () {
   };
 });
 var StyledChildrenContainer = index$c(View)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
+  var theme = _ref2.theme,
+    themeHasTitle = _ref2.themeHasTitle;
+  return _objectSpread2({
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    alignItems: 'flex-start',
+    alignItems: 'flex-start'
+  }, themeHasTitle ? {
     marginTop: theme.__hd__.list.space.childrenContainerTopMargin
-  };
+  } : {});
 });
 var StyledLeadingStatus = index$c(View)(function (_ref3) {
   var theme = _ref3.theme,
@@ -15850,7 +15852,9 @@ var ListItem = function ListItem(_ref) {
     icon: suffix,
     intent: disabled ? 'disabled-text' : 'primary',
     size: "small"
-  }) : suffix)), children && /*#__PURE__*/React__default.createElement(StyledChildrenContainer, null, children))));
+  }) : suffix)), children && /*#__PURE__*/React__default.createElement(StyledChildrenContainer, {
+    themeHasTitle: !!title
+  }, children))));
 };
 
 var StyledPrefixContainer = index$c(View)(function (_ref) {
@@ -15931,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.
@@ -15947,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

@@ -15799,13 +15799,15 @@ var StyledContentContainer = index$c(reactNative.View)(function () {
   };
 });
 var StyledChildrenContainer = index$c(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
+  var theme = _ref2.theme,
+    themeHasTitle = _ref2.themeHasTitle;
+  return _objectSpread2({
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    alignItems: 'flex-start',
+    alignItems: 'flex-start'
+  }, themeHasTitle ? {
     marginTop: theme.__hd__.list.space.childrenContainerTopMargin
-  };
+  } : {});
 });
 var StyledLeadingStatus = index$c(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme,
@@ -15879,7 +15881,9 @@ var ListItem = function ListItem(_ref) {
     icon: suffix,
     intent: disabled ? 'disabled-text' : 'primary',
     size: "small"
-  }) : suffix)), children && /*#__PURE__*/React__namespace.default.createElement(StyledChildrenContainer, null, children))));
+  }) : suffix)), children && /*#__PURE__*/React__namespace.default.createElement(StyledChildrenContainer, {
+    themeHasTitle: !!title
+  }, children))));
 };
 
 var StyledPrefixContainer = index$c(reactNative.View)(function (_ref) {
@@ -15960,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.
@@ -15976,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.0",
+  "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) => {

package/src/components/List/ListItem.tsx

@@ -149,7 +149,9 @@ const ListItem = ({
             )}
           </View>
           {children && (
-            <StyledChildrenContainer>{children}</StyledChildrenContainer>
+            <StyledChildrenContainer themeHasTitle={!!title}>
+              {children}
+            </StyledChildrenContainer>
           )}
         </StyledContentContainer>
       </>

package/src/components/List/StyledListItem.tsx

@@ -44,12 +44,16 @@ const StyledContentContainer = styled(View)(() => ({
   flexGrow: 2,
 }));
 
-const StyledChildrenContainer = styled(View)(({ theme }) => ({
-  flexDirection: 'column',
-  justifyContent: 'flex-start',
-  alignItems: 'flex-start',
-  marginTop: theme.__hd__.list.space.childrenContainerTopMargin,
-}));
+const StyledChildrenContainer = styled(View)<{ themeHasTitle: boolean }>(
+  ({ theme, themeHasTitle }) => ({
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    ...(themeHasTitle
+      ? { marginTop: theme.__hd__.list.space.childrenContainerTopMargin }
+      : {}),
+  })
+);
 
 const StyledLeadingStatus = styled(View)<{
   themeLeadingStatusIntent: LeadingStatusIntent;

package/types/components/List/StyledListItem.d.ts

@@ -17,6 +17,8 @@ declare const StyledContentContainer: import("@emotion/native").StyledComponent<
 declare const StyledChildrenContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    themeHasTitle: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;