@hero-design/rn 8.138.1 → 8.139.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hero-design/rn
 
+## 8.139.0
+
+### Minor Changes
+
+- [#5555](https://github.com/Thinkei/hero-design/pull/5555) [`aca4be8`](https://github.com/Thinkei/hero-design/commit/aca4be85efca246d0ff27d27fe694bed5950fd7c) Thanks [@ttkien](https://github.com/ttkien)! - [Select] Add `disabled` option to `assistiveInfoConfig` so the assistive info trigger no longer follows the select's disabled state by default
+
+- [#5555](https://github.com/Thinkei/hero-design/pull/5555) [`aca4be8`](https://github.com/Thinkei/hero-design/commit/aca4be85efca246d0ff27d27fe694bed5950fd7c) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput] Add `disabled` option to `assistiveInfoConfig` so the assistive info trigger no longer follows the field's disabled/readonly/loading state by default
+
+## 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') {
@@ -21761,7 +21769,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     onPress: assistiveInfoConfig.onPress,
     label: assistiveInfoConfig.label,
     testID: assistiveInfoConfig.testID,
-    disabled: !isPressable
+    disabled: assistiveInfoConfig.disabled
   }), /*#__PURE__*/React__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
     error: error,
     helpText: helpText
@@ -27932,11 +27940,10 @@ function MultiSelect(_ref) {
   useEffect(function () {
     setSelectingValue(value);
   }, [open, value]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
-    pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, null, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
-    testID: "multi-select-touchable-opacity"
+    testID: "multi-select-touchable-opacity",
+    disabled: !editable || disabled || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.loading)
   }, /*#__PURE__*/React__default.createElement(View, null, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
@@ -28139,11 +28146,10 @@ var SingleSelect = function SingleSelect(_ref) {
     }
     return undefined;
   }, [editable, disabled, open]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
-    pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, null, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
-    testID: "single-select-touchable-opacity"
+    testID: "single-select-touchable-opacity",
+    disabled: !editable || disabled || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.loading)
   }, /*#__PURE__*/React__default.createElement(View, null, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,

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') {
@@ -21790,7 +21798,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     onPress: assistiveInfoConfig.onPress,
     label: assistiveInfoConfig.label,
     testID: assistiveInfoConfig.testID,
-    disabled: !isPressable
+    disabled: assistiveInfoConfig.disabled
   }), /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
     error: error,
     helpText: helpText
@@ -27961,11 +27969,10 @@ function MultiSelect(_ref) {
   React.useEffect(function () {
     setSelectingValue(value);
   }, [open, value]);
-  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
-    pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: onPress,
-    testID: "multi-select-touchable-opacity"
+    testID: "multi-select-touchable-opacity",
+    disabled: !editable || disabled || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.loading)
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, /*#__PURE__*/React__namespace.default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
@@ -28168,11 +28175,10 @@ var SingleSelect = function SingleSelect(_ref) {
     }
     return undefined;
   }, [editable, disabled, open]);
-  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
-    pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: onPress,
-    testID: "single-select-touchable-opacity"
+    testID: "single-select-touchable-opacity",
+    disabled: !editable || disabled || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.loading)
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, /*#__PURE__*/React__namespace.default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.138.1",
+  "version": "8.139.0",
   "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/Select/MultiSelect/index.tsx

@@ -105,14 +105,11 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   }, [open, value]);
   return (
     <>
-      <View
-        pointerEvents={
-          !editable || disabled || inputProps?.loading ? 'none' : 'auto'
-        }
-      >
+      <View>
         <TouchableOpacity
           onPress={onPress}
           testID="multi-select-touchable-opacity"
+          disabled={!editable || disabled || inputProps?.loading}
         >
           {
             // prevent users from focusing TextInput

package/src/components/Select/SingleSelect/index.tsx

@@ -88,14 +88,11 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
 
   return (
     <>
-      <View
-        pointerEvents={
-          !editable || disabled || inputProps?.loading ? 'none' : 'auto'
-        }
-      >
+      <View>
         <TouchableOpacity
           onPress={onPress}
           testID="single-select-touchable-opacity"
+          disabled={!editable || disabled || inputProps?.loading}
         >
           {
             // prevent users from focusing TextInput

package/src/components/Select/types.ts

@@ -105,10 +105,14 @@ export interface SelectProps<V, T extends SelectOptionType<V>>
   /**
    * Optional assistive info trigger config. When provided, an info icon is rendered
    * below the field. `onPress` is called when the trigger is tapped.
+   * The trigger is always enabled regardless of the field's state (disabled, readonly,
+   * loading) so users can still access contextual help. Set `disabled: true` to
+   * explicitly suppress the trigger.
    */
   assistiveInfoConfig?: {
     onPress: () => void;
     label?: string;
     testID?: string;
+    disabled?: boolean;
   };
 }

package/src/components/TextInput/index.tsx

@@ -145,11 +145,15 @@ export interface TextInputProps extends NativeTextInputProps {
   /**
    * Optional assistive info trigger config. When provided, an info icon is rendered
    * below the field. `onPress` is called when the trigger is tapped.
+   * The trigger is always enabled regardless of the field's state (disabled, readonly,
+   * loading) so users can still access contextual help. Set `disabled: true` to
+   * explicitly suppress the trigger.
    */
   assistiveInfoConfig?: {
     onPress: () => void;
     label?: string;
     testID?: string;
+    disabled?: boolean;
   };
 }
 
@@ -592,7 +596,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
             onPress={assistiveInfoConfig.onPress}
             label={assistiveInfoConfig.label}
             testID={assistiveInfoConfig.testID}
-            disabled={!isPressable}
+            disabled={assistiveInfoConfig.disabled}
           />
         )}
         <StyledErrorAndHelpTextContainer>

package/types/components/Select/types.d.ts

@@ -84,10 +84,14 @@ export interface SelectProps<V, T extends SelectOptionType<V>> extends Pick<Text
     /**
      * Optional assistive info trigger config. When provided, an info icon is rendered
      * below the field. `onPress` is called when the trigger is tapped.
+     * The trigger is always enabled regardless of the field's state (disabled, readonly,
+     * loading) so users can still access contextual help. Set `disabled: true` to
+     * explicitly suppress the trigger.
      */
     assistiveInfoConfig?: {
         onPress: () => void;
         label?: string;
         testID?: string;
+        disabled?: boolean;
     };
 }

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

@@ -97,11 +97,15 @@ export interface TextInputProps extends NativeTextInputProps {
     /**
      * Optional assistive info trigger config. When provided, an info icon is rendered
      * below the field. `onPress` is called when the trigger is tapped.
+     * The trigger is always enabled regardless of the field's state (disabled, readonly,
+     * loading) so users can still access contextual help. Set `disabled: true` to
+     * explicitly suppress the trigger.
      */
     assistiveInfoConfig?: {
         onPress: () => void;
         label?: string;
         testID?: string;
+        disabled?: boolean;
     };
 }
 export declare const getState: ({ disabled, error, editable, loading, isEmptyValue, }: {