@razorpay/blade 12.98.1 → 12.111.0

package/build/lib/native/components/Input/DropdownInputTriggers/SelectInput.js

@@ -1,20 +1,20 @@
 import React__default from 'react';
 import { BaseDropdownInputTrigger } from './BaseDropdownInputTrigger.js';
 import { useDropdown } from '../../Dropdown/useDropdown.js';
+import '../../Box/BaseBox/index.js';
+import '../../VisuallyHidden/index.native.js';
+import '../../../utils/index.js';
+import '../../../utils/assignWithoutSideEffects/index.js';
+import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
+import '../../../utils/makeAnalyticsAttribute/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
-import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.native.js';
-import 'react-native';
-import '@babel/runtime/helpers/slicedToArray';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
-import '../../../tokens/global/typography.js';
-import '../../../tokens/global/motion.js';
-import '../../BladeProvider/useTheme.js';
-import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
-import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.native.js';
 import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _SelectInput=function _SelectInput(props,ref){var _useDropdown=useDropdown(),value=_useDropdown.value,triggererRef=_useDropdown.triggererRef,onTriggerKeydown=_useDropdown.onTriggerKeydown,_onTriggerClick=_useDropdown.onTriggerClick;return(jsxs(BaseBox,{position:"relative",children:[!isReactNative()?jsx(VisuallyHidden,{children:jsx("input",Object.assign({onFocus:function onFocus(){var _triggererRef$current;(_triggererRef$current=triggererRef.current)==null?void 0:_triggererRef$current.focus();},ref:ref,tabIndex:-1,required:props.isRequired,name:props.name,value:value},makeAnalyticsAttribute(props),{onChange:function onChange(){},"aria-hidden":true}))}):null,jsx(BaseDropdownInputTrigger,Object.assign({},props,{isSelectInput:true,onTriggerKeydown:onTriggerKeydown,onTriggerClick:function onTriggerClick(e){_onTriggerClick();props==null?void 0:props.onClick==null?void 0:props.onClick(e);}}))]}));};var SelectInput=assignWithoutSideEffects(React__default.forwardRef(_SelectInput),{componentId:dropdownComponentIds.triggers.SelectInput});
+var _this=undefined,_jsxFileName="/home/runner/work/blade/blade/packages/blade/src/components/Input/DropdownInputTriggers/SelectInput.tsx";var _SelectInput=function _SelectInput(props,ref){var _useDropdown=useDropdown(),value=_useDropdown.value,triggererRef=_useDropdown.triggererRef,onTriggerKeydown=_useDropdown.onTriggerKeydown,_onTriggerClick=_useDropdown.onTriggerClick;return(jsxs(BaseBox,{position:"relative",children:[!isReactNative()?jsx(VisuallyHidden,{children:jsx("input",Object.assign({onFocus:function onFocus(){var _triggererRef$current;(_triggererRef$current=triggererRef.current)==null?void 0:_triggererRef$current.focus();},ref:ref,tabIndex:-1,required:props.isRequired,name:props.name,value:value},makeAnalyticsAttribute(props),{onChange:function onChange(){},"aria-hidden":true}))}):null,jsx(BaseDropdownInputTrigger,Object.assign({},props,{isSelectInput:true,onTriggerKeydown:onTriggerKeydown,onTriggerClick:function onTriggerClick(e){_onTriggerClick();props==null?void 0:props.onClick==null?void 0:props.onClick(e);}}))]}));};var SelectInput=assignWithoutSideEffects(React__default.forwardRef(_SelectInput),{componentId:dropdownComponentIds.triggers.SelectInput});
 
 export { SelectInput };
 //# sourceMappingURL=SelectInput.js.map

package/build/lib/native/components/Input/DropdownInputTriggers/SelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.js","sources":["../../../../../../src/components/Input/DropdownInputTriggers/SelectInput.tsx"],"sourcesContent":["import React from 'react';\nimport type { SelectInputProps } from './types';\nimport { BaseDropdownInputTrigger } from './BaseDropdownInputTrigger';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport BaseBox from '~components/Box/BaseBox';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { isReactNative } from '~utils';\nimport type { BladeElementRef } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst _SelectInput = (\n  props: SelectInputProps,\n  ref: React.ForwardedRef<BladeElementRef>,\n): React.ReactElement => {\n  const { value, triggererRef, onTriggerKeydown, onTriggerClick } = useDropdown();\n\n  return (\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    <BaseBox position=\"relative\">\n      {!isReactNative() ? (\n        <VisuallyHidden>\n          <input\n            onFocus={() => {\n              triggererRef.current?.focus();\n            }}\n            ref={ref as React.Ref<HTMLInputElement>}\n            tabIndex={-1}\n            required={props.isRequired}\n            name={props.name}\n            value={value}\n            {...makeAnalyticsAttribute(props)}\n            // Adding onChange to surpass no onChange on controlled component warning\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            onChange={() => {}}\n            // Accessibility is covered in the select input itself so we hide this field from a11y tree\n            aria-hidden={true}\n          />\n        </VisuallyHidden>\n      ) : null}\n      <BaseDropdownInputTrigger\n        {...props}\n        isSelectInput={true}\n        onTriggerKeydown={onTriggerKeydown}\n        onTriggerClick={(e) => {\n          onTriggerClick();\n          props?.onClick?.(e);\n        }}\n      />\n    </BaseBox>\n  );\n};\n\n/**\n * ### SelectInput\n *\n * Our equivalent of `<select>` tag. Lets you select items from given options.\n *\n * To be used in combination of `Dropdown` and `ActionList` component\n *\n * ---\n *\n * #### Usage\n *\n * ```diff\n * <Dropdown>\n * + <SelectInput label=\"Select Fruits\" />\n *   <DropdownOverlay>\n *     <ActionList>\n *       <ActionListItem title=\"Mango\" value=\"mango\" />\n *       <ActionListItem title=\"Apple\" value=\"apple\" />\n *     </ActionList>\n *   </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.\n */\n\nconst SelectInput = assignWithoutSideEffects(React.forwardRef(_SelectInput), {\n  componentId: dropdownComponentIds.triggers.SelectInput,\n});\n\nexport { SelectInput };\n"],"names":["_SelectInput","props","ref","_useDropdown","useDropdown","value","triggererRef","onTriggerKeydown","onTriggerClick","_jsxs","BaseBox","position","children","isReactNative","_jsx","VisuallyHidden","Object","assign","onFocus","_triggererRef$current","current","focus","tabIndex","required","isRequired","name","makeAnalyticsAttribute","onChange","BaseDropdownInputTrigger","isSelectInput","e","onClick","SelectInput","assignWithoutSideEffects","React","forwardRef","componentId","dropdownComponentIds","triggers"],"mappings":";;;;;;;;;;;;;;;;AAYA,IAAMA,YAAY,CAAG,SAAfA,YAAYA,CAChBC,KAAuB,CACvBC,GAAwC,CACjB,CACvB,IAAAC,YAAA,CAAkEC,WAAW,EAAE,CAAvEC,KAAK,CAAAF,YAAA,CAALE,KAAK,CAAEC,YAAY,CAAAH,YAAA,CAAZG,YAAY,CAAEC,gBAAgB,CAAAJ,YAAA,CAAhBI,gBAAgB,CAAEC,eAAc,CAAAL,YAAA,CAAdK,cAAc,CAE7D,OAEEC,IAAA,CAACC,OAAO,CAAA,CAACC,QAAQ,CAAC,UAAU,CAAAC,QAAA,CAAA,CACzB,CAACC,aAAa,EAAE,CACfC,GAAA,CAACC,cAAc,CAAA,CAAAH,QAAA,CACbE,GAAA,CAAA,OAAA,CAAAE,MAAA,CAAAC,MAAA,CAAA,CACEC,OAAO,CAAE,SAATA,OAAOA,EAAQ,CAAAC,IAAAA,qBAAA,CACb,CAAAA,qBAAA,CAAAb,YAAY,CAACc,OAAO,GAAA,IAAA,CAAA,KAAA,CAAA,CAApBD,qBAAA,CAAsBE,KAAK,EAAE,CAC/B,CAAE,CACFnB,GAAG,CAAEA,GAAmC,CACxCoB,QAAQ,CAAE,CAAC,CAAE,CACbC,QAAQ,CAAEtB,KAAK,CAACuB,UAAW,CAC3BC,IAAI,CAAExB,KAAK,CAACwB,IAAK,CACjBpB,KAAK,CAAEA,KAAM,CAAA,CACTqB,sBAAsB,CAACzB,KAAK,CAAC,CAAA,CAGjC0B,QAAQ,CAAE,SAAVA,QAAQA,EAAQ,EAAG,CAEnB,aAAa,CAAA,IAAK,CACnB,CAAA,CAAC,CACY,CAAC,CACf,IAAI,CACRb,GAAA,CAACc,wBAAwB,CAAAZ,MAAA,CAAAC,MAAA,CACnBhB,EAAAA,CAAAA,KAAK,EACT4B,aAAa,CAAE,IAAK,CACpBtB,gBAAgB,CAAEA,gBAAiB,CACnCC,cAAc,CAAE,SAAhBA,cAAcA,CAAGsB,CAAC,CAAK,CACrBtB,eAAc,EAAE,CAChBP,KAAK,EAALA,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAK,CAAE8B,OAAO,EAAd9B,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAK,CAAE8B,OAAO,CAAGD,CAAC,CAAC,CACrB,CAAE,CACH,CAAA,CAAC,CACK,CAAA,CAAC,EAEd,CAAC,CA8BK,IAAAE,WAAW,CAAGC,wBAAwB,CAACC,cAAK,CAACC,UAAU,CAACnC,YAAY,CAAC,CAAE,CAC3EoC,WAAW,CAAEC,oBAAoB,CAACC,QAAQ,CAACN,WAC7C,CAAC;;;;"}
+{"version":3,"file":"SelectInput.js","sources":["../../../../../../src/components/Input/DropdownInputTriggers/SelectInput.tsx"],"sourcesContent":["import React from 'react';\nimport type { SelectInputProps } from './types';\nimport { BaseDropdownInputTrigger } from './BaseDropdownInputTrigger';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport BaseBox from '~components/Box/BaseBox';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { isReactNative } from '~utils';\nimport type { BladeElementRef } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst _SelectInput = (\n  props: SelectInputProps,\n  ref: React.ForwardedRef<BladeElementRef>,\n): React.ReactElement => {\n  const { value, triggererRef, onTriggerKeydown, onTriggerClick } = useDropdown();\n\n  return (\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    <BaseBox position=\"relative\">\n      {!isReactNative() ? (\n        <VisuallyHidden>\n          <input\n            onFocus={() => {\n              triggererRef.current?.focus();\n            }}\n            ref={ref as React.Ref<HTMLInputElement>}\n            tabIndex={-1}\n            required={props.isRequired}\n            name={props.name}\n            value={value}\n            {...makeAnalyticsAttribute(props)}\n            // Adding onChange to surpass no onChange on controlled component warning\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            onChange={() => {}}\n            // Accessibility is covered in the select input itself so we hide this field from a11y tree\n            aria-hidden={true}\n          />\n        </VisuallyHidden>\n      ) : null}\n      <BaseDropdownInputTrigger\n        {...props}\n        isSelectInput={true}\n        onTriggerKeydown={onTriggerKeydown}\n        onTriggerClick={(e) => {\n          onTriggerClick();\n          props?.onClick?.(e);\n        }}\n      />\n    </BaseBox>\n  );\n};\n\n/**\n * ### SelectInput\n *\n * Our equivalent of `<select>` tag. Lets you select items from given options.\n *\n * To be used in combination of `Dropdown` and `ActionList` component\n *\n * ---\n *\n * #### Usage\n *\n * ```diff\n * <Dropdown>\n * + <SelectInput label=\"Select Fruits\" />\n *   <DropdownOverlay>\n *     <ActionList>\n *       <ActionListItem title=\"Mango\" value=\"mango\" />\n *       <ActionListItem title=\"Apple\" value=\"apple\" />\n *     </ActionList>\n *   </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.\n */\n\nconst SelectInput = assignWithoutSideEffects(React.forwardRef(_SelectInput), {\n  componentId: dropdownComponentIds.triggers.SelectInput,\n});\n\nexport { SelectInput };\n"],"names":["this","_SelectInput","props","ref","_useDropdown","useDropdown","value","triggererRef","onTriggerKeydown","onTriggerClick","_jsxs","BaseBox","position","children","isReactNative","_jsx","VisuallyHidden","Object","assign","onFocus","_triggererRef$current","current","focus","tabIndex","required","isRequired","name","makeAnalyticsAttribute","onChange","BaseDropdownInputTrigger","isSelectInput","e","onClick","SelectInput","assignWithoutSideEffects","React","forwardRef","componentId","dropdownComponentIds","triggers"],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAA,KAAA,CAAAA,SAAA,CAAA,YAAA,CAAA,yGAAA,CAYA,IAAMC,YAAY,CAAG,SAAfA,YAAYA,CAChBC,KAAuB,CACvBC,GAAwC,CACjB,CACvB,IAAAC,YAAA,CAAkEC,WAAW,EAAE,CAAvEC,KAAK,CAAAF,YAAA,CAALE,KAAK,CAAEC,YAAY,CAAAH,YAAA,CAAZG,YAAY,CAAEC,gBAAgB,CAAAJ,YAAA,CAAhBI,gBAAgB,CAAEC,eAAc,CAAAL,YAAA,CAAdK,cAAc,CAE7D,OAEEC,IAAA,CAACC,OAAO,CAAA,CAACC,QAAQ,CAAC,UAAU,CAAAC,QAAA,CAAA,CACzB,CAACC,aAAa,EAAE,CACfC,GAAA,CAACC,cAAc,CAAA,CAAAH,QAAA,CACbE,GAAA,CAAA,OAAA,CAAAE,MAAA,CAAAC,MAAA,CAAA,CACEC,OAAO,CAAE,SAATA,OAAOA,EAAQ,CAAAC,IAAAA,qBAAA,CACb,CAAAA,qBAAA,CAAAb,YAAY,CAACc,OAAO,GAAA,IAAA,CAAA,KAAA,CAAA,CAApBD,qBAAA,CAAsBE,KAAK,EAAE,CAC/B,CAAE,CACFnB,GAAG,CAAEA,GAAmC,CACxCoB,QAAQ,CAAE,CAAC,CAAE,CACbC,QAAQ,CAAEtB,KAAK,CAACuB,UAAW,CAC3BC,IAAI,CAAExB,KAAK,CAACwB,IAAK,CACjBpB,KAAK,CAAEA,KAAM,CAAA,CACTqB,sBAAsB,CAACzB,KAAK,CAAC,CAAA,CAGjC0B,QAAQ,CAAE,SAAVA,QAAQA,EAAQ,EAAG,CAEnB,aAAa,CAAA,IAAK,CACnB,CAAA,CAAC,CACY,CAAC,CACf,IAAI,CACRb,GAAA,CAACc,wBAAwB,CAAAZ,MAAA,CAAAC,MAAA,CACnBhB,EAAAA,CAAAA,KAAK,EACT4B,aAAa,CAAE,IAAK,CACpBtB,gBAAgB,CAAEA,gBAAiB,CACnCC,cAAc,CAAE,SAAhBA,cAAcA,CAAGsB,CAAC,CAAK,CACrBtB,eAAc,EAAE,CAChBP,KAAK,EAALA,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAK,CAAE8B,OAAO,EAAd9B,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAK,CAAE8B,OAAO,CAAGD,CAAC,CAAC,CACrB,CAAE,CACH,CAAA,CAAC,CACK,CAAA,CAAC,EAEd,CAAC,CA8BK,IAAAE,WAAW,CAAGC,wBAAwB,CAACC,cAAK,CAACC,UAAU,CAACnC,YAAY,CAAC,CAAE,CAC3EoC,WAAW,CAAEC,oBAAoB,CAACC,QAAQ,CAACN,WAC7C,CAAC;;;;"}

package/build/lib/native/components/Input/DropdownInputTriggers/index.js

@@ -0,0 +1,3 @@
+export { SelectInput } from './SelectInput.js';
+export { AutoComplete } from './AutoComplete.js';
+//# sourceMappingURL=index.js.map

package/build/lib/native/components/Input/DropdownInputTriggers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,25 +1,29 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default, { useState, useImperativeHandle, useEffect } from 'react';
-import { getHintType, BaseInput } from '../BaseInput/BaseInput.js';
+import '../BaseInput/index.js';
+import { BaseInput, getHintType } from '../BaseInput/BaseInput.js';
 import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
-import { FormHint } from '../../Form/FormHint.js';
-import { FormLabel } from '../../Form/FormLabel.js';
+import '../../Form/index.js';
 import { useFormId } from '../../Form/useFormId.js';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
-import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
-import 'react-native';
-import '../../../tokens/global/typography.js';
-import '../../../tokens/global/motion.js';
+import '../../Box/BaseBox/index.js';
+import '../../Box/styledProps/index.js';
+import '../../../utils/index.js';
+import '../../../utils/metaAttribute/index.js';
+import '../../../utils/makeSize/index.js';
+import '../../../utils/makeAnalyticsAttribute/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
-import { makeSize } from '../../../utils/makeSize/makeSize.js';
-import '../../BladeProvider/useTheme.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
+import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.native.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
-import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
+import { FormLabel } from '../../Form/FormLabel.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { FormHint } from '../../Form/FormHint.js';
 
-var _excluded=["autoFocus","errorText","helpText","isDisabled","keyboardReturnKeyType","keyboardType","label","accessibilityLabel","labelPosition","labelSuffix","labelTrailing","name","onChange","onFocus","onBlur","onOTPFilled","otpLength","placeholder","successText","validationState","value","isMasked","autoCompleteSuggestionType","testID","size"];var isReactNative=getPlatformType()==='react-native';var otpToArray=function otpToArray(code){var _code$split;return (_code$split=code==null?void 0:code.split(''))!=null?_code$split:Array(6).fill('');};var _OTPInput=function _OTPInput(_ref,incomingRef){var autoFocus=_ref.autoFocus,errorText=_ref.errorText,helpText=_ref.helpText,isDisabled=_ref.isDisabled,keyboardReturnKeyType=_ref.keyboardReturnKeyType,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?'decimal':_ref$keyboardType,label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,labelPosition=_ref.labelPosition,labelSuffix=_ref.labelSuffix,labelTrailing=_ref.labelTrailing,name=_ref.name,onChange=_ref.onChange,_onFocus=_ref.onFocus,_onBlur=_ref.onBlur,onOTPFilled=_ref.onOTPFilled,_ref$otpLength=_ref.otpLength,otpLength=_ref$otpLength===void 0?6:_ref$otpLength,placeholder=_ref.placeholder,successText=_ref.successText,validationState=_ref.validationState,inputValue=_ref.value,isMasked=_ref.isMasked,_ref$autoCompleteSugg=_ref.autoCompleteSuggestionType,autoCompleteSuggestionType=_ref$autoCompleteSugg===void 0?'oneTimeCode':_ref$autoCompleteSugg,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,rest=_objectWithoutProperties(_ref,_excluded);var inputRefs=[];var _useState=useState(otpToArray(inputValue)),_useState2=_slicedToArray(_useState,2),otpValue=_useState2[0],setOtpValue=_useState2[1];var _useState3=useState([]),_useState4=_slicedToArray(_useState3,2),inputType=_useState4[0],setInputType=_useState4[1];var isLabelLeftPositioned=labelPosition==='left';var _useFormId=useFormId('otp'),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;useImperativeHandle(incomingRef,function(){return inputRefs.map(function(ref){return ref.current;});},[inputRefs]);useEffect(function(){if(inputValue&&inputValue.length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:inputValue.slice(0,otpLength),name:name});}else if(!inputValue&&otpValue.join('').length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:otpValue.slice(0,otpLength).join(''),name:name});}},[otpValue,otpLength,name,inputValue,onOTPFilled]);useEffect(function(){otpValue.forEach(function(otp,index){if(!isEmpty(otp)&&!inputType[index]&&isMasked){var newInputType=Array.from(inputType);newInputType[index]='password';setInputType(newInputType);}if(isEmpty(otp)&&inputType[index]){var _newInputType=Array.from(inputType);_newInputType[index]=undefined;setInputType(_newInputType);}});},[otpValue,inputType,isMasked]);var setOtpValueByIndex=function setOtpValueByIndex(_ref2){var value=_ref2.value,index=_ref2.index;var newOtpValue=Array.from(otpValue);newOtpValue[index]=value;setOtpValue(newOtpValue);return newOtpValue.join('');};var focusOnOtpByIndex=function focusOnOtpByIndex(index){var _inputRefs$index,_inputRefs$index$curr;(_inputRefs$index=inputRefs[index])==null?void 0:(_inputRefs$index$curr=_inputRefs$index.current)==null?void 0:_inputRefs$index$curr.focus();if(!isReactNative){var _inputRefs$index2,_inputRefs$index2$cur;(_inputRefs$index2=inputRefs[index])==null?void 0:(_inputRefs$index2$cur=_inputRefs$index2.current)==null?void 0:_inputRefs$index2$cur.select();}};var handleOnChange=function handleOnChange(_ref3){var value=_ref3.value,currentOtpIndex=_ref3.currentOtpIndex;if(value&&value===' '){return;}if(inputValue&&inputValue.length>0){var newOtpValue=Array.from(inputValue);newOtpValue[currentOtpIndex]=value!=null?value:'';setOtpValue(newOtpValue);onChange==null?void 0:onChange({name:name,value:newOtpValue.join('')});}else if(value&&value.trim().length>1){setOtpValue(Array.from(value));onChange==null?void 0:onChange({name:name,value:value.trim().slice(0,otpLength)});}else if(otpValue[currentOtpIndex]!==(value==null?void 0:value.trim())){var _value$trim;var newValue=setOtpValueByIndex({value:(_value$trim=value==null?void 0:value.trim())!=null?_value$trim:'',index:currentOtpIndex});onChange==null?void 0:onChange({name:name,value:newValue});}};var handleOnInput=function handleOnInput(_ref4){var value=_ref4.value,currentOtpIndex=_ref4.currentOtpIndex;if(value&&value.trim().length===1){focusOnOtpByIndex(++currentOtpIndex);}};var handleOnKeyDown=function handleOnKeyDown(_ref5){var key=_ref5.key,code=_ref5.code,event=_ref5.event,currentOtpIndex=_ref5.currentOtpIndex;if(key==='Backspace'||code==='Backspace'||code==='Delete'||key==='Delete'){event.preventDefault==null?void 0:event.preventDefault();if(otpValue[currentOtpIndex]){handleOnChange({value:'',currentOtpIndex:currentOtpIndex});}else {focusOnOtpByIndex(--currentOtpIndex);handleOnChange({value:'',currentOtpIndex:currentOtpIndex});}}else if(key==='ArrowLeft'||code==='ArrowLeft'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowRight'||code==='ArrowRight'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(++currentOtpIndex);}else if(key===' '||code==='Space'){event.preventDefault==null?void 0:event.preventDefault();}};var getHiddenInput=function getHiddenInput(){if(!isReactNative){var _ref6;return jsx("input",{hidden:true,id:inputId,name:name,value:(_ref6=inputValue!=null?inputValue:otpValue.join(''))!=null?_ref6:'',readOnly:true});}return null;};var getOTPInputFields=function getOTPInputFields(){var inputs=[];var _loop=function _loop(index){var _otpValue$index,_Array$from$index;var currentValue=inputValue?otpToArray(inputValue)[index]||'':otpValue[index]||'';var ref=React__default.createRef();var currentInputType;if(isMasked){currentInputType=inputValue?'password':inputType[index];}inputRefs.push(ref);inputs.push(jsx(BaseBox,{flex:1,marginLeft:index==0?'spacing.0':'spacing.3',children:jsx(BaseInput,Object.assign({autoFocus:autoFocus&&index===0,accessibilityLabel:`${index===0?label||accessibilityLabel:''} character ${index+1}`,label:label,hideLabelText:true,id:`${inputId}-${index}`,textAlign:"center",ref:ref,name:name,value:currentValue,maxCharacters:((_otpValue$index=otpValue[index])==null?void 0:_otpValue$index.length)>0?1:undefined,onChange:function onChange(formEvent){return handleOnChange(Object.assign({},formEvent,{currentOtpIndex:index}));},onFocus:function onFocus(formEvent){return _onFocus==null?void 0:_onFocus(Object.assign({},formEvent,{inputIndex:index}));},onBlur:function onBlur(formEvent){return _onBlur==null?void 0:_onBlur(Object.assign({},formEvent,{inputIndex:index}));},onInput:function onInput(formEvent){return handleOnInput(Object.assign({},formEvent,{currentOtpIndex:index}));},onKeyDown:function onKeyDown(keyboardEvent){return handleOnKeyDown(Object.assign({},keyboardEvent,{currentOtpIndex:index}));},isDisabled:isDisabled,placeholder:(_Array$from$index=Array.from(placeholder!=null?placeholder:'')[index])!=null?_Array$from$index:'',isRequired:true,autoCompleteSuggestionType:autoCompleteSuggestionType,keyboardType:keyboardType,keyboardReturnKeyType:keyboardReturnKeyType,validationState:validationState,successText:successText,errorText:errorText,helpText:helpText,hideFormHint:true,type:currentInputType,size:size,valueComponentType:"heading"},makeAnalyticsAttribute(rest)))},`${inputId}-${index}`));};for(var index=0;index<otpLength;index++){_loop(index);}return inputs;};return jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.OTPInput,testID:testID}),getStyledProps(rest),{children:[jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",children:[Boolean(label)&&jsx(FormLabel,{as:"label",position:labelPosition,htmlFor:inputId,size:size,labelSuffix:labelSuffix,labelTrailing:labelTrailing,children:label}),jsxs(BaseBox,{display:"flex",flexDirection:"row",children:[getHiddenInput(),getOTPInputFields()]})]}),jsx(BaseBox,{marginLeft:makeSize(isLabelLeftPositioned?136:0),children:jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId,size:size})})]}));};var OTPInput=React__default.forwardRef(_OTPInput);
+var _excluded=["autoFocus","errorText","helpText","isDisabled","keyboardReturnKeyType","keyboardType","label","accessibilityLabel","labelPosition","labelSuffix","labelTrailing","name","onChange","onFocus","onBlur","onOTPFilled","otpLength","placeholder","successText","validationState","value","isMasked","autoCompleteSuggestionType","testID","size"];var _this=undefined,_jsxFileName="/home/runner/work/blade/blade/packages/blade/src/components/Input/OTPInput/OTPInput.tsx";var isReactNative=getPlatformType()==='react-native';var otpToArray=function otpToArray(code){var _code$split;return (_code$split=code==null?void 0:code.split(''))!=null?_code$split:Array(6).fill('');};var _OTPInput=function _OTPInput(_ref,incomingRef){var autoFocus=_ref.autoFocus,errorText=_ref.errorText,helpText=_ref.helpText,isDisabled=_ref.isDisabled,keyboardReturnKeyType=_ref.keyboardReturnKeyType,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?'decimal':_ref$keyboardType,label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,labelPosition=_ref.labelPosition,labelSuffix=_ref.labelSuffix,labelTrailing=_ref.labelTrailing,name=_ref.name,onChange=_ref.onChange,_onFocus=_ref.onFocus,_onBlur=_ref.onBlur,onOTPFilled=_ref.onOTPFilled,_ref$otpLength=_ref.otpLength,otpLength=_ref$otpLength===void 0?6:_ref$otpLength,placeholder=_ref.placeholder,successText=_ref.successText,validationState=_ref.validationState,inputValue=_ref.value,isMasked=_ref.isMasked,_ref$autoCompleteSugg=_ref.autoCompleteSuggestionType,autoCompleteSuggestionType=_ref$autoCompleteSugg===void 0?'oneTimeCode':_ref$autoCompleteSugg,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,rest=_objectWithoutProperties(_ref,_excluded);var inputRefs=[];var _useState=useState(otpToArray(inputValue)),_useState2=_slicedToArray(_useState,2),otpValue=_useState2[0],setOtpValue=_useState2[1];var _useState3=useState([]),_useState4=_slicedToArray(_useState3,2),inputType=_useState4[0],setInputType=_useState4[1];var isLabelLeftPositioned=labelPosition==='left';var _useFormId=useFormId('otp'),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;useImperativeHandle(incomingRef,function(){return inputRefs.map(function(ref){return ref.current;});},[inputRefs]);useEffect(function(){if(inputValue&&inputValue.length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:inputValue.slice(0,otpLength),name:name});}else if(!inputValue&&otpValue.join('').length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:otpValue.slice(0,otpLength).join(''),name:name});}},[otpValue,otpLength,name,inputValue,onOTPFilled]);useEffect(function(){otpValue.forEach(function(otp,index){if(!isEmpty(otp)&&!inputType[index]&&isMasked){var newInputType=Array.from(inputType);newInputType[index]='password';setInputType(newInputType);}if(isEmpty(otp)&&inputType[index]){var _newInputType=Array.from(inputType);_newInputType[index]=undefined;setInputType(_newInputType);}});},[otpValue,inputType,isMasked]);var setOtpValueByIndex=function setOtpValueByIndex(_ref2){var value=_ref2.value,index=_ref2.index;var newOtpValue=Array.from(otpValue);newOtpValue[index]=value;setOtpValue(newOtpValue);return newOtpValue.join('');};var focusOnOtpByIndex=function focusOnOtpByIndex(index){var _inputRefs$index,_inputRefs$index$curr;(_inputRefs$index=inputRefs[index])==null?void 0:(_inputRefs$index$curr=_inputRefs$index.current)==null?void 0:_inputRefs$index$curr.focus();if(!isReactNative){var _inputRefs$index2,_inputRefs$index2$cur;(_inputRefs$index2=inputRefs[index])==null?void 0:(_inputRefs$index2$cur=_inputRefs$index2.current)==null?void 0:_inputRefs$index2$cur.select();}};var handleOnChange=function handleOnChange(_ref3){var value=_ref3.value,currentOtpIndex=_ref3.currentOtpIndex;if(value&&value===' '){return;}if(inputValue&&inputValue.length>0){var newOtpValue=Array.from(inputValue);newOtpValue[currentOtpIndex]=value!=null?value:'';setOtpValue(newOtpValue);onChange==null?void 0:onChange({name:name,value:newOtpValue.join('')});}else if(value&&value.trim().length>1){setOtpValue(Array.from(value));onChange==null?void 0:onChange({name:name,value:value.trim().slice(0,otpLength)});}else if(otpValue[currentOtpIndex]!==(value==null?void 0:value.trim())){var _value$trim;var newValue=setOtpValueByIndex({value:(_value$trim=value==null?void 0:value.trim())!=null?_value$trim:'',index:currentOtpIndex});onChange==null?void 0:onChange({name:name,value:newValue});}};var handleOnInput=function handleOnInput(_ref4){var value=_ref4.value,currentOtpIndex=_ref4.currentOtpIndex;if(value&&value.trim().length===1){focusOnOtpByIndex(++currentOtpIndex);}};var handleOnKeyDown=function handleOnKeyDown(_ref5){var key=_ref5.key,code=_ref5.code,event=_ref5.event,currentOtpIndex=_ref5.currentOtpIndex;if(key==='Backspace'||code==='Backspace'||code==='Delete'||key==='Delete'){event.preventDefault==null?void 0:event.preventDefault();if(otpValue[currentOtpIndex]){handleOnChange({value:'',currentOtpIndex:currentOtpIndex});}else {focusOnOtpByIndex(--currentOtpIndex);handleOnChange({value:'',currentOtpIndex:currentOtpIndex});}}else if(key==='ArrowLeft'||code==='ArrowLeft'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowRight'||code==='ArrowRight'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(++currentOtpIndex);}else if(key===' '||code==='Space'){event.preventDefault==null?void 0:event.preventDefault();}};var getHiddenInput=function getHiddenInput(){if(!isReactNative){var _ref6;return jsx("input",{hidden:true,id:inputId,name:name,value:(_ref6=inputValue!=null?inputValue:otpValue.join(''))!=null?_ref6:'',readOnly:true});}return null;};var getOTPInputFields=function getOTPInputFields(){var inputs=[];var _loop=function _loop(index){var _otpValue$index,_Array$from$index;var currentValue=inputValue?otpToArray(inputValue)[index]||'':otpValue[index]||'';var ref=React__default.createRef();var currentInputType;if(isMasked){currentInputType=inputValue?'password':inputType[index];}inputRefs.push(ref);inputs.push(jsx(BaseBox,{flex:1,marginLeft:index==0?'spacing.0':'spacing.3',children:jsx(BaseInput,Object.assign({autoFocus:autoFocus&&index===0,accessibilityLabel:`${index===0?label||accessibilityLabel:''} character ${index+1}`,label:label,hideLabelText:true,id:`${inputId}-${index}`,textAlign:"center",ref:ref,name:name,value:currentValue,maxCharacters:((_otpValue$index=otpValue[index])==null?void 0:_otpValue$index.length)>0?1:undefined,onChange:function onChange(formEvent){return handleOnChange(Object.assign({},formEvent,{currentOtpIndex:index}));},onFocus:function onFocus(formEvent){return _onFocus==null?void 0:_onFocus(Object.assign({},formEvent,{inputIndex:index}));},onBlur:function onBlur(formEvent){return _onBlur==null?void 0:_onBlur(Object.assign({},formEvent,{inputIndex:index}));},onInput:function onInput(formEvent){return handleOnInput(Object.assign({},formEvent,{currentOtpIndex:index}));},onKeyDown:function onKeyDown(keyboardEvent){return handleOnKeyDown(Object.assign({},keyboardEvent,{currentOtpIndex:index}));},isDisabled:isDisabled,placeholder:(_Array$from$index=Array.from(placeholder!=null?placeholder:'')[index])!=null?_Array$from$index:'',isRequired:true,autoCompleteSuggestionType:autoCompleteSuggestionType,keyboardType:keyboardType,keyboardReturnKeyType:keyboardReturnKeyType,validationState:validationState,successText:successText,errorText:errorText,helpText:helpText,hideFormHint:true,type:currentInputType,size:size,valueComponentType:"heading"},makeAnalyticsAttribute(rest)))},`${inputId}-${index}`));};for(var index=0;index<otpLength;index++){_loop(index);}return inputs;};return jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.OTPInput,testID:testID}),getStyledProps(rest),{children:[jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",children:[Boolean(label)&&jsx(FormLabel,{as:"label",position:labelPosition,htmlFor:inputId,size:size,labelSuffix:labelSuffix,labelTrailing:labelTrailing,children:label}),jsxs(BaseBox,{display:"flex",flexDirection:"row",children:[getHiddenInput(),getOTPInputFields()]})]}),jsx(BaseBox,{marginLeft:makeSize(isLabelLeftPositioned?136:0),children:jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId,size:size})})]}));};var OTPInput=React__default.forwardRef(_OTPInput);
 
 export { OTPInput };
 //# sourceMappingURL=OTPInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.js","sources":["../../../../../../src/components/Input/OTPInput/OTPInput.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useState } from 'react';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getHintType } from '../BaseInput/BaseInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { FormInputOnEvent } from '~components/Form';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { useFormId } from '~components/Form/useFormId';\nimport type { FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeSize } from '~utils/makeSize';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype FormInputOnEventWithIndex = ({\n  name,\n  value,\n  inputIndex,\n}: {\n  name?: string;\n  value?: string;\n  inputIndex: number;\n}) => void;\n\nexport type OTPInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'labelSuffix'\n  | 'labelTrailing'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'name'\n  | 'onChange'\n  | 'value'\n  | 'isDisabled'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'keyboardType'\n  | 'placeholder'\n  | 'testID'\n  | 'size'\n  | keyof DataAnalyticsAttribute\n> & {\n  /**\n   * Determines the number of input fields to show for the OTP\n   * @default 6\n   */\n  otpLength?: 4 | 6;\n  /**\n   * The callback function to be invoked when all the values of the OTPInput are filled\n   */\n  onOTPFilled?: FormInputOnEvent;\n  /**\n   * Masks input characters in all the fields\n   */\n  isMasked?: boolean;\n  /**\n   * Determines what autoComplete suggestion type to show. Defaults to `oneTimeCode`.\n   *\n   * It's not recommended to turn this off in favor of otp input practices.\n   *\n   *\n   * Internally it'll render platform specific attributes:\n   *\n   * - web: `autocomplete`\n   * - iOS: `textContentType`\n   * - android: `autoComplete`\n   *\n   */\n  autoCompleteSuggestionType?: Extract<\n    BaseInputProps['autoCompleteSuggestionType'],\n    'none' | 'oneTimeCode'\n  >;\n  /**\n   * The callback function to be invoked when one of the input fields gets focus\n   */\n  onFocus?: FormInputOnEventWithIndex;\n  /**\n   * The callback function to be invoked when one of the input fields is blurred\n   */\n  onBlur?: FormInputOnEventWithIndex;\n} & StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype OTPInputPropsWithA11yLabel = {\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 OTPInputPropsWithLabel = {\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 OTPInputProps = (OTPInputPropsWithA11yLabel | OTPInputPropsWithLabel) & OTPInputCommonProps;\n\nconst isReactNative = getPlatformType() === 'react-native';\n\n/**\n *  Converts a string value of otp to array if passed otherwise returns an array of 6 empty strings\n */\nconst otpToArray = (code?: string): string[] => code?.split('') ?? Array(6).fill('');\n\n/**\n * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.\n *\n * ## Usage\n *\n * ```tsx\n *   <OTPInput\n *     label=\"Enter OTP\"\n *     name=\"otpInput\"\n *     onChange={({ name, value }): void => console.log({ name, value })}\n *     onOTPFilled={({ name, value }): void => console.log({ name, value })}\n *   />\n * ```\n */\nconst _OTPInput: React.ForwardRefRenderFunction<HTMLInputElement[], OTPInputProps> = (\n  {\n    autoFocus,\n    errorText,\n    helpText,\n    isDisabled,\n    keyboardReturnKeyType,\n    keyboardType = 'decimal',\n    label,\n    accessibilityLabel,\n    labelPosition,\n    labelSuffix,\n    labelTrailing,\n    name,\n    onChange,\n    onFocus,\n    onBlur,\n    onOTPFilled,\n    otpLength = 6,\n    placeholder,\n    successText,\n    validationState,\n    value: inputValue,\n    isMasked,\n    autoCompleteSuggestionType = 'oneTimeCode',\n    testID,\n    size = 'medium',\n    ...rest\n  },\n  incomingRef,\n) => {\n  const inputRefs: React.RefObject<HTMLInputElement>[] = [];\n  const [otpValue, setOtpValue] = useState<string[]>(otpToArray(inputValue));\n  const [inputType, setInputType] = useState<('password' | undefined)[]>([]);\n  const isLabelLeftPositioned = labelPosition === 'left';\n  const { inputId, helpTextId, errorTextId, successTextId } = useFormId('otp');\n\n  useImperativeHandle(\n    incomingRef,\n    () => {\n      return inputRefs.map((ref) => ref.current!);\n    },\n    [inputRefs],\n  );\n\n  useEffect(() => {\n    // Effect for calling `onOTPFilled` callback\n    if (inputValue && inputValue.length >= otpLength) {\n      // callback for when the OTPInput is controlled and inputValue reaches the same or greater length as the otpLength\n      onOTPFilled?.({ value: inputValue.slice(0, otpLength), name });\n    } else if (!inputValue && otpValue.join('').length >= otpLength) {\n      // callback for when the OTPInput is uncontrolled and otpValue stored in state reaches the same or greater length as the otpLength\n      onOTPFilled?.({ value: otpValue.slice(0, otpLength).join(''), name });\n    }\n  }, [otpValue, otpLength, name, inputValue, onOTPFilled]);\n\n  useEffect(() => {\n    /* We want to disable the password managers for OTPInput when isMasked is set.\n       The issue with only setting autocomplete='off' is that its not an enforcement but a suggestion to the browser to follow.\n       This workaround unsets type on first render and sets it to `password` only once a value is entered by the user.\n    */\n    otpValue.forEach((otp, index) => {\n      // Set inputType as 'password' only when a value is entered when isMasked is set\n      if (!isEmpty(otp) && !inputType[index] && isMasked) {\n        const newInputType = Array.from(inputType);\n        newInputType[index] = 'password';\n        setInputType(newInputType);\n      }\n      // Cleanup the inputType array whenever the value is empty but inputType[index] is set\n      if (isEmpty(otp) && inputType[index]) {\n        const newInputType = Array.from(inputType);\n        newInputType[index] = undefined;\n        setInputType(newInputType);\n      }\n    });\n  }, [otpValue, inputType, isMasked]);\n\n  /**\n   * Changes the value of the otp at a given index and updates the otpValue stored in state\n   *\n   * @param {{ value: string; index: number }} { value, index }\n   * @returns {string} updated otpValue\n   */\n  const setOtpValueByIndex = ({ value, index }: { value: string; index: number }): string => {\n    const newOtpValue = Array.from(otpValue);\n    newOtpValue[index] = value;\n    setOtpValue(newOtpValue);\n    return newOtpValue.join('');\n  };\n\n  /**\n   * Sets focus to the desired otp input by index\n   *\n   * @param {number} index the index of the otp input to be focused\n   */\n  const focusOnOtpByIndex = (index: number): void => {\n    inputRefs[index]?.current?.focus();\n    if (!isReactNative) {\n      // React Native doesn't support imperatively selecting the value of input\n      inputRefs[index]?.current?.select();\n    }\n  };\n\n  const handleOnChange = ({\n    value,\n    currentOtpIndex,\n  }: {\n    value?: string;\n    currentOtpIndex: number;\n  }): void => {\n    if (value && value === ' ') {\n      // React native doesn't support `event.preventDefault()` hence have to add this check to ensure that empty space is not allowed\n      return;\n    }\n    if (inputValue && inputValue.length > 0) {\n      // When OTPInput is controlled, set the otpValue as the consumer passed `inputValue` and append the value on current index based on user's input.\n      // User's input will not reflect on the otp but will trigger `onChange` callback with the user's input appended so that the consumer can take appropriate action.\n      const newOtpValue = Array.from(inputValue);\n      newOtpValue[currentOtpIndex] = value ?? '';\n      setOtpValue(newOtpValue);\n      onChange?.({ name, value: newOtpValue.join('') });\n    } else if (value && value.trim().length > 1) {\n      // When the entered value is more that 1 character (when value is pasted), set the otpValue to the newly received value.\n      // Could have used `onPaste` for web to achieve this but 1. React Native doesn't support onPaste and 2. Safari's autofill on web doesn't trigger onPaste\n      setOtpValue(Array.from(value));\n      onChange?.({ name, value: value.trim().slice(0, otpLength) });\n    } else if (otpValue[currentOtpIndex] !== value?.trim()) {\n      // Set the value at the current index to the entered value\n      // only as long as its not the same as the already existing value (this prevents `onChange` being triggered unnecessarily)\n      const newValue = setOtpValueByIndex({\n        value: value?.trim() ?? '',\n        index: currentOtpIndex,\n      });\n      onChange?.({ name, value: newValue });\n    }\n  };\n\n  const handleOnInput = ({\n    value,\n    currentOtpIndex,\n  }: {\n    value?: string;\n    currentOtpIndex: number;\n  }): void => {\n    // Moves focus to next input whenever a value is entered in the current input\n    if (value && value.trim().length === 1) {\n      focusOnOtpByIndex(++currentOtpIndex);\n    }\n  };\n\n  const handleOnKeyDown = ({\n    key,\n    code,\n    event,\n    currentOtpIndex,\n  }: FormInputOnKeyDownEvent & { currentOtpIndex: number }): void => {\n    if (key === 'Backspace' || code === 'Backspace' || code === 'Delete' || key === 'Delete') {\n      event.preventDefault?.();\n      if (otpValue[currentOtpIndex]) {\n        // Clear the value at the current index if value exists\n        handleOnChange({ value: '', currentOtpIndex });\n      } else {\n        // Move focus to the previous input if the current input is empty\n        // and clear the value at the new active (previous) index\n        focusOnOtpByIndex(--currentOtpIndex);\n        handleOnChange({ value: '', currentOtpIndex });\n      }\n    } else if (key === 'ArrowLeft' || code === 'ArrowLeft') {\n      event.preventDefault?.();\n      focusOnOtpByIndex(--currentOtpIndex);\n    } else if (key === 'ArrowRight' || code === 'ArrowRight') {\n      event.preventDefault?.();\n      focusOnOtpByIndex(++currentOtpIndex);\n    } else if (key === ' ' || code === 'Space') {\n      event.preventDefault?.();\n    }\n  };\n\n  const getHiddenInput = (): React.ReactNode => {\n    if (!isReactNative) {\n      return (\n        <input\n          hidden={true}\n          id={inputId}\n          name={name}\n          value={inputValue ?? otpValue.join('') ?? ''}\n          readOnly\n        />\n      );\n    }\n    return null;\n  };\n\n  const getOTPInputFields = (): React.ReactNode => {\n    const inputs = [];\n    for (let index = 0; index < otpLength; index++) {\n      const currentValue = inputValue ? otpToArray(inputValue)[index] || '' : otpValue[index] || '';\n      const ref = React.createRef<HTMLInputElement>();\n      // if an inputValue is passed (controlled) and isMasked is set, inputType will always be password\n      let currentInputType: 'password' | undefined;\n      if (isMasked) {\n        // if inputValue is passed (controlled component) then the inputType will always be password\n        currentInputType = inputValue ? 'password' : inputType[index];\n      }\n      inputRefs.push(ref);\n      inputs.push(\n        <BaseBox\n          flex={1}\n          marginLeft={index == 0 ? 'spacing.0' : 'spacing.3'}\n          key={`${inputId}-${index}`}\n        >\n          <BaseInput\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus && index === 0}\n            accessibilityLabel={`${index === 0 ? label || accessibilityLabel : ''} character ${\n              index + 1\n            }`}\n            label={label}\n            hideLabelText={true}\n            id={`${inputId}-${index}`}\n            textAlign=\"center\"\n            ref={ref as never}\n            name={name}\n            value={currentValue}\n            maxCharacters={otpValue[index]?.length > 0 ? 1 : undefined}\n            onChange={(formEvent) => handleOnChange({ ...formEvent, currentOtpIndex: index })}\n            onFocus={(formEvent) => onFocus?.({ ...formEvent, inputIndex: index })}\n            onBlur={(formEvent) => onBlur?.({ ...formEvent, inputIndex: index })}\n            onInput={(formEvent) => handleOnInput({ ...formEvent, currentOtpIndex: index })}\n            onKeyDown={(keyboardEvent) =>\n              handleOnKeyDown({ ...keyboardEvent, currentOtpIndex: index })\n            }\n            isDisabled={isDisabled}\n            placeholder={Array.from(placeholder ?? '')[index] ?? ''}\n            isRequired={true}\n            autoCompleteSuggestionType={autoCompleteSuggestionType}\n            keyboardType={keyboardType}\n            keyboardReturnKeyType={keyboardReturnKeyType}\n            validationState={validationState}\n            successText={successText}\n            errorText={errorText}\n            helpText={helpText}\n            hideFormHint={true}\n            type={currentInputType}\n            size={size}\n            valueComponentType=\"heading\"\n            {...makeAnalyticsAttribute(rest)}\n          />\n        </BaseBox>,\n      );\n    }\n    return inputs;\n  };\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.OTPInput, testID })} {...getStyledProps(rest)}>\n      <BaseBox\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'row' : 'column'}\n        alignItems={isLabelLeftPositioned ? 'center' : undefined}\n        position=\"relative\"\n      >\n        {Boolean(label) && (\n          <FormLabel\n            as=\"label\"\n            position={labelPosition}\n            htmlFor={inputId}\n            size={size}\n            labelSuffix={labelSuffix}\n            labelTrailing={labelTrailing}\n          >\n            {label}\n          </FormLabel>\n        )}\n        <BaseBox display=\"flex\" flexDirection=\"row\">\n          {getHiddenInput()}\n          {getOTPInputFields()}\n        </BaseBox>\n      </BaseBox>\n      {/* the magic number 136 is basically max-width of label i.e 120 and then right margin i.e 16 which is the spacing between label and input field */}\n      {/*Refer `BaseInput`'s implementation of FormHint which uses similar logic */}\n      <BaseBox marginLeft={makeSize(isLabelLeftPositioned ? 136 : 0)}>\n        <FormHint\n          type={getHintType({ validationState, hasHelpText: Boolean(helpText) })}\n          helpText={helpText}\n          errorText={errorText}\n          successText={successText}\n          helpTextId={helpTextId}\n          errorTextId={errorTextId}\n          successTextId={successTextId}\n          size={size}\n        />\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst OTPInput = React.forwardRef<HTMLInputElement[], OTPInputProps>(_OTPInput);\n\nexport type { OTPInputProps };\nexport { OTPInput };\n"],"names":["isReactNative","getPlatformType","otpToArray","code","_code$split","split","Array","fill","_OTPInput","_ref","incomingRef","autoFocus","errorText","helpText","isDisabled","keyboardReturnKeyType","_ref$keyboardType","keyboardType","label","accessibilityLabel","labelPosition","labelSuffix","labelTrailing","name","onChange","onFocus","onBlur","onOTPFilled","_ref$otpLength","otpLength","placeholder","successText","validationState","inputValue","value","isMasked","_ref$autoCompleteSugg","autoCompleteSuggestionType","testID","_ref$size","size","rest","_objectWithoutProperties","_excluded","inputRefs","_useState","useState","_useState2","_slicedToArray","otpValue","setOtpValue","_useState3","_useState4","inputType","setInputType","isLabelLeftPositioned","_useFormId","useFormId","inputId","helpTextId","errorTextId","successTextId","useImperativeHandle","map","ref","current","useEffect","length","slice","join","forEach","otp","index","isEmpty","newInputType","from","undefined","setOtpValueByIndex","_ref2","newOtpValue","focusOnOtpByIndex","_inputRefs$index","_inputRefs$index$curr","focus","_inputRefs$index2","_inputRefs$index2$cur","select","handleOnChange","_ref3","currentOtpIndex","trim","_value$trim","newValue","handleOnInput","_ref4","handleOnKeyDown","_ref5","key","event","preventDefault","getHiddenInput","_ref6","_jsx","hidden","id","readOnly","getOTPInputFields","inputs","_loop","_otpValue$index","_Array$from$index","currentValue","React","createRef","currentInputType","push","BaseBox","flex","marginLeft","children","BaseInput","Object","assign","hideLabelText","textAlign","maxCharacters","formEvent","inputIndex","onInput","onKeyDown","keyboardEvent","isRequired","hideFormHint","type","valueComponentType","makeAnalyticsAttribute","_jsxs","metaAttribute","MetaConstants","OTPInput","getStyledProps","display","flexDirection","alignItems","position","Boolean","FormLabel","as","htmlFor","makeSize","FormHint","getHintType","hasHelpText","forwardRef"],"mappings":"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"}
+{"version":3,"file":"OTPInput.js","sources":["../../../../../../src/components/Input/OTPInput/OTPInput.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useState } from 'react';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getHintType } from '../BaseInput/BaseInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { FormInputOnEvent } from '~components/Form';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { useFormId } from '~components/Form/useFormId';\nimport type { FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeSize } from '~utils/makeSize';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype FormInputOnEventWithIndex = ({\n  name,\n  value,\n  inputIndex,\n}: {\n  name?: string;\n  value?: string;\n  inputIndex: number;\n}) => void;\n\nexport type OTPInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'labelSuffix'\n  | 'labelTrailing'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'name'\n  | 'onChange'\n  | 'value'\n  | 'isDisabled'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'keyboardType'\n  | 'placeholder'\n  | 'testID'\n  | 'size'\n  | keyof DataAnalyticsAttribute\n> & {\n  /**\n   * Determines the number of input fields to show for the OTP\n   * @default 6\n   */\n  otpLength?: 4 | 6;\n  /**\n   * The callback function to be invoked when all the values of the OTPInput are filled\n   */\n  onOTPFilled?: FormInputOnEvent;\n  /**\n   * Masks input characters in all the fields\n   */\n  isMasked?: boolean;\n  /**\n   * Determines what autoComplete suggestion type to show. Defaults to `oneTimeCode`.\n   *\n   * It's not recommended to turn this off in favor of otp input practices.\n   *\n   *\n   * Internally it'll render platform specific attributes:\n   *\n   * - web: `autocomplete`\n   * - iOS: `textContentType`\n   * - android: `autoComplete`\n   *\n   */\n  autoCompleteSuggestionType?: Extract<\n    BaseInputProps['autoCompleteSuggestionType'],\n    'none' | 'oneTimeCode'\n  >;\n  /**\n   * The callback function to be invoked when one of the input fields gets focus\n   */\n  onFocus?: FormInputOnEventWithIndex;\n  /**\n   * The callback function to be invoked when one of the input fields is blurred\n   */\n  onBlur?: FormInputOnEventWithIndex;\n} & StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype OTPInputPropsWithA11yLabel = {\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 OTPInputPropsWithLabel = {\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 OTPInputProps = (OTPInputPropsWithA11yLabel | OTPInputPropsWithLabel) & OTPInputCommonProps;\n\nconst isReactNative = getPlatformType() === 'react-native';\n\n/**\n *  Converts a string value of otp to array if passed otherwise returns an array of 6 empty strings\n */\nconst otpToArray = (code?: string): string[] => code?.split('') ?? Array(6).fill('');\n\n/**\n * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.\n *\n * ## Usage\n *\n * ```tsx\n *   <OTPInput\n *     label=\"Enter OTP\"\n *     name=\"otpInput\"\n *     onChange={({ name, value }): void => console.log({ name, value })}\n *     onOTPFilled={({ name, value }): void => console.log({ name, value })}\n *   />\n * ```\n */\nconst _OTPInput: React.ForwardRefRenderFunction<HTMLInputElement[], OTPInputProps> = (\n  {\n    autoFocus,\n    errorText,\n    helpText,\n    isDisabled,\n    keyboardReturnKeyType,\n    keyboardType = 'decimal',\n    label,\n    accessibilityLabel,\n    labelPosition,\n    labelSuffix,\n    labelTrailing,\n    name,\n    onChange,\n    onFocus,\n    onBlur,\n    onOTPFilled,\n    otpLength = 6,\n    placeholder,\n    successText,\n    validationState,\n    value: inputValue,\n    isMasked,\n    autoCompleteSuggestionType = 'oneTimeCode',\n    testID,\n    size = 'medium',\n    ...rest\n  },\n  incomingRef,\n) => {\n  const inputRefs: React.RefObject<HTMLInputElement>[] = [];\n  const [otpValue, setOtpValue] = useState<string[]>(otpToArray(inputValue));\n  const [inputType, setInputType] = useState<('password' | undefined)[]>([]);\n  const isLabelLeftPositioned = labelPosition === 'left';\n  const { inputId, helpTextId, errorTextId, successTextId } = useFormId('otp');\n\n  useImperativeHandle(\n    incomingRef,\n    () => {\n      return inputRefs.map((ref) => ref.current!);\n    },\n    [inputRefs],\n  );\n\n  useEffect(() => {\n    // Effect for calling `onOTPFilled` callback\n    if (inputValue && inputValue.length >= otpLength) {\n      // callback for when the OTPInput is controlled and inputValue reaches the same or greater length as the otpLength\n      onOTPFilled?.({ value: inputValue.slice(0, otpLength), name });\n    } else if (!inputValue && otpValue.join('').length >= otpLength) {\n      // callback for when the OTPInput is uncontrolled and otpValue stored in state reaches the same or greater length as the otpLength\n      onOTPFilled?.({ value: otpValue.slice(0, otpLength).join(''), name });\n    }\n  }, [otpValue, otpLength, name, inputValue, onOTPFilled]);\n\n  useEffect(() => {\n    /* We want to disable the password managers for OTPInput when isMasked is set.\n       The issue with only setting autocomplete='off' is that its not an enforcement but a suggestion to the browser to follow.\n       This workaround unsets type on first render and sets it to `password` only once a value is entered by the user.\n    */\n    otpValue.forEach((otp, index) => {\n      // Set inputType as 'password' only when a value is entered when isMasked is set\n      if (!isEmpty(otp) && !inputType[index] && isMasked) {\n        const newInputType = Array.from(inputType);\n        newInputType[index] = 'password';\n        setInputType(newInputType);\n      }\n      // Cleanup the inputType array whenever the value is empty but inputType[index] is set\n      if (isEmpty(otp) && inputType[index]) {\n        const newInputType = Array.from(inputType);\n        newInputType[index] = undefined;\n        setInputType(newInputType);\n      }\n    });\n  }, [otpValue, inputType, isMasked]);\n\n  /**\n   * Changes the value of the otp at a given index and updates the otpValue stored in state\n   *\n   * @param {{ value: string; index: number }} { value, index }\n   * @returns {string} updated otpValue\n   */\n  const setOtpValueByIndex = ({ value, index }: { value: string; index: number }): string => {\n    const newOtpValue = Array.from(otpValue);\n    newOtpValue[index] = value;\n    setOtpValue(newOtpValue);\n    return newOtpValue.join('');\n  };\n\n  /**\n   * Sets focus to the desired otp input by index\n   *\n   * @param {number} index the index of the otp input to be focused\n   */\n  const focusOnOtpByIndex = (index: number): void => {\n    inputRefs[index]?.current?.focus();\n    if (!isReactNative) {\n      // React Native doesn't support imperatively selecting the value of input\n      inputRefs[index]?.current?.select();\n    }\n  };\n\n  const handleOnChange = ({\n    value,\n    currentOtpIndex,\n  }: {\n    value?: string;\n    currentOtpIndex: number;\n  }): void => {\n    if (value && value === ' ') {\n      // React native doesn't support `event.preventDefault()` hence have to add this check to ensure that empty space is not allowed\n      return;\n    }\n    if (inputValue && inputValue.length > 0) {\n      // When OTPInput is controlled, set the otpValue as the consumer passed `inputValue` and append the value on current index based on user's input.\n      // User's input will not reflect on the otp but will trigger `onChange` callback with the user's input appended so that the consumer can take appropriate action.\n      const newOtpValue = Array.from(inputValue);\n      newOtpValue[currentOtpIndex] = value ?? '';\n      setOtpValue(newOtpValue);\n      onChange?.({ name, value: newOtpValue.join('') });\n    } else if (value && value.trim().length > 1) {\n      // When the entered value is more that 1 character (when value is pasted), set the otpValue to the newly received value.\n      // Could have used `onPaste` for web to achieve this but 1. React Native doesn't support onPaste and 2. Safari's autofill on web doesn't trigger onPaste\n      setOtpValue(Array.from(value));\n      onChange?.({ name, value: value.trim().slice(0, otpLength) });\n    } else if (otpValue[currentOtpIndex] !== value?.trim()) {\n      // Set the value at the current index to the entered value\n      // only as long as its not the same as the already existing value (this prevents `onChange` being triggered unnecessarily)\n      const newValue = setOtpValueByIndex({\n        value: value?.trim() ?? '',\n        index: currentOtpIndex,\n      });\n      onChange?.({ name, value: newValue });\n    }\n  };\n\n  const handleOnInput = ({\n    value,\n    currentOtpIndex,\n  }: {\n    value?: string;\n    currentOtpIndex: number;\n  }): void => {\n    // Moves focus to next input whenever a value is entered in the current input\n    if (value && value.trim().length === 1) {\n      focusOnOtpByIndex(++currentOtpIndex);\n    }\n  };\n\n  const handleOnKeyDown = ({\n    key,\n    code,\n    event,\n    currentOtpIndex,\n  }: FormInputOnKeyDownEvent & { currentOtpIndex: number }): void => {\n    if (key === 'Backspace' || code === 'Backspace' || code === 'Delete' || key === 'Delete') {\n      event.preventDefault?.();\n      if (otpValue[currentOtpIndex]) {\n        // Clear the value at the current index if value exists\n        handleOnChange({ value: '', currentOtpIndex });\n      } else {\n        // Move focus to the previous input if the current input is empty\n        // and clear the value at the new active (previous) index\n        focusOnOtpByIndex(--currentOtpIndex);\n        handleOnChange({ value: '', currentOtpIndex });\n      }\n    } else if (key === 'ArrowLeft' || code === 'ArrowLeft') {\n      event.preventDefault?.();\n      focusOnOtpByIndex(--currentOtpIndex);\n    } else if (key === 'ArrowRight' || code === 'ArrowRight') {\n      event.preventDefault?.();\n      focusOnOtpByIndex(++currentOtpIndex);\n    } else if (key === ' ' || code === 'Space') {\n      event.preventDefault?.();\n    }\n  };\n\n  const getHiddenInput = (): React.ReactNode => {\n    if (!isReactNative) {\n      return (\n        <input\n          hidden={true}\n          id={inputId}\n          name={name}\n          value={inputValue ?? otpValue.join('') ?? ''}\n          readOnly\n        />\n      );\n    }\n    return null;\n  };\n\n  const getOTPInputFields = (): React.ReactNode => {\n    const inputs = [];\n    for (let index = 0; index < otpLength; index++) {\n      const currentValue = inputValue ? otpToArray(inputValue)[index] || '' : otpValue[index] || '';\n      const ref = React.createRef<HTMLInputElement>();\n      // if an inputValue is passed (controlled) and isMasked is set, inputType will always be password\n      let currentInputType: 'password' | undefined;\n      if (isMasked) {\n        // if inputValue is passed (controlled component) then the inputType will always be password\n        currentInputType = inputValue ? 'password' : inputType[index];\n      }\n      inputRefs.push(ref);\n      inputs.push(\n        <BaseBox\n          flex={1}\n          marginLeft={index == 0 ? 'spacing.0' : 'spacing.3'}\n          key={`${inputId}-${index}`}\n        >\n          <BaseInput\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus && index === 0}\n            accessibilityLabel={`${index === 0 ? label || accessibilityLabel : ''} character ${\n              index + 1\n            }`}\n            label={label}\n            hideLabelText={true}\n            id={`${inputId}-${index}`}\n            textAlign=\"center\"\n            ref={ref as never}\n            name={name}\n            value={currentValue}\n            maxCharacters={otpValue[index]?.length > 0 ? 1 : undefined}\n            onChange={(formEvent) => handleOnChange({ ...formEvent, currentOtpIndex: index })}\n            onFocus={(formEvent) => onFocus?.({ ...formEvent, inputIndex: index })}\n            onBlur={(formEvent) => onBlur?.({ ...formEvent, inputIndex: index })}\n            onInput={(formEvent) => handleOnInput({ ...formEvent, currentOtpIndex: index })}\n            onKeyDown={(keyboardEvent) =>\n              handleOnKeyDown({ ...keyboardEvent, currentOtpIndex: index })\n            }\n            isDisabled={isDisabled}\n            placeholder={Array.from(placeholder ?? '')[index] ?? ''}\n            isRequired={true}\n            autoCompleteSuggestionType={autoCompleteSuggestionType}\n            keyboardType={keyboardType}\n            keyboardReturnKeyType={keyboardReturnKeyType}\n            validationState={validationState}\n            successText={successText}\n            errorText={errorText}\n            helpText={helpText}\n            hideFormHint={true}\n            type={currentInputType}\n            size={size}\n            valueComponentType=\"heading\"\n            {...makeAnalyticsAttribute(rest)}\n          />\n        </BaseBox>,\n      );\n    }\n    return inputs;\n  };\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.OTPInput, testID })} {...getStyledProps(rest)}>\n      <BaseBox\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'row' : 'column'}\n        alignItems={isLabelLeftPositioned ? 'center' : undefined}\n        position=\"relative\"\n      >\n        {Boolean(label) && (\n          <FormLabel\n            as=\"label\"\n            position={labelPosition}\n            htmlFor={inputId}\n            size={size}\n            labelSuffix={labelSuffix}\n            labelTrailing={labelTrailing}\n          >\n            {label}\n          </FormLabel>\n        )}\n        <BaseBox display=\"flex\" flexDirection=\"row\">\n          {getHiddenInput()}\n          {getOTPInputFields()}\n        </BaseBox>\n      </BaseBox>\n      {/* the magic number 136 is basically max-width of label i.e 120 and then right margin i.e 16 which is the spacing between label and input field */}\n      {/*Refer `BaseInput`'s implementation of FormHint which uses similar logic */}\n      <BaseBox marginLeft={makeSize(isLabelLeftPositioned ? 136 : 0)}>\n        <FormHint\n          type={getHintType({ validationState, hasHelpText: Boolean(helpText) })}\n          helpText={helpText}\n          errorText={errorText}\n          successText={successText}\n          helpTextId={helpTextId}\n          errorTextId={errorTextId}\n          successTextId={successTextId}\n          size={size}\n        />\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst OTPInput = React.forwardRef<HTMLInputElement[], OTPInputProps>(_OTPInput);\n\nexport type { OTPInputProps };\nexport { OTPInput };\n"],"names":["isReactNative","getPlatformType","otpToArray","code","_code$split","split","Array","fill","_OTPInput","_ref","incomingRef","autoFocus","errorText","helpText","isDisabled","keyboardReturnKeyType","_ref$keyboardType","keyboardType","label","accessibilityLabel","labelPosition","labelSuffix","labelTrailing","name","onChange","onFocus","onBlur","onOTPFilled","_ref$otpLength","otpLength","placeholder","successText","validationState","inputValue","value","isMasked","_ref$autoCompleteSugg","autoCompleteSuggestionType","testID","_ref$size","size","rest","_objectWithoutProperties","_excluded","inputRefs","_useState","useState","_useState2","_slicedToArray","otpValue","setOtpValue","_useState3","_useState4","inputType","setInputType","isLabelLeftPositioned","_useFormId","useFormId","inputId","helpTextId","errorTextId","successTextId","useImperativeHandle","map","ref","current","useEffect","length","slice","join","forEach","otp","index","isEmpty","newInputType","from","undefined","setOtpValueByIndex","_ref2","newOtpValue","focusOnOtpByIndex","_inputRefs$index","_inputRefs$index$curr","focus","_inputRefs$index2","_inputRefs$index2$cur","select","handleOnChange","_ref3","currentOtpIndex","trim","_value$trim","newValue","handleOnInput","_ref4","handleOnKeyDown","_ref5","key","event","preventDefault","getHiddenInput","_ref6","_jsx","hidden","id","readOnly","getOTPInputFields","inputs","_loop","_otpValue$index","_Array$from$index","currentValue","React","createRef","currentInputType","push","BaseBox","flex","marginLeft","children","BaseInput","Object","assign","hideLabelText","textAlign","maxCharacters","formEvent","inputIndex","onInput","onKeyDown","keyboardEvent","isRequired","hideFormHint","type","valueComponentType","makeAnalyticsAttribute","_jsxs","metaAttribute","MetaConstants","OTPInput","getStyledProps","display","flexDirection","alignItems","position","Boolean","FormLabel","as","htmlFor","makeSize","FormHint","getHintType","hasHelpText","forwardRef"],"mappings":"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"}

package/build/lib/native/components/Input/OTPInput/index.js

@@ -0,0 +1,2 @@
+export { OTPInput } from './OTPInput.js';
+//# sourceMappingURL=index.js.map

package/build/lib/native/components/Input/OTPInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}