@hero-design/rn-work-uikit 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hero-design/rn-work-uikit
 
+## 1.2.1
+
+### Patch Changes
+
+- [#4007](https://github.com/Thinkei/hero-design/pull/4007) [`be4d27a22908e6e5b9dfd429f21dfbdfadaf4949`](https://github.com/Thinkei/hero-design/commit/be4d27a22908e6e5b9dfd429f21dfbdfadaf4949) Thanks [@cuongnguyeneh](https://github.com/cuongnguyeneh)! - [TextInput] Update testId of native input
+
+- Updated dependencies [[`7e0859459ea48c43c9edcc01a64c80ab715b4d15`](https://github.com/Thinkei/hero-design/commit/7e0859459ea48c43c9edcc01a64c80ab715b4d15)]:
+  - @hero-design/rn@8.102.1
+
 ## 1.2.0
 
 ### Minor Changes
@@ -13,7 +22,7 @@
 - [#3998](https://github.com/Thinkei/hero-design/pull/3998) [`7d043a147897938f2c6d59b7716be72dfc40d168`](https://github.com/Thinkei/hero-design/commit/7d043a147897938f2c6d59b7716be72dfc40d168) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput]
   - Fix issue when label is empty, should show TextInput placeholder
   - Remove un-neccessary animation of TextInput row
-- Updated dependencies [[`7d043a147897938f2c6d59b7716be72dfc40d168`](https://github.com/Thinkei/hero-design/commit/7d043a147897938f2c6d59b7716be72dfc40d168), [`28a6ab3090ec7d2a596de5c5838072b12f5c6104`](https://github.com/Thinkei/hero-design/commit/28a6ab3090ec7d2a596de5c5838072b12f5c6104), [`849b412c2d217b636342dcd42ce0f4553c446762`](https://github.com/Thinkei/hero-design/commit/849b412c2d217b636342dcd42ce0f4553c446762)]:
+- Updated dependencies [[`7d043a147897938f2c6d59b7716be72dfc40d168`](https://github.com/Thinkei/hero-design/commit/7d043a147897938f2c6d59b7716be72dfc40d168), [`28a6ab3090ec7d2a596de5c5838072b12f5c6104`](https://github.com/Thinkei/hero-design/commit/28a6ab3090ec7d2a596de5c5838072b12f5c6104), [`849b412c2d217b636342dcd42ce0f4553c446762`](https://github.com/Thinkei/hero-design/commit/849b412c2d217b636342dcd42ce0f4553c446762), [`ffaa510e9dec7177e29a3afe1b2d07c012d14fd8`](https://github.com/Thinkei/hero-design/commit/ffaa510e9dec7177e29a3afe1b2d07c012d14fd8)]:
   - @hero-design/rn@8.102.0
 
 ## 1.1.0

package/lib/index.js

@@ -1682,7 +1682,7 @@ data.forEach(function(series){series.data.forEach(function(value,idx){if(typeof
 var yMax=React__default.useMemo(function(){return Math.max.apply(Math,_toConsumableArray(xLabels.map(function(_,xIdx){return data.reduce(function(sum,series){var _series$data$xIdx;return sum+((_series$data$xIdx=series.data[xIdx])!==null&&_series$data$xIdx!==void 0?_series$data$xIdx:0);},0);})));},[data,xLabels]);var niceValues=React__default.useMemo(function(){var maxDataValue=yMax;var minDataValue=0;return createNiceScale(minDataValue,maxDataValue);},[data]);var yAxisStep=(_yAxisConfig$step=yAxisConfig===null||yAxisConfig===void 0?void 0:yAxisConfig.step)!==null&&_yAxisConfig$step!==void 0?_yAxisConfig$step:niceValues.tickSpacing;var yAxisInterval=(_yAxisConfig$tick$int=yAxisConfig===null||yAxisConfig===void 0||(_yAxisConfig$tick=yAxisConfig.tick)===null||_yAxisConfig$tick===void 0?void 0:_yAxisConfig$tick.interval)!==null&&_yAxisConfig$tick$int!==void 0?_yAxisConfig$tick$int:yAxisStep;var calculatedYAxisConfig=React__default.useMemo(function(){var _yAxisConfig$maxValue,_yAxisConfig$step2;return _objectSpread2(_objectSpread2({},yAxisConfig),{},{maxValue:(_yAxisConfig$maxValue=yAxisConfig===null||yAxisConfig===void 0?void 0:yAxisConfig.maxValue)!==null&&_yAxisConfig$maxValue!==void 0?_yAxisConfig$maxValue:niceValues.niceMax,minValue:0,step:(_yAxisConfig$step2=yAxisConfig===null||yAxisConfig===void 0?void 0:yAxisConfig.step)!==null&&_yAxisConfig$step2!==void 0?_yAxisConfig$step2:niceValues.tickSpacing,tick:{interval:yAxisInterval}});},[yAxisConfig,niceValues,yAxisInterval]);var calculatedXAxisConfig=React__default.useMemo(function(){return _objectSpread2(_objectSpread2({},xAxisConfig),{},{labels:xLabels});},[xAxisConfig,xLabels]);return/*#__PURE__*/React__default__namespace.default.createElement(StyledColumnChartWrapper,{style:style,testID:testID,onLayout:onLayout},dimensions&&/*#__PURE__*/React__default__namespace.default.createElement(ChartFrame,{isEmpty:data.length===0,xAxisConfig:calculatedXAxisConfig,yAxisConfig:calculatedYAxisConfig,headerConfig:headerConfig,width:dimensions.width,height:dimensions.height,hideXAxisGrid:true,emptyText:emptyText,renderContent:function renderContent(_ref2){var coordinates=_ref2.coordinates;return/*#__PURE__*/React__default__namespace.default.createElement(ColumnChartContent$1,{coordinates:coordinates,data:data,xAxisConfig:calculatedXAxisConfig,yAxisConfig:calculatedYAxisConfig,onBarPress:onBarPress,colorScale:colorScale});}}));};var Chart={Column:ColumnChart,Line:LineChart,SelectAction:SingleSelect$1};var StyledChipWrapper=index$b(reactNative.TouchableOpacity)(function(_ref){var themeVariant=_ref.themeVariant,themeSelected=_ref.themeSelected,theme=_ref.theme;var getShadowStyles=function getShadowStyles(){switch(themeVariant){case'compact':case'filter':return _objectSpread2({},theme.__hd__.chip.shadows.filledWrapper);case'selection':case'compact-outlined':return undefined;}};var getBorderStyles=function getBorderStyles(){switch(themeVariant){case'selection':case'compact-outlined':{return {borderColor:themeSelected?theme.__hd__.chip.colors.outlinedSelectedBorder:theme.__hd__.chip.colors.outlinedDefaultBorder,borderWidth:theme.__hd__.chip.borderWidths.outlinedDefaultBorder};}case'compact':case'filter':{return {borderColor:theme.__hd__.chip.colors.wrapperSelectedBorder};}}};var getBackgroundStyles=function getBackgroundStyles(){if(themeSelected){switch(themeVariant){case'selection':case'compact-outlined':{return {backgroundColor:themeSelected?theme.__hd__.chip.colors.outlinedSelectedBackground:theme.__hd__.chip.colors.outlinedDefaultBackground};}case'filter':case'compact':{return {backgroundColor:theme.__hd__.chip.colors.secondaryBackground};}}}else {switch(themeVariant){case'selection':case'compact-outlined':{return {backgroundColor:theme.__hd__.chip.colors.outlinedDefaultBackground};}case'filter':case'compact':{return {backgroundColor:theme.__hd__.chip.colors.filledBackground};}}}};var getPaddingStyles=function getPaddingStyles(){switch(themeVariant){case'compact':case'compact-outlined':{return {paddingHorizontal:theme.__hd__.chip.space.compactWrapperHorizontalPadding,paddingVertical:theme.__hd__.chip.space.compactWrapperVerticalPadding};}default:{return {paddingHorizontal:theme.__hd__.chip.space.wrapperHorizontalPadding,paddingVertical:theme.__hd__.chip.space.wrapperVerticalPadding};}}};return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({alignSelf:'flex-start',flexDirection:'row',alignItems:'center',justifyContent:'center',borderRadius:theme.__hd__.chip.radii.wrapper},getShadowStyles()),getBorderStyles()),getPaddingStyles()),getBackgroundStyles());});var StyledChipIcon=index$b(Icon)(function(_ref2){var theme=_ref2.theme;return {fontSize:theme.__hd__.chip.fontSizes.icon};});var _excluded$s=["label","variant","selected","icon","onPress","showSelectedIcon"];var getChipLabel=function getChipLabel(label){if(typeof label==='string'){return/*#__PURE__*/React__default__namespace.default.createElement(Typography.Body,{variant:"small"},label);}return label;};var getChipVariant=function getChipVariant(){var variant=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'selection';switch(variant){case'selection':case'filter':case'compact':case'compact-outlined':return variant;case'outlined':return 'selection';case'filled':return 'filter';}};var Chip=function Chip(_ref){var label=_ref.label,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'selection':_ref$variant,_ref$selected=_ref.selected,selected=_ref$selected===void 0?false:_ref$selected,icon=_ref.icon,onPress=_ref.onPress,_ref$showSelectedIcon=_ref.showSelectedIcon,showSelectedIcon=_ref$showSelectedIcon===void 0?true:_ref$showSelectedIcon,otherProps=_objectWithoutProperties(_ref,_excluded$s);useDeprecation('Chip variant `outlined` and `filled` are deprecated.',variant==='outlined'||variant==='filled');var renamedVariant=getChipVariant(variant);var shouldShowSelectedIcon=(renamedVariant==='selection'||renamedVariant==='compact-outlined')&&selected&&showSelectedIcon;var chipLabel=React__default.useMemo(function(){return getChipLabel(label);},[label]);return/*#__PURE__*/React__default__namespace.default.createElement(StyledChipWrapper,_extends$1({onPress:onPress,themeVariant:renamedVariant,themeSelected:selected},otherProps),icon&&/*#__PURE__*/React__default__namespace.default.createElement(Box,{marginRight:"small"},/*#__PURE__*/React__default__namespace.default.createElement(StyledChipIcon,{icon:icon,testID:"chip-icon-".concat(icon)})),chipLabel,shouldShowSelectedIcon&&/*#__PURE__*/React__default__namespace.default.createElement(Box,{marginLeft:"small"},/*#__PURE__*/React__default__namespace.default.createElement(StyledChipIcon,{icon:"cancel",testID:"selected-chip-icon-cancel"})));};var StyledWrapper$8=index$b(reactNative.TouchableOpacity)(function(_ref){var theme=_ref.theme,themeState=_ref.themeState;return {flexDirection:'row',borderRadius:theme.__hd__.checkbox.radii.wrapper,borderWidth:theme.__hd__.checkbox.borderWidths.wrapper,padding:theme.__hd__.checkbox.space.wrapperPadding,borderColor:theme.__hd__.checkbox.colors.borders[themeState]};});var StyledDescription$1=index$b(Typography.Body)(function(_ref2){var theme=_ref2.theme;return {paddingRight:theme.__hd__.checkbox.space.iconDescriptionPadding,flex:1};});var StyledCheckboxContainer=index$b(reactNative.View)(function(_ref3){var theme=_ref3.theme;return {height:theme.__hd__.checkbox.sizes.icon,width:theme.__hd__.checkbox.sizes.icon,overflow:'hidden'};});var StyledCheckbox=index$b(reactNative.View)(function(_ref4){var theme=_ref4.theme,themeState=_ref4.themeState;return {flex:1,borderRadius:theme.__hd__.checkbox.radii.icon,borderWidth:theme.__hd__.checkbox.borderWidths.icon,borderColor:theme.__hd__.checkbox.colors.checkboxBorder[themeState]};});var StyledCheckMark=index$b(Icon)(function(_ref5){var theme=_ref5.theme,themeState=_ref5.themeState;return {position:'absolute',top:theme.__hd__.checkbox.space.iconTop,color:theme.__hd__.checkbox.colors.checkboxBorder[themeState]};});var getThemeState=function getThemeState(_ref){var disabled=_ref.disabled,readonly=_ref.readonly,checked=_ref.checked;if(disabled){return 'disabled';}if(readonly){return 'readonly';}if(checked){return 'checked';}return 'default';};var Checkbox=function Checkbox(_ref2){var checked=_ref2.checked,description=_ref2.description,_ref2$withBorder=_ref2.withBorder,withBorder=_ref2$withBorder===void 0?false:_ref2$withBorder,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled,onPress=_ref2.onPress,style=_ref2.style,testID=_ref2.testID,_ref2$readonly=_ref2.readonly,readonly=_ref2$readonly===void 0?false:_ref2$readonly;useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.",withBorder===true);var themeState=getThemeState({disabled:disabled,readonly:readonly,checked:checked});return/*#__PURE__*/React__default__namespace.default.createElement(StyledWrapper$8,{onPress:onPress,disabled:disabled||readonly,themeState:themeState,style:style,testID:testID},!!description&&/*#__PURE__*/React__default__namespace.default.createElement(StyledDescription$1,{intent:disabled?'subdued':'body',variant:"small"},description),/*#__PURE__*/React__default__namespace.default.createElement(StyledCheckboxContainer,null,checked&&/*#__PURE__*/React__default__namespace.default.createElement(StyledCheckMark,{icon:"box-check",testID:"check-mark",themeState:themeState}),/*#__PURE__*/React__default__namespace.default.createElement(StyledCheckbox,{themeState:themeState})));};var StyledContainer$6=index$b(reactNative.View)(function(_ref){var theme=_ref.theme;return {width:'100%',marginTop:theme.__hd__.textInput.space.containerMarginTop};});var StyledLabelContainerInsideTextInput=index$b(reactNative.Animated.View)(function(_ref2){var themeVariant=_ref2.themeVariant,themeHasPrefix=_ref2.themeHasPrefix,theme=_ref2.theme;return {flexDirection:'row',alignItems:themeVariant==='text'?'center':'flex-start',position:'absolute',zIndex:1,left:themeHasPrefix?theme.space.xxlarge:theme.space.medium+theme.space.small,right:theme.space.medium,top:-theme.__hd__.textInput.space.labelTop};});var StyledLabelInsideTextInput=index$b(reactNative.View)(function(_ref3){var theme=_ref3.theme,themeState=_ref3.themeState;return {textAlignVertical:'center',alignContent:'center',alignItems:'center',color:theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],marginTop:theme.__hd__.textInput.space.labelInsideTextInputMarginTop,flexDirection:'row'};});var StyledAsteriskLabelInsideTextInput=index$b(Typography.Body)(function(_ref4){var theme=_ref4.theme,themeState=_ref4.themeState;return {color:theme.__hd__.textInput.colors.asterisks[themeState]};});var StyledErrorContainer$2=index$b(reactNative.View)(function(_ref5){var theme=_ref5.theme;return {marginRight:theme.__hd__.textInput.space.errorContainerMarginRight,flexDirection:'row',alignItems:'center',flex:1,flexGrow:4};});var StyledError$1=index$b(Typography.Caption)(function(_ref6){var theme=_ref6.theme;return {color:theme.__hd__.textInput.colors.error,marginLeft:theme.__hd__.textInput.space.errorMarginLeft};});var StyledMaxLengthMessage=index$b(Typography.Caption)(function(_ref7){var theme=_ref7.theme,themeState=_ref7.themeState;return {color:theme.__hd__.textInput.colors.maxLengthLabels[themeState],flex:1,flexGrow:1,textAlign:'right'};});var StyledHelperText$1=Typography.Caption;var StyledTextInput$1=index$b(reactNative.TextInput)(function(_ref8){var theme=_ref8.theme,themeVariant=_ref8.themeVariant;return {textAlignVertical:themeVariant==='text'?'center':'top',fontSize:theme.__hd__.textInput.fontSizes.text,alignSelf:'stretch',flexGrow:2,marginHorizontal:theme.__hd__.textInput.space.inputHorizontalMargin,paddingVertical:0,maxHeight:theme.__hd__.textInput.sizes.textInputMaxHeight,height:themeVariant==='text'?undefined:theme.__hd__.textInput.sizes.textareaHeight,fontFamily:theme.__hd__.textInput.fonts.text};});var StyledBorderBackDrop=index$b(reactNative.View)(function(_ref9){var _theme$__hd__$textInp;var theme=_ref9.theme,themeFocused=_ref9.themeFocused,themeState=_ref9.themeState;return _objectSpread2(_objectSpread2({},reactNative.StyleSheet.absoluteFillObject),{},{borderWidth:themeFocused?theme.__hd__.textInput.borderWidths.container.focused:theme.__hd__.textInput.borderWidths.container.normal,borderRadius:theme.__hd__.textInput.radii.container,borderColor:(_theme$__hd__$textInp=theme.__hd__.textInput.colors.borders[themeState])!==null&&_theme$__hd__$textInp!==void 0?_theme$__hd__$textInp:theme.__hd__.textInput.colors.borders["default"]});});var StyledTextInputContainer=index$b(reactNative.View)(function(_ref10){var theme=_ref10.theme;return {flexDirection:'row',alignItems:'center',padding:theme.__hd__.textInput.space.containerPadding,backgroundColor:theme.__hd__.textInput.colors.containerBackground,borderRadius:theme.__hd__.textInput.radii.container};});var StyledTextInputAndLabelContainer=index$b(reactNative.View)(function(){return {flexDirection:'row',alignItems:'center',alignSelf:'stretch',flexGrow:2,flexShrink:1};});var StyledErrorAndHelpTextContainer=index$b(reactNative.View)(function(_ref11){var theme=_ref11.theme;return {paddingHorizontal:theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,minHeight:theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,paddingTop:theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop};});var StyledErrorAndMaxLengthContainer=index$b(reactNative.View)(function(){return {flexDirection:'row',justifyContent:'space-between',alignItems:'flex-start'};});var _excluded$r=["label","prefix","suffix","style","textStyle","testID","accessibilityLabelledBy","error","required","editable","disabled","loading","maxLength","hideCharacterCount","helpText","value","defaultValue","renderInputValue","allowFontScaling","variant"];var getState$3=function getState(_ref){var disabled=_ref.disabled,error=_ref.error,editable=_ref.editable,loading=_ref.loading,isEmptyValue=_ref.isEmptyValue;if(disabled){return 'disabled';}if(error){return 'error';}if(!editable||loading){return 'readonly';}if(!isEmptyValue){return 'filled';}return 'default';};// Fix issue: Placeholder is not shown on iOS when multiline is true
 // https://github.com/callstack/react-native-paper/pull/3331
 var EMPTY_PLACEHOLDER_VALUE$1=' ';var LABEL_ANIMATION_DURATION$1=150;var renderErrorOrHelpText=function renderErrorOrHelpText(_ref2){var error=_ref2.error,helpText=_ref2.helpText;return error?/*#__PURE__*/React__default__namespace.default.createElement(StyledErrorContainer$2,null,/*#__PURE__*/React__default__namespace.default.createElement(Icon,{testID:"input-error-icon",icon:"circle-info",size:"xsmall",intent:"danger"}),/*#__PURE__*/React__default__namespace.default.createElement(StyledError$1,{testID:"input-error-message"},error)):!!helpText&&/*#__PURE__*/React__default__namespace.default.createElement(StyledHelperText$1,null,helpText);};var renderInput$1=function renderInput(_ref3){var variant=_ref3.variant,nativeInputProps=_ref3.nativeInputProps,renderInputValue=_ref3.renderInputValue,ref=_ref3.ref,theme=_ref3.theme;return renderInputValue?renderInputValue(nativeInputProps):/*#__PURE__*/React__default__namespace.default.createElement(StyledTextInput$1,_extends$1({},nativeInputProps,{themeVariant:variant,multiline:variant==='textarea'||nativeInputProps.multiline,ref:ref,placeholderTextColor:theme.__hd__.textInput.colors.placeholder}));};var renderSuffix$1=function renderSuffix(_ref4){var state=_ref4.state,loading=_ref4.loading,suffix=_ref4.suffix;var actualSuffix=loading?'loading':suffix;return typeof actualSuffix==='string'?/*#__PURE__*/React__default__namespace.default.createElement(Icon,{intent:state==='disabled'?'disabled-text':'text',testID:"input-suffix",icon:actualSuffix,spin:actualSuffix==='loading',size:"medium"}):suffix;};var renderPrefix$1=function renderPrefix(_ref5){var state=_ref5.state,prefix=_ref5.prefix;return typeof prefix==='string'?/*#__PURE__*/React__default__namespace.default.createElement(Icon,{intent:state==='disabled'?'disabled-text':'text',testID:"input-prefix",icon:prefix,size:"xsmall"}):prefix;};var renderMaxLengthMessage=function renderMaxLengthMessage(_ref6){var maxLength=_ref6.maxLength,state=_ref6.state,currentLength=_ref6.currentLength,hideCharacterCount=_ref6.hideCharacterCount;var shouldShowMaxLength=maxLength!==undefined&&!hideCharacterCount;return shouldShowMaxLength&&/*#__PURE__*/React__default__namespace.default.createElement(StyledMaxLengthMessage,{themeState:state},currentLength,"/",maxLength);};var getDisplayText=function getDisplayText(value,defaultValue){var _ref7;return (_ref7=value!==undefined?value:defaultValue)!==null&&_ref7!==void 0?_ref7:'';};var TextInput$1=/*#__PURE__*/React__default.forwardRef(function(_ref8,ref){var label=_ref8.label,prefix=_ref8.prefix,suffix=_ref8.suffix,style=_ref8.style,textStyle=_ref8.textStyle,testID=_ref8.testID,accessibilityLabelledBy=_ref8.accessibilityLabelledBy,error=_ref8.error,required=_ref8.required,_ref8$editable=_ref8.editable,editable=_ref8$editable===void 0?true:_ref8$editable,_ref8$disabled=_ref8.disabled,disabled=_ref8$disabled===void 0?false:_ref8$disabled,_ref8$loading=_ref8.loading,loading=_ref8$loading===void 0?false:_ref8$loading,maxLength=_ref8.maxLength,_ref8$hideCharacterCo=_ref8.hideCharacterCount,hideCharacterCount=_ref8$hideCharacterCo===void 0?false:_ref8$hideCharacterCo,helpText=_ref8.helpText,value=_ref8.value,defaultValue=_ref8.defaultValue,renderInputValue=_ref8.renderInputValue,_ref8$allowFontScalin=_ref8.allowFontScaling,allowFontScaling=_ref8$allowFontScalin===void 0?false:_ref8$allowFontScalin,_ref8$variant=_ref8.variant,variant=_ref8$variant===void 0?'text':_ref8$variant,nativeProps=_objectWithoutProperties(_ref8,_excluded$r);var displayText=getDisplayText(value,defaultValue);var isEmptyValue=displayText.length===0;var _React$useState=React__default__namespace.default.useState({height:0,width:0}),_React$useState2=_slicedToArray(_React$useState,2),inputSize=_React$useState2[0],setInputSize=_React$useState2[1];var _React$useState3=React__default__namespace.default.useState(false),_React$useState4=_slicedToArray(_React$useState3,2),isFocused=_React$useState4[0],setIsFocused=_React$useState4[1];var state=getState$3({disabled:disabled,error:error,editable:editable,loading:loading,isFocused:isFocused,isEmptyValue:isEmptyValue});var theme=useTheme();var focusAnimation=React__default.useRef(new reactNative.Animated.Value(0)).current;React__default.useEffect(function(){reactNative.Animated.timing(focusAnimation,{toValue:isFocused||!isEmptyValue?1:0,duration:LABEL_ANIMATION_DURATION$1,easing:reactNative.Easing.bezier(0.4,0,0.2,1),useNativeDriver:true}).start();},[focusAnimation,isEmptyValue,isFocused]);var onLayout=React__default.useCallback(function(event){var _event$nativeEvent$la=event.nativeEvent.layout,height=_event$nativeEvent$la.height,width=_event$nativeEvent$la.width;setInputSize(function(prev){return _objectSpread2(_objectSpread2({},prev),{},{height:height,width:width});});},[]);var innerTextInput=React__default__namespace.default.useRef();React__default__namespace.default.useImperativeHandle(ref,function(){return {// we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
-getNativeTextInputRef:function getNativeTextInputRef(){return innerTextInput.current;},focus:function focus(){var _innerTextInput$curre;(_innerTextInput$curre=innerTextInput.current)===null||_innerTextInput$curre===void 0||_innerTextInput$curre.focus();},clear:function clear(){var _innerTextInput$curre2;return (_innerTextInput$curre2=innerTextInput.current)===null||_innerTextInput$curre2===void 0?void 0:_innerTextInput$curre2.clear();},setNativeProps:function setNativeProps(args){var _innerTextInput$curre3;return (_innerTextInput$curre3=innerTextInput.current)===null||_innerTextInput$curre3===void 0?void 0:_innerTextInput$curre3.setNativeProps(args);},isFocused:function isFocused(){var _innerTextInput$curre4;return ((_innerTextInput$curre4=innerTextInput.current)===null||_innerTextInput$curre4===void 0?void 0:_innerTextInput$curre4.isFocused())||false;},blur:function blur(){var _innerTextInput$curre5;return (_innerTextInput$curre5=innerTextInput.current)===null||_innerTextInput$curre5===void 0?void 0:_innerTextInput$curre5.blur();}};},[innerTextInput]);var _useMemo=React__default.useMemo(function(){if(!textStyle){return {};}var flattenTextStyle=reactNative.StyleSheet.flatten(textStyle);var borderKeys=Object.keys(flattenTextStyle).filter(function(key){return key.startsWith('border');});return {borderStyle:pick(borderKeys,flattenTextStyle),textStyleWithoutBorderStyle:omit(borderKeys,flattenTextStyle)};},[textStyle]),borderStyle=_useMemo.borderStyle,textStyleWithoutBorderStyle=_useMemo.textStyleWithoutBorderStyle;var _useMemo2=React__default.useMemo(function(){var _flattenTextStyle$bac;if(!style){return {backgroundColor:theme.__hd__.textInput.colors.containerBackground};}var flattenTextStyle=reactNative.StyleSheet.flatten(style);return {backgroundColor:(_flattenTextStyle$bac=flattenTextStyle.backgroundColor)!==null&&_flattenTextStyle$bac!==void 0?_flattenTextStyle$bac:theme.__hd__.textInput.colors.containerBackground,styleWithoutBackgroundColor:omit(['backgroundColor'],flattenTextStyle)};},[style,theme]),backgroundColor=_useMemo2.backgroundColor,styleWithoutBackgroundColor=_useMemo2.styleWithoutBackgroundColor;var nativeInputProps=_objectSpread2(_objectSpread2({style:reactNative.StyleSheet.flatten([{backgroundColor:backgroundColor,color:theme.__hd__.textInput.colors.text},textStyleWithoutBorderStyle]),testID:'text-input',accessibilityState:{disabled:state==='disabled'||state==='readonly'},// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+getNativeTextInputRef:function getNativeTextInputRef(){return innerTextInput.current;},focus:function focus(){var _innerTextInput$curre;(_innerTextInput$curre=innerTextInput.current)===null||_innerTextInput$curre===void 0||_innerTextInput$curre.focus();},clear:function clear(){var _innerTextInput$curre2;return (_innerTextInput$curre2=innerTextInput.current)===null||_innerTextInput$curre2===void 0?void 0:_innerTextInput$curre2.clear();},setNativeProps:function setNativeProps(args){var _innerTextInput$curre3;return (_innerTextInput$curre3=innerTextInput.current)===null||_innerTextInput$curre3===void 0?void 0:_innerTextInput$curre3.setNativeProps(args);},isFocused:function isFocused(){var _innerTextInput$curre4;return ((_innerTextInput$curre4=innerTextInput.current)===null||_innerTextInput$curre4===void 0?void 0:_innerTextInput$curre4.isFocused())||false;},blur:function blur(){var _innerTextInput$curre5;return (_innerTextInput$curre5=innerTextInput.current)===null||_innerTextInput$curre5===void 0?void 0:_innerTextInput$curre5.blur();}};},[innerTextInput]);var _useMemo=React__default.useMemo(function(){if(!textStyle){return {};}var flattenTextStyle=reactNative.StyleSheet.flatten(textStyle);var borderKeys=Object.keys(flattenTextStyle).filter(function(key){return key.startsWith('border');});return {borderStyle:pick(borderKeys,flattenTextStyle),textStyleWithoutBorderStyle:omit(borderKeys,flattenTextStyle)};},[textStyle]),borderStyle=_useMemo.borderStyle,textStyleWithoutBorderStyle=_useMemo.textStyleWithoutBorderStyle;var _useMemo2=React__default.useMemo(function(){var _flattenTextStyle$bac;if(!style){return {backgroundColor:theme.__hd__.textInput.colors.containerBackground};}var flattenTextStyle=reactNative.StyleSheet.flatten(style);return {backgroundColor:(_flattenTextStyle$bac=flattenTextStyle.backgroundColor)!==null&&_flattenTextStyle$bac!==void 0?_flattenTextStyle$bac:theme.__hd__.textInput.colors.containerBackground,styleWithoutBackgroundColor:omit(['backgroundColor'],flattenTextStyle)};},[style,theme]),backgroundColor=_useMemo2.backgroundColor,styleWithoutBackgroundColor=_useMemo2.styleWithoutBackgroundColor;var nativeInputTestIDSuffix=testID?"-".concat(testID):'';var nativeInputProps=_objectSpread2(_objectSpread2({style:reactNative.StyleSheet.flatten([{backgroundColor:backgroundColor,color:theme.__hd__.textInput.colors.text},textStyleWithoutBorderStyle]),testID:"text-input".concat(nativeInputTestIDSuffix),accessibilityState:{disabled:state==='disabled'||state==='readonly'},// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 accessibilityLabelledBy:accessibilityLabelledBy,allowFontScaling:allowFontScaling},nativeProps),{},{onFocus:function onFocus(event){var _nativeProps$onFocus;setIsFocused(true);(_nativeProps$onFocus=nativeProps.onFocus)===null||_nativeProps$onFocus===void 0||_nativeProps$onFocus.call(nativeProps,event);},onBlur:function onBlur(event){var _nativeProps$onBlur;setIsFocused(false);(_nativeProps$onBlur=nativeProps.onBlur)===null||_nativeProps$onBlur===void 0||_nativeProps$onBlur.call(nativeProps,event);},editable:editable,maxLength:maxLength,value:value,onChangeText:function onChangeText(text){var _nativeProps$onChange;(_nativeProps$onChange=nativeProps.onChangeText)===null||_nativeProps$onChange===void 0||_nativeProps$onChange.call(nativeProps,text);},defaultValue:defaultValue,placeholder:isFocused||label===undefined?nativeProps.placeholder:EMPTY_PLACEHOLDER_VALUE$1});return/*#__PURE__*/React__default__namespace.default.createElement(StyledContainer$6,{style:styleWithoutBackgroundColor,pointerEvents:state==='disabled'||state==='readonly'?'none':'auto',testID:testID},/*#__PURE__*/React__default__namespace.default.createElement(StyledTextInputContainer,{onLayout:onLayout},/*#__PURE__*/React__default__namespace.default.createElement(StyledBorderBackDrop,{themeFocused:isFocused,themeState:state,testID:"text-input-border",style:[{backgroundColor:backgroundColor},borderStyle]}),/*#__PURE__*/React__default__namespace.default.createElement(reactNative.View,null,renderPrefix$1({state:state,prefix:prefix})),/*#__PURE__*/React__default__namespace.default.createElement(StyledLabelContainerInsideTextInput,{themeHasPrefix:!!prefix,themeVariant:variant,pointerEvents:"none",style:[{transformOrigin:'left top'},{transform:[{translateY:focusAnimation.interpolate({inputRange:[0,1],outputRange:[variant!=='textarea'?inputSize.height/2:theme.space.large,theme.space.xsmall]})},{scale:focusAnimation.interpolate({inputRange:[0,1],outputRange:[1,0.75]})}]}]},!!label&&/*#__PURE__*/React__default__namespace.default.createElement(StyledLabelInsideTextInput,{style:{backgroundColor:backgroundColor},nativeID:accessibilityLabelledBy,testID:"input-label",themeState:state},required&&/*#__PURE__*/React__default__namespace.default.createElement(StyledAsteriskLabelInsideTextInput,{style:{backgroundColor:backgroundColor},themeState:state,testID:"input-label-asterisk"},"*"),/*#__PURE__*/React__default__namespace.default.createElement(Typography.Body,{numberOfLines:1},label))),/*#__PURE__*/React__default__namespace.default.createElement(StyledTextInputAndLabelContainer,null,renderInput$1({variant:variant,nativeInputProps:nativeInputProps,renderInputValue:renderInputValue,ref:function ref(rnTextInputRef){innerTextInput.current=rnTextInputRef;},theme:theme})),renderSuffix$1({state:state,loading:loading,suffix:suffix})),/*#__PURE__*/React__default__namespace.default.createElement(StyledErrorAndHelpTextContainer,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledErrorAndMaxLengthContainer,null,renderErrorOrHelpText({error:error,helpText:helpText}),renderMaxLengthMessage({state:state,currentLength:displayText.length,maxLength:maxLength,hideCharacterCount:hideCharacterCount}))));});var AndroidDatePickerDialog=function AndroidDatePickerDialog(_ref){var open=_ref.open,onClose=_ref.onClose,value=_ref.value,minDate=_ref.minDate,maxDate=_ref.maxDate,_onChange=_ref.onChange,testID=_ref.testID,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'default':_ref$variant;var theme=useTheme();if(!open)return null;var pickerInitValue=value||new Date();return/*#__PURE__*/React__default__namespace.default.createElement(Box,{testID:testID},open&&variant==='month-year'?/*#__PURE__*/React__default__namespace.default.createElement(Box,{testID:testID},/*#__PURE__*/React__default__namespace.default.createElement(reactNativeMonthYearPicker.MonthYearPickerDialogueAndroid,{themeVariant:theme.themeMode==='dark'?'dark':'light',value:value,minimumDate:minDate,maximumDate:maxDate,onChange:function onChange(action,date){onClose();if(action==='dateSetAction'&&!!date){_onChange(date);}}})):null,open&&variant==='default'?/*#__PURE__*/React__default__namespace.default.createElement(DateTimePicker__default.default,{testID:"datePickerAndroid",mode:"date",value:pickerInitValue,minimumDate:minDate,maximumDate:maxDate,display:"default",onChange:function onChange(_,date){onClose();if(date){_onChange(date);}}}):null);};var getDateValue=function getDateValue(value,minDate,maxDate){if(minDate&&value<minDate){return minDate;}if(maxDate&&value>maxDate){return maxDate;}return value;};var useCalculateDate=function useCalculateDate(_ref){var maxDate=_ref.maxDate,minDate=_ref.minDate,onChange=_ref.onChange,value=_ref.value;React__default.useEffect(function(){var newDate=getDateValue(value||new Date(),minDate,maxDate);if(value&&newDate.toDateString()!==value.toDateString()){onChange(newDate);}},[maxDate,minDate,value]);};var locale$3={lang:'en-AU',dateTimeFormats:{fullDate:'dd/MM/yyyy'}};var LocaleContext=/*#__PURE__*/React__default.createContext(locale$3);var useLocale=function useLocale(){var context=React__default.useContext(LocaleContext);if(!context)return locale$3;return context;};var useDateTimeFormat=function useDateTimeFormat(){var _useLocale=useLocale(),dateTimeFormats=_useLocale.dateTimeFormats;var localizeDateTime=React__default.useCallback(function(key){return dateTimeFormats===null||dateTimeFormats===void 0?void 0:dateTimeFormats[key];},[dateTimeFormats]);return {localizeDateTime:localizeDateTime};};var locale$2={lang:'en-CA',dateTimeFormats:{fullDate:'MMM dd, yyyy'}};var locales={'en-AU':locale$3,'en-CA':locale$2};// Function to get the date format based on the displayFormat and locale,
 // if no displayFormat or locale is provided, use the default fullDate format
@@ -2756,12 +2756,13 @@ var InternalTextInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   Object.keys(borderStyles).forEach(function (key) {
     delete textInputStyle[key];
   });
+  var nativeInputTestIDSuffix = testID ? "-".concat(testID) : '';
   var nativeInputProps = _objectSpread2$1(_objectSpread2$1({
     style: reactNative.StyleSheet.flatten([{
       backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textInputStyle]),
-    testID: 'text-input',
+    testID: "text-input".concat(nativeInputTestIDSuffix),
     accessibilityState: {
       disabled: state === 'disabled' || state === 'readonly'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.102.0"
+    "@hero-design/rn": "^8.102.1"
   },
   "peerDependencies": {
     "@hero-design/react-native-month-year-picker": "^8.43.1",

package/src/__tests__/__snapshots__/index.spec.tsx.snap

@@ -133,7 +133,7 @@ exports[`first test to ensure configure correctly should render TextInput with p
               ],
             ]
           }
-          testID="text-input"
+          testID="text-input-text-input"
           themeVariant="text"
           value="test value"
         />

package/src/components/TextInput/Group/__tests__/__snapshots__/index.spec.tsx.snap

@@ -510,7 +510,7 @@ exports[`TextInputGroup should render: xxx 1`] = `
                 ],
               ]
             }
-            testID="text-input"
+            testID="text-input-text-input-2"
             themeVariant="text"
             value="Text Input 2"
           />

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -59,7 +59,7 @@ describe('TextInput', () => {
       expect(queryAllByTestId('input-label')).toHaveLength(0);
 
       // Input elements should still be present but hidden until interaction
-      expect(queryByTestId('text-input')).toBeTruthy();
+      expect(queryByTestId('text-input-idle-text-input')).toBeTruthy();
       expect(queryByTestId('input-prefix')).toBeTruthy();
     });
 
@@ -664,7 +664,7 @@ describe('TextInput', () => {
 
     // 1. Get both the container and the actual input field
     const container = getByTestId('email-input-container');
-    const textInput = getByTestId('text-input');
+    const textInput = getByTestId('text-input-email-input-container');
 
     // 2. Focus the component by interacting with the container
     fireEvent(container, 'focus');

package/src/components/TextInput/index.tsx

@@ -234,6 +234,8 @@ export const InternalTextInput = forwardRef<
       delete textInputStyle[key as keyof typeof textInputStyle];
     });
 
+    const nativeInputTestIDSuffix = testID ? `-${testID}` : '';
+
     const nativeInputProps: NativeTextInputProps = {
       style: StyleSheet.flatten([
         {
@@ -242,7 +244,7 @@ export const InternalTextInput = forwardRef<
         },
         textInputStyle,
       ]),
-      testID: 'text-input',
+      testID: `text-input${nativeInputTestIDSuffix}`,
       accessibilityState: {
         disabled: state === 'disabled' || state === 'readonly',
       },