@hero-design/rn 8.136.3 → 8.137.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hero-design/rn
 
+## 8.137.0
+
+### Minor Changes
+
+- [#5516](https://github.com/Thinkei/hero-design/pull/5516) [`22172f6`](https://github.com/Thinkei/hero-design/commit/22172f65028e66509964b69c431b4660d0e66e45) Thanks [@ttkien](https://github.com/ttkien)! - [Select] Add `assistiveInfoConfig` prop to render an optional info trigger below the field
+
+- [#5516](https://github.com/Thinkei/hero-design/pull/5516) [`22172f6`](https://github.com/Thinkei/hero-design/commit/22172f65028e66509964b69c431b4660d0e66e45) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput] Add `assistiveInfoConfig` prop to render an optional info trigger below the field
+
 ## 8.136.3
 
 ### Patch Changes

package/es/index.js

@@ -7322,6 +7322,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     containerMarginTop: theme.space.small,
     labelInsideTextInputMarginTop: 0,
     errorAndHelpTextContainerPaddingTop: theme.space.xxsmall,
+    assistiveInfoTriggerPadding: theme.space.xsmall,
+    assistiveInfoTriggerGap: theme.space.xsmall,
     inputAndLabelContainerPaddingTop: theme.lineHeights.medium,
     labelFocusedTranslateY: theme.space.xsmall * 2,
     textareaLabelIdleTranslateY: theme.space.large
@@ -21387,7 +21389,43 @@ var StyledErrorAndMaxLengthContainer = index$c(View)(function (_ref14) {
   };
 });
 
-var _excluded$t = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var StyledTouchable = index$c(TouchableOpacity)(function () {
+  return {
+    alignSelf: 'flex-start'
+  };
+});
+var StyledRow$1 = index$c(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: theme.__hd__.textInput.space.assistiveInfoTriggerPadding,
+    gap: theme.__hd__.textInput.space.assistiveInfoTriggerGap
+  };
+});
+
+var AssistiveInfoTrigger = function AssistiveInfoTrigger(_ref) {
+  var accessibilityLabel = _ref.accessibilityLabel,
+    disabled = _ref.disabled,
+    label = _ref.label,
+    onPress = _ref.onPress,
+    testID = _ref.testID;
+  return /*#__PURE__*/React__default.createElement(StyledTouchable, {
+    onPress: onPress,
+    disabled: disabled,
+    accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : 'More information',
+    accessibilityRole: "button",
+    testID: testID
+  }, /*#__PURE__*/React__default.createElement(StyledRow$1, null, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: "circle-info-outlined",
+    size: "xsmall",
+    intent: disabled ? 'disabled-text' : 'muted'
+  }), !!label && /*#__PURE__*/React__default.createElement(Typography.Caption, {
+    intent: disabled ? 'disabled' : 'muted'
+  }, label)));
+};
+
+var _excluded$t = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "assistiveInfoConfig", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant", "pointerEvents"];
 var getState$3 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -21496,6 +21534,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     _ref8$hideCharacterCo = _ref8.hideCharacterCount,
     hideCharacterCount = _ref8$hideCharacterCo === void 0 ? false : _ref8$hideCharacterCo,
     helpText = _ref8.helpText,
+    assistiveInfoConfig = _ref8.assistiveInfoConfig,
     value = _ref8.value,
     defaultValue = _ref8.defaultValue,
     renderInputValue = _ref8.renderInputValue,
@@ -21503,6 +21542,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     allowFontScaling = _ref8$allowFontScalin === void 0 ? false : _ref8$allowFontScalin,
     _ref8$variant = _ref8.variant,
     variant = _ref8$variant === void 0 ? 'text' : _ref8$variant,
+    pointerEvents = _ref8.pointerEvents,
     nativeProps = _objectWithoutProperties(_ref8, _excluded$t);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
@@ -21634,17 +21674,20 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     defaultValue: defaultValue,
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
+  var isPressable = state !== 'disabled' && state !== 'readonly' && !loading;
   return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     style: styleWithoutBackgroundColor,
-    pointerEvents: state === 'disabled' || state === 'readonly' || loading ? 'none' : 'auto',
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Pressable, {
-    onPress: focusInnerTextInput,
+    onPress: isPressable ? focusInnerTextInput : undefined,
     accessible: false,
-    importantForAccessibility: "no"
+    importantForAccessibility: "no",
+    disabled: !isPressable,
+    pointerEvents: pointerEvents
   }, /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
     themeVariant: variant,
-    themeState: state
+    themeState: state,
+    pointerEvents: isPressable ? 'auto' : 'none'
   }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
     themeState: state,
@@ -21709,7 +21752,12 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     state: state,
     loading: loading,
     suffix: suffix
-  }))), /*#__PURE__*/React__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
+  }))), !!assistiveInfoConfig && /*#__PURE__*/React__default.createElement(AssistiveInfoTrigger, {
+    onPress: assistiveInfoConfig.onPress,
+    label: assistiveInfoConfig.label,
+    testID: assistiveInfoConfig.testID,
+    disabled: !isPressable
+  }), /*#__PURE__*/React__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
     error: error,
     helpText: helpText
   }), renderMaxLengthMessage({
@@ -27845,7 +27893,8 @@ function MultiSelect(_ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
-    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    assistiveInfoConfig = _ref.assistiveInfoConfig;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -27883,9 +27932,7 @@ function MultiSelect(_ref) {
   }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
     testID: "multi-select-touchable-opacity"
-  }, /*#__PURE__*/React__default.createElement(View, {
-    pointerEvents: "none"
-  }, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(View, null, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
     suffix: selectSuffix,
@@ -27897,6 +27944,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
+    assistiveInfoConfig: assistiveInfoConfig,
     renderInputValue: renderSelectedValue !== undefined && (rawValue === null || rawValue === void 0 ? void 0 : rawValue.length) > 0 ? function (nativeInputProps) {
       return renderSelectedValue(value, nativeInputProps);
     } : undefined
@@ -28059,7 +28107,8 @@ var SingleSelect = function SingleSelect(_ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
-    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    assistiveInfoConfig = _ref.assistiveInfoConfig;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -28090,9 +28139,7 @@ var SingleSelect = function SingleSelect(_ref) {
   }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
     testID: "single-select-touchable-opacity"
-  }, /*#__PURE__*/React__default.createElement(View, {
-    pointerEvents: "none"
-  }, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(View, null, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
     suffix: selectSuffix,
@@ -28101,9 +28148,10 @@ var SingleSelect = function SingleSelect(_ref) {
     editable: editable,
     disabled: disabled,
     required: required,
-    pointerEvents: "none",
     style: style,
     testID: testID,
+    pointerEvents: "none",
+    assistiveInfoConfig: assistiveInfoConfig,
     renderInputValue: renderSelectedValue !== undefined && !!rawValue ? function (nativeInputProps) {
       return renderSelectedValue(value, nativeInputProps);
     } : undefined

package/lib/index.js

@@ -7351,6 +7351,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     containerMarginTop: theme.space.small,
     labelInsideTextInputMarginTop: 0,
     errorAndHelpTextContainerPaddingTop: theme.space.xxsmall,
+    assistiveInfoTriggerPadding: theme.space.xsmall,
+    assistiveInfoTriggerGap: theme.space.xsmall,
     inputAndLabelContainerPaddingTop: theme.lineHeights.medium,
     labelFocusedTranslateY: theme.space.xsmall * 2,
     textareaLabelIdleTranslateY: theme.space.large
@@ -21416,7 +21418,43 @@ var StyledErrorAndMaxLengthContainer = index$c(reactNative.View)(function (_ref1
   };
 });
 
-var _excluded$t = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var StyledTouchable = index$c(reactNative.TouchableOpacity)(function () {
+  return {
+    alignSelf: 'flex-start'
+  };
+});
+var StyledRow$1 = index$c(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: theme.__hd__.textInput.space.assistiveInfoTriggerPadding,
+    gap: theme.__hd__.textInput.space.assistiveInfoTriggerGap
+  };
+});
+
+var AssistiveInfoTrigger = function AssistiveInfoTrigger(_ref) {
+  var accessibilityLabel = _ref.accessibilityLabel,
+    disabled = _ref.disabled,
+    label = _ref.label,
+    onPress = _ref.onPress,
+    testID = _ref.testID;
+  return /*#__PURE__*/React__namespace.default.createElement(StyledTouchable, {
+    onPress: onPress,
+    disabled: disabled,
+    accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : 'More information',
+    accessibilityRole: "button",
+    testID: testID
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledRow$1, null, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    icon: "circle-info-outlined",
+    size: "xsmall",
+    intent: disabled ? 'disabled-text' : 'muted'
+  }), !!label && /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, {
+    intent: disabled ? 'disabled' : 'muted'
+  }, label)));
+};
+
+var _excluded$t = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "assistiveInfoConfig", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant", "pointerEvents"];
 var getState$3 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -21525,6 +21563,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     _ref8$hideCharacterCo = _ref8.hideCharacterCount,
     hideCharacterCount = _ref8$hideCharacterCo === void 0 ? false : _ref8$hideCharacterCo,
     helpText = _ref8.helpText,
+    assistiveInfoConfig = _ref8.assistiveInfoConfig,
     value = _ref8.value,
     defaultValue = _ref8.defaultValue,
     renderInputValue = _ref8.renderInputValue,
@@ -21532,6 +21571,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     allowFontScaling = _ref8$allowFontScalin === void 0 ? false : _ref8$allowFontScalin,
     _ref8$variant = _ref8.variant,
     variant = _ref8$variant === void 0 ? 'text' : _ref8$variant,
+    pointerEvents = _ref8.pointerEvents,
     nativeProps = _objectWithoutProperties(_ref8, _excluded$t);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
@@ -21663,17 +21703,20 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     defaultValue: defaultValue,
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
+  var isPressable = state !== 'disabled' && state !== 'readonly' && !loading;
   return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$7, {
     style: styleWithoutBackgroundColor,
-    pointerEvents: state === 'disabled' || state === 'readonly' || loading ? 'none' : 'auto',
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.Pressable, {
-    onPress: focusInnerTextInput,
+    onPress: isPressable ? focusInnerTextInput : undefined,
     accessible: false,
-    importantForAccessibility: "no"
+    importantForAccessibility: "no",
+    disabled: !isPressable,
+    pointerEvents: pointerEvents
   }, /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
     themeVariant: variant,
-    themeState: state
+    themeState: state,
+    pointerEvents: isPressable ? 'auto' : 'none'
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
     themeState: state,
@@ -21738,7 +21781,12 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     state: state,
     loading: loading,
     suffix: suffix
-  }))), /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
+  }))), !!assistiveInfoConfig && /*#__PURE__*/React__namespace.default.createElement(AssistiveInfoTrigger, {
+    onPress: assistiveInfoConfig.onPress,
+    label: assistiveInfoConfig.label,
+    testID: assistiveInfoConfig.testID,
+    disabled: !isPressable
+  }), /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
     error: error,
     helpText: helpText
   }), renderMaxLengthMessage({
@@ -27874,7 +27922,8 @@ function MultiSelect(_ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
-    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    assistiveInfoConfig = _ref.assistiveInfoConfig;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -27912,9 +27961,7 @@ function MultiSelect(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: onPress,
     testID: "multi-select-touchable-opacity"
-  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
-    pointerEvents: "none"
-  }, /*#__PURE__*/React__namespace.default.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, /*#__PURE__*/React__namespace.default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
     suffix: selectSuffix,
@@ -27926,6 +27973,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
+    assistiveInfoConfig: assistiveInfoConfig,
     renderInputValue: renderSelectedValue !== undefined && (rawValue === null || rawValue === void 0 ? void 0 : rawValue.length) > 0 ? function (nativeInputProps) {
       return renderSelectedValue(value, nativeInputProps);
     } : undefined
@@ -28088,7 +28136,8 @@ var SingleSelect = function SingleSelect(_ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
-    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    assistiveInfoConfig = _ref.assistiveInfoConfig;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -28119,9 +28168,7 @@ var SingleSelect = function SingleSelect(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: onPress,
     testID: "single-select-touchable-opacity"
-  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
-    pointerEvents: "none"
-  }, /*#__PURE__*/React__namespace.default.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, /*#__PURE__*/React__namespace.default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
     suffix: selectSuffix,
@@ -28130,9 +28177,10 @@ var SingleSelect = function SingleSelect(_ref) {
     editable: editable,
     disabled: disabled,
     required: required,
-    pointerEvents: "none",
     style: style,
     testID: testID,
+    pointerEvents: "none",
+    assistiveInfoConfig: assistiveInfoConfig,
     renderInputValue: renderSelectedValue !== undefined && !!rawValue ? function (nativeInputProps) {
       return renderSelectedValue(value, nativeInputProps);
     } : undefined

package/package.json

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

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

@@ -75,6 +75,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   value,
   supportedOrientations = ['portrait'],
   bottomSheetConfig = {},
+  assistiveInfoConfig,
 }: MultiSelectProps<V, T>) {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
@@ -116,7 +117,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
           {
             // prevent users from focusing TextInput
           }
-          <View pointerEvents="none">
+          <View>
             <TextInput
               {...inputProps}
               label={label}
@@ -130,6 +131,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
               pointerEvents="none"
               style={style}
               testID={testID}
+              assistiveInfoConfig={assistiveInfoConfig}
               renderInputValue={
                 renderSelectedValue !== undefined && rawValue?.length > 0
                   ? (nativeInputProps) =>

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

@@ -59,6 +59,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
   value,
   supportedOrientations = ['portrait'],
   bottomSheetConfig = {},
+  assistiveInfoConfig,
 }: SingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
@@ -99,7 +100,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
           {
             // prevent users from focusing TextInput
           }
-          <View pointerEvents="none">
+          <View>
             <TextInput
               {...inputProps}
               label={label}
@@ -110,9 +111,10 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
               editable={editable}
               disabled={disabled}
               required={required}
-              pointerEvents="none"
               style={style}
               testID={testID}
+              pointerEvents="none"
+              assistiveInfoConfig={assistiveInfoConfig}
               renderInputValue={
                 renderSelectedValue !== undefined && !!rawValue
                   ? (nativeInputProps) =>

package/src/components/Select/types.ts

@@ -102,4 +102,13 @@ export interface SelectProps<V, T extends SelectOptionType<V>>
     variant?: BottomSheetProps['variant'];
     header?: BottomSheetProps['header'];
   };
+  /**
+   * Optional assistive info trigger config. When provided, an info icon is rendered
+   * below the field. `onPress` is called when the trigger is tapped.
+   */
+  assistiveInfoConfig?: {
+    onPress: () => void;
+    label?: string;
+    testID?: string;
+  };
 }

package/src/components/TextInput/AssistiveInfoTrigger/StyledAssistiveInfoTrigger.tsx

@@ -0,0 +1,13 @@
+import { TouchableOpacity, View } from 'react-native';
+import styled from '@emotion/native';
+
+export const StyledTouchable = styled(TouchableOpacity)(() => ({
+  alignSelf: 'flex-start',
+}));
+
+export const StyledRow = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  padding: theme.__hd__.textInput.space.assistiveInfoTriggerPadding,
+  gap: theme.__hd__.textInput.space.assistiveInfoTriggerGap,
+}));

package/src/components/TextInput/AssistiveInfoTrigger/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Icon from '../../Icon';
+import Typography from '../../Typography';
+import { StyledTouchable, StyledRow } from './StyledAssistiveInfoTrigger';
+
+export interface AssistiveInfoTriggerProps {
+  onPress: () => void;
+  label?: string;
+  disabled?: boolean;
+  testID?: string;
+  accessibilityLabel?: string;
+}
+
+const AssistiveInfoTrigger = ({
+  accessibilityLabel,
+  disabled,
+  label,
+  onPress,
+  testID,
+}: AssistiveInfoTriggerProps) => {
+  return (
+    <StyledTouchable
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityLabel={accessibilityLabel ?? 'More information'}
+      accessibilityRole="button"
+      testID={testID}
+    >
+      <StyledRow>
+        <Icon
+          icon="circle-info-outlined"
+          size="xsmall"
+          intent={disabled ? 'disabled-text' : 'muted'}
+        />
+        {!!label && (
+          <Typography.Caption intent={disabled ? 'disabled' : 'muted'}>
+            {label}
+          </Typography.Caption>
+        )}
+      </StyledRow>
+    </StyledTouchable>
+  );
+};
+
+export default AssistiveInfoTrigger;

package/src/components/TextInput/index.tsx

@@ -34,6 +34,7 @@ import {
   StyledHelperText,
 } from './StyledTextInput';
 import Icon from '../Icon';
+import AssistiveInfoTrigger from './AssistiveInfoTrigger';
 import type { Theme } from '../../theme';
 import { useTheme } from '../../theme';
 import type { State } from './StyledTextInput';
@@ -141,6 +142,15 @@ export interface TextInputProps extends NativeTextInputProps {
    * Component variant.
    */
   variant?: TextInputVariant;
+  /**
+   * Optional assistive info trigger config. When provided, an info icon is rendered
+   * below the field. `onPress` is called when the trigger is tapped.
+   */
+  assistiveInfoConfig?: {
+    onPress: () => void;
+    label?: string;
+    testID?: string;
+  };
 }
 
 export const getState = ({
@@ -318,11 +328,13 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       maxLength,
       hideCharacterCount = false,
       helpText,
+      assistiveInfoConfig,
       value,
       defaultValue,
       renderInputValue,
       allowFontScaling = false,
       variant = 'text',
+      pointerEvents,
       ...nativeProps
     }: TextInputProps,
     ref?: React.Ref<TextInputHandles>
@@ -464,22 +476,23 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           : EMPTY_PLACEHOLDER_VALUE,
     };
 
+    const isPressable =
+      state !== 'disabled' && state !== 'readonly' && !loading;
+
     return (
-      <StyledContainer
-        style={styleWithoutBackgroundColor}
-        pointerEvents={
-          state === 'disabled' || state === 'readonly' || loading
-            ? 'none'
-            : 'auto'
-        }
-        testID={testID}
-      >
+      <StyledContainer style={styleWithoutBackgroundColor} testID={testID}>
         <Pressable
-          onPress={focusInnerTextInput}
+          onPress={isPressable ? focusInnerTextInput : undefined}
           accessible={false}
           importantForAccessibility="no"
+          disabled={!isPressable}
+          pointerEvents={pointerEvents}
         >
-          <StyledTextInputContainer themeVariant={variant} themeState={state}>
+          <StyledTextInputContainer
+            themeVariant={variant}
+            themeState={state}
+            pointerEvents={isPressable ? 'auto' : 'none'}
+          >
             <StyledBorderBackDrop
               themeFocused={isFocused}
               themeState={state}
@@ -574,6 +587,14 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
             {renderSuffix({ state, loading, suffix })}
           </StyledTextInputContainer>
         </Pressable>
+        {!!assistiveInfoConfig && (
+          <AssistiveInfoTrigger
+            onPress={assistiveInfoConfig.onPress}
+            label={assistiveInfoConfig.label}
+            testID={assistiveInfoConfig.testID}
+            disabled={!isPressable}
+          />
+        )}
         <StyledErrorAndHelpTextContainer>
           <StyledErrorAndMaxLengthContainer>
             {renderErrorOrHelpText({ error, helpText })}

package/src/theme/components/textInput.ts

@@ -72,6 +72,8 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     containerMarginTop: theme.space.small,
     labelInsideTextInputMarginTop: 0,
     errorAndHelpTextContainerPaddingTop: theme.space.xxsmall,
+    assistiveInfoTriggerPadding: theme.space.xsmall,
+    assistiveInfoTriggerGap: theme.space.xsmall,
     inputAndLabelContainerPaddingTop: theme.lineHeights.medium,
     labelFocusedTranslateY: theme.space.xsmall * 2,
     textareaLabelIdleTranslateY: theme.space.large,

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

@@ -26,5 +26,5 @@ export interface MultiSelectProps<V, T extends SelectOptionType<V> = SelectOptio
      */
     supportedOrientations?: ('portrait' | 'landscape')[];
 }
-declare function MultiSelect<V, T extends SelectOptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, supportedOrientations, bottomSheetConfig, }: MultiSelectProps<V, T>): React.JSX.Element;
+declare function MultiSelect<V, T extends SelectOptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, supportedOrientations, bottomSheetConfig, assistiveInfoConfig, }: MultiSelectProps<V, T>): React.JSX.Element;
 export default MultiSelect;

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

@@ -19,5 +19,5 @@ export interface SingleSelectProps<V, T extends SelectOptionType<V> = SelectOpti
      */
     supportedOrientations?: ('portrait' | 'landscape')[];
 }
-declare const SingleSelect: <V, T extends SelectOptionType<V>>({ label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, supportedOrientations, bottomSheetConfig, }: SingleSelectProps<V, T>) => React.JSX.Element;
+declare const SingleSelect: <V, T extends SelectOptionType<V>>({ label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, supportedOrientations, bottomSheetConfig, assistiveInfoConfig, }: SingleSelectProps<V, T>) => React.JSX.Element;
 export default SingleSelect;

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

@@ -81,4 +81,13 @@ export interface SelectProps<V, T extends SelectOptionType<V>> extends Pick<Text
         variant?: BottomSheetProps['variant'];
         header?: BottomSheetProps['header'];
     };
+    /**
+     * Optional assistive info trigger config. When provided, an info icon is rendered
+     * below the field. `onPress` is called when the trigger is tapped.
+     */
+    assistiveInfoConfig?: {
+        onPress: () => void;
+        label?: string;
+        testID?: string;
+    };
 }

package/types/components/TextInput/AssistiveInfoTrigger/StyledAssistiveInfoTrigger.d.ts

@@ -0,0 +1,11 @@
+import { View } from 'react-native';
+export declare const StyledTouchable: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+export declare const StyledRow: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface AssistiveInfoTriggerProps {
+    onPress: () => void;
+    label?: string;
+    disabled?: boolean;
+    testID?: string;
+    accessibilityLabel?: string;
+}
+declare const AssistiveInfoTrigger: ({ accessibilityLabel, disabled, label, onPress, testID, }: AssistiveInfoTriggerProps) => React.JSX.Element;
+export default AssistiveInfoTrigger;

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

@@ -94,6 +94,15 @@ export interface TextInputProps extends NativeTextInputProps {
      * Component variant.
      */
     variant?: TextInputVariant;
+    /**
+     * Optional assistive info trigger config. When provided, an info icon is rendered
+     * below the field. `onPress` is called when the trigger is tapped.
+     */
+    assistiveInfoConfig?: {
+        onPress: () => void;
+        label?: string;
+        testID?: string;
+    };
 }
 export declare const getState: ({ disabled, error, editable, loading, isEmptyValue, }: {
     disabled?: boolean;

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

@@ -69,6 +69,8 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         containerMarginTop: number;
         labelInsideTextInputMarginTop: number;
         errorAndHelpTextContainerPaddingTop: number;
+        assistiveInfoTriggerPadding: number;
+        assistiveInfoTriggerGap: number;
         inputAndLabelContainerPaddingTop: number;
         labelFocusedTranslateY: number;
         textareaLabelIdleTranslateY: number;