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

package/CHANGELOG.md

@@ -1,13 +1,24 @@
 # @hero-design/rn-work-uikit
 
+## 1.2.2
+
+### Patch Changes
+
+- [#4020](https://github.com/Thinkei/hero-design/pull/4020) [`23b0c7f7744bb4972504237b57cce57da9da5a73`](https://github.com/Thinkei/hero-design/commit/23b0c7f7744bb4972504237b57cce57da9da5a73) Thanks [@cuongnguyeneh](https://github.com/cuongnguyeneh)! - [TextInput] Update testId for label of input
+
+- Updated dependencies [[`23b0c7f7744bb4972504237b57cce57da9da5a73`](https://github.com/Thinkei/hero-design/commit/23b0c7f7744bb4972504237b57cce57da9da5a73)]:
+  - @hero-design/rn@8.103.1
+
 ## 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
+- [#4011](https://github.com/Thinkei/hero-design/pull/4011) [`ea8f4a15e1bc9a08c266d939e3aed2e98797b783`](https://github.com/Thinkei/hero-design/commit/ea8f4a15e1bc9a08c266d939e3aed2e98797b783) Thanks [@cuongnguyeneh](https://github.com/cuongnguyeneh)! - [TextInput] Update migration.md
+
+- Updated dependencies [[`8ba84012be721c8a18a2ba9453b6cde66f8b3e49`](https://github.com/Thinkei/hero-design/commit/8ba84012be721c8a18a2ba9453b6cde66f8b3e49), [`7e0859459ea48c43c9edcc01a64c80ab715b4d15`](https://github.com/Thinkei/hero-design/commit/7e0859459ea48c43c9edcc01a64c80ab715b4d15)]:
+  - @hero-design/rn@8.103.0
 
 ## 1.2.0
 

package/lib/index.js

@@ -1684,7 +1684,7 @@ var yMax=React__default.useMemo(function(){return Math.max.apply(Math,_toConsuma
 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 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,
+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".concat(nativeInputTestIDSuffix),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,{testID:"input-label-text".concat(nativeInputTestIDSuffix),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
 var getDateFormat=function getDateFormat(_ref){var displayFormat=_ref.displayFormat,locale=_ref.locale,localizeDateTime=_ref.localizeDateTime;// Prioritise displayFormat
 if(displayFormat){return displayFormat;}// If locale is provided, find the corresponding locale in the locales object
@@ -1707,7 +1707,7 @@ React__default.useEffect(function(){var backHandler=reactNative.BackHandler.addE
  * @param {ErrorProps}
  * @return {*}  {ReactElement}
  */var ErrorComponent=function ErrorComponent(_ref3){var _ref3$visible=_ref3.visible,visible=_ref3$visible===void 0?true:_ref3$visible,_ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'in-page':_ref3$variant,title=_ref3.title,description=_ref3.description,image=_ref3.image,testID=_ref3.testID,ctaText=_ref3.ctaText,onCtaPress=_ref3.onCtaPress,secondaryCtaText=_ref3.secondaryCtaText,onSecondaryCtaPress=_ref3.onSecondaryCtaPress,nativeProps=_objectWithoutProperties(_ref3,_excluded2$1);useDeprecation("Visible prop is deprecated. Use conditional rendering instead",visible);var _useState=React__default.useState(visible),_useState2=_slicedToArray(_useState,2),isVisible=_useState2[0],setIsVisible=_useState2[1];var _useState3=React__default.useState(null),_useState4=_slicedToArray(_useState3,2),ctaPressed=_useState4[0],setCtaPressed=_useState4[1];var onCloseModal=React__default.useCallback(function(){if(ctaPressed==='cta'&&onCtaPress){onCtaPress();}if(ctaPressed==='secondaryCta'&&onSecondaryCtaPress){onSecondaryCtaPress();}setCtaPressed(null);},[ctaPressed,onCtaPress,onSecondaryCtaPress]);React__default.useEffect(function(){setIsVisible(visible);},[visible]);// These useEffect lines prevents race condition error when callback contains navigation logic
-React__default.useEffect(function(){if(ctaPressed){setIsVisible(false);}},[ctaPressed]);React__default.useEffect(function(){if(!isVisible){onCloseModal();}},[isVisible,onCloseModal]);if(variant==='full-screen'){return/*#__PURE__*/React__default__namespace.default.createElement(StyledErrorModal,{visible:isVisible,onRequestClose:function onRequestClose(){return setIsVisible(false);},onDismiss:function onDismiss(){return setIsVisible(false);},animationType:"slide"},/*#__PURE__*/React__default__namespace.default.createElement(ErrorPage,_extends$1({variant:variant,title:title,description:description,image:image,testID:testID,ctaText:ctaText,onCtaPress:onCtaPress&&function(){setCtaPressed('cta');},secondaryCtaText:secondaryCtaText,onSecondaryCtaPress:onSecondaryCtaPress&&function(){setCtaPressed('secondaryCta');}},nativeProps)));}return/*#__PURE__*/React__default__namespace.default.createElement(ErrorPage,_extends$1({variant:variant,title:title,description:description,image:image,testID:testID,ctaText:ctaText,onCtaPress:onCtaPress,secondaryCtaText:secondaryCtaText,onSecondaryCtaPress:onSecondaryCtaPress},nativeProps));};var StyledActionItem=index$b(reactNative.TouchableOpacity)(function(_ref){var theme=_ref.theme;return {padding:theme.__hd__.fab.space.actionItemPadding,margin:theme.__hd__.fab.space.actionItemMargin,marginRight:theme.__hd__.fab.space.actionItemMarginRight,backgroundColor:theme.__hd__.fab.colors.actionItemBackground,borderRadius:theme.__hd__.fab.radii.actionItem,flexDirection:'row',alignItems:'center',alignSelf:'flex-end',overflow:'hidden'};});var StyledActionItemText=index$b(Typography.Body)(function(_ref2){var theme=_ref2.theme;return {color:theme.__hd__.fab.colors.actionItemText};});var StyledIcon$3=index$b(Icon)(function(_ref3){var theme=_ref3.theme;return {color:theme.__hd__.fab.colors.actionItemText};});var AnimatedTouchableHighlight=reactNative.Animated.createAnimatedComponent(reactNative.TouchableOpacity);var StyledFAB$2=index$b(AnimatedTouchableHighlight)(function(_ref){var theme=_ref.theme,themeActive=_ref.themeActive;return _objectSpread2({backgroundColor:themeActive?theme.__hd__.fab.colors.buttonActiveBackground:theme.__hd__.fab.colors.buttonBackground,borderRadius:theme.radii.rounded,alignItems:'center',justifyContent:'center',alignSelf:'flex-start',padding:theme.__hd__.fab.space.containerPadding,flexDirection:'row',height:theme.__hd__.fab.sizes.height},theme.__hd__.fab.shadows["default"]);});var StyledFABIcon=index$b(Icon)(function(_ref2){var theme=_ref2.theme;return {color:theme.__hd__.fab.colors.icon,lineHeight:theme.__hd__.fab.lineHeights.icon,textAlignVertical:'center',textAlign:'center'};});var StyledFABText=index$b(Typography.Body)(function(_ref3){var theme=_ref3.theme;return {color:theme.__hd__.fab.colors.titleText,textAlignVertical:'center',textAlign:'center',marginHorizontal:theme.__hd__.fab.space.titleMarginHorizontal};});var StyledIconContainer=index$b(Box)(function(_ref4){var theme=_ref4.theme;return {width:theme.__hd__.fab.sizes.iconContainerWidth,height:theme.__hd__.fab.sizes.iconContainerHeight,justifyContent:'center',alignItems:'center'};});var ActionItem=function ActionItem(_ref){var icon=_ref.icon,title=_ref.title,onPress=_ref.onPress,style=_ref.style,testID=_ref.testID,index=_ref.index,_ref$active=_ref.active,active=_ref$active===void 0?false:_ref$active;var animatedValue=React__default__namespace.default.useRef(new reactNative.Animated.Value(0));var translateY=animatedValue.current.interpolate({inputRange:[0,1],outputRange:[50,0]});React__default__namespace.default.useEffect(function(){reactNative.Animated.spring(animatedValue.current,{toValue:active?1:0,useNativeDriver:reactNative.Platform.OS!=='web',delay:index*30,speed:10,bounciness:10}).start();},[active,index]);return/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Animated.View,{style:{transform:[{translateY:translateY}]}},/*#__PURE__*/React__default__namespace.default.createElement(StyledActionItem,{activeOpacity:0.8,style:style,onPress:onPress,testID:testID},/*#__PURE__*/React__default__namespace.default.createElement(React__default__namespace.default.Fragment,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledIconContainer,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledIcon$3,{size:"xsmall",icon:icon})),/*#__PURE__*/React__default__namespace.default.createElement(StyledActionItemText,null,title))));};var _excluded$n=["active"];var AnimatedIcons=reactNative.Animated.createAnimatedComponent(StyledFABIcon);var AnimatedFABIcon=function AnimatedFABIcon(_ref){var active=_ref.active,iconProps=_objectWithoutProperties(_ref,_excluded$n);var rotateAnimation=React__default.useRef(new reactNative.Animated.Value(active?1:0));React__default.useEffect(function(){var animation=reactNative.Animated.spring(rotateAnimation.current,{toValue:active?1:0,useNativeDriver:reactNative.Platform.OS==='ios'||reactNative.Platform.OS==='android'});animation.start();return function(){animation.stop();};},[active]);var interpolatedRotateAnimation=rotateAnimation.current.interpolate({inputRange:[0,1],outputRange:['0deg','-45deg']});return/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Animated.View,{style:reactNative.StyleSheet.flatten([{transform:[{rotate:interpolatedRotateAnimation}]}])},/*#__PURE__*/React__default__namespace.default.createElement(AnimatedIcons,_extends$1({size:"xsmall"},iconProps)));};if(reactNative.Platform.OS==='android'){if(reactNative.UIManager.setLayoutAnimationEnabledExperimental){reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);}}var IconOnlyContent=function IconOnlyContent(_ref){var icon=_ref.icon,animated=_ref.animated,active=_ref.active;if(animated){return/*#__PURE__*/React__default__namespace.default.createElement(StyledIconContainer,null,/*#__PURE__*/React__default__namespace.default.createElement(AnimatedFABIcon,{active:active,icon:icon,testID:"animated-fab-icon",size:"xsmall"}));}return/*#__PURE__*/React__default__namespace.default.createElement(StyledIconContainer,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledFABIcon,{size:"xsmall",icon:icon,testID:"styled-fab-icon"}));};var IconWithTextContent=function IconWithTextContent(_ref2){var icon=_ref2.icon,title=_ref2.title;return/*#__PURE__*/React__default__namespace.default.createElement(React__default__namespace.default.Fragment,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledIconContainer,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledFABIcon,{size:"xsmall",icon:icon,testID:"styled-fab-icon"})),/*#__PURE__*/React__default__namespace.default.createElement(StyledFABText,null,title));};var animateWidth=function animateWidth(){reactNative.LayoutAnimation.configureNext({duration:reactNative.Platform.OS==='ios'?200:400,update:{type:'spring',springDamping:reactNative.Platform.OS==='ios'?1:1.5}});};var FAB$1=/*#__PURE__*/React__default.forwardRef(function(_ref3,ref){var _StyleSheet$flatten,_StyleSheet$flatten2;var onPress=_ref3.onPress,title=_ref3.title,icon=_ref3.icon,animated=_ref3.animated,testID=_ref3.testID,active=_ref3.active,style=_ref3.style;var theme=useTheme();var _React$useState=React__default__namespace.default.useState({hideTitle:false,hideButton:false}),_React$useState2=_slicedToArray(_React$useState,2),displayState=_React$useState2[0],setDisplayState=_React$useState2[1];var isIconOnly=displayState.hideTitle||active||!title;var animatedValues={opacity:React__default__namespace.default.useRef(new reactNative.Animated.Value(1)).current,width:React__default__namespace.default.useRef(new reactNative.Animated.Value(1)).current,translateY:React__default__namespace.default.useRef(new reactNative.Animated.Value(0)).current};var marginBottom=Number((_StyleSheet$flatten=reactNative.StyleSheet.flatten(style))===null||_StyleSheet$flatten===void 0?void 0:_StyleSheet$flatten.marginBottom)||0;var _React$useState3=React__default__namespace.default.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),buttonWidth=_React$useState4[0],setButtonWidth=_React$useState4[1];var hasSetButtonWidth=buttonWidth>0;React__default__namespace.default.useImperativeHandle(ref,function(){return {show:function show(){reactNative.Animated.spring(animatedValues.translateY,{toValue:0,useNativeDriver:true}).start();setDisplayState({hideButton:false,hideTitle:false});animateWidth();reactNative.Animated.spring(animatedValues.opacity,{toValue:1,useNativeDriver:true}).start();},collapse:function collapse(){reactNative.Animated.parallel([reactNative.Animated.spring(animatedValues.opacity,{toValue:1,useNativeDriver:true}),reactNative.Animated.spring(animatedValues.translateY,{toValue:0,useNativeDriver:true})]).start();animateWidth();setDisplayState({hideButton:false,hideTitle:true});},hide:function hide(){reactNative.Animated.stagger(20,[reactNative.Animated.spring(animatedValues.opacity,{toValue:0,useNativeDriver:true}),reactNative.Animated.spring(animatedValues.translateY,{toValue:1,useNativeDriver:true})]).start(function(){animateWidth();setDisplayState(function(previousState){return _objectSpread2(_objectSpread2({},previousState),{},{hideButton:true});});});}};},[]);return/*#__PURE__*/React__default__namespace.default.createElement(StyledFAB$2,{onLayout:function onLayout(event){return !hasSetButtonWidth&&!active&&setButtonWidth(event.nativeEvent.layout.width);},activeOpacity:0.8,onPress:onPress,style:[style,{bottom:displayState.hideButton?-(marginBottom+theme.__hd__.fab.sizes.height*2):(_StyleSheet$flatten2=reactNative.StyleSheet.flatten(style))===null||_StyleSheet$flatten2===void 0?void 0:_StyleSheet$flatten2.bottom,transform:[{translateY:animatedValues.translateY.interpolate({inputRange:[0,1],outputRange:[0,marginBottom+theme.__hd__.fab.sizes.height*2]})}]}],testID:testID,themeActive:active},/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Animated.View,{style:{flexDirection:'row',opacity:animatedValues.opacity.interpolate({inputRange:[0,1],outputRange:[0,1]})}},isIconOnly?/*#__PURE__*/React__default__namespace.default.createElement(IconOnlyContent,{animated:animated,active:active,icon:active?'add':icon}):/*#__PURE__*/React__default__namespace.default.createElement(IconWithTextContent,{icon:icon,title:title})));});FAB$1.displayName='FAB';var StyledContainer$4=index$b(reactNative.View)({position:'absolute',left:0,right:0,top:0,bottom:0,alignItems:'flex-end',justifyContent:'flex-end'});var StyledContainerInModal=index$b(reactNative.View)({position:'absolute',left:0,right:0,top:0,bottom:0,alignItems:'flex-end',justifyContent:'flex-end'});var StyledActionGroupContainer=index$b(reactNative.Animated.View)({alignItems:'flex-end',justifyContent:'flex-end',width:'70%'});var StyledFAB$1=index$b(FAB$1)(function(_ref){var theme=_ref.theme;return {marginRight:theme.__hd__.fab.space.buttonMarginRight,marginTop:theme.__hd__.fab.space.buttonMarginTop,alignSelf:'flex-end'};});var StyledBackdropPressable=index$b(reactNative.Pressable)(function(){return {position:'absolute',left:0,right:0,top:0,bottom:0,backgroundColor:'transparent'};});var StyledBackdrop=index$b(Box)(function(_ref2){var theme=_ref2.theme;return {position:'absolute',left:0,right:0,top:0,bottom:0,opacity:0.4,backgroundColor:theme.__hd__.fab.colors.backdropBackground};});var ActionGroup=/*#__PURE__*/React__default.forwardRef(function(_ref,ref){var headerTitle=_ref.headerTitle,onPress=_ref.onPress,active=_ref.active,style=_ref.style,items=_ref.items,testID=_ref.testID,fabTitle=_ref.fabTitle,onBackdropPress=_ref.onBackdropPress,_ref$fabIcon=_ref.fabIcon,fabIcon=_ref$fabIcon===void 0?'add':_ref$fabIcon,_ref$supportedOrienta=_ref.supportedOrientations,supportedOrientations=_ref$supportedOrienta===void 0?['portrait']:_ref$supportedOrienta;useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.",headerTitle!==undefined);var theme=useTheme();var fabRef=React__default.useRef(null);var animatedValue=React__default.useRef(new reactNative.Animated.Value(active?1:0));React__default__namespace.default.useImperativeHandle(ref,function(){return {showFAB:function showFAB(){var _fabRef$current;return (_fabRef$current=fabRef.current)===null||_fabRef$current===void 0?void 0:_fabRef$current.show();},collapseFAB:function collapseFAB(){var _fabRef$current2;return (_fabRef$current2=fabRef.current)===null||_fabRef$current2===void 0?void 0:_fabRef$current2.collapse();},hideFAB:function hideFAB(){var _fabRef$current3;return (_fabRef$current3=fabRef.current)===null||_fabRef$current3===void 0?void 0:_fabRef$current3.hide();}};},[fabRef]);React__default__namespace.default.useEffect(function(){reactNative.Animated.spring(animatedValue.current,{toValue:active?1:0,delay:100,useNativeDriver:reactNative.Platform.OS!=='web'}).start();if(active){var _fabRef$current4;(_fabRef$current4=fabRef.current)===null||_fabRef$current4===void 0||_fabRef$current4.collapse();}else {var _fabRef$current5;(_fabRef$current5=fabRef.current)===null||_fabRef$current5===void 0||_fabRef$current5.show();}},[active]);var actionGroupOpacity=animatedValue.current.interpolate({inputRange:[0,1],outputRange:[0,1]});return/*#__PURE__*/React__default__namespace.default.createElement(StyledContainer$4,{testID:testID,pointerEvents:"box-none",style:style},/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Animated.View,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledFAB$1,{key:"fab",testID:"fab",icon:fabIcon,onPress:onPress,animated:true,active:active,title:fabTitle,ref:fabRef})),/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Modal,{visible:active,animationType:"fade",transparent:true,statusBarTranslucent:true,supportedOrientations:supportedOrientations},/*#__PURE__*/React__default__namespace.default.createElement(StyledContainerInModal,{testID:testID,style:[style]},/*#__PURE__*/React__default__namespace.default.createElement(StyledBackdropPressable,{testID:"back-drop",onPress:onBackdropPress},active&&/*#__PURE__*/React__default__namespace.default.createElement(Portal$1,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledBackdrop,null))),/*#__PURE__*/React__default__namespace.default.createElement(StyledActionGroupContainer,{testID:"action-group",pointerEvents:"box-none",style:{opacity:actionGroupOpacity}},/*#__PURE__*/React__default__namespace.default.createElement(Box,{style:{paddingBottom:0}},items===null||items===void 0?void 0:items.map(function(itemProp,index){return/*#__PURE__*/React__default__namespace.default.createElement(ActionItem,_extends$1({key:itemProp.key||"".concat(itemProp.icon,"_").concat(itemProp.title)},itemProp,{index:active?index:items.length-index,active:active}));}))),active&&/*#__PURE__*/React__default__namespace.default.createElement(StyledFAB$1// This FAB is moved up a bit compared to the original FAB,
+React__default.useEffect(function(){if(ctaPressed){setIsVisible(false);}},[ctaPressed]);React__default.useEffect(function(){if(!isVisible){onCloseModal();}},[isVisible,onCloseModal]);if(variant==='full-screen'){return/*#__PURE__*/React__default__namespace.default.createElement(StyledErrorModal,{visible:isVisible,onRequestClose:function onRequestClose(){return setIsVisible(false);},onDismiss:function onDismiss(){return setIsVisible(false);},animationType:"slide"},/*#__PURE__*/React__default__namespace.default.createElement(ErrorPage,_extends$1({variant:variant,title:title,description:description,image:image,testID:testID,ctaText:ctaText,onCtaPress:onCtaPress&&function(){setCtaPressed('cta');},secondaryCtaText:secondaryCtaText,onSecondaryCtaPress:onSecondaryCtaPress&&function(){setCtaPressed('secondaryCta');}},nativeProps)));}return/*#__PURE__*/React__default__namespace.default.createElement(ErrorPage,_extends$1({variant:variant,title:title,description:description,image:image,testID:testID,ctaText:ctaText,onCtaPress:onCtaPress,secondaryCtaText:secondaryCtaText,onSecondaryCtaPress:onSecondaryCtaPress},nativeProps));};var StyledActionItem=index$b(reactNative.TouchableOpacity)(function(_ref){var theme=_ref.theme;return {padding:theme.__hd__.fab.space.actionItemPadding,margin:theme.__hd__.fab.space.actionItemMargin,marginRight:theme.__hd__.fab.space.actionItemMarginRight,backgroundColor:theme.__hd__.fab.colors.actionItemBackground,borderRadius:theme.__hd__.fab.radii.actionItem,flexDirection:'row',alignItems:'center',alignSelf:'flex-end',overflow:'hidden'};});var StyledActionItemText=index$b(Typography.Body)(function(_ref2){var theme=_ref2.theme;return {color:theme.__hd__.fab.colors.actionItemText};});var StyledIcon$3=index$b(Icon)(function(_ref3){var theme=_ref3.theme;return {color:theme.__hd__.fab.colors.actionItemText};});var AnimatedTouchableHighlight=reactNative.Animated.createAnimatedComponent(reactNative.TouchableOpacity);var StyledFAB$2=index$b(AnimatedTouchableHighlight)(function(_ref){var theme=_ref.theme,themeActive=_ref.themeActive;return _objectSpread2({backgroundColor:themeActive?theme.__hd__.fab.colors.buttonActiveBackground:theme.__hd__.fab.colors.buttonBackground,borderRadius:theme.radii.rounded,alignItems:'center',justifyContent:'center',alignSelf:'flex-start',padding:theme.__hd__.fab.space.containerPadding,flexDirection:'row',height:theme.__hd__.fab.sizes.height},theme.__hd__.fab.shadows["default"]);});var StyledFABIcon=index$b(Icon)(function(_ref2){var theme=_ref2.theme;return {color:theme.__hd__.fab.colors.icon,lineHeight:theme.__hd__.fab.lineHeights.icon,textAlignVertical:'center',textAlign:'center'};});var StyledFABText=index$b(Typography.Body)(function(_ref3){var theme=_ref3.theme;return {color:theme.__hd__.fab.colors.titleText,textAlignVertical:'center',textAlign:'center',marginHorizontal:theme.__hd__.fab.space.titleMarginHorizontal};});var StyledIconContainer=index$b(Box)(function(_ref4){var theme=_ref4.theme;return {width:theme.__hd__.fab.sizes.iconContainerWidth,height:theme.__hd__.fab.sizes.iconContainerHeight,justifyContent:'center',alignItems:'center'};});var ActionItem=function ActionItem(_ref){var icon=_ref.icon,title=_ref.title,onPress=_ref.onPress,style=_ref.style,testID=_ref.testID,index=_ref.index,_ref$active=_ref.active,active=_ref$active===void 0?false:_ref$active;var animatedValue=React__default__namespace.default.useRef(new reactNative.Animated.Value(0));var translateY=animatedValue.current.interpolate({inputRange:[0,1],outputRange:[50,0]});React__default__namespace.default.useEffect(function(){reactNative.Animated.spring(animatedValue.current,{toValue:active?1:0,useNativeDriver:reactNative.Platform.OS!=='web',delay:index*30,speed:10,bounciness:10}).start();},[active,index]);return/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Animated.View,{style:{transform:[{translateY:translateY}]}},/*#__PURE__*/React__default__namespace.default.createElement(StyledActionItem,{activeOpacity:0.8,style:style,onPress:onPress,testID:testID},/*#__PURE__*/React__default__namespace.default.createElement(React__default__namespace.default.Fragment,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledIconContainer,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledIcon$3,{size:"xsmall",icon:icon})),/*#__PURE__*/React__default__namespace.default.createElement(StyledActionItemText,null,title))));};var _excluded$n=["active"];var AnimatedIcons=reactNative.Animated.createAnimatedComponent(/*#__PURE__*/React__default__namespace.default.forwardRef(function(props,_){return/*#__PURE__*/React__default__namespace.default.createElement(StyledFABIcon,props);}));var AnimatedFABIcon=function AnimatedFABIcon(_ref){var active=_ref.active,iconProps=_objectWithoutProperties(_ref,_excluded$n);var rotateAnimation=React__default.useRef(new reactNative.Animated.Value(active?1:0));React__default.useEffect(function(){var animation=reactNative.Animated.spring(rotateAnimation.current,{toValue:active?1:0,useNativeDriver:reactNative.Platform.OS==='ios'||reactNative.Platform.OS==='android'});animation.start();return function(){animation.stop();};},[active]);var interpolatedRotateAnimation=rotateAnimation.current.interpolate({inputRange:[0,1],outputRange:['0deg','-45deg']});return/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Animated.View,{style:reactNative.StyleSheet.flatten([{transform:[{rotate:interpolatedRotateAnimation}]}])},/*#__PURE__*/React__default__namespace.default.createElement(AnimatedIcons,_extends$1({size:"xsmall"},iconProps)));};if(reactNative.Platform.OS==='android'){if(reactNative.UIManager.setLayoutAnimationEnabledExperimental){reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);}}var IconOnlyContent=function IconOnlyContent(_ref){var icon=_ref.icon,animated=_ref.animated,active=_ref.active;if(animated){return/*#__PURE__*/React__default__namespace.default.createElement(StyledIconContainer,null,/*#__PURE__*/React__default__namespace.default.createElement(AnimatedFABIcon,{active:active,icon:icon,testID:"animated-fab-icon",size:"xsmall"}));}return/*#__PURE__*/React__default__namespace.default.createElement(StyledIconContainer,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledFABIcon,{size:"xsmall",icon:icon,testID:"styled-fab-icon"}));};var IconWithTextContent=function IconWithTextContent(_ref2){var icon=_ref2.icon,title=_ref2.title;return/*#__PURE__*/React__default__namespace.default.createElement(React__default__namespace.default.Fragment,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledIconContainer,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledFABIcon,{size:"xsmall",icon:icon,testID:"styled-fab-icon"})),/*#__PURE__*/React__default__namespace.default.createElement(StyledFABText,null,title));};var animateWidth=function animateWidth(){reactNative.LayoutAnimation.configureNext({duration:reactNative.Platform.OS==='ios'?200:400,update:{type:'spring',springDamping:reactNative.Platform.OS==='ios'?1:1.5}});};var FAB$1=/*#__PURE__*/React__default.forwardRef(function(_ref3,ref){var _StyleSheet$flatten,_StyleSheet$flatten2;var onPress=_ref3.onPress,title=_ref3.title,icon=_ref3.icon,animated=_ref3.animated,testID=_ref3.testID,active=_ref3.active,style=_ref3.style;var theme=useTheme();var _React$useState=React__default__namespace.default.useState({hideTitle:false,hideButton:false}),_React$useState2=_slicedToArray(_React$useState,2),displayState=_React$useState2[0],setDisplayState=_React$useState2[1];var isIconOnly=displayState.hideTitle||active||!title;var animatedValues={opacity:React__default__namespace.default.useRef(new reactNative.Animated.Value(1)).current,width:React__default__namespace.default.useRef(new reactNative.Animated.Value(1)).current,translateY:React__default__namespace.default.useRef(new reactNative.Animated.Value(0)).current};var marginBottom=Number((_StyleSheet$flatten=reactNative.StyleSheet.flatten(style))===null||_StyleSheet$flatten===void 0?void 0:_StyleSheet$flatten.marginBottom)||0;var _React$useState3=React__default__namespace.default.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),buttonWidth=_React$useState4[0],setButtonWidth=_React$useState4[1];var hasSetButtonWidth=buttonWidth>0;React__default__namespace.default.useImperativeHandle(ref,function(){return {show:function show(){reactNative.Animated.spring(animatedValues.translateY,{toValue:0,useNativeDriver:true}).start();setDisplayState({hideButton:false,hideTitle:false});animateWidth();reactNative.Animated.spring(animatedValues.opacity,{toValue:1,useNativeDriver:true}).start();},collapse:function collapse(){reactNative.Animated.parallel([reactNative.Animated.spring(animatedValues.opacity,{toValue:1,useNativeDriver:true}),reactNative.Animated.spring(animatedValues.translateY,{toValue:0,useNativeDriver:true})]).start();animateWidth();setDisplayState({hideButton:false,hideTitle:true});},hide:function hide(){reactNative.Animated.stagger(20,[reactNative.Animated.spring(animatedValues.opacity,{toValue:0,useNativeDriver:true}),reactNative.Animated.spring(animatedValues.translateY,{toValue:1,useNativeDriver:true})]).start(function(){animateWidth();setDisplayState(function(previousState){return _objectSpread2(_objectSpread2({},previousState),{},{hideButton:true});});});}};},[]);return/*#__PURE__*/React__default__namespace.default.createElement(StyledFAB$2,{onLayout:function onLayout(event){return !hasSetButtonWidth&&!active&&setButtonWidth(event.nativeEvent.layout.width);},activeOpacity:0.8,onPress:onPress,style:[style,{bottom:displayState.hideButton?-(marginBottom+theme.__hd__.fab.sizes.height*2):(_StyleSheet$flatten2=reactNative.StyleSheet.flatten(style))===null||_StyleSheet$flatten2===void 0?void 0:_StyleSheet$flatten2.bottom,transform:[{translateY:animatedValues.translateY.interpolate({inputRange:[0,1],outputRange:[0,marginBottom+theme.__hd__.fab.sizes.height*2]})}]}],testID:testID,themeActive:active},/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Animated.View,{style:{flexDirection:'row',opacity:animatedValues.opacity.interpolate({inputRange:[0,1],outputRange:[0,1]})}},isIconOnly?/*#__PURE__*/React__default__namespace.default.createElement(IconOnlyContent,{animated:animated,active:active,icon:active?'add':icon}):/*#__PURE__*/React__default__namespace.default.createElement(IconWithTextContent,{icon:icon,title:title})));});FAB$1.displayName='FAB';var StyledContainer$4=index$b(reactNative.View)({position:'absolute',left:0,right:0,top:0,bottom:0,alignItems:'flex-end',justifyContent:'flex-end'});var StyledContainerInModal=index$b(reactNative.View)({position:'absolute',left:0,right:0,top:0,bottom:0,alignItems:'flex-end',justifyContent:'flex-end'});var StyledActionGroupContainer=index$b(reactNative.Animated.View)({alignItems:'flex-end',justifyContent:'flex-end',width:'70%'});var StyledFAB$1=index$b(FAB$1)(function(_ref){var theme=_ref.theme;return {marginRight:theme.__hd__.fab.space.buttonMarginRight,marginTop:theme.__hd__.fab.space.buttonMarginTop,alignSelf:'flex-end'};});var StyledBackdropPressable=index$b(reactNative.Pressable)(function(){return {position:'absolute',left:0,right:0,top:0,bottom:0,backgroundColor:'transparent'};});var StyledBackdrop=index$b(Box)(function(_ref2){var theme=_ref2.theme;return {position:'absolute',left:0,right:0,top:0,bottom:0,opacity:0.4,backgroundColor:theme.__hd__.fab.colors.backdropBackground};});var ActionGroup=/*#__PURE__*/React__default.forwardRef(function(_ref,ref){var headerTitle=_ref.headerTitle,onPress=_ref.onPress,active=_ref.active,style=_ref.style,items=_ref.items,testID=_ref.testID,fabTitle=_ref.fabTitle,onBackdropPress=_ref.onBackdropPress,_ref$fabIcon=_ref.fabIcon,fabIcon=_ref$fabIcon===void 0?'add':_ref$fabIcon,_ref$supportedOrienta=_ref.supportedOrientations,supportedOrientations=_ref$supportedOrienta===void 0?['portrait']:_ref$supportedOrienta;useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.",headerTitle!==undefined);var theme=useTheme();var fabRef=React__default.useRef(null);var animatedValue=React__default.useRef(new reactNative.Animated.Value(active?1:0));React__default__namespace.default.useImperativeHandle(ref,function(){return {showFAB:function showFAB(){var _fabRef$current;return (_fabRef$current=fabRef.current)===null||_fabRef$current===void 0?void 0:_fabRef$current.show();},collapseFAB:function collapseFAB(){var _fabRef$current2;return (_fabRef$current2=fabRef.current)===null||_fabRef$current2===void 0?void 0:_fabRef$current2.collapse();},hideFAB:function hideFAB(){var _fabRef$current3;return (_fabRef$current3=fabRef.current)===null||_fabRef$current3===void 0?void 0:_fabRef$current3.hide();}};},[fabRef]);React__default__namespace.default.useEffect(function(){reactNative.Animated.spring(animatedValue.current,{toValue:active?1:0,delay:100,useNativeDriver:reactNative.Platform.OS!=='web'}).start();if(active){var _fabRef$current4;(_fabRef$current4=fabRef.current)===null||_fabRef$current4===void 0||_fabRef$current4.collapse();}else {var _fabRef$current5;(_fabRef$current5=fabRef.current)===null||_fabRef$current5===void 0||_fabRef$current5.show();}},[active]);var actionGroupOpacity=animatedValue.current.interpolate({inputRange:[0,1],outputRange:[0,1]});return/*#__PURE__*/React__default__namespace.default.createElement(StyledContainer$4,{testID:testID,pointerEvents:"box-none",style:style},/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Animated.View,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledFAB$1,{key:"fab",testID:"fab",icon:fabIcon,onPress:onPress,animated:true,active:active,title:fabTitle,ref:fabRef})),/*#__PURE__*/React__default__namespace.default.createElement(reactNative.Modal,{visible:active,animationType:"fade",transparent:true,statusBarTranslucent:true,supportedOrientations:supportedOrientations},/*#__PURE__*/React__default__namespace.default.createElement(StyledContainerInModal,{testID:testID,style:[style]},/*#__PURE__*/React__default__namespace.default.createElement(StyledBackdropPressable,{testID:"back-drop",onPress:onBackdropPress},active&&/*#__PURE__*/React__default__namespace.default.createElement(Portal$1,null,/*#__PURE__*/React__default__namespace.default.createElement(StyledBackdrop,null))),/*#__PURE__*/React__default__namespace.default.createElement(StyledActionGroupContainer,{testID:"action-group",pointerEvents:"box-none",style:{opacity:actionGroupOpacity}},/*#__PURE__*/React__default__namespace.default.createElement(Box,{style:{paddingBottom:0}},items===null||items===void 0?void 0:items.map(function(itemProp,index){return/*#__PURE__*/React__default__namespace.default.createElement(ActionItem,_extends$1({key:itemProp.key||"".concat(itemProp.icon,"_").concat(itemProp.title)},itemProp,{index:active?index:items.length-index,active:active}));}))),active&&/*#__PURE__*/React__default__namespace.default.createElement(StyledFAB$1// This FAB is moved up a bit compared to the original FAB,
 // set marginBottom to negative value to compensate for it
 ,{style:{marginBottom:-theme.space.xxsmall},key:"fab-in-portal",testID:"fab-in-portal",icon:fabIcon,onPress:onPress,animated:true,active:active,title:fabTitle}))));});ActionGroup.displayName='FAB.ActionGroup';var StyledFABPairWrapper=index$b(Box)({flexDirection:'row',justifyContent:'center',alignItems:'center'});var StyledFAB=index$b(FAB$1)(function(_ref){var theme=_ref.theme,_ref$iconOnly=_ref.iconOnly,iconOnly=_ref$iconOnly===void 0?false:_ref$iconOnly,_ref$isLast=_ref.isLast,isLast=_ref$isLast===void 0?false:_ref$isLast;return {height:theme.__hd__.fab.sizes.fabPairHeight,width:iconOnly?theme.__hd__.fab.sizes.fabPairIconOnlyWidth:undefined,marginRight:isLast?undefined:theme.__hd__.fab.space.fabPairMarginRight};});var _excluded$m=["fabConfig","onCancel"];var Pair=function Pair(_ref){var fabConfig=_ref.fabConfig,onCancel=_ref.onCancel,props=_objectWithoutProperties(_ref,_excluded$m);var icon=fabConfig.icon,title=fabConfig.title,onPress=fabConfig.onPress,testID=fabConfig.testID;return/*#__PURE__*/React__default__namespace.default.createElement(StyledFABPairWrapper,props,/*#__PURE__*/React__default__namespace.default.createElement(StyledFAB,{icon:"cancel",onPress:onCancel,testID:"fab-pair-cancel",iconOnly:true}),/*#__PURE__*/React__default__namespace.default.createElement(StyledFAB,{icon:icon,title:title,onPress:onPress,testID:testID,iconOnly:!title,isLast:true}));};var FAB=Object.assign(FAB$1,{ActionGroup:ActionGroup,Pair:Pair});var ToastContainerWrapper=index$b(reactNative.View)(function(_ref){var theme=_ref.theme,position=_ref.position;return _objectSpread2(_objectSpread2({},reactNative.StyleSheet.absoluteFillObject),{},{paddingHorizontal:theme.__hd__.toast.space.wrapperVerticalPadding,paddingVertical:theme.__hd__.toast.space.wrapperHorizontalPadding,flexDirection:position==='bottom'?'column-reverse':'column',elevation:9999});});var Container=index$b(reactNative.Animated.View)(function(_ref2){var theme=_ref2.theme,themeVariant=_ref2.themeVariant,themeIntent=_ref2.themeIntent;return _objectSpread2({borderRadius:themeVariant==='round'?theme.__hd__.toast.radii["default"]:0,backgroundColor:theme.__hd__.toast.colors.backgrounds[themeIntent],minHeight:theme.__hd__.toast.sizes.height,flexDirection:'row'},theme.__hd__.toast.shadows.wrapper);});var IconContainer=index$b(reactNative.View)(function(_ref3){var theme=_ref3.theme;return {alignItems:'center',paddingLeft:theme.__hd__.toast.space.iconLeftPadding};});var TextContainer=index$b(reactNative.View)(function(_ref4){var theme=_ref4.theme;return {paddingHorizontal:theme.__hd__.toast.space.textHorizontalPadding,flex:1};});var ContentContainer=index$b(reactNative.View)(function(_ref5){var theme=_ref5.theme,showDivider=_ref5.showDivider;return {paddingVertical:theme.__hd__.toast.space.contentVerticalPadding,flex:1,borderRightWidth:showDivider?theme.__hd__.toast.borderWidths.base:0,borderColor:theme.__hd__.toast.colors.divider,flexDirection:'row'};});var CTAWrapper=index$b(reactNative.TouchableOpacity)(function(_ref6){var theme=_ref6.theme;return {paddingHorizontal:theme.__hd__.toast.space.ctaPadding,justifyContent:'center'};});var StyledBody=index$b(Typography.Body)(function(_ref7){var theme=_ref7.theme,themeIntent=_ref7.themeIntent;return {color:theme.__hd__.toast.colors.texts[themeIntent]};});var StyledIcon$2=index$b(Icon)(function(_ref8){var theme=_ref8.theme,themeIntent=_ref8.themeIntent;return {color:theme.__hd__.toast.colors.texts[themeIntent]};});var fallbackToastControlContext={show:function show(_){return '';},hide:function hide(_){// Fallback empty function
 },clearAll:function clearAll(){// Fallback empty function
@@ -2254,7 +2254,8 @@ var FloatingLabel = function FloatingLabel(_ref) {
     isFocused = _ref.isFocused,
     required = _ref.required,
     accessibilityLabelledBy = _ref.accessibilityLabelledBy,
-    isEmptyValue = _ref.isEmptyValue;
+    isEmptyValue = _ref.isEmptyValue,
+    testID = _ref.testID;
   var theme = useWorkTheme();
   var shouldFloat = isFocused || !isEmptyValue;
   var focusAnimation = React__default.useRef(new reactNative.Animated.Value(shouldFloat ? 1 : 0)).current;
@@ -2266,6 +2267,7 @@ var FloatingLabel = function FloatingLabel(_ref) {
       useNativeDriver: true
     }).start();
   }, [shouldFloat, focusAnimation]);
+  var testIDSuffix = testID ? "-".concat(testID) : '';
   return /*#__PURE__*/React__default__namespace.default.createElement(StyledFloatingLabelContainer, {
     themeVariant: variant,
     style: [{
@@ -2282,14 +2284,15 @@ var FloatingLabel = function FloatingLabel(_ref) {
           outputRange: [1.333, 1]
         })
       }]
-    }]
+    }],
+    testID: "input-label".concat(testIDSuffix)
   }, /*#__PURE__*/React__default__namespace.default.createElement(reactNative.Animated.View, {
     style: {
       flexDirection: 'row'
     }
   }, /*#__PURE__*/React__default__namespace.default.createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
-    testID: "input-label",
+    testID: "input-label-text".concat(testIDSuffix),
     themeState: state,
     numberOfLines: 1,
     style: {
@@ -2811,7 +2814,8 @@ var InternalTextInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     isFocused: isFocused,
     required: required,
     accessibilityLabelledBy: accessibilityLabelledBy,
-    isEmptyValue: isEmptyValue
+    isEmptyValue: isEmptyValue,
+    testID: testID
   }), /*#__PURE__*/React__default__namespace.default.createElement(InputRow, {
     ref: innerTextInput,
     state: state,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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.1"
+    "@hero-design/rn": "^8.103.1"
   },
   "peerDependencies": {
     "@hero-design/react-native-month-year-picker": "^8.43.1",

package/src/components/TextInput/FloatingLabel.tsx

@@ -21,6 +21,8 @@ export interface FloatingLabelProps {
   accessibilityLabelledBy?: string;
   /** Whether the input value is empty */
   isEmptyValue: boolean;
+  /** Testing id of the input component. */
+  testID?: string;
 }
 
 /**
@@ -53,6 +55,7 @@ const FloatingLabel: React.FC<FloatingLabelProps> = ({
   required,
   accessibilityLabelledBy,
   isEmptyValue,
+  testID,
 }) => {
   const theme = useTheme();
   const shouldFloat = isFocused || !isEmptyValue;
@@ -69,6 +72,8 @@ const FloatingLabel: React.FC<FloatingLabelProps> = ({
     }).start();
   }, [shouldFloat, focusAnimation]);
 
+  const testIDSuffix = testID ? `-${testID}` : '';
+
   return (
     <StyledFloatingLabelContainer
       themeVariant={variant}
@@ -96,6 +101,7 @@ const FloatingLabel: React.FC<FloatingLabelProps> = ({
           ],
         },
       ]}
+      testID={`input-label${testIDSuffix}`}
     >
       <Animated.View
         style={{
@@ -104,7 +110,7 @@ const FloatingLabel: React.FC<FloatingLabelProps> = ({
       >
         <StyledLabel
           nativeID={accessibilityLabelledBy}
-          testID="input-label"
+          testID={`input-label-text${testIDSuffix}`}
           themeState={state}
           numberOfLines={1}
           style={{

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

@@ -120,6 +120,7 @@ exports[`TextInputGroup should render: xxx 1`] = `
             ],
           ]
         }
+        testID="input-label"
         themeVariant="text"
       >
         <AnimatedView
@@ -155,7 +156,7 @@ exports[`TextInputGroup should render: xxx 1`] = `
                 ],
               ]
             }
-            testID="input-label"
+            testID="input-label-text"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
@@ -373,6 +374,7 @@ exports[`TextInputGroup should render: xxx 1`] = `
             ],
           ]
         }
+        testID="input-label-text-input-2"
         themeVariant="text"
       >
         <AnimatedView
@@ -408,7 +410,7 @@ exports[`TextInputGroup should render: xxx 1`] = `
                 ],
               ]
             }
-            testID="input-label"
+            testID="input-label-text-text-input-2"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="error"
@@ -735,6 +737,7 @@ exports[`TextInputGroup should render: xxx 1`] = `
             ],
           ]
         }
+        testID="input-label"
         themeVariant="text"
       >
         <AnimatedView
@@ -770,7 +773,7 @@ exports[`TextInputGroup should render: xxx 1`] = `
                 ],
               ]
             }
-            testID="input-label"
+            testID="input-label-text"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"

package/src/components/TextInput/MIGRATION.md

@@ -74,7 +74,7 @@ Here's what to look for in your unit tests:
     it('should display an asterisk for required fields', () => {
       const { getByText } = render(<TextInput label="My Field" required />);
       // This will now fail
-      expect(getByText('*')).toBeTruthy(); 
+      expect(getByText('*')).toBeTruthy();
     });
 
     // New test for optional field
@@ -82,7 +82,7 @@ Here's what to look for in your unit tests:
       const { queryByText } = render(<TextInput label="My Field" required={false} />);
       expect(queryByText(/\(Optional\)/)).toBeTruthy();
     });
-    
+
     // New test for required field
     it('should not display (Optional) for required fields', () => {
       const { queryByText } = render(<TextInput label="My Field" required={true} />);
@@ -96,38 +96,3 @@ Here's what to look for in your unit tests:
 
 *   **Interaction Tests:**
     *   If you have tests that simulate user input, the floating label will animate. This shouldn't affect most tests, but if you have complex tests that check for element positions, they might need adjustment.
-
-### 4.3. Breaking Change: `testID` Handling
-
-The way `testID` is applied to the underlying native `TextInput` component has changed, which will break existing tests that query for the input field.
-
-*   **Old Behavior (`@hero-design/rn`):** The `testID` for the native input was dynamically created by appending `-text-input` to the `testID` prop (e.g., `my-test-id-text-input`).
-*   **New Behavior (`@hero-design/rn-work-uikit`):** The `testID` for the native input is now **hardcoded to `'text-input'`.**
-
-Your tests must be updated to reflect this change.
-
-**Example Test Update:**
-
-```javascript
-// Old test query
-const input = getByTestId('my-form-field-text-input');
-
-// New test query
-const input = getByTestId('text-input');
-```
-
-Because the native input `testID` is now static, if you have multiple `TextInput` components on one screen, you must first scope your query to the correct component container.
-
-**Example with multiple `TextInput`s:**
-
-```javascript
-import { render, within } from '@testing-library/react-native';
-
-// Get the container for a specific TextInput using its unique testID
-const textInputContainer = getByTestId('my-unique-test-id');
-
-// Find the native input within that container
-const nativeInput = within(textInputContainer).getByTestId('text-input');
-```
-
-This plan should provide a good starting point for the migration. The key is to be aware of the visual changes and to thoroughly test all instances of the `TextInput` component. 

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

@@ -133,7 +133,7 @@ describe('FloatingLabel', () => {
       );
 
       // User should have proper accessibility support
-      const label = getByTestId('input-label');
+      const label = getByTestId('input-label-text');
       expect(label).toHaveProp('nativeID', accessibilityId);
     });
   });
@@ -163,7 +163,7 @@ describe('FloatingLabel', () => {
           />
         );
 
-        const label = getByTestId('input-label');
+        const label = getByTestId('input-label-text');
         expect(label).toHaveProp('themeState', state);
       }
     );
@@ -183,7 +183,7 @@ describe('FloatingLabel', () => {
         );
 
         // User should see a fully rendered floating label
-        const label = getByTestId('input-label');
+        const label = getByTestId('input-label-text');
         expect(label).toBeTruthy();
         expect(label).toHaveProp('nativeID', 'fullname-label');
         expect(label).toHaveTextContent('Full Name');