@razorpay/blade 12.34.1 → 12.35.0

package/build/lib/native/components/Input/TextInput/TextInput.js

@@ -4,6 +4,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import { BaseInput } from '../BaseInput/BaseInput.js';
 import { getKeyboardAndAutocompleteProps } from '../BaseInput/utils.js';
 import { useTaggedInput } from '../BaseInput/useTaggedInput.js';
+import { useFormattedInput } from './useFormattedInput.js';
 import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
 import 'react-native-svg';
 import '@babel/runtime/helpers/defineProperty';
@@ -36,7 +37,7 @@ import '../../Dropdown/DropdownLink.js';
 import '../../Dropdown/DropdownIconButton.js';
 import '../../Dropdown/DropdownHeaderFooter.js';
 
-var _excluded=["label","accessibilityLabel","labelPosition","placeholder","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","size","leadingIcon","trailingIcon","isTaggedInput","tags","onTagChange","trailing","leading"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextInput=function _TextInput(_ref,ref){var _leading$name,_trailing$name,_ref3;var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,placeholder=_ref.placeholder,_ref$type=_ref.type,type=_ref$type===void 0?'text':_ref$type,defaultValue=_ref.defaultValue,name=_ref.name,value=_ref.value,maxCharacters=_ref.maxCharacters,_onChange=_ref.onChange,onClick=_ref.onClick,_onFocus=_ref.onFocus,_onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,isDisabled=_ref.isDisabled,necessityIndicator=_ref.necessityIndicator,validationState=_ref.validationState,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,isRequired=_ref.isRequired,icon=_ref.icon,prefix=_ref.prefix,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,isLoading=_ref.isLoading,suffix=_ref.suffix,autoFocus=_ref.autoFocus,keyboardReturnKeyType=_ref.keyboardReturnKeyType,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType,autoCapitalize=_ref.autoCapitalize,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,leadingIcon=_ref.leadingIcon,trailingIcon=_ref.trailingIcon,isTaggedInput=_ref.isTaggedInput,tags=_ref.tags,onTagChange=_ref.onTagChange,trailing=_ref.trailing,leading=_ref.leading,rest=_objectWithoutProperties(_ref,_excluded);var textInputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,textInputRef);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldShowClearButton=_useState2[0],setShouldShowClearButton=_useState2[1];var _useState3=useState(autoFocus!=null?autoFocus:false),_useState4=_slicedToArray(_useState3,2),isInputFocussed=_useState4[0],setIsInputFocussed=_useState4[1];var _useTaggedInput=useTaggedInput({isTaggedInput:isTaggedInput,tags:tags,onTagChange:onTagChange,isDisabled:isDisabled,onChange:_onChange,name:name,value:value,inputRef:textInputRef}),activeTagIndex=_useTaggedInput.activeTagIndex,setActiveTagIndex=_useTaggedInput.setActiveTagIndex,getTags=_useTaggedInput.getTags,handleTaggedInputKeydown=_useTaggedInput.handleTaggedInputKeydown,handleTaggedInputChange=_useTaggedInput.handleTaggedInputChange,handleTagsClear=_useTaggedInput.handleTagsClear;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isTrailingDropDownOpen=_React$useState2[0],setIsTrailingDropDownOpen=_React$useState2[1];var _React$useState3=React__default.useState(false),_React$useState4=_slicedToArray(_React$useState3,2),isLeadingDropDownOpen=_React$useState4[0],setIsLeadingDropDownOpen=_React$useState4[1];var textInputWrapperRef=useRef(null);useEffect(function(){if(isTrailingDropDownOpen&&isLeadingDropDownOpen){setIsLeadingDropDownOpen(false);}},[isTrailingDropDownOpen]);useEffect(function(){if(isLeadingDropDownOpen&&isTrailingDropDownOpen){setIsTrailingDropDownOpen(false);}},[isLeadingDropDownOpen]);var leadingDropDown=leading&&getComponentId(leading)==='Dropdown'?leading:null;var trailingDropdown=trailing&&getComponentId(trailing)==='Dropdown'?trailing:null;var _leadingIcon=leading&&typeof leading==='function'&&(_leading$name=leading.name)!=null&&_leading$name.endsWith('Icon')?leading:undefined;var _trailingIcon=trailing&&typeof trailing==='function'&&(_trailing$name=trailing.name)!=null&&_trailing$name.endsWith('Icon')?trailing:undefined;var hasLeadingInteractionElement=!_leadingIcon&&!leadingDropDown&&leading;var hasTrailingInteractionElement=!_trailingIcon&&!trailingDropdown&&trailing;var renderDropdown=function renderDropdown(dropdown,isOpen,setIsOpen,defaultPlacement){if(!dropdown){return null;}return React__default.cloneElement(dropdown,{selectionType:'single',isOpen:isOpen,onOpenChange:function onOpenChange(isOpen){setIsOpen(isOpen);},children:React__default.Children.map(dropdown.props.children,function(child){if(child.type===DropdownOverlay){return React__default.cloneElement(child,{referenceRef:textInputWrapperRef,_isNestedDropdown:true,defaultPlacement:defaultPlacement});}return child;})});};var renderLeadingDropDown=renderDropdown(leadingDropDown,isLeadingDropDownOpen,setIsLeadingDropDownOpen,'bottom-start');var renderTrailingDropDown=renderDropdown(trailingDropdown,isTrailingDropDownOpen,setIsTrailingDropDownOpen,'bottom-end');React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&(defaultValue!=null?defaultValue:value)));},[showClearButton,defaultValue,value]);var renderClearButton=function renderClearButton(){return jsx(IconButton,{size:"medium",icon:CloseIcon,onClick:function onClick(){var _textInputRef$current;if(isEmpty(value)&&textInputRef.current){if(isReactNative(textInputRef.current)){textInputRef.current.clear();textInputRef.current.focus();}else if(textInputRef.current instanceof HTMLInputElement){textInputRef.current.value='';textInputRef.current.focus();}}handleTagsClear();onClearButtonClick==null?void 0:onClearButtonClick();textInputRef==null?void 0:(_textInputRef$current=textInputRef.current)==null?void 0:_textInputRef$current.focus();setShouldShowClearButton(false);},isDisabled:isDisabled,accessibilityLabel:"Clear Input Content"});};var hasTrailingDropDown=Boolean(trailingDropdown);var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content",color:"primary"});}if(shouldShowClearButton&&hasTrailingDropDown){return jsxs(BaseBox,{display:"flex",gap:"spacing.3",children:[renderClearButton()," ",jsx(Divider,{orientation:"vertical"})]});}if(showClearButton&&hasTrailingInteractionElement){return jsxs(BaseBox,{display:"flex",gap:"spacing.3",children:[renderClearButton()," ",jsx(Divider,{orientation:"vertical"})," ",trailing]});}if(shouldShowClearButton){return renderClearButton();}if(hasTrailingInteractionElement){return trailing;}return null;};return jsx(BaseInput,Object.assign({id:"textinput",componentName:MetaConstants.TextInput,ref:mergedRef,setInputWrapperRef:function setInputWrapperRef(wrapperNode){textInputWrapperRef.current=wrapperNode;},label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,placeholder:placeholder,defaultValue:defaultValue,value:value,name:name,maxCharacters:maxCharacters,isDropdownTrigger:isTaggedInput,tags:isTaggedInput?getTags({size:size}):undefined,showAllTags:isInputFocussed,maxTagRows:"single",activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,leadingDropDown:renderLeadingDropDown,trailingDropDown:renderTrailingDropDown,leadingInteractionElement:hasLeadingInteractionElement?leading:null,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(showClearButton&&value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}handleTaggedInputChange({name:name,value:value});_onChange==null?void 0:_onChange({name:name,value:value});},onClick:onClick,onFocus:function onFocus(e){setIsInputFocussed(true);_onFocus==null?void 0:_onFocus(e);},onBlur:function onBlur(e){setIsInputFocussed(false);_onBlur==null?void 0:_onBlur(e);},onKeyDown:function onKeyDown(e){handleTaggedInputKeydown(e);},onSubmit:onSubmit,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,leadingIcon:(_ref3=_leadingIcon!=null?_leadingIcon:leadingIcon)!=null?_ref3:icon,prefix:prefix,trailingInteractionElement:renderInteractionElement(),trailingIcon:_trailingIcon!=null?_trailingIcon:trailingIcon,suffix:suffix,validationState:validationState,errorText:errorText,helpText:helpText,successText:successText,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:hintMarginTop[size],marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters,size:size})}):null;},autoFocus:autoFocus,testID:testID},getKeyboardAndAutocompleteProps({type:type,keyboardReturnKeyType:keyboardReturnKeyType,autoCompleteSuggestionType:autoCompleteSuggestionType,autoCapitalize:autoCapitalize}),{size:size},rest));};var TextInput=assignWithoutSideEffects(React__default.forwardRef(_TextInput),{displayName:'TextInput'});
+var _excluded=["label","accessibilityLabel","labelPosition","placeholder","type","defaultValue","name","value","maxCharacters","format","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","size","leadingIcon","trailingIcon","isTaggedInput","tags","onTagChange","trailing","leading"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextInput=function _TextInput(_ref,ref){var _leading$name,_trailing$name,_ref4;var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,placeholder=_ref.placeholder,_ref$type=_ref.type,type=_ref$type===void 0?'text':_ref$type,defaultValue=_ref.defaultValue,name=_ref.name,value=_ref.value,maxCharacters=_ref.maxCharacters,format=_ref.format,onChange=_ref.onChange,onClick=_ref.onClick,_onFocus=_ref.onFocus,_onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,isDisabled=_ref.isDisabled,necessityIndicator=_ref.necessityIndicator,validationState=_ref.validationState,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,isRequired=_ref.isRequired,icon=_ref.icon,prefix=_ref.prefix,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,isLoading=_ref.isLoading,suffix=_ref.suffix,autoFocus=_ref.autoFocus,keyboardReturnKeyType=_ref.keyboardReturnKeyType,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType,autoCapitalize=_ref.autoCapitalize,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,leadingIcon=_ref.leadingIcon,trailingIcon=_ref.trailingIcon,isTaggedInput=_ref.isTaggedInput,tags=_ref.tags,onTagChange=_ref.onTagChange,trailing=_ref.trailing,leading=_ref.leading,rest=_objectWithoutProperties(_ref,_excluded);var textInputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,textInputRef);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldShowClearButton=_useState2[0],setShouldShowClearButton=_useState2[1];var _useState3=useState(autoFocus!=null?autoFocus:false),_useState4=_slicedToArray(_useState3,2),isInputFocussed=_useState4[0],setIsInputFocussed=_useState4[1];if(__DEV__){if(format){var hasAlphanumeric=/[a-zA-Z0-9]/.test(format);if(hasAlphanumeric){throw new Error(`[Blade: TextInput] Invalid format "${format}". Only # and special characters allowed, no letters/numbers.`);}}}var formattingResult=useFormattedInput({format:format,onChange:onChange,value:value,defaultValue:defaultValue});var inputValue=format?formattingResult.formattedValue:value;var effectiveMaxCharacters=format?formattingResult.maxLength:maxCharacters;var handleOnChange=React__default.useCallback(function(_ref2){var name=_ref2.name,inputValue=_ref2.value;if(format){formattingResult.handleChange({name:name,value:inputValue});}else {onChange==null?void 0:onChange({name:name,value:inputValue});}},[format,formattingResult.handleChange,onChange]);var _useTaggedInput=useTaggedInput({isTaggedInput:isTaggedInput,tags:tags,onTagChange:onTagChange,isDisabled:isDisabled,onChange:handleOnChange,name:name,value:inputValue,inputRef:textInputRef}),activeTagIndex=_useTaggedInput.activeTagIndex,setActiveTagIndex=_useTaggedInput.setActiveTagIndex,getTags=_useTaggedInput.getTags,handleTaggedInputKeydown=_useTaggedInput.handleTaggedInputKeydown,handleTaggedInputChange=_useTaggedInput.handleTaggedInputChange,handleTagsClear=_useTaggedInput.handleTagsClear;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isTrailingDropDownOpen=_React$useState2[0],setIsTrailingDropDownOpen=_React$useState2[1];var _React$useState3=React__default.useState(false),_React$useState4=_slicedToArray(_React$useState3,2),isLeadingDropDownOpen=_React$useState4[0],setIsLeadingDropDownOpen=_React$useState4[1];var textInputWrapperRef=useRef(null);useEffect(function(){if(isTrailingDropDownOpen&&isLeadingDropDownOpen){setIsLeadingDropDownOpen(false);}},[isTrailingDropDownOpen]);useEffect(function(){if(isLeadingDropDownOpen&&isTrailingDropDownOpen){setIsTrailingDropDownOpen(false);}},[isLeadingDropDownOpen]);var leadingDropDown=leading&&getComponentId(leading)==='Dropdown'?leading:null;var trailingDropdown=trailing&&getComponentId(trailing)==='Dropdown'?trailing:null;var _leadingIcon=leading&&typeof leading==='function'&&(_leading$name=leading.name)!=null&&_leading$name.endsWith('Icon')?leading:undefined;var _trailingIcon=trailing&&typeof trailing==='function'&&(_trailing$name=trailing.name)!=null&&_trailing$name.endsWith('Icon')?trailing:undefined;var hasLeadingInteractionElement=!_leadingIcon&&!leadingDropDown&&leading;var hasTrailingInteractionElement=!_trailingIcon&&!trailingDropdown&&trailing;var renderDropdown=function renderDropdown(dropdown,isOpen,setIsOpen,defaultPlacement){if(!dropdown){return null;}return React__default.cloneElement(dropdown,{selectionType:'single',isOpen:isOpen,onOpenChange:function onOpenChange(isOpen){setIsOpen(isOpen);},children:React__default.Children.map(dropdown.props.children,function(child){if(child.type===DropdownOverlay){return React__default.cloneElement(child,{referenceRef:textInputWrapperRef,_isNestedDropdown:true,defaultPlacement:defaultPlacement});}return child;})});};var renderLeadingDropDown=renderDropdown(leadingDropDown,isLeadingDropDownOpen,setIsLeadingDropDownOpen,'bottom-start');var renderTrailingDropDown=renderDropdown(trailingDropdown,isTrailingDropDownOpen,setIsTrailingDropDownOpen,'bottom-end');React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&(defaultValue!=null?defaultValue:inputValue)));},[showClearButton,defaultValue,inputValue]);var renderClearButton=function renderClearButton(){return jsx(IconButton,{size:"medium",icon:CloseIcon,onClick:function onClick(){var _textInputRef$current;if(isEmpty(inputValue)&&textInputRef.current){if(isReactNative(textInputRef.current)){textInputRef.current.clear();textInputRef.current.focus();}else if(textInputRef.current instanceof HTMLInputElement){textInputRef.current.value='';textInputRef.current.focus();}}handleTagsClear();onClearButtonClick==null?void 0:onClearButtonClick();textInputRef==null?void 0:(_textInputRef$current=textInputRef.current)==null?void 0:_textInputRef$current.focus();setShouldShowClearButton(false);},isDisabled:isDisabled,accessibilityLabel:"Clear Input Content"});};var hasTrailingDropDown=Boolean(trailingDropdown);var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content",color:"primary"});}if(shouldShowClearButton&&hasTrailingDropDown){return jsxs(BaseBox,{display:"flex",gap:"spacing.3",children:[renderClearButton()," ",jsx(Divider,{orientation:"vertical"})]});}if(showClearButton&&hasTrailingInteractionElement){return jsxs(BaseBox,{display:"flex",gap:"spacing.3",children:[renderClearButton()," ",jsx(Divider,{orientation:"vertical"})," ",trailing]});}if(shouldShowClearButton){return renderClearButton();}if(hasTrailingInteractionElement){return trailing;}return null;};return jsx(BaseInput,Object.assign({id:"textinput",componentName:MetaConstants.TextInput,ref:mergedRef,setInputWrapperRef:function setInputWrapperRef(wrapperNode){textInputWrapperRef.current=wrapperNode;},label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,placeholder:placeholder,defaultValue:format?value!==undefined&&defaultValue!==undefined?defaultValue:undefined:defaultValue,value:format?inputValue:value,name:name,maxCharacters:effectiveMaxCharacters,isDropdownTrigger:isTaggedInput,tags:isTaggedInput?getTags({size:size}):undefined,showAllTags:isInputFocussed,maxTagRows:"single",activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,leadingDropDown:renderLeadingDropDown,trailingDropDown:renderTrailingDropDown,leadingInteractionElement:hasLeadingInteractionElement?leading:null,onChange:function onChange(_ref3){var name=_ref3.name,value=_ref3.value;if(showClearButton&&value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}handleTaggedInputChange({name:name,value:value});handleOnChange({name:name,value:value});},onClick:onClick,onFocus:function onFocus(e){setIsInputFocussed(true);_onFocus==null?void 0:_onFocus(e);},onBlur:function onBlur(e){setIsInputFocussed(false);_onBlur==null?void 0:_onBlur(e);},onKeyDown:function onKeyDown(e){handleTaggedInputKeydown(e);if(format){formattingResult.handleKeyDown(e.event);}},onSubmit:onSubmit,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,leadingIcon:(_ref4=_leadingIcon!=null?_leadingIcon:leadingIcon)!=null?_ref4:icon,prefix:prefix,trailingInteractionElement:renderInteractionElement(),trailingIcon:_trailingIcon!=null?_trailingIcon:trailingIcon,suffix:suffix,validationState:validationState,errorText:errorText,helpText:helpText,successText:successText,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return format?null:effectiveMaxCharacters?jsx(BaseBox,{marginTop:hintMarginTop[size],marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:effectiveMaxCharacters,size:size})}):null;},autoFocus:autoFocus,testID:testID},getKeyboardAndAutocompleteProps({type:type,keyboardReturnKeyType:keyboardReturnKeyType,autoCompleteSuggestionType:autoCompleteSuggestionType,autoCapitalize:autoCapitalize}),{size:size},rest));};var TextInput=assignWithoutSideEffects(React__default.forwardRef(_TextInput),{displayName:'TextInput'});
 
 export { TextInput };
 //# sourceMappingURL=TextInput.js.map

package/build/lib/native/components/Input/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport type { TaggedInputProps } from '../BaseInput/useTaggedInput';\nimport { useTaggedInput } from '../BaseInput/useTaggedInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type {\n  BladeElementRef,\n  BladeElementRefWithValue,\n  ContainerElementType,\n  DataAnalyticsAttribute,\n} from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\nimport { Divider } from '~components/Divider';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { DropdownOverlay } from '~components/Dropdown';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | 'leadingIcon'\n  | 'trailingButton'\n  | 'trailingIcon'\n  | 'textAlign'\n  | keyof DataAnalyticsAttribute\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   * @deprecated Use `leading` instead. This prop will be removed in the next major version.\n   */\n  icon?: IconComponent;\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n  /**\n   *\n   * Icon or React Element to be rendered at the end of the input field\n   */\n  trailing?: React.ReactElement | IconComponent;\n  /**\n   * Icon or React Element to be rendered at the beginning of the input field\n   */\n  leading?: React.ReactElement | IconComponent;\n} & TaggedInputProps &\n  StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    size = 'medium',\n    leadingIcon,\n    trailingIcon,\n    isTaggedInput,\n    tags,\n    onTagChange,\n    trailing,\n    leading,\n    ...rest\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRefWithValue>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n  const [isInputFocussed, setIsInputFocussed] = useState(autoFocus ?? false);\n  const {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  } = useTaggedInput({\n    isTaggedInput,\n    tags,\n    onTagChange,\n    isDisabled,\n    onChange,\n    name,\n    value,\n    inputRef: textInputRef,\n  });\n  const [isTrailingDropDownOpen, setIsTrailingDropDownOpen] = React.useState(false);\n  const [isLeadingDropDownOpen, setIsLeadingDropDownOpen] = React.useState(false);\n  const textInputWrapperRef = useRef<ContainerElementType | null>(null);\n\n  useEffect(() => {\n    if (isTrailingDropDownOpen && isLeadingDropDownOpen) {\n      setIsLeadingDropDownOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTrailingDropDownOpen]);\n\n  useEffect(() => {\n    if (isLeadingDropDownOpen && isTrailingDropDownOpen) {\n      setIsTrailingDropDownOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLeadingDropDownOpen]);\n\n  const leadingDropDown =\n    leading && getComponentId(leading as React.ReactElement) === 'Dropdown' ? leading : null;\n\n  const trailingDropdown =\n    trailing && getComponentId(trailing as React.ReactElement) === 'Dropdown' ? trailing : null;\n  // we need to look into name of component and check if it 's and icon or a dropdown\n  const _leadingIcon: IconComponent | undefined =\n    leading && typeof leading === 'function' && leading.name?.endsWith('Icon')\n      ? (leading as IconComponent)\n      : undefined;\n\n  const _trailingIcon: IconComponent | undefined =\n    trailing && typeof trailing === 'function' && trailing.name?.endsWith('Icon')\n      ? (trailing as IconComponent)\n      : undefined;\n  const hasLeadingInteractionElement = !_leadingIcon && !leadingDropDown && leading;\n\n  const hasTrailingInteractionElement = !_trailingIcon && !trailingDropdown && trailing;\n\n  const renderDropdown = (\n    dropdown: React.ReactElement,\n    isOpen: boolean,\n    setIsOpen: (isOpen: boolean) => void,\n    defaultPlacement: 'bottom-start' | 'bottom-end',\n  ): React.ReactElement | null => {\n    if (!dropdown) {\n      return null;\n    }\n    return React.cloneElement(dropdown, {\n      selectionType: 'single',\n      isOpen,\n      onOpenChange: (isOpen: boolean) => {\n        setIsOpen(isOpen);\n      },\n      children: React.Children.map(dropdown.props.children, (child) => {\n        if (child.type === DropdownOverlay) {\n          return React.cloneElement(child, {\n            referenceRef: textInputWrapperRef,\n            _isNestedDropdown: true,\n            defaultPlacement,\n          });\n        }\n        return child;\n      }),\n    });\n  };\n\n  const renderLeadingDropDown = renderDropdown(\n    leadingDropDown as React.ReactElement,\n    isLeadingDropDownOpen,\n    setIsLeadingDropDownOpen,\n    'bottom-start',\n  );\n  const renderTrailingDropDown = renderDropdown(\n    trailingDropdown as React.ReactElement,\n    isTrailingDropDownOpen,\n    setIsTrailingDropDownOpen,\n    'bottom-end',\n  );\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? value)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderClearButton = (): React.ReactElement => {\n    return (\n      <IconButton\n        size=\"medium\"\n        icon={CloseIcon}\n        onClick={() => {\n          if (isEmpty(value) && textInputRef.current) {\n            // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n            if (isReactNative(textInputRef.current)) {\n              textInputRef.current.clear();\n              textInputRef.current.focus();\n            } else if (textInputRef.current instanceof HTMLInputElement) {\n              textInputRef.current.value = '';\n              textInputRef.current.focus();\n            }\n          }\n          handleTagsClear();\n          // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n          onClearButtonClick?.();\n          textInputRef?.current?.focus();\n          setShouldShowClearButton(false);\n        }}\n        isDisabled={isDisabled}\n        accessibilityLabel=\"Clear Input Content\"\n      />\n    );\n  };\n  const hasTrailingDropDown = Boolean(trailingDropdown);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton && hasTrailingDropDown) {\n      return (\n        <BaseBox display=\"flex\" gap=\"spacing.3\">\n          {renderClearButton()} <Divider orientation=\"vertical\" />\n        </BaseBox>\n      );\n    }\n\n    if (showClearButton && hasTrailingInteractionElement) {\n      return (\n        <BaseBox display=\"flex\" gap=\"spacing.3\">\n          {renderClearButton()} <Divider orientation=\"vertical\" /> {trailing as React.ReactElement}\n        </BaseBox>\n      );\n    }\n\n    if (shouldShowClearButton) {\n      return renderClearButton();\n    }\n\n    if (hasTrailingInteractionElement) {\n      return trailing as React.ReactElement;\n    }\n    return null;\n  };\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      setInputWrapperRef={(wrapperNode) => {\n        textInputWrapperRef.current = wrapperNode;\n      }}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      maxCharacters={maxCharacters}\n      isDropdownTrigger={isTaggedInput}\n      tags={isTaggedInput ? getTags({ size }) : undefined}\n      showAllTags={isInputFocussed}\n      maxTagRows=\"single\"\n      activeTagIndex={activeTagIndex}\n      setActiveTagIndex={setActiveTagIndex}\n      leadingDropDown={renderLeadingDropDown}\n      trailingDropDown={renderTrailingDropDown}\n      leadingInteractionElement={\n        hasLeadingInteractionElement ? (leading as React.ReactElement) : null\n      }\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        handleTaggedInputChange({ name, value });\n        onChange?.({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={(e) => {\n        setIsInputFocussed(true);\n        onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        setIsInputFocussed(false);\n        onBlur?.(e);\n      }}\n      onKeyDown={(e) => {\n        handleTaggedInputKeydown(e);\n      }}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={_leadingIcon ?? leadingIcon ?? icon}\n      prefix={prefix}\n      trailingInteractionElement={renderInteractionElement()}\n      trailingIcon={_trailingIcon ?? trailingIcon}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter\n              currentCount={value?.length ?? 0}\n              maxCount={maxCharacters}\n              size={size}\n            />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      size={size}\n      {...rest}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextInput","_ref","ref","_leading$name","_trailing$name","_ref3","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","_ref$type","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","_ref$size","size","leadingIcon","trailingIcon","isTaggedInput","tags","onTagChange","trailing","leading","rest","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","_useState3","_useState4","isInputFocussed","setIsInputFocussed","_useTaggedInput","useTaggedInput","inputRef","activeTagIndex","setActiveTagIndex","getTags","handleTaggedInputKeydown","handleTaggedInputChange","handleTagsClear","_React$useState","_React$useState2","isTrailingDropDownOpen","setIsTrailingDropDownOpen","_React$useState3","_React$useState4","isLeadingDropDownOpen","setIsLeadingDropDownOpen","textInputWrapperRef","useEffect","leadingDropDown","getComponentId","trailingDropdown","_leadingIcon","endsWith","undefined","_trailingIcon","hasLeadingInteractionElement","hasTrailingInteractionElement","renderDropdown","dropdown","isOpen","setIsOpen","defaultPlacement","cloneElement","selectionType","onOpenChange","children","Children","map","props","child","DropdownOverlay","referenceRef","_isNestedDropdown","renderLeadingDropDown","renderTrailingDropDown","Boolean","renderClearButton","_jsx","IconButton","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","hasTrailingDropDown","renderInteractionElement","Spinner","color","_jsxs","BaseBox","display","gap","Divider","orientation","BaseInput","Object","assign","id","componentName","MetaConstants","TextInput","setInputWrapperRef","wrapperNode","hideLabelText","isDropdownTrigger","showAllTags","maxTagRows","trailingDropDown","leadingInteractionElement","_ref2","length","e","onKeyDown","trailingInteractionElement","trailingFooterSlot","_value$length","marginTop","hintMarginTop","marginRight","CharacterCounter","currentCount","maxCount","getKeyboardAndAutocompleteProps","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sources":["../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport type { TaggedInputProps } from '../BaseInput/useTaggedInput';\nimport { useTaggedInput } from '../BaseInput/useTaggedInput';\nimport { useFormattedInput } from './useFormattedInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type {\n  BladeElementRef,\n  BladeElementRefWithValue,\n  ContainerElementType,\n  DataAnalyticsAttribute,\n} from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\nimport { Divider } from '~components/Divider';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { DropdownOverlay } from '~components/Dropdown';\nimport type { FormInputOnEvent } from '~components/Form/FormTypes';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | 'leadingIcon'\n  | 'trailingButton'\n  | 'trailingIcon'\n  | 'textAlign'\n  | keyof DataAnalyticsAttribute\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   * @deprecated Use `leading` instead. This prop will be removed in the next major version.\n   */\n  icon?: IconComponent;\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n  /**\n   *\n   * Icon or React Element to be rendered at the end of the input field\n   */\n  trailing?: React.ReactElement | IconComponent;\n  /**\n   * Icon or React Element to be rendered at the beginning of the input field\n   */\n  leading?: React.ReactElement | IconComponent;\n  /**\n   * Format pattern where # represents input characters and other symbols act as delimiters\n   * When provided, input will be automatically formatted and onChange will include rawValue\n   *\n   * **Note:**\n   * 1. Format pattern should only contain # symbols and special characters as delimiters.\n   *    Alphanumeric characters (letters and numbers) are not allowed in the format pattern.\n   * 2. When format is provided, user input is restricted to alphanumeric characters only.\n   *    Special characters and symbols will be filtered out automatically from user input.\n   *\n   * @example \"#### #### #### ####\" for card numbers\n   * @example \"##/##\" for expiry dates\n   * @example \"(###) ###-####\" for phone numbers\n   */\n  format?:\n    | '#### #### #### ####'\n    | '##/##'\n    | '##/##/####'\n    | '(###) ###-####'\n    | '###-##-####'\n    | '##:##'\n    | '##:##:##'\n    | '#### #### ####'\n    | '###.###.###.###'\n    | '## ## ####'\n    | '##-###-##'\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    | (string & {});\n} & TaggedInputProps &\n  StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    format,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    size = 'medium',\n    leadingIcon,\n    trailingIcon,\n    isTaggedInput,\n    tags,\n    onTagChange,\n    trailing,\n    leading,\n    ...rest\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRefWithValue>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n  const [isInputFocussed, setIsInputFocussed] = useState(autoFocus ?? false);\n\n  if (__DEV__) {\n    if (format) {\n      const hasAlphanumeric = /[a-zA-Z0-9]/.test(format);\n      if (hasAlphanumeric) {\n        throw new Error(\n          `[Blade: TextInput] Invalid format \"${format}\". Only # and special characters allowed, no letters/numbers.`,\n        );\n      }\n    }\n  }\n\n  const formattingResult = useFormattedInput({\n    format,\n    onChange,\n    value,\n    defaultValue,\n  });\n\n  const inputValue = format ? formattingResult.formattedValue : value;\n  const effectiveMaxCharacters = format ? formattingResult.maxLength : maxCharacters;\n\n  const handleOnChange: FormInputOnEvent = React.useCallback(\n    ({ name, value: inputValue }) => {\n      if (format) {\n        formattingResult.handleChange({ name, value: inputValue });\n      } else {\n        onChange?.({ name, value: inputValue });\n      }\n    },\n    [format, formattingResult.handleChange, onChange],\n  );\n\n  const {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  } = useTaggedInput({\n    isTaggedInput,\n    tags,\n    onTagChange,\n    isDisabled,\n    onChange: handleOnChange,\n    name,\n    value: inputValue,\n    inputRef: textInputRef,\n  });\n  const [isTrailingDropDownOpen, setIsTrailingDropDownOpen] = React.useState(false);\n  const [isLeadingDropDownOpen, setIsLeadingDropDownOpen] = React.useState(false);\n  const textInputWrapperRef = useRef<ContainerElementType | null>(null);\n\n  useEffect(() => {\n    if (isTrailingDropDownOpen && isLeadingDropDownOpen) {\n      setIsLeadingDropDownOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTrailingDropDownOpen]);\n\n  useEffect(() => {\n    if (isLeadingDropDownOpen && isTrailingDropDownOpen) {\n      setIsTrailingDropDownOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLeadingDropDownOpen]);\n\n  const leadingDropDown =\n    leading && getComponentId(leading as React.ReactElement) === 'Dropdown' ? leading : null;\n\n  const trailingDropdown =\n    trailing && getComponentId(trailing as React.ReactElement) === 'Dropdown' ? trailing : null;\n  // we need to look into name of component and check if it 's and icon or a dropdown\n  const _leadingIcon: IconComponent | undefined =\n    leading && typeof leading === 'function' && leading.name?.endsWith('Icon')\n      ? (leading as IconComponent)\n      : undefined;\n\n  const _trailingIcon: IconComponent | undefined =\n    trailing && typeof trailing === 'function' && trailing.name?.endsWith('Icon')\n      ? (trailing as IconComponent)\n      : undefined;\n  const hasLeadingInteractionElement = !_leadingIcon && !leadingDropDown && leading;\n\n  const hasTrailingInteractionElement = !_trailingIcon && !trailingDropdown && trailing;\n\n  const renderDropdown = (\n    dropdown: React.ReactElement,\n    isOpen: boolean,\n    setIsOpen: (isOpen: boolean) => void,\n    defaultPlacement: 'bottom-start' | 'bottom-end',\n  ): React.ReactElement | null => {\n    if (!dropdown) {\n      return null;\n    }\n    return React.cloneElement(dropdown, {\n      selectionType: 'single',\n      isOpen,\n      onOpenChange: (isOpen: boolean) => {\n        setIsOpen(isOpen);\n      },\n      children: React.Children.map(dropdown.props.children, (child) => {\n        if (child.type === DropdownOverlay) {\n          return React.cloneElement(child, {\n            referenceRef: textInputWrapperRef,\n            _isNestedDropdown: true,\n            defaultPlacement,\n          });\n        }\n        return child;\n      }),\n    });\n  };\n\n  const renderLeadingDropDown = renderDropdown(\n    leadingDropDown as React.ReactElement,\n    isLeadingDropDownOpen,\n    setIsLeadingDropDownOpen,\n    'bottom-start',\n  );\n  const renderTrailingDropDown = renderDropdown(\n    trailingDropdown as React.ReactElement,\n    isTrailingDropDownOpen,\n    setIsTrailingDropDownOpen,\n    'bottom-end',\n  );\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? inputValue)));\n  }, [showClearButton, defaultValue, inputValue]);\n\n  const renderClearButton = (): React.ReactElement => {\n    return (\n      <IconButton\n        size=\"medium\"\n        icon={CloseIcon}\n        onClick={() => {\n          if (isEmpty(inputValue) && textInputRef.current) {\n            // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n            if (isReactNative(textInputRef.current)) {\n              textInputRef.current.clear();\n              textInputRef.current.focus();\n            } else if (textInputRef.current instanceof HTMLInputElement) {\n              textInputRef.current.value = '';\n              textInputRef.current.focus();\n            }\n          }\n          handleTagsClear();\n          // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n          onClearButtonClick?.();\n          textInputRef?.current?.focus();\n          setShouldShowClearButton(false);\n        }}\n        isDisabled={isDisabled}\n        accessibilityLabel=\"Clear Input Content\"\n      />\n    );\n  };\n  const hasTrailingDropDown = Boolean(trailingDropdown);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton && hasTrailingDropDown) {\n      return (\n        <BaseBox display=\"flex\" gap=\"spacing.3\">\n          {renderClearButton()} <Divider orientation=\"vertical\" />\n        </BaseBox>\n      );\n    }\n\n    if (showClearButton && hasTrailingInteractionElement) {\n      return (\n        <BaseBox display=\"flex\" gap=\"spacing.3\">\n          {renderClearButton()} <Divider orientation=\"vertical\" /> {trailing as React.ReactElement}\n        </BaseBox>\n      );\n    }\n\n    if (shouldShowClearButton) {\n      return renderClearButton();\n    }\n\n    if (hasTrailingInteractionElement) {\n      return trailing as React.ReactElement;\n    }\n    return null;\n  };\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      setInputWrapperRef={(wrapperNode) => {\n        textInputWrapperRef.current = wrapperNode;\n      }}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      // CONTROLLED/UNCONTROLLED INPUT LOGIC:\n      // For inputs WITHOUT format:\n      //   - Use standard React controlled/uncontrolled logic\n      //   - Controlled: user provides `value` prop → use `value` prop\n      //   - Uncontrolled: user provides `defaultValue` prop → use `defaultValue` prop\n      //\n      // For inputs WITH format:\n      //   - Formatting requires controlled mode to re-render and show formatted values\n      //   - Case 1: Only `value` provided → defaultValue: undefined, value: formattedValue (normal controlled)\n      //   - Case 2: Only `defaultValue` provided → defaultValue: undefined, value: formattedValue (convert to controlled)\n      //   - Case 3: Both `value` and `defaultValue` provided → defaultValue: defaultValue, value: formattedValue (let BaseInput detect conflict and throw error)\n      //\n      defaultValue={\n        format\n          ? value !== undefined && defaultValue !== undefined\n            ? defaultValue\n            : undefined\n          : defaultValue\n      }\n      value={format ? inputValue : value}\n      name={name}\n      maxCharacters={effectiveMaxCharacters}\n      isDropdownTrigger={isTaggedInput}\n      tags={isTaggedInput ? getTags({ size }) : undefined}\n      showAllTags={isInputFocussed}\n      maxTagRows=\"single\"\n      activeTagIndex={activeTagIndex}\n      setActiveTagIndex={setActiveTagIndex}\n      leadingDropDown={renderLeadingDropDown}\n      trailingDropDown={renderTrailingDropDown}\n      leadingInteractionElement={\n        hasLeadingInteractionElement ? (leading as React.ReactElement) : null\n      }\n      onChange={({ name, value }: { name?: string; value?: string }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        handleTaggedInputChange({ name, value });\n        handleOnChange({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={(e) => {\n        setIsInputFocussed(true);\n        onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        setIsInputFocussed(false);\n        onBlur?.(e);\n      }}\n      onKeyDown={(e) => {\n        handleTaggedInputKeydown(e);\n        if (format) {\n          formattingResult.handleKeyDown(e.event);\n        }\n      }}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={_leadingIcon ?? leadingIcon ?? icon}\n      prefix={prefix}\n      trailingInteractionElement={renderInteractionElement()}\n      trailingIcon={_trailingIcon ?? trailingIcon}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return format ? null : effectiveMaxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter\n              currentCount={value?.length ?? 0}\n              maxCount={effectiveMaxCharacters}\n              size={size}\n            />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      size={size}\n      {...rest}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextInput","_ref","ref","_leading$name","_trailing$name","_ref4","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","_ref$type","type","defaultValue","name","value","maxCharacters","format","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","_ref$size","size","leadingIcon","trailingIcon","isTaggedInput","tags","onTagChange","trailing","leading","rest","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","_useState3","_useState4","isInputFocussed","setIsInputFocussed","__DEV__","hasAlphanumeric","test","Error","formattingResult","useFormattedInput","inputValue","formattedValue","effectiveMaxCharacters","maxLength","handleOnChange","useCallback","_ref2","handleChange","_useTaggedInput","useTaggedInput","inputRef","activeTagIndex","setActiveTagIndex","getTags","handleTaggedInputKeydown","handleTaggedInputChange","handleTagsClear","_React$useState","_React$useState2","isTrailingDropDownOpen","setIsTrailingDropDownOpen","_React$useState3","_React$useState4","isLeadingDropDownOpen","setIsLeadingDropDownOpen","textInputWrapperRef","useEffect","leadingDropDown","getComponentId","trailingDropdown","_leadingIcon","endsWith","undefined","_trailingIcon","hasLeadingInteractionElement","hasTrailingInteractionElement","renderDropdown","dropdown","isOpen","setIsOpen","defaultPlacement","cloneElement","selectionType","onOpenChange","children","Children","map","props","child","DropdownOverlay","referenceRef","_isNestedDropdown","renderLeadingDropDown","renderTrailingDropDown","Boolean","renderClearButton","_jsx","IconButton","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","hasTrailingDropDown","renderInteractionElement","Spinner","color","_jsxs","BaseBox","display","gap","Divider","orientation","BaseInput","Object","assign","id","componentName","MetaConstants","TextInput","setInputWrapperRef","wrapperNode","hideLabelText","isDropdownTrigger","showAllTags","maxTagRows","trailingDropDown","leadingInteractionElement","_ref3","length","e","onKeyDown","handleKeyDown","event","trailingInteractionElement","trailingFooterSlot","_value$length","marginTop","hintMarginTop","marginRight","CharacterCounter","currentCount","maxCount","getKeyboardAndAutocompleteProps","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

package/build/lib/native/components/Input/TextInput/useFormattedInput.js

@@ -0,0 +1,7 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+
+var format=function format(value,pattern){if(!pattern)return value;var result='';var valueIndex=0;for(var i=0;i<pattern.length;i++){var patternChar=pattern[i];if(patternChar==='#'){if(valueIndex<value.length){result+=value[valueIndex];valueIndex++;}else {break;}}else {result+=patternChar;}}return result;};var stripPatternCharacters=function stripPatternCharacters(value){return value.replace(/[^\dA-z]/g,'');};var isUserCharacter=function isUserCharacter(character){return /[\dA-z]/.test(character);};var useFormattedInput=function useFormattedInput(_ref){var pattern=_ref.format,onChange=_ref.onChange,userValue=_ref.value,_ref$defaultValue=_ref.defaultValue,defaultValue=_ref$defaultValue===void 0?'':_ref$defaultValue;var initialValue=useMemo(function(){return format(userValue!=null?userValue:defaultValue,pattern!=null?pattern:'');},[userValue,defaultValue,pattern]);var _useState=useState(initialValue),_useState2=_slicedToArray(_useState,2),internalValue=_useState2[0],setInternalValue=_useState2[1];var inputRef=useRef(null);var infoRef=useRef({});var maxLength=useMemo(function(){return pattern==null?void 0:pattern.length;},[pattern]);useEffect(function(){if((userValue===''||userValue===undefined)&&defaultValue===''){var emptyFormatted=format('',pattern!=null?pattern:'');setInternalValue(emptyFormatted);}},[userValue,pattern]);useEffect(function(){var _infoRef$current=infoRef.current,cursorPosition=_infoRef$current.cursorPosition,endOfSection=_infoRef$current.endOfSection;if(endOfSection||cursorPosition===undefined)return;if(inputRef.current){inputRef.current.setSelectionRange(cursorPosition,cursorPosition);}},[internalValue]);var handleChange=useCallback(function(_ref2){var _inputRef$current$sel,_inputRef$current;var name=_ref2.name,inputValue=_ref2.value;if(!pattern){var cleanValue=inputValue!=null?inputValue:'';onChange==null?void 0:onChange({name:name,value:cleanValue});setInternalValue(cleanValue);return;}var currentValue=internalValue;var newInputValue=inputValue!=null?inputValue:'';var cursorPosition=(_inputRef$current$sel=(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.selectionStart)!=null?_inputRef$current$sel:0;var didDelete=newInputValue.length<currentValue.length;infoRef.current.cursorPosition=cursorPosition;var rawValue=stripPatternCharacters(newInputValue);if(didDelete){var _currentValue$cursorP;var deletedChar=(_currentValue$cursorP=currentValue[cursorPosition])!=null?_currentValue$cursorP:'';var deletedDelimiter=!isUserCharacter(deletedChar);if(deletedDelimiter){var beforeCursor=newInputValue.substring(0,cursorPosition);var afterCursor=newInputValue.substring(cursorPosition);var rawBefore=stripPatternCharacters(beforeCursor);var rawAfter=stripPatternCharacters(afterCursor);rawValue=rawBefore.slice(0,-1)+rawAfter;infoRef.current.cursorPosition=beforeCursor.replace(/([\d\w]+)[^\dA-z]+$/,'$1').length-1;}}var formattedValue=format(rawValue,pattern);infoRef.current.endOfSection=false;if(!didDelete){var nextChar=formattedValue[cursorPosition];var nextIsDelimiter=nextChar?!isUserCharacter(nextChar):false;var remainingText=formattedValue.substring(cursorPosition);var nextUserCharIndex=remainingText.search(/[\dA-z]/);var hasMoreUserChars=nextUserCharIndex!==-1;infoRef.current.endOfSection=nextIsDelimiter&&!hasMoreUserChars;if(nextIsDelimiter&&hasMoreUserChars){var _formattedValue;var prevChar=(_formattedValue=formattedValue[cursorPosition-1])!=null?_formattedValue:'';var prevIsDelimiter=!isUserCharacter(prevChar);if(prevIsDelimiter){infoRef.current.cursorPosition=cursorPosition+nextUserCharIndex+1;}}}onChange==null?void 0:onChange({name:name,value:formattedValue,rawValue:rawValue});setInternalValue(formattedValue);},[pattern,onChange,internalValue]);var handleKeyDown=useCallback(function(event){if(event.currentTarget&&inputRef.current!==event.currentTarget){inputRef.current=event.currentTarget;}},[]);return {formattedValue:internalValue,handleChange:handleChange,handleKeyDown:handleKeyDown,maxLength:maxLength};};
+
+export { useFormattedInput };
+//# sourceMappingURL=useFormattedInput.js.map

package/build/lib/native/components/Input/TextInput/useFormattedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormattedInput.js","sources":["../../../../../../src/components/Input/TextInput/useFormattedInput.ts"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useRef, useState, useEffect, useMemo } from 'react';\nimport type { FormInputOnEvent } from '~components/Form/FormTypes';\n\n/**\n * Formats user input according to pattern. format(\"1234\", \"##/##\") → \"12/34\"\n */\nconst format = (value: string, pattern: string): string => {\n  if (!pattern) return value;\n\n  let result = '';\n  let valueIndex = 0;\n\n  for (let i = 0; i < pattern.length; i++) {\n    const patternChar = pattern[i]; // \"#\" or \"/\"\n\n    if (patternChar === '#') {\n      if (valueIndex < value.length) {\n        result += value[valueIndex]; // add \"1\" from \"1234\"\n        valueIndex++;\n      } else {\n        break; // No more input chars, stop\n      }\n    } else {\n      result += patternChar; // add \"/\" delimiter\n    }\n  }\n\n  return result; // \"12/34\"\n};\n\n/**\n * Removes delimiters, keeps only user input. stripPatternCharacters(\"12/34\") → \"1234\"\n */\nconst stripPatternCharacters = (value: string): string => {\n  return value.replace(/[^\\dA-z]/g, ''); // \"12/34\" → \"1234\" (removes \"/\")\n};\n\n/**\n * Checks if character is user input vs delimiter. isUserCharacter('1') → true, isUserCharacter('/') → false\n */\nconst isUserCharacter = (character: string): boolean => {\n  return /[\\dA-z]/.test(character); // \"1\" → true, \"/\" → false\n};\n\ntype UseFormattedInputProps = {\n  format?: string;\n  onChange?: (params: { name?: string; value?: string; rawValue?: string }) => void;\n  value?: string;\n  defaultValue?: string;\n};\n\ntype UseFormattedInputReturn = {\n  formattedValue: string;\n  handleChange: FormInputOnEvent;\n  handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  maxLength?: number;\n};\n\n/**\n * Hook for pattern-based input formatting with smart cursor positioning.\n * useFormattedInput({ format: \"##/##\" }) transforms \"1234\" → \"12/34\"\n */\nexport const useFormattedInput = ({\n  format: pattern,\n  onChange,\n  value: userValue,\n  defaultValue = '',\n}: UseFormattedInputProps): UseFormattedInputReturn => {\n  const initialValue = useMemo(() => {\n    return format(userValue ?? defaultValue, pattern ?? '');\n  }, [userValue, defaultValue, pattern]);\n\n  const [internalValue, setInternalValue] = useState(initialValue);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const infoRef = useRef<{\n    cursorPosition?: number;\n    endOfSection?: boolean;\n  }>({});\n\n  const maxLength = useMemo(() => pattern?.length, [pattern]);\n\n  // Reset internal state when parent clears value (form resets, external state changes)\n  // Preserves format delimiters for visual guidance. Example: \"(###)\" → \"(   )\" when cleared\n  useEffect(() => {\n    if ((userValue === '' || userValue === undefined) && defaultValue === '') {\n      const emptyFormatted = format('', pattern ?? '');\n      setInternalValue(emptyFormatted);\n    }\n  }, [userValue, pattern]);\n\n  // Apply calculated cursor position after value updates\n  useEffect(() => {\n    const { cursorPosition, endOfSection } = infoRef.current;\n\n    if (endOfSection || cursorPosition === undefined) return; // Skip if no position or end section\n\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);\n    }\n  }, [internalValue]);\n\n  const handleChange: FormInputOnEvent = useCallback(\n    ({ name, value: inputValue }) => {\n      if (!pattern) {\n        // No pattern = regular input\n        const cleanValue = inputValue ?? '';\n        onChange?.({ name, value: cleanValue });\n        setInternalValue(cleanValue);\n        return;\n      }\n\n      const currentValue = internalValue; // \"12/34\" (user wants to delete \"/\")\n      const newInputValue = inputValue ?? ''; // \"1234\" (after deleting \"/\")\n      const cursorPosition = inputRef.current?.selectionStart ?? 0; // 2 (cursor where \"/\" was)\n      const didDelete = newInputValue.length < currentValue.length; // 4 < 5 → true\n\n      infoRef.current.cursorPosition = cursorPosition;\n\n      let rawValue = stripPatternCharacters(newInputValue); // \"1234\" → \"1234\"\n\n      // Handle special case: user deleted a delimiter (like deleting \"/\" in \"12/|34\")\n      if (didDelete) {\n        const deletedChar = currentValue[cursorPosition] ?? ''; // \"12/34\"[2] → \"/\"\n        const deletedDelimiter = !isUserCharacter(deletedChar); // \"/\" → true (is delimiter)\n\n        if (deletedDelimiter) {\n          // true (will execute for \"/\" deletion)\n          const beforeCursor = newInputValue.substring(0, cursorPosition); // \"12\" (before cursor)\n          const afterCursor = newInputValue.substring(cursorPosition); // \"34\" (after cursor)\n          const rawBefore = stripPatternCharacters(beforeCursor); // \"12\" → \"12\"\n          const rawAfter = stripPatternCharacters(afterCursor); // \"34\" → \"34\"\n\n          rawValue = rawBefore.slice(0, -1) + rawAfter; // \"12\".slice(0,-1) + \"34\" → \"1\" + \"34\" → \"134\"\n\n          // Removes trailing non-alphanumeric characters from the end of the string, preserving the last alphanumeric word before them.\n          infoRef.current.cursorPosition =\n            beforeCursor.replace(/([\\d\\w]+)[^\\dA-z]+$/, '$1').length - 1;\n        }\n      }\n\n      const formattedValue = format(rawValue, pattern); // format(\"134\", \"##/##\") → \"13/4\"\n      infoRef.current.endOfSection = false;\n\n      // Handle cursor positioning when typing (not deleting)\n      if (!didDelete) {\n        // User types \"2\" in \"1|\" → becomes \"12|/\" → should jump to \"12/|\"\n        const nextChar = formattedValue[cursorPosition]; // \"12/\"[2] → \"/\" (delimiter)\n        const nextIsDelimiter = nextChar ? !isUserCharacter(nextChar) : false; // \"/\" → true\n\n        const remainingText = formattedValue.substring(cursorPosition); // \"12/\".substring(2) → \"/\"\n        const nextUserCharIndex = remainingText.search(/[\\dA-z]/); // \"/\".search() → -1 (no user chars)\n        const hasMoreUserChars = nextUserCharIndex !== -1; // -1 !== -1 → false\n\n        infoRef.current.endOfSection = nextIsDelimiter && !hasMoreUserChars; // true && false → false\n\n        // Move cursor past auto-inserted delimiters for smooth typing\n        if (nextIsDelimiter && hasMoreUserChars) {\n          const prevChar = formattedValue[cursorPosition - 1] ?? '';\n          const prevIsDelimiter = !isUserCharacter(prevChar);\n\n          if (prevIsDelimiter) {\n            infoRef.current.cursorPosition = cursorPosition + nextUserCharIndex + 1;\n          }\n        }\n      }\n\n      onChange?.({ name, value: formattedValue, rawValue });\n      setInternalValue(formattedValue);\n    },\n    [pattern, onChange, internalValue],\n  );\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.currentTarget && inputRef.current !== event.currentTarget) {\n      inputRef.current = event.currentTarget;\n    }\n  }, []);\n\n  return {\n    formattedValue: internalValue,\n    handleChange,\n    handleKeyDown,\n    maxLength,\n  };\n};\n"],"names":["format","value","pattern","result","valueIndex","i","length","patternChar","stripPatternCharacters","replace","isUserCharacter","character","test","useFormattedInput","_ref","onChange","userValue","_ref$defaultValue","defaultValue","initialValue","useMemo","_useState","useState","_useState2","_slicedToArray","internalValue","setInternalValue","inputRef","useRef","infoRef","maxLength","useEffect","undefined","emptyFormatted","_infoRef$current","current","cursorPosition","endOfSection","setSelectionRange","handleChange","useCallback","_ref2","_inputRef$current$sel","_inputRef$current","name","inputValue","cleanValue","currentValue","newInputValue","selectionStart","didDelete","rawValue","_currentValue$cursorP","deletedChar","deletedDelimiter","beforeCursor","substring","afterCursor","rawBefore","rawAfter","slice","formattedValue","nextChar","nextIsDelimiter","remainingText","nextUserCharIndex","search","hasMoreUserChars","_formattedValue","prevChar","prevIsDelimiter","handleKeyDown","event","currentTarget"],"mappings":"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"}

package/build/lib/web/development/components/Input/TextInput/TextInput.js

@@ -5,6 +5,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import '../BaseInput/index.js';
 import { getKeyboardAndAutocompleteProps } from '../BaseInput/utils.js';
 import { useTaggedInput } from '../BaseInput/useTaggedInput.js';
+import { useFormattedInput } from './useFormattedInput.js';
 import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
 import '../../Icons/index.js';
 import '../../Button/IconButton/index.js';
@@ -33,7 +34,7 @@ import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import { CharacterCounter } from '../../Form/CharacterCounter/CharacterCounter.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["label", "accessibilityLabel", "labelPosition", "placeholder", "type", "defaultValue", "name", "value", "maxCharacters", "onChange", "onClick", "onFocus", "onBlur", "onSubmit", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "icon", "prefix", "showClearButton", "onClearButtonClick", "isLoading", "suffix", "autoFocus", "keyboardReturnKeyType", "autoCompleteSuggestionType", "autoCapitalize", "testID", "size", "leadingIcon", "trailingIcon", "isTaggedInput", "tags", "onTagChange", "trailing", "leading"];
+var _excluded = ["label", "accessibilityLabel", "labelPosition", "placeholder", "type", "defaultValue", "name", "value", "maxCharacters", "format", "onChange", "onClick", "onFocus", "onBlur", "onSubmit", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "icon", "prefix", "showClearButton", "onClearButtonClick", "isLoading", "suffix", "autoFocus", "keyboardReturnKeyType", "autoCompleteSuggestionType", "autoCapitalize", "testID", "size", "leadingIcon", "trailingIcon", "isTaggedInput", "tags", "onTagChange", "trailing", "leading"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists
@@ -42,7 +43,7 @@ var isReactNative = function isReactNative(_textInputRef) {
   return getPlatformType() === 'react-native';
 };
 var _TextInput = function _TextInput(_ref, ref) {
-  var _leading$name, _trailing$name, _ref3;
+  var _leading$name, _trailing$name, _ref4;
   var label = _ref.label,
     accessibilityLabel = _ref.accessibilityLabel,
     _ref$labelPosition = _ref.labelPosition,
@@ -54,7 +55,8 @@ var _TextInput = function _TextInput(_ref, ref) {
     name = _ref.name,
     value = _ref.value,
     maxCharacters = _ref.maxCharacters,
-    _onChange = _ref.onChange,
+    format = _ref.format,
+    onChange = _ref.onChange,
     onClick = _ref.onClick,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
@@ -97,14 +99,45 @@ var _TextInput = function _TextInput(_ref, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isInputFocussed = _useState4[0],
     setIsInputFocussed = _useState4[1];
+  if (true) {
+    if (format) {
+      var hasAlphanumeric = /[a-zA-Z0-9]/.test(format);
+      if (hasAlphanumeric) {
+        throw new Error("[Blade: TextInput] Invalid format \"".concat(format, "\". Only # and special characters allowed, no letters/numbers."));
+      }
+    }
+  }
+  var formattingResult = useFormattedInput({
+    format: format,
+    onChange: onChange,
+    value: value,
+    defaultValue: defaultValue
+  });
+  var inputValue = format ? formattingResult.formattedValue : value;
+  var effectiveMaxCharacters = format ? formattingResult.maxLength : maxCharacters;
+  var handleOnChange = React__default.useCallback(function (_ref2) {
+    var name = _ref2.name,
+      inputValue = _ref2.value;
+    if (format) {
+      formattingResult.handleChange({
+        name: name,
+        value: inputValue
+      });
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        name: name,
+        value: inputValue
+      });
+    }
+  }, [format, formattingResult.handleChange, onChange]);
   var _useTaggedInput = useTaggedInput({
       isTaggedInput: isTaggedInput,
       tags: tags,
       onTagChange: onTagChange,
       isDisabled: isDisabled,
-      onChange: _onChange,
+      onChange: handleOnChange,
       name: name,
-      value: value,
+      value: inputValue,
       inputRef: textInputRef
     }),
     activeTagIndex = _useTaggedInput.activeTagIndex,
@@ -166,15 +199,15 @@ var _TextInput = function _TextInput(_ref, ref) {
   var renderLeadingDropDown = renderDropdown(leadingDropDown, isLeadingDropDownOpen, setIsLeadingDropDownOpen, 'bottom-start');
   var renderTrailingDropDown = renderDropdown(trailingDropdown, isTrailingDropDownOpen, setIsTrailingDropDownOpen, 'bottom-end');
   React__default.useEffect(function () {
-    setShouldShowClearButton(Boolean(showClearButton && (defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)));
-  }, [showClearButton, defaultValue, value]);
+    setShouldShowClearButton(Boolean(showClearButton && (defaultValue !== null && defaultValue !== void 0 ? defaultValue : inputValue)));
+  }, [showClearButton, defaultValue, inputValue]);
   var renderClearButton = function renderClearButton() {
     return /*#__PURE__*/jsx(IconButton, {
       size: "medium",
       icon: CloseIcon,
       onClick: function onClick() {
         var _textInputRef$current;
-        if (isEmpty(value) && textInputRef.current) {
+        if (isEmpty(inputValue) && textInputRef.current) {
           // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function
           if (isReactNative(textInputRef.current)) {
             textInputRef.current.clear();
@@ -239,11 +272,24 @@ var _TextInput = function _TextInput(_ref, ref) {
     accessibilityLabel: accessibilityLabel,
     hideLabelText: !Boolean(label),
     labelPosition: labelPosition,
-    placeholder: placeholder,
-    defaultValue: defaultValue,
-    value: value,
+    placeholder: placeholder
+    // CONTROLLED/UNCONTROLLED INPUT LOGIC:
+    // For inputs WITHOUT format:
+    //   - Use standard React controlled/uncontrolled logic
+    //   - Controlled: user provides `value` prop → use `value` prop
+    //   - Uncontrolled: user provides `defaultValue` prop → use `defaultValue` prop
+    //
+    // For inputs WITH format:
+    //   - Formatting requires controlled mode to re-render and show formatted values
+    //   - Case 1: Only `value` provided → defaultValue: undefined, value: formattedValue (normal controlled)
+    //   - Case 2: Only `defaultValue` provided → defaultValue: undefined, value: formattedValue (convert to controlled)
+    //   - Case 3: Both `value` and `defaultValue` provided → defaultValue: defaultValue, value: formattedValue (let BaseInput detect conflict and throw error)
+    //
+    ,
+    defaultValue: format ? value !== undefined && defaultValue !== undefined ? defaultValue : undefined : defaultValue,
+    value: format ? inputValue : value,
     name: name,
-    maxCharacters: maxCharacters,
+    maxCharacters: effectiveMaxCharacters,
     isDropdownTrigger: isTaggedInput,
     tags: isTaggedInput ? getTags({
       size: size
@@ -255,9 +301,9 @@ var _TextInput = function _TextInput(_ref, ref) {
     leadingDropDown: renderLeadingDropDown,
     trailingDropDown: renderTrailingDropDown,
     leadingInteractionElement: hasLeadingInteractionElement ? leading : null,
-    onChange: function onChange(_ref2) {
-      var name = _ref2.name,
-        value = _ref2.value;
+    onChange: function onChange(_ref3) {
+      var name = _ref3.name,
+        value = _ref3.value;
       if (showClearButton && value !== null && value !== void 0 && value.length) {
         // show the clear button when the user starts typing in
         setShouldShowClearButton(true);
@@ -270,7 +316,7 @@ var _TextInput = function _TextInput(_ref, ref) {
         name: name,
         value: value
       });
-      _onChange === null || _onChange === void 0 ? void 0 : _onChange({
+      handleOnChange({
         name: name,
         value: value
       });
@@ -286,12 +332,15 @@ var _TextInput = function _TextInput(_ref, ref) {
     },
     onKeyDown: function onKeyDown(e) {
       handleTaggedInputKeydown(e);
+      if (format) {
+        formattingResult.handleKeyDown(e.event);
+      }
     },
     onSubmit: onSubmit,
     isDisabled: isDisabled,
     necessityIndicator: necessityIndicator,
     isRequired: isRequired,
-    leadingIcon: (_ref3 = _leadingIcon !== null && _leadingIcon !== void 0 ? _leadingIcon : leadingIcon) !== null && _ref3 !== void 0 ? _ref3 : icon,
+    leadingIcon: (_ref4 = _leadingIcon !== null && _leadingIcon !== void 0 ? _leadingIcon : leadingIcon) !== null && _ref4 !== void 0 ? _ref4 : icon,
     prefix: prefix,
     trailingInteractionElement: renderInteractionElement(),
     trailingIcon: _trailingIcon !== null && _trailingIcon !== void 0 ? _trailingIcon : trailingIcon,
@@ -302,12 +351,12 @@ var _TextInput = function _TextInput(_ref, ref) {
     successText: successText,
     trailingFooterSlot: function trailingFooterSlot(value) {
       var _value$length;
-      return maxCharacters ? /*#__PURE__*/jsx(BaseBox, {
+      return format ? null : effectiveMaxCharacters ? /*#__PURE__*/jsx(BaseBox, {
         marginTop: hintMarginTop[size],
         marginRight: "spacing.1",
         children: /*#__PURE__*/jsx(CharacterCounter, {
           currentCount: (_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0,
-          maxCount: maxCharacters,
+          maxCount: effectiveMaxCharacters,
           size: size
         })
       }) : null;