@hero-design/rn 8.135.1 → 8.136.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @hero-design/rn
 
+## 8.136.1
+
+### Patch Changes
+
+- [#5482](https://github.com/Thinkei/hero-design/pull/5482) [`d72cd39`](https://github.com/Thinkei/hero-design/commit/d72cd3990c6e614cdc1358b5811b4461b317ae29) Thanks [@ttkien](https://github.com/ttkien)! - [Progress.SegmentedBar] Fix muted intent applied to wrong legend text
+
+## 8.136.0
+
+### Minor Changes
+
+- [#5431](https://github.com/Thinkei/hero-design/pull/5431) [`a921554`](https://github.com/Thinkei/hero-design/commit/a921554bad1514779864fde5740d2b17c059f15e) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [List] Add List.Group component
+
+### Patch Changes
+
+- [#5431](https://github.com/Thinkei/hero-design/pull/5431) [`a921554`](https://github.com/Thinkei/hero-design/commit/a921554bad1514779864fde5740d2b17c059f15e) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [List] Square off row corners at the top and bottom of List.Group so it reads as one continuous shape
+
 ## 8.135.1
 
 ### Patch Changes

package/es/index.js

@@ -6468,6 +6468,7 @@ var getListTheme = function getListTheme(theme) {
   var colors = {
     checkedListItemContainerBackground: theme.colors.decorativeSecondarySurface,
     listItemContainerBackground: theme.colors.defaultGlobalSurface,
+    listGroupContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
       danger: theme.colors.error,
       info: theme.colors.info,
@@ -6481,12 +6482,19 @@ var getListTheme = function getListTheme(theme) {
     leadingStatusMarginRight: theme.space.small,
     prefixContainerMarginRight: theme.space.small,
     suffixContainerMarginLeft: theme.space.small,
-    childrenContainerTopMargin: theme.space.small
+    childrenContainerTopMargin: theme.space.small,
+    listGroupMarginHorizontal: {
+      none: 0,
+      small: theme.space.small,
+      medium: theme.space.medium,
+      large: theme.space.large
+    }
   };
   var radii = {
     item: theme.radii.medium,
     basicItem: theme.radii.base,
-    leadingStatus: theme.radii.rounded
+    leadingStatus: theme.radii.rounded,
+    group: theme.radii.xlarge
   };
   var shadows = {
     card: theme.shadows["default"]
@@ -15906,9 +15914,72 @@ var BasicListItem = function BasicListItem(_ref) {
   }) : suffix)));
 };
 
+var StyledListGroupContainer = index$c(View)(function (_ref) {
+  var theme = _ref.theme,
+    themeMarginHorizontal = _ref.themeMarginHorizontal;
+  return {
+    backgroundColor: theme.__hd__.list.colors.listGroupContainerBackground,
+    borderRadius: theme.__hd__.list.radii.group,
+    overflow: 'hidden',
+    marginHorizontal: theme.__hd__.list.space.listGroupMarginHorizontal[themeMarginHorizontal !== null && themeMarginHorizontal !== void 0 ? themeMarginHorizontal : 'medium']
+  };
+});
+
+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.
+var overrideRowRadius = function overrideRowRadius(row, overrideStyle) {
+  if (! /*#__PURE__*/React__default.isValidElement(row)) {
+    return row;
+  }
+  return /*#__PURE__*/React__default.cloneElement(row, {
+    style: [row.props.style, overrideStyle]
+  });
+};
+var ListGroup = function ListGroup(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    marginHorizontal = _ref.marginHorizontal,
+    testID = _ref.testID;
+  var rows = React__default.Children.toArray(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') {
+      throw new Error(ERROR_CARD_VARIANT_UNSUPPORTED);
+    }
+    var processedRow = row;
+    if (rows.length > 1 && index === 0) {
+      processedRow = overrideRowRadius(processedRow, {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      });
+    }
+    if (rows.length > 1 && index === lastIndex) {
+      processedRow = overrideRowRadius(processedRow, {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      });
+    }
+    if (index === 0) {
+      return [processedRow];
+    }
+    var dividerKey = /*#__PURE__*/React__default.isValidElement(row) ? row.key : index;
+    return [/*#__PURE__*/React__default.createElement(Divider, {
+      key: "list-group-divider-".concat(dividerKey),
+      testID: "list-group-divider"
+    }), processedRow];
+  });
+  return /*#__PURE__*/React__default.createElement(StyledListGroupContainer, {
+    style: style,
+    themeMarginHorizontal: marginHorizontal,
+    testID: testID
+  }, content);
+};
+
 var List$1 = {
   Item: ListItem,
-  BasicItem: BasicListItem
+  BasicItem: BasicListItem,
+  Group: ListGroup
 };
 
 var StyledHeaderContainer = index$c(View)({
@@ -26655,14 +26726,14 @@ var ProgressSegmentedBarLegendItem = function ProgressSegmentedBarLegendItem(_re
     color = _ref.color,
     displayValue = _ref.displayValue,
     testID = _ref.testID;
-  var renderedDisplayValue = getTextComponent(displayValue, /*#__PURE__*/React__default.createElement(Typography.Caption, {
-    intent: "muted"
-  }, displayValue));
+  var renderedDisplayValue = getTextComponent(displayValue, /*#__PURE__*/React__default.createElement(Typography.Caption, null, displayValue));
   return /*#__PURE__*/React__default.createElement(LegendItem, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(LegendCircle, {
     themeColor: color
-  }), /*#__PURE__*/React__default.createElement(Typography.Caption, null, "".concat(title, ":")), renderedDisplayValue ? /*#__PURE__*/React__default.createElement(LegendValue, null, renderedDisplayValue) : null);
+  }), /*#__PURE__*/React__default.createElement(Typography.Caption, {
+    intent: "muted"
+  }, "".concat(title, ":")), renderedDisplayValue ? /*#__PURE__*/React__default.createElement(LegendValue, null, renderedDisplayValue) : null);
 };
 
 var StyledHeader = index$c(Box)(function (_ref) {

package/eslint.config.js

@@ -1,24 +1,16 @@
 const heroDesign = require('@hero-design/eslint-plugin');
-const _import = require('eslint-plugin-import');
-const { FlatCompat } = require('@eslint/eslintrc');
 const { includeIgnoreFile } = require('@eslint/compat');
 const path = require('path');
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
+const hdConfig = require('eslint-config-hd');
 
 const gitignorePath = path.resolve(__dirname, '../../.gitignore');
 
 module.exports = [
-  ...compat.extends('hd', 'plugin:@hero-design/recommendedRn'),
+  ...hdConfig,
+  ...heroDesign.configs.recommendedRn,
   includeIgnoreFile(gitignorePath),
   {
     files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
-    plugins: {
-      '@hero-design': heroDesign,
-      import: _import,
-    },
     languageOptions: {
       parserOptions: {
         tsconfigRootDir: __dirname,

package/lib/index.js

@@ -6497,6 +6497,7 @@ var getListTheme = function getListTheme(theme) {
   var colors = {
     checkedListItemContainerBackground: theme.colors.decorativeSecondarySurface,
     listItemContainerBackground: theme.colors.defaultGlobalSurface,
+    listGroupContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
       danger: theme.colors.error,
       info: theme.colors.info,
@@ -6510,12 +6511,19 @@ var getListTheme = function getListTheme(theme) {
     leadingStatusMarginRight: theme.space.small,
     prefixContainerMarginRight: theme.space.small,
     suffixContainerMarginLeft: theme.space.small,
-    childrenContainerTopMargin: theme.space.small
+    childrenContainerTopMargin: theme.space.small,
+    listGroupMarginHorizontal: {
+      none: 0,
+      small: theme.space.small,
+      medium: theme.space.medium,
+      large: theme.space.large
+    }
   };
   var radii = {
     item: theme.radii.medium,
     basicItem: theme.radii.base,
-    leadingStatus: theme.radii.rounded
+    leadingStatus: theme.radii.rounded,
+    group: theme.radii.xlarge
   };
   var shadows = {
     card: theme.shadows["default"]
@@ -15935,9 +15943,72 @@ var BasicListItem = function BasicListItem(_ref) {
   }) : suffix)));
 };
 
+var StyledListGroupContainer = index$c(reactNative.View)(function (_ref) {
+  var theme = _ref.theme,
+    themeMarginHorizontal = _ref.themeMarginHorizontal;
+  return {
+    backgroundColor: theme.__hd__.list.colors.listGroupContainerBackground,
+    borderRadius: theme.__hd__.list.radii.group,
+    overflow: 'hidden',
+    marginHorizontal: theme.__hd__.list.space.listGroupMarginHorizontal[themeMarginHorizontal !== null && themeMarginHorizontal !== void 0 ? themeMarginHorizontal : 'medium']
+  };
+});
+
+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.
+var overrideRowRadius = function overrideRowRadius(row, overrideStyle) {
+  if (! /*#__PURE__*/React__namespace.default.isValidElement(row)) {
+    return row;
+  }
+  return /*#__PURE__*/React__namespace.default.cloneElement(row, {
+    style: [row.props.style, overrideStyle]
+  });
+};
+var ListGroup = function ListGroup(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    marginHorizontal = _ref.marginHorizontal,
+    testID = _ref.testID;
+  var rows = React__namespace.default.Children.toArray(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') {
+      throw new Error(ERROR_CARD_VARIANT_UNSUPPORTED);
+    }
+    var processedRow = row;
+    if (rows.length > 1 && index === 0) {
+      processedRow = overrideRowRadius(processedRow, {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      });
+    }
+    if (rows.length > 1 && index === lastIndex) {
+      processedRow = overrideRowRadius(processedRow, {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      });
+    }
+    if (index === 0) {
+      return [processedRow];
+    }
+    var dividerKey = /*#__PURE__*/React__namespace.default.isValidElement(row) ? row.key : index;
+    return [/*#__PURE__*/React__namespace.default.createElement(Divider, {
+      key: "list-group-divider-".concat(dividerKey),
+      testID: "list-group-divider"
+    }), processedRow];
+  });
+  return /*#__PURE__*/React__namespace.default.createElement(StyledListGroupContainer, {
+    style: style,
+    themeMarginHorizontal: marginHorizontal,
+    testID: testID
+  }, content);
+};
+
 var List$1 = {
   Item: ListItem,
-  BasicItem: BasicListItem
+  BasicItem: BasicListItem,
+  Group: ListGroup
 };
 
 var StyledHeaderContainer = index$c(reactNative.View)({
@@ -26684,14 +26755,14 @@ var ProgressSegmentedBarLegendItem = function ProgressSegmentedBarLegendItem(_re
     color = _ref.color,
     displayValue = _ref.displayValue,
     testID = _ref.testID;
-  var renderedDisplayValue = getTextComponent(displayValue, /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, {
-    intent: "muted"
-  }, displayValue));
+  var renderedDisplayValue = getTextComponent(displayValue, /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, null, displayValue));
   return /*#__PURE__*/React__namespace.default.createElement(LegendItem, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(LegendCircle, {
     themeColor: color
-  }), /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, null, "".concat(title, ":")), renderedDisplayValue ? /*#__PURE__*/React__namespace.default.createElement(LegendValue, null, renderedDisplayValue) : null);
+  }), /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, {
+    intent: "muted"
+  }, "".concat(title, ":")), renderedDisplayValue ? /*#__PURE__*/React__namespace.default.createElement(LegendValue, null, renderedDisplayValue) : null);
 };
 
 var StyledHeader = index$c(Box)(function (_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.135.1",
+  "version": "8.136.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -62,9 +62,8 @@
     "@babel/runtime": "^7.29.7",
     "@emotion/jest": "^11.11.0",
     "@eslint/compat": "^1.1.1",
-    "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@hero-design/eslint-plugin": "9.2.4",
+    "@hero-design/eslint-plugin": "10.0.0",
     "@hero-design/react-native-month-year-picker": "^8.46.1",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "8.4.4",
@@ -88,7 +87,7 @@
     "@typescript-eslint/eslint-plugin": "^8.57.0",
     "babel-plugin-inline-import": "^3.0.0",
     "core-js": "^3.33.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "eslint-config-hd": "8.42.7",
     "expo-linear-gradient": "55.0.9",
     "jest": "^29.7.0",

package/src/components/List/ListGroup.tsx

@@ -0,0 +1,106 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Divider from '../Divider';
+import ListItem from './ListItem';
+import type { ListItemProps } from './ListItem';
+import { StyledListGroupContainer } from './StyledListGroup';
+import type { MarginHorizontal } from './StyledListGroup';
+
+export const 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.
+const overrideRowRadius = <T,>(row: T, overrideStyle: ViewStyle): T => {
+  if (!React.isValidElement<{ style?: StyleProp<ViewStyle> }>(row)) {
+    return row;
+  }
+
+  return React.cloneElement(row, {
+    style: [row.props.style, overrideStyle],
+  }) as unknown as T;
+};
+
+export interface ListGroupProps {
+  /**
+   * List.Item and/or List.BasicItem rows to render as one bounded, divided group.
+   */
+  children: ReactNode;
+  /**
+   * Additional wrapper style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Horizontal margin applied so the group never renders flush against a screen edge.
+   * Default is 'medium'. Pass 'none' for screens that already apply their own side
+   * gutter, to avoid doubled spacing.
+   */
+  marginHorizontal?: MarginHorizontal;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const ListGroup = ({
+  children,
+  style,
+  marginHorizontal,
+  testID,
+}: ListGroupProps): ReactElement => {
+  const rows = React.Children.toArray(children);
+  const lastIndex = rows.length - 1;
+
+  const content: ReactNode[] = rows.flatMap((row, index) => {
+    if (
+      React.isValidElement<ListItemProps>(row) &&
+      row.type === ListItem &&
+      row.props.variant === 'card'
+    ) {
+      throw new Error(ERROR_CARD_VARIANT_UNSUPPORTED);
+    }
+
+    let processedRow = row;
+
+    if (rows.length > 1 && index === 0) {
+      processedRow = overrideRowRadius(processedRow, {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+      });
+    }
+
+    if (rows.length > 1 && index === lastIndex) {
+      processedRow = overrideRowRadius(processedRow, {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+      });
+    }
+
+    if (index === 0) {
+      return [processedRow];
+    }
+
+    const dividerKey = React.isValidElement(row) ? row.key : index;
+
+    return [
+      <Divider
+        key={`list-group-divider-${dividerKey}`}
+        testID="list-group-divider"
+      />,
+      processedRow,
+    ];
+  });
+
+  return (
+    <StyledListGroupContainer
+      style={style}
+      themeMarginHorizontal={marginHorizontal}
+      testID={testID}
+    >
+      {content}
+    </StyledListGroupContainer>
+  );
+};
+
+export default ListGroup;

package/src/components/List/StyledListGroup.tsx

@@ -0,0 +1,19 @@
+import { View } from 'react-native';
+import styled from '@emotion/native';
+
+type MarginHorizontal = 'none' | 'small' | 'medium' | 'large';
+
+const StyledListGroupContainer = styled(View)<{
+  themeMarginHorizontal?: MarginHorizontal;
+}>(({ theme, themeMarginHorizontal }) => ({
+  backgroundColor: theme.__hd__.list.colors.listGroupContainerBackground,
+  borderRadius: theme.__hd__.list.radii.group,
+  overflow: 'hidden',
+  marginHorizontal:
+    theme.__hd__.list.space.listGroupMarginHorizontal[
+      themeMarginHorizontal ?? 'medium'
+    ],
+}));
+
+export { StyledListGroupContainer };
+export type { MarginHorizontal };

package/src/components/List/index.tsx

@@ -1,5 +1,6 @@
 import ListItem from './ListItem';
 import BasicListItem from './BasicListItem';
+import ListGroup from './ListGroup';
 
 export type { ListItemProps } from './ListItem';
 export type { BasicListItemProps } from './BasicListItem';
@@ -7,11 +8,13 @@ export type { BasicListItemProps } from './BasicListItem';
 interface ListType {
   Item: typeof ListItem;
   BasicItem: typeof BasicListItem;
+  Group: typeof ListGroup;
 }
 
 const List: ListType = {
   Item: ListItem,
   BasicItem: BasicListItem,
+  Group: ListGroup,
 };
 
 export default List;

package/src/components/Progress/SegmentedBar/Legend.tsx

@@ -22,13 +22,13 @@ const ProgressSegmentedBarLegendItem = ({
 }: ProgressSegmentedBarLegendItemProps): ReactNode => {
   const renderedDisplayValue = getTextComponent(
     displayValue,
-    <Typography.Caption intent="muted">{displayValue}</Typography.Caption>
+    <Typography.Caption>{displayValue}</Typography.Caption>
   );
 
   return (
     <LegendItem testID={testID}>
       <LegendCircle themeColor={color} />
-      <Typography.Caption>{`${title}:`}</Typography.Caption>
+      <Typography.Caption intent="muted">{`${title}:`}</Typography.Caption>
       {renderedDisplayValue ? (
         <LegendValue>{renderedDisplayValue}</LegendValue>
       ) : null}

package/src/theme/components/list.ts

@@ -4,6 +4,7 @@ const getListTheme = (theme: GlobalTheme) => {
   const colors = {
     checkedListItemContainerBackground: theme.colors.decorativeSecondarySurface,
     listItemContainerBackground: theme.colors.defaultGlobalSurface,
+    listGroupContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
       danger: theme.colors.error,
       info: theme.colors.info,
@@ -19,12 +20,19 @@ const getListTheme = (theme: GlobalTheme) => {
     prefixContainerMarginRight: theme.space.small,
     suffixContainerMarginLeft: theme.space.small,
     childrenContainerTopMargin: theme.space.small,
+    listGroupMarginHorizontal: {
+      none: 0,
+      small: theme.space.small,
+      medium: theme.space.medium,
+      large: theme.space.large,
+    },
   };
 
   const radii = {
     item: theme.radii.medium,
     basicItem: theme.radii.base,
     leadingStatus: theme.radii.rounded,
+    group: theme.radii.xlarge,
   };
 
   const shadows = {

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

@@ -0,0 +1,26 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { MarginHorizontal } from './StyledListGroup';
+export declare const ERROR_CARD_VARIANT_UNSUPPORTED = "List.Item with variant=\"card\" is not supported inside List.Group. Use the default full-width variant instead.";
+export interface ListGroupProps {
+    /**
+     * List.Item and/or List.BasicItem rows to render as one bounded, divided group.
+     */
+    children: ReactNode;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Horizontal margin applied so the group never renders flush against a screen edge.
+     * Default is 'medium'. Pass 'none' for screens that already apply their own side
+     * gutter, to avoid doubled spacing.
+     */
+    marginHorizontal?: MarginHorizontal;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const ListGroup: ({ children, style, marginHorizontal, testID, }: ListGroupProps) => ReactElement;
+export default ListGroup;

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

@@ -0,0 +1,12 @@
+import { View } from 'react-native';
+type MarginHorizontal = 'none' | 'small' | 'medium' | 'large';
+declare const StyledListGroupContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeMarginHorizontal?: MarginHorizontal;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledListGroupContainer };
+export type { MarginHorizontal };

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

@@ -1,10 +1,12 @@
 import ListItem from './ListItem';
 import BasicListItem from './BasicListItem';
+import ListGroup from './ListGroup';
 export type { ListItemProps } from './ListItem';
 export type { BasicListItemProps } from './BasicListItem';
 interface ListType {
     Item: typeof ListItem;
     BasicItem: typeof BasicListItem;
+    Group: typeof ListGroup;
 }
 declare const List: ListType;
 export default List;

package/types/theme/components/list.d.ts

@@ -3,6 +3,7 @@ declare const getListTheme: (theme: GlobalTheme) => {
     colors: {
         checkedListItemContainerBackground: string | undefined;
         listItemContainerBackground: string;
+        listGroupContainerBackground: string;
         leadingStatus: {
             danger: string;
             info: string;
@@ -17,11 +18,18 @@ declare const getListTheme: (theme: GlobalTheme) => {
         prefixContainerMarginRight: number;
         suffixContainerMarginLeft: number;
         childrenContainerTopMargin: number;
+        listGroupMarginHorizontal: {
+            none: number;
+            small: number;
+            medium: number;
+            large: number;
+        };
     };
     radii: {
         item: number;
         basicItem: number;
         leadingStatus: number;
+        group: number;
     };
     widths: {
         leadingStatus: number;