@razorpay/blade 11.8.2 → 11.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdownInputTrigger.js","sources":["../../../../../../src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseInput } from '../BaseInput';\nimport { InputChevronIcon } from './InputChevronIcon';\nimport type { BaseDropdownInputTriggerProps } from './types';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { isReactNative } from '~utils';\nimport { getActionListContainerRole } from '~components/ActionList/getA11yRoles';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport type { BladeElementRef } from '~utils/types';\nimport { useFirstRender } from '~utils/useFirstRender';\n\nconst useControlledDropdownInput = (\n  props: Pick<\n    BaseDropdownInputTriggerProps,\n    | 'onChange'\n    | 'name'\n    | 'value'\n    | 'defaultValue'\n    | 'onInputValueChange'\n    | 'syncInputValueWithSelection'\n    | 'isSelectInput'\n  >,\n): void => {\n  const isFirstRender = useFirstRender();\n  const {\n    changeCallbackTriggerer,\n    isControlled,\n    options,\n    selectedIndices,\n    controlledValueIndices,\n    setSelectedIndices,\n    selectionType,\n    setIsControlled,\n  } = useDropdown();\n\n  const getValuesArrayFromIndices = (): string[] => {\n    let indices: number[] = [];\n    if (isControlled) {\n      indices = controlledValueIndices;\n    } else {\n      indices = selectedIndices;\n    }\n\n    return indices.map((selectionIndex) => options[selectionIndex].value);\n  };\n\n  const selectValues = (valuesToSelect: string | string[]): void => {\n    if (options.length > 0) {\n      // we use empty `''` for clearing the input\n      if (isEmpty(valuesToSelect)) {\n        setSelectedIndices([]);\n      } else if (typeof valuesToSelect === 'string') {\n        // single select control\n        const selectedItemIndex = options.findIndex((option) => option.value === valuesToSelect);\n        if (selectedItemIndex >= 0) {\n          setSelectedIndices([selectedItemIndex]);\n        }\n      } else {\n        // multiselect control\n\n        // Handles repeated values in user state\n        const uniqueValues = Array.from(new Set(valuesToSelect));\n        // Handle selectionType single with multiselect values\n        const userValues = selectionType === 'single' ? [valuesToSelect?.[0]] : uniqueValues;\n\n        const selectedItemIndices = userValues\n          .map((optionValue) => options.findIndex((option) => option.value === optionValue))\n          .filter((value) => value >= 0);\n\n        setSelectedIndices(selectedItemIndices);\n      }\n    }\n  };\n\n  // Handles `defaultValue` prop\n  React.useEffect(() => {\n    if (options.length > 0 && props.defaultValue) {\n      selectValues(props.defaultValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options.length]);\n\n  // Handles `value` prop\n  React.useEffect(() => {\n    if (options.length > 0 && props.value !== undefined) {\n      if (!isControlled) {\n        setIsControlled(true);\n      }\n\n      selectValues(props.value);\n\n      // in single select AutoComplete, we have to set inputValue of autocomplete according to the new selection.\n      if (selectionType === 'single' && !Array.isArray(props.value) && !props.isSelectInput) {\n        props.syncInputValueWithSelection?.(props.value);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props.value, options]);\n\n  // onChange behaviour\n  React.useEffect(() => {\n    // Ignore calling onChange on mount\n\n    if (!isFirstRender) {\n      props.onChange?.({\n        name: props.name,\n        values: getValuesArrayFromIndices(),\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [changeCallbackTriggerer]);\n};\n\nconst _BaseDropdownInputTrigger = (\n  props: BaseDropdownInputTriggerProps,\n  ref: React.ForwardedRef<BladeElementRef>,\n): React.ReactElement => {\n  const {\n    isOpen,\n    activeTagIndex,\n    setActiveTagIndex,\n    displayValue,\n    selectionType,\n    dropdownTriggerer,\n    dropdownBaseId,\n    selectedIndices,\n    triggererRef,\n    triggererWrapperRef,\n    isTagDismissedRef,\n    onTriggerClick,\n    value,\n    shouldIgnoreBlurAnimation,\n    setShouldIgnoreBlurAnimation,\n    activeIndex,\n    hasFooterAction,\n    hasAutoCompleteInBottomSheetHeader,\n    options,\n    removeOption,\n    setChangeCallbackTriggerer,\n    changeCallbackTriggerer,\n  } = useDropdown();\n\n  const dropdownTriggerPlaceholder = props.placeholder ?? 'Select Option';\n  const isAutoCompleteInHeader = !props.isSelectInput && hasAutoCompleteInBottomSheetHeader;\n\n  const getShowAllTags = React.useCallback((): boolean => {\n    if (hasAutoCompleteInBottomSheetHeader) {\n      // When AutoComplete is in bottomsheet header, we never want to show all tags in outer select input\n      if (props.isSelectInput) {\n        return false;\n      }\n\n      // ... And we always want to show all tags in inner AutoComplete\n      return true;\n    }\n\n    return isOpen;\n  }, [hasAutoCompleteInBottomSheetHeader, props.isSelectInput, isOpen]);\n\n  useControlledDropdownInput({\n    onChange: props.onChange,\n    name: props.name,\n    value: props.value,\n    defaultValue: props.defaultValue,\n    syncInputValueWithSelection: props.syncInputValueWithSelection,\n    isSelectInput: props.isSelectInput,\n  });\n\n  const getValue = (): string | undefined => {\n    let prefix = '';\n    if (props.labelPosition === 'inside-input' && props.label) {\n      prefix = `${props.label}: `;\n    }\n\n    if (props.isSelectInput) {\n      if (selectionType === 'single') {\n        return `${prefix}${displayValue}`;\n      }\n\n      // In multiselect, we return tags so no display value is required\n      return undefined;\n    }\n\n    // In AutoComplete, input has a special value too\n    return props.inputValue;\n  };\n\n  const getTags = React.useMemo(\n    () => () => {\n      if (selectionType === 'single') {\n        return undefined;\n      }\n\n      return getTagsGroup({\n        tags: selectedIndices.map((selectedIndex) => options[selectedIndex]?.title),\n        activeTagIndex,\n        isDisabled: props.isDisabled,\n        onDismiss: ({ tagIndex }) => {\n          if (isTagDismissedRef.current) {\n            isTagDismissedRef.current.value = true;\n          }\n\n          if (!isReactNative()) {\n            triggererRef.current?.focus();\n          }\n\n          removeOption(selectedIndices[tagIndex]);\n          setChangeCallbackTriggerer(Number(changeCallbackTriggerer) + 1);\n        },\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedIndices, selectionType, activeTagIndex, changeCallbackTriggerer, options],\n  );\n\n  return (\n    <BaseInput\n      as={props.isSelectInput ? 'button' : 'input'}\n      ref={\n        (!isReactNative()\n          ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (node: any) => {\n              triggererRef.current = node;\n              if (ref) {\n                if (typeof ref === 'function') {\n                  ref(node);\n                } else {\n                  ref.current = node;\n                }\n              }\n            }\n          : null) as never\n      }\n      isDropdownTrigger={true}\n      setInputWrapperRef={(wrapperNode) => {\n        triggererWrapperRef.current = wrapperNode;\n      }}\n      maxTagRows={props.maxRows ?? 'single'}\n      tags={getTags()}\n      showAllTags={getShowAllTags()}\n      activeTagIndex={activeTagIndex}\n      setActiveTagIndex={setActiveTagIndex}\n      shouldIgnoreBlurAnimation={shouldIgnoreBlurAnimation}\n      setShouldIgnoreBlurAnimation={setShouldIgnoreBlurAnimation}\n      textAlign=\"left\"\n      // Form Props\n      label={props.label as string}\n      placeholder={\n        selectionType === 'multiple' && selectedIndices.length > 0\n          ? undefined\n          : dropdownTriggerPlaceholder\n      }\n      hideLabelText={props.label?.length === 0}\n      accessibilityLabel={props.accessibilityLabel}\n      labelPosition={props.labelPosition === 'inside-input' ? undefined : props.labelPosition}\n      isLabelInsideInput={props.labelPosition === 'inside-input'}\n      necessityIndicator={props.necessityIndicator}\n      autoCompleteSuggestionType=\"none\"\n      validationState={props.validationState}\n      helpText={props.helpText}\n      errorText={props.errorText}\n      successText={props.successText}\n      name={props.name}\n      isDisabled={props.isDisabled}\n      isRequired={props.isRequired}\n      prefix={props.prefix}\n      suffix={props.suffix}\n      autoFocus={props.autoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n      value={getValue()}\n      onClick={(e) => {\n        if (props.isDisabled) {\n          return;\n        }\n        props.onTriggerClick?.(e);\n      }}\n      onFocus={props.onFocus}\n      onBlur={({ name }) => {\n        props.onBlur?.({ name, value });\n      }}\n      leadingIcon={props.icon}\n      // Meta Props\n      componentName={props.isSelectInput ? MetaConstants.SelectInput : MetaConstants.AutoComplete}\n      testID={props.testID}\n      // a11y Props\n      id={`${dropdownBaseId}-trigger`}\n      labelId={`${dropdownBaseId}-label`}\n      hasPopup={getActionListContainerRole(hasFooterAction, dropdownTriggerer)}\n      isPopupExpanded={isOpen}\n      activeDescendant={activeIndex >= 0 ? `${dropdownBaseId}-${activeIndex}` : undefined}\n      popupId={`${dropdownBaseId}-actionlist`}\n      // Special Props for Unique behaviour between Select and AutoComplete\n      onChange={props.isSelectInput ? undefined : props.onInputValueChange}\n      onKeyDown={props.onTriggerKeydown}\n      interactionElement={\n        isAutoCompleteInHeader ? null : (\n          <InputChevronIcon\n            onClick={() => {\n              if (!props.isDisabled) {\n                // Icon onClicks to the SelectInput itself\n                if (!isReactNative()) {\n                  triggererRef.current?.focus();\n                }\n                onTriggerClick();\n              }\n            }}\n            isDisabled={props.isDisabled}\n            isOpen={isOpen}\n          />\n        )\n      }\n    />\n  );\n};\n\nconst BaseDropdownInputTrigger = React.forwardRef(_BaseDropdownInputTrigger);\n\nexport { BaseDropdownInputTrigger };\n"],"names":["useControlledDropdownInput","props","isFirstRender","useFirstRender","_useDropdown","useDropdown","changeCallbackTriggerer","isControlled","options","selectedIndices","controlledValueIndices","setSelectedIndices","selectionType","setIsControlled","getValuesArrayFromIndices","indices","map","selectionIndex","value","selectValues","valuesToSelect","length","isEmpty","selectedItemIndex","findIndex","option","uniqueValues","Array","from","Set","userValues","selectedItemIndices","optionValue","filter","React","useEffect","defaultValue","undefined","isArray","isSelectInput","syncInputValueWithSelection","onChange","name","values","_BaseDropdownInputTrigger","ref","_props$placeholder","_props$maxRows","_props$label","_useDropdown2","isOpen","activeTagIndex","setActiveTagIndex","displayValue","dropdownTriggerer","dropdownBaseId","triggererRef","triggererWrapperRef","isTagDismissedRef","onTriggerClick","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","activeIndex","hasFooterAction","hasAutoCompleteInBottomSheetHeader","removeOption","setChangeCallbackTriggerer","dropdownTriggerPlaceholder","placeholder","isAutoCompleteInHeader","getShowAllTags","useCallback","getValue","prefix","labelPosition","label","inputValue","getTags","useMemo","getTagsGroup","tags","selectedIndex","_options$selectedInde","title","isDisabled","onDismiss","_ref","tagIndex","current","isReactNative","_triggererRef$current","focus","Number","_jsx","BaseInput","as","node","isDropdownTrigger","setInputWrapperRef","wrapperNode","maxTagRows","maxRows","showAllTags","textAlign","hideLabelText","accessibilityLabel","isLabelInsideInput","necessityIndicator","autoCompleteSuggestionType","validationState","helpText","errorText","successText","isRequired","suffix","autoFocus","onClick","e","onFocus","onBlur","_ref2","leadingIcon","icon","componentName","MetaConstants","SelectInput","AutoComplete","testID","id","labelId","hasPopup","getActionListContainerRole","isPopupExpanded","activeDescendant","popupId","onInputValueChange","onKeyDown","onTriggerKeydown","interactionElement","InputChevronIcon","_triggererRef$current2","BaseDropdownInputTrigger","forwardRef"],"mappings":"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"}
+{"version":3,"file":"BaseDropdownInputTrigger.js","sources":["../../../../../../src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseInput } from '../BaseInput';\nimport type { BaseInputProps } from '../BaseInput';\nimport { InputChevronIcon } from './InputChevronIcon';\nimport type { BaseDropdownInputTriggerProps } from './types';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { isReactNative } from '~utils';\nimport { getActionListContainerRole } from '~components/ActionList/getA11yRoles';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport type { BladeElementRef } from '~utils/types';\nimport { useFirstRender } from '~utils/useFirstRender';\n\nconst useControlledDropdownInput = (\n  props: Pick<\n    BaseDropdownInputTriggerProps,\n    | 'onChange'\n    | 'name'\n    | 'value'\n    | 'defaultValue'\n    | 'onInputValueChange'\n    | 'syncInputValueWithSelection'\n    | 'isSelectInput'\n  >,\n): void => {\n  const isFirstRender = useFirstRender();\n  const {\n    changeCallbackTriggerer,\n    isControlled,\n    options,\n    selectedIndices,\n    controlledValueIndices,\n    setSelectedIndices,\n    selectionType,\n    setIsControlled,\n  } = useDropdown();\n\n  const getValuesArrayFromIndices = (): string[] => {\n    let indices: number[] = [];\n    if (isControlled) {\n      indices = controlledValueIndices;\n    } else {\n      indices = selectedIndices;\n    }\n\n    return indices.map((selectionIndex) => options[selectionIndex].value);\n  };\n\n  const selectValues = (valuesToSelect: string | string[]): void => {\n    if (options.length > 0) {\n      // we use empty `''` for clearing the input\n      if (isEmpty(valuesToSelect)) {\n        setSelectedIndices([]);\n      } else if (typeof valuesToSelect === 'string') {\n        // single select control\n        const selectedItemIndex = options.findIndex((option) => option.value === valuesToSelect);\n        if (selectedItemIndex >= 0) {\n          setSelectedIndices([selectedItemIndex]);\n        }\n      } else {\n        // multiselect control\n\n        // Handles repeated values in user state\n        const uniqueValues = Array.from(new Set(valuesToSelect));\n        // Handle selectionType single with multiselect values\n        const userValues = selectionType === 'single' ? [valuesToSelect?.[0]] : uniqueValues;\n\n        const selectedItemIndices = userValues\n          .map((optionValue) => options.findIndex((option) => option.value === optionValue))\n          .filter((value) => value >= 0);\n\n        setSelectedIndices(selectedItemIndices);\n      }\n    }\n  };\n\n  // Handles `defaultValue` prop\n  React.useEffect(() => {\n    if (options.length > 0 && props.defaultValue) {\n      selectValues(props.defaultValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options.length]);\n\n  // Handles `value` prop\n  React.useEffect(() => {\n    if (options.length > 0 && props.value !== undefined) {\n      if (!isControlled) {\n        setIsControlled(true);\n      }\n\n      selectValues(props.value);\n\n      // in single select AutoComplete, we have to set inputValue of autocomplete according to the new selection.\n      if (selectionType === 'single' && !Array.isArray(props.value) && !props.isSelectInput) {\n        props.syncInputValueWithSelection?.(props.value);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props.value, options]);\n\n  // onChange behaviour\n  React.useEffect(() => {\n    // Ignore calling onChange on mount\n\n    if (!isFirstRender) {\n      props.onChange?.({\n        name: props.name,\n        values: getValuesArrayFromIndices(),\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [changeCallbackTriggerer]);\n};\n\nconst _BaseDropdownInputTrigger = (\n  props: BaseDropdownInputTriggerProps,\n  ref: React.ForwardedRef<BladeElementRef>,\n): React.ReactElement => {\n  const {\n    isOpen,\n    activeTagIndex,\n    setActiveTagIndex,\n    displayValue,\n    selectionType,\n    dropdownTriggerer,\n    dropdownBaseId,\n    selectedIndices,\n    triggererRef,\n    triggererWrapperRef,\n    isTagDismissedRef,\n    onTriggerClick,\n    value,\n    shouldIgnoreBlurAnimation,\n    setShouldIgnoreBlurAnimation,\n    activeIndex,\n    hasFooterAction,\n    hasAutoCompleteInBottomSheetHeader,\n    options,\n    removeOption,\n    setChangeCallbackTriggerer,\n    changeCallbackTriggerer,\n  } = useDropdown();\n\n  const dropdownTriggerPlaceholder = props.placeholder ?? 'Select Option';\n  const isAutoCompleteInHeader = !props.isSelectInput && hasAutoCompleteInBottomSheetHeader;\n\n  const getShowAllTags = React.useCallback((): boolean => {\n    if (hasAutoCompleteInBottomSheetHeader) {\n      // When AutoComplete is in bottomsheet header, we never want to show all tags in outer select input\n      if (props.isSelectInput) {\n        return false;\n      }\n\n      // ... And we always want to show all tags in inner AutoComplete\n      return true;\n    }\n\n    return isOpen;\n  }, [hasAutoCompleteInBottomSheetHeader, props.isSelectInput, isOpen]);\n\n  useControlledDropdownInput({\n    onChange: props.onChange,\n    name: props.name,\n    value: props.value,\n    defaultValue: props.defaultValue,\n    syncInputValueWithSelection: props.syncInputValueWithSelection,\n    isSelectInput: props.isSelectInput,\n  });\n\n  const getValue = (): string | undefined => {\n    let prefix = '';\n    if (props.labelPosition === 'inside-input' && props.label) {\n      prefix = `${props.label}: `;\n    }\n\n    if (props.isSelectInput) {\n      if (selectionType === 'single') {\n        return `${prefix}${displayValue}`;\n      }\n\n      // In multiselect, we return tags so no display value is required\n      return undefined;\n    }\n\n    // In AutoComplete, input has a special value too\n    return props.inputValue;\n  };\n\n  const getTags = React.useMemo(\n    () => ({ size }: { size: NonNullable<BaseInputProps['size']> }) => {\n      if (selectionType === 'single') {\n        return undefined;\n      }\n\n      return getTagsGroup({\n        size,\n        tags: selectedIndices.map((selectedIndex) => options[selectedIndex]?.title),\n        activeTagIndex,\n        isDisabled: props.isDisabled,\n        onDismiss: ({ tagIndex }) => {\n          if (isTagDismissedRef.current) {\n            isTagDismissedRef.current.value = true;\n          }\n\n          if (!isReactNative()) {\n            triggererRef.current?.focus();\n          }\n\n          removeOption(selectedIndices[tagIndex]);\n          setChangeCallbackTriggerer(Number(changeCallbackTriggerer) + 1);\n        },\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedIndices, selectionType, activeTagIndex, changeCallbackTriggerer, options],\n  );\n\n  return (\n    <BaseInput\n      as={props.isSelectInput ? 'button' : 'input'}\n      ref={\n        (!isReactNative()\n          ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (node: any) => {\n              triggererRef.current = node;\n              if (ref) {\n                if (typeof ref === 'function') {\n                  ref(node);\n                } else {\n                  ref.current = node;\n                }\n              }\n            }\n          : null) as never\n      }\n      isDropdownTrigger={true}\n      setInputWrapperRef={(wrapperNode) => {\n        triggererWrapperRef.current = wrapperNode;\n      }}\n      maxTagRows={props.maxRows ?? 'single'}\n      tags={getTags({ size: props.size || 'medium' })}\n      showAllTags={getShowAllTags()}\n      activeTagIndex={activeTagIndex}\n      setActiveTagIndex={setActiveTagIndex}\n      shouldIgnoreBlurAnimation={shouldIgnoreBlurAnimation}\n      setShouldIgnoreBlurAnimation={setShouldIgnoreBlurAnimation}\n      textAlign=\"left\"\n      // Form Props\n      label={props.label as string}\n      placeholder={\n        selectionType === 'multiple' && selectedIndices.length > 0\n          ? undefined\n          : dropdownTriggerPlaceholder\n      }\n      hideLabelText={props.label?.length === 0}\n      accessibilityLabel={props.accessibilityLabel}\n      labelPosition={props.labelPosition === 'inside-input' ? undefined : props.labelPosition}\n      isLabelInsideInput={props.labelPosition === 'inside-input'}\n      necessityIndicator={props.necessityIndicator}\n      autoCompleteSuggestionType=\"none\"\n      validationState={props.validationState}\n      helpText={props.helpText}\n      errorText={props.errorText}\n      successText={props.successText}\n      name={props.name}\n      isDisabled={props.isDisabled}\n      isRequired={props.isRequired}\n      prefix={props.prefix}\n      suffix={props.suffix}\n      autoFocus={props.autoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n      value={getValue()}\n      onClick={(e) => {\n        if (props.isDisabled) {\n          return;\n        }\n        props.onTriggerClick?.(e);\n      }}\n      onFocus={props.onFocus}\n      onBlur={({ name }) => {\n        props.onBlur?.({ name, value });\n      }}\n      leadingIcon={props.icon}\n      // Meta Props\n      componentName={props.isSelectInput ? MetaConstants.SelectInput : MetaConstants.AutoComplete}\n      testID={props.testID}\n      // a11y Props\n      id={`${dropdownBaseId}-trigger`}\n      labelId={`${dropdownBaseId}-label`}\n      hasPopup={getActionListContainerRole(hasFooterAction, dropdownTriggerer)}\n      isPopupExpanded={isOpen}\n      activeDescendant={activeIndex >= 0 ? `${dropdownBaseId}-${activeIndex}` : undefined}\n      popupId={`${dropdownBaseId}-actionlist`}\n      // Special Props for Unique behaviour between Select and AutoComplete\n      onChange={props.isSelectInput ? undefined : props.onInputValueChange}\n      onKeyDown={props.onTriggerKeydown}\n      size={props.size}\n      interactionElement={\n        isAutoCompleteInHeader ? null : (\n          <InputChevronIcon\n            onClick={() => {\n              if (!props.isDisabled) {\n                // Icon onClicks to the SelectInput itself\n                if (!isReactNative()) {\n                  triggererRef.current?.focus();\n                }\n                onTriggerClick();\n              }\n            }}\n            isDisabled={props.isDisabled}\n            isOpen={isOpen}\n          />\n        )\n      }\n    />\n  );\n};\n\nconst BaseDropdownInputTrigger = React.forwardRef(_BaseDropdownInputTrigger);\n\nexport { BaseDropdownInputTrigger };\n"],"names":["useControlledDropdownInput","props","isFirstRender","useFirstRender","_useDropdown","useDropdown","changeCallbackTriggerer","isControlled","options","selectedIndices","controlledValueIndices","setSelectedIndices","selectionType","setIsControlled","getValuesArrayFromIndices","indices","map","selectionIndex","value","selectValues","valuesToSelect","length","isEmpty","selectedItemIndex","findIndex","option","uniqueValues","Array","from","Set","userValues","selectedItemIndices","optionValue","filter","React","useEffect","defaultValue","undefined","isArray","isSelectInput","syncInputValueWithSelection","onChange","name","values","_BaseDropdownInputTrigger","ref","_props$placeholder","_props$maxRows","_props$label","_useDropdown2","isOpen","activeTagIndex","setActiveTagIndex","displayValue","dropdownTriggerer","dropdownBaseId","triggererRef","triggererWrapperRef","isTagDismissedRef","onTriggerClick","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","activeIndex","hasFooterAction","hasAutoCompleteInBottomSheetHeader","removeOption","setChangeCallbackTriggerer","dropdownTriggerPlaceholder","placeholder","isAutoCompleteInHeader","getShowAllTags","useCallback","getValue","prefix","labelPosition","label","inputValue","getTags","useMemo","_ref","size","getTagsGroup","tags","selectedIndex","_options$selectedInde","title","isDisabled","onDismiss","_ref2","tagIndex","current","isReactNative","_triggererRef$current","focus","Number","_jsx","BaseInput","as","node","isDropdownTrigger","setInputWrapperRef","wrapperNode","maxTagRows","maxRows","showAllTags","textAlign","hideLabelText","accessibilityLabel","isLabelInsideInput","necessityIndicator","autoCompleteSuggestionType","validationState","helpText","errorText","successText","isRequired","suffix","autoFocus","onClick","e","onFocus","onBlur","_ref3","leadingIcon","icon","componentName","MetaConstants","SelectInput","AutoComplete","testID","id","labelId","hasPopup","getActionListContainerRole","isPopupExpanded","activeDescendant","popupId","onInputValueChange","onKeyDown","onTriggerKeydown","interactionElement","InputChevronIcon","_triggererRef$current2","BaseDropdownInputTrigger","forwardRef"],"mappings":"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"}

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

@@ -18,7 +18,7 @@ import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.native
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded=["autoFocus","errorText","helpText","isDisabled","keyboardReturnKeyType","keyboardType","label","accessibilityLabel","labelPosition","name","onChange","onFocus","onBlur","onOTPFilled","otpLength","placeholder","successText","validationState","value","isMasked","autoCompleteSuggestionType","testID"];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,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,styledProps=_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();handleOnChange({value:'',currentOtpIndex:currentOtpIndex});focusOnOtpByIndex(--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=void 0;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,{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})},`${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(styledProps),{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,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})})]}));};var OTPInput=React__default.forwardRef(_OTPInput);
+var _excluded=["autoFocus","errorText","helpText","isDisabled","keyboardReturnKeyType","keyboardType","label","accessibilityLabel","labelPosition","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,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,styledProps=_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();handleOnChange({value:'',currentOtpIndex:currentOtpIndex});focusOnOtpByIndex(--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=void 0;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,{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"})},`${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(styledProps),{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,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';\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  | '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> & {\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    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    ...styledProps\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      handleOnChange({ value: '', currentOtpIndex });\n      focusOnOtpByIndex(--currentOtpIndex);\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          />\n        </BaseBox>,\n      );\n    }\n    return inputs;\n  };\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.OTPInput, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'row' : 'column'}\n        alignItems={isLabelLeftPositioned ? 'center' : undefined}\n        position=\"relative\"\n      >\n        {Boolean(label) && (\n          <FormLabel as=\"label\" position={labelPosition} htmlFor={inputId}>\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        />\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","name","onChange","onFocus","onBlur","onOTPFilled","_ref$otpLength","otpLength","placeholder","successText","validationState","inputValue","value","isMasked","_ref$autoCompleteSugg","autoCompleteSuggestionType","testID","styledProps","_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","hideLabelText","textAlign","maxCharacters","formEvent","Object","assign","inputIndex","onInput","onKeyDown","keyboardEvent","isRequired","hideFormHint","type","_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';\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  | '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> & {\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    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    ...styledProps\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      handleOnChange({ value: '', currentOtpIndex });\n      focusOnOtpByIndex(--currentOtpIndex);\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          />\n        </BaseBox>,\n      );\n    }\n    return inputs;\n  };\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.OTPInput, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'row' : 'column'}\n        alignItems={isLabelLeftPositioned ? 'center' : undefined}\n        position=\"relative\"\n      >\n        {Boolean(label) && (\n          <FormLabel as=\"label\" position={labelPosition} htmlFor={inputId} size={size}>\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","name","onChange","onFocus","onBlur","onOTPFilled","_ref$otpLength","otpLength","placeholder","successText","validationState","inputValue","value","isMasked","_ref$autoCompleteSugg","autoCompleteSuggestionType","testID","_ref$size","size","styledProps","_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","hideLabelText","textAlign","maxCharacters","formEvent","Object","assign","inputIndex","onInput","onKeyDown","keyboardEvent","isRequired","hideFormHint","type","valueComponentType","_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/PasswordInput/PasswordInput.js

@@ -22,7 +22,7 @@ import { CharacterCounter } from '../../Form/CharacterCounter/CharacterCounter.j
 import { IconButton } from '../../Button/IconButton/IconButton.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded=["label","accessibilityLabel","labelPosition","showRevealButton","maxCharacters","validationState","errorText","successText","helpText","isDisabled","defaultValue","placeholder","isRequired","necessityIndicator","value","onChange","onFocus","onBlur","onSubmit","name","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","testID"];var _PasswordInput=function _PasswordInput(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$showRevealButton=_ref.showRevealButton,showRevealButton=_ref$showRevealButton===void 0?true:_ref$showRevealButton,maxCharacters=_ref.maxCharacters,validationState=_ref.validationState,errorText=_ref.errorText,successText=_ref.successText,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,defaultValue=_ref.defaultValue,placeholder=_ref.placeholder,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,value=_ref.value,onChange=_ref.onChange,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,name=_ref.name,_ref$autoFocus=_ref.autoFocus,autoFocus=_ref$autoFocus===void 0?false:_ref$autoFocus,_ref$keyboardReturnKe=_ref.keyboardReturnKeyType,keyboardReturnKeyType=_ref$keyboardReturnKe===void 0?'done':_ref$keyboardReturnKe,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isRevealed=_React$useState2[0],setIsRevealed=_React$useState2[1];var isEnabled=!isDisabled;var isRevealedAndEnabled=isRevealed&&isEnabled;var toggleIsRevealed=function toggleIsRevealed(){return setIsRevealed(function(revealed){return !revealed;});};var iconAccessibilityLabel=isRevealedAndEnabled?'Hide password':'Show password';var type=isRevealedAndEnabled?'text':'password';var revealButtonIcon=isRevealedAndEnabled?EyeOffIcon:EyeIcon;var revealButton=showRevealButton&&!isDisabled?jsx(IconButton,{size:"medium",icon:revealButtonIcon,onClick:toggleIsRevealed,accessibilityLabel:iconAccessibilityLabel}):null;var trailingFooterSlot=function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:"spacing.2",marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;};return jsx(BaseInput,Object.assign({ref:ref,componentName:MetaConstants.PasswordInput,id:"password-field",label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,type:type,interactionElement:revealButton,trailingFooterSlot:trailingFooterSlot,maxCharacters:maxCharacters,validationState:validationState,errorText:errorText,successText:successText,helpText:helpText,isDisabled:isDisabled,defaultValue:defaultValue,placeholder:placeholder,isRequired:isRequired,necessityIndicator:necessityIndicator,value:value,onChange:onChange,onBlur:onBlur,onSubmit:onSubmit,onFocus:onFocus,name:name,autoFocus:autoFocus,autoCompleteSuggestionType:autoCompleteSuggestionType,keyboardReturnKeyType:keyboardReturnKeyType,autoCapitalize:"none",testID:testID},styledProps));};var PasswordInput=assignWithoutSideEffects(React__default.forwardRef(_PasswordInput),{displayName:'PasswordInput'});
+var _excluded=["label","accessibilityLabel","labelPosition","showRevealButton","maxCharacters","validationState","errorText","successText","helpText","isDisabled","defaultValue","placeholder","isRequired","necessityIndicator","value","onChange","onFocus","onBlur","onSubmit","name","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","testID","size"];var _PasswordInput=function _PasswordInput(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$showRevealButton=_ref.showRevealButton,showRevealButton=_ref$showRevealButton===void 0?true:_ref$showRevealButton,maxCharacters=_ref.maxCharacters,validationState=_ref.validationState,errorText=_ref.errorText,successText=_ref.successText,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,defaultValue=_ref.defaultValue,placeholder=_ref.placeholder,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,value=_ref.value,onChange=_ref.onChange,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,name=_ref.name,_ref$autoFocus=_ref.autoFocus,autoFocus=_ref$autoFocus===void 0?false:_ref$autoFocus,_ref$keyboardReturnKe=_ref.keyboardReturnKeyType,keyboardReturnKeyType=_ref$keyboardReturnKe===void 0?'done':_ref$keyboardReturnKe,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,styledProps=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isRevealed=_React$useState2[0],setIsRevealed=_React$useState2[1];var isEnabled=!isDisabled;var isRevealedAndEnabled=isRevealed&&isEnabled;var toggleIsRevealed=function toggleIsRevealed(){return setIsRevealed(function(revealed){return !revealed;});};var iconAccessibilityLabel=isRevealedAndEnabled?'Hide password':'Show password';var type=isRevealedAndEnabled?'text':'password';var revealButtonIcon=isRevealedAndEnabled?EyeOffIcon:EyeIcon;var revealButton=showRevealButton&&!isDisabled?jsx(IconButton,{size:"medium",icon:revealButtonIcon,onClick:toggleIsRevealed,accessibilityLabel:iconAccessibilityLabel}):null;var trailingFooterSlot=function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:"spacing.2",marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;};return jsx(BaseInput,Object.assign({ref:ref,componentName:MetaConstants.PasswordInput,id:"password-field",label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,type:type,interactionElement:revealButton,trailingFooterSlot:trailingFooterSlot,maxCharacters:maxCharacters,validationState:validationState,errorText:errorText,successText:successText,helpText:helpText,isDisabled:isDisabled,defaultValue:defaultValue,placeholder:placeholder,isRequired:isRequired,necessityIndicator:necessityIndicator,value:value,onChange:onChange,onBlur:onBlur,onSubmit:onSubmit,onFocus:onFocus,name:name,autoFocus:autoFocus,autoCompleteSuggestionType:autoCompleteSuggestionType,keyboardReturnKeyType:keyboardReturnKeyType,autoCapitalize:"none",testID:testID,size:size},styledProps));};var PasswordInput=assignWithoutSideEffects(React__default.forwardRef(_PasswordInput),{displayName:'PasswordInput'});
 
 export { PasswordInput };
 //# sourceMappingURL=PasswordInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../../../../src/components/Input/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { EyeIcon, EyeOffIcon } from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\n\ntype PasswordInputExtraProps = {\n  /**\n   * Shows a reveal button to toggle password visibility\n   *\n   * @default true\n   */\n  showRevealButton?: boolean;\n\n  /**\n   * Displays asterisk (`*`) when `isRequired` is enabled\n   *\n   * @default none\n   */\n  necessityIndicator?: Exclude<BaseInputProps['necessityIndicator'], 'optional'>;\n\n  /**\n   * Determines what autoComplete suggestion type to show. Defaults to using platform heuristics.\n   *\n   * It's not recommended to turn this off in favor of safe password practices.\n   * Providing `password` or `newPassword` is more informative to the platform for browser autofill or password managers.\n   *\n   * **Note**: Using `newPassword` on iOS has some [known issue](https://github.com/facebook/react-native/issues/21911) on React Native\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' | 'password' | 'newPassword'\n  >;\n};\n\ntype PasswordInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'maxCharacters'\n  | 'validationState'\n  | 'errorText'\n  | 'successText'\n  | 'helpText'\n  | 'isDisabled'\n  | 'defaultValue'\n  | 'placeholder'\n  | 'isRequired'\n  | 'value'\n  | 'onChange'\n  | 'onBlur'\n  | 'onSubmit'\n  | 'onFocus'\n  | 'name'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'testID'\n> &\n  PasswordInputExtraProps &\n  StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype PasswordInputPropsWithA11yLabel = {\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 PasswordInputPropsWithLabel = {\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 PasswordInputProps = (PasswordInputPropsWithA11yLabel | PasswordInputPropsWithLabel) &\n  PasswordInputCommonProps;\n\nconst _PasswordInput: React.ForwardRefRenderFunction<BladeElementRef, PasswordInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    showRevealButton = true,\n    maxCharacters,\n    validationState,\n    errorText,\n    successText,\n    helpText,\n    isDisabled = false,\n    defaultValue,\n    placeholder,\n    isRequired = false,\n    necessityIndicator = 'none',\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onSubmit,\n    name,\n    autoFocus = false,\n    keyboardReturnKeyType = 'done',\n    autoCompleteSuggestionType,\n    testID,\n    ...styledProps\n  },\n  ref,\n) => {\n  const [isRevealed, setIsRevealed] = React.useState(false);\n  const isEnabled = !isDisabled;\n\n  // If input is disabled reveal button shouldn't be present and input should be masked\n  const isRevealedAndEnabled = isRevealed && isEnabled;\n\n  const toggleIsRevealed = (): void => setIsRevealed((revealed) => !revealed);\n  const iconAccessibilityLabel = isRevealedAndEnabled ? 'Hide password' : 'Show password';\n  const type = isRevealedAndEnabled ? 'text' : 'password';\n\n  const revealButtonIcon = isRevealedAndEnabled ? EyeOffIcon : EyeIcon;\n  const revealButton =\n    showRevealButton && !isDisabled ? (\n      <IconButton\n        size=\"medium\"\n        icon={revealButtonIcon}\n        onClick={toggleIsRevealed}\n        accessibilityLabel={iconAccessibilityLabel}\n      />\n    ) : null;\n\n  const trailingFooterSlot = (value?: string): React.ReactNode =>\n    maxCharacters ? (\n      <BaseBox marginTop=\"spacing.2\" marginRight=\"spacing.1\">\n        <CharacterCounter currentCount={value?.length ?? 0} maxCount={maxCharacters} />\n      </BaseBox>\n    ) : null;\n\n  return (\n    <BaseInput\n      ref={ref}\n      componentName={MetaConstants.PasswordInput}\n      id=\"password-field\"\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      type={type}\n      interactionElement={revealButton}\n      trailingFooterSlot={trailingFooterSlot}\n      maxCharacters={maxCharacters}\n      validationState={validationState}\n      errorText={errorText}\n      successText={successText}\n      helpText={helpText}\n      isDisabled={isDisabled}\n      defaultValue={defaultValue}\n      placeholder={placeholder}\n      isRequired={isRequired}\n      necessityIndicator={necessityIndicator}\n      value={value}\n      onChange={onChange}\n      onBlur={onBlur}\n      onSubmit={onSubmit}\n      onFocus={onFocus}\n      name={name}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      autoCompleteSuggestionType={autoCompleteSuggestionType}\n      keyboardReturnKeyType={keyboardReturnKeyType}\n      autoCapitalize=\"none\"\n      testID={testID}\n      {...styledProps}\n    />\n  );\n};\n\n// nosemgrep\nconst PasswordInput = assignWithoutSideEffects(React.forwardRef(_PasswordInput), {\n  displayName: 'PasswordInput',\n});\n\nexport type { PasswordInputProps };\nexport { PasswordInput };\n"],"names":["_PasswordInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","_ref$showRevealButton","showRevealButton","maxCharacters","validationState","errorText","successText","helpText","_ref$isDisabled","isDisabled","defaultValue","placeholder","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","value","onChange","onFocus","onBlur","onSubmit","name","_ref$autoFocus","autoFocus","_ref$keyboardReturnKe","keyboardReturnKeyType","autoCompleteSuggestionType","testID","styledProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isRevealed","setIsRevealed","isEnabled","isRevealedAndEnabled","toggleIsRevealed","revealed","iconAccessibilityLabel","type","revealButtonIcon","EyeOffIcon","EyeIcon","revealButton","_jsx","IconButton","size","icon","onClick","trailingFooterSlot","_value$length","BaseBox","marginTop","marginRight","children","CharacterCounter","currentCount","length","maxCount","BaseInput","Object","assign","componentName","MetaConstants","PasswordInput","id","hideLabelText","Boolean","interactionElement","autoCapitalize","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../../../../src/components/Input/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { EyeIcon, EyeOffIcon } from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\n\ntype PasswordInputExtraProps = {\n  /**\n   * Shows a reveal button to toggle password visibility\n   *\n   * @default true\n   */\n  showRevealButton?: boolean;\n\n  /**\n   * Displays asterisk (`*`) when `isRequired` is enabled\n   *\n   * @default none\n   */\n  necessityIndicator?: Exclude<BaseInputProps['necessityIndicator'], 'optional'>;\n\n  /**\n   * Determines what autoComplete suggestion type to show. Defaults to using platform heuristics.\n   *\n   * It's not recommended to turn this off in favor of safe password practices.\n   * Providing `password` or `newPassword` is more informative to the platform for browser autofill or password managers.\n   *\n   * **Note**: Using `newPassword` on iOS has some [known issue](https://github.com/facebook/react-native/issues/21911) on React Native\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' | 'password' | 'newPassword'\n  >;\n};\n\ntype PasswordInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'maxCharacters'\n  | 'validationState'\n  | 'errorText'\n  | 'successText'\n  | 'helpText'\n  | 'isDisabled'\n  | 'defaultValue'\n  | 'placeholder'\n  | 'isRequired'\n  | 'value'\n  | 'onChange'\n  | 'onBlur'\n  | 'onSubmit'\n  | 'onFocus'\n  | 'name'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'testID'\n  | 'size'\n> &\n  PasswordInputExtraProps &\n  StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype PasswordInputPropsWithA11yLabel = {\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 PasswordInputPropsWithLabel = {\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 PasswordInputProps = (PasswordInputPropsWithA11yLabel | PasswordInputPropsWithLabel) &\n  PasswordInputCommonProps;\n\nconst _PasswordInput: React.ForwardRefRenderFunction<BladeElementRef, PasswordInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    showRevealButton = true,\n    maxCharacters,\n    validationState,\n    errorText,\n    successText,\n    helpText,\n    isDisabled = false,\n    defaultValue,\n    placeholder,\n    isRequired = false,\n    necessityIndicator = 'none',\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onSubmit,\n    name,\n    autoFocus = false,\n    keyboardReturnKeyType = 'done',\n    autoCompleteSuggestionType,\n    testID,\n    size = 'medium',\n    ...styledProps\n  },\n  ref,\n) => {\n  const [isRevealed, setIsRevealed] = React.useState(false);\n  const isEnabled = !isDisabled;\n\n  // If input is disabled reveal button shouldn't be present and input should be masked\n  const isRevealedAndEnabled = isRevealed && isEnabled;\n\n  const toggleIsRevealed = (): void => setIsRevealed((revealed) => !revealed);\n  const iconAccessibilityLabel = isRevealedAndEnabled ? 'Hide password' : 'Show password';\n  const type = isRevealedAndEnabled ? 'text' : 'password';\n\n  const revealButtonIcon = isRevealedAndEnabled ? EyeOffIcon : EyeIcon;\n  const revealButton =\n    showRevealButton && !isDisabled ? (\n      <IconButton\n        size=\"medium\"\n        icon={revealButtonIcon}\n        onClick={toggleIsRevealed}\n        accessibilityLabel={iconAccessibilityLabel}\n      />\n    ) : null;\n\n  const trailingFooterSlot = (value?: string): React.ReactNode =>\n    maxCharacters ? (\n      <BaseBox marginTop=\"spacing.2\" marginRight=\"spacing.1\">\n        <CharacterCounter currentCount={value?.length ?? 0} maxCount={maxCharacters} />\n      </BaseBox>\n    ) : null;\n\n  return (\n    <BaseInput\n      ref={ref}\n      componentName={MetaConstants.PasswordInput}\n      id=\"password-field\"\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      type={type}\n      interactionElement={revealButton}\n      trailingFooterSlot={trailingFooterSlot}\n      maxCharacters={maxCharacters}\n      validationState={validationState}\n      errorText={errorText}\n      successText={successText}\n      helpText={helpText}\n      isDisabled={isDisabled}\n      defaultValue={defaultValue}\n      placeholder={placeholder}\n      isRequired={isRequired}\n      necessityIndicator={necessityIndicator}\n      value={value}\n      onChange={onChange}\n      onBlur={onBlur}\n      onSubmit={onSubmit}\n      onFocus={onFocus}\n      name={name}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      autoCompleteSuggestionType={autoCompleteSuggestionType}\n      keyboardReturnKeyType={keyboardReturnKeyType}\n      autoCapitalize=\"none\"\n      testID={testID}\n      size={size}\n      {...styledProps}\n    />\n  );\n};\n\n// nosemgrep\nconst PasswordInput = assignWithoutSideEffects(React.forwardRef(_PasswordInput), {\n  displayName: 'PasswordInput',\n});\n\nexport type { PasswordInputProps };\nexport { PasswordInput };\n"],"names":["_PasswordInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","_ref$showRevealButton","showRevealButton","maxCharacters","validationState","errorText","successText","helpText","_ref$isDisabled","isDisabled","defaultValue","placeholder","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","value","onChange","onFocus","onBlur","onSubmit","name","_ref$autoFocus","autoFocus","_ref$keyboardReturnKe","keyboardReturnKeyType","autoCompleteSuggestionType","testID","_ref$size","size","styledProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isRevealed","setIsRevealed","isEnabled","isRevealedAndEnabled","toggleIsRevealed","revealed","iconAccessibilityLabel","type","revealButtonIcon","EyeOffIcon","EyeIcon","revealButton","_jsx","IconButton","icon","onClick","trailingFooterSlot","_value$length","BaseBox","marginTop","marginRight","children","CharacterCounter","currentCount","length","maxCount","BaseInput","Object","assign","componentName","MetaConstants","PasswordInput","id","hideLabelText","Boolean","interactionElement","autoCapitalize","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

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

@@ -23,8 +23,9 @@ import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
 import { CharacterCounter } from '../../Form/CharacterCounter/CharacterCounter.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 import { useMergeRefs } from '../../../utils/useMergeRefs.js';
+import { hintMarginTop } from '../../Form/formTokens.js';
 
-var _excluded=["label","accessibilityLabel","labelPosition","necessityIndicator","errorText","helpText","successText","validationState","defaultValue","isDisabled","isRequired","name","onChange","onFocus","onBlur","onSubmit","placeholder","value","maxCharacters","showClearButton","onClearButtonClick","autoFocus","numberOfLines","testID"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextArea=function _TextArea(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,labelPosition=_ref.labelPosition,necessityIndicator=_ref.necessityIndicator,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,validationState=_ref.validationState,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,name=_ref.name,_onChange=_ref.onChange,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,placeholder=_ref.placeholder,value=_ref.value,maxCharacters=_ref.maxCharacters,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,autoFocus=_ref.autoFocus,_ref$numberOfLines=_ref.numberOfLines,numberOfLines=_ref$numberOfLines===void 0?2:_ref$numberOfLines,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var inputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,inputRef);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),shouldShowClearButton=_React$useState2[0],setShouldShowClearButton=_React$useState2[1];React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&((value==null?void 0:value.length)||(defaultValue==null?void 0:defaultValue.length))));},[showClearButton,defaultValue,value]);var renderInteractionElement=function renderInteractionElement(){if(shouldShowClearButton){return jsx(BaseBox,{paddingTop:"spacing.3",marginTop:"spacing.1",children:jsx(IconButton,{icon:CloseIcon,accessibilityLabel:"Clear textarea content",onClick:function onClick(){var _inputRef$current;if(isEmpty(value)&&inputRef.current){if(isReactNative(inputRef.current)){inputRef.current.clear();inputRef.current.focus();}else if(inputRef.current instanceof HTMLTextAreaElement){inputRef.current.value='';inputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();inputRef==null?void 0:(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();setShouldShowClearButton(false);}})});}return null;};return jsx(BaseInput,Object.assign({as:"textarea",id:"textarea",componentName:MetaConstants.TextArea,autoFocus:autoFocus,ref:mergedRef,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,necessityIndicator:necessityIndicator,errorText:errorText,helpText:helpText,successText:successText,validationState:validationState,isDisabled:isDisabled,isRequired:isRequired,name:name,maxCharacters:maxCharacters,placeholder:placeholder,interactionElement:renderInteractionElement(),defaultValue:defaultValue,value:value,numberOfLines:numberOfLines,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);}_onChange==null?void 0:_onChange({name:name,value:value});},onFocus:onFocus,onBlur:onBlur,onSubmit:onSubmit,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:"spacing.2",marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;},testID:testID},styledProps));};var TextArea=assignWithoutSideEffects(React__default.forwardRef(_TextArea),{displayName:'TextArea'});
+var _excluded=["label","accessibilityLabel","labelPosition","necessityIndicator","errorText","helpText","successText","validationState","defaultValue","isDisabled","isRequired","name","onChange","onFocus","onBlur","onSubmit","placeholder","value","maxCharacters","showClearButton","onClearButtonClick","autoFocus","numberOfLines","testID","size"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextArea=function _TextArea(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,labelPosition=_ref.labelPosition,necessityIndicator=_ref.necessityIndicator,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,validationState=_ref.validationState,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,name=_ref.name,_onChange=_ref.onChange,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,placeholder=_ref.placeholder,value=_ref.value,maxCharacters=_ref.maxCharacters,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,autoFocus=_ref.autoFocus,_ref$numberOfLines=_ref.numberOfLines,numberOfLines=_ref$numberOfLines===void 0?2:_ref$numberOfLines,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,styledProps=_objectWithoutProperties(_ref,_excluded);var inputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,inputRef);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),shouldShowClearButton=_React$useState2[0],setShouldShowClearButton=_React$useState2[1];React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&((value==null?void 0:value.length)||(defaultValue==null?void 0:defaultValue.length))));},[showClearButton,defaultValue,value]);var renderInteractionElement=function renderInteractionElement(){if(shouldShowClearButton){return jsx(BaseBox,{paddingTop:"spacing.3",marginTop:"spacing.1",children:jsx(IconButton,{icon:CloseIcon,accessibilityLabel:"Clear textarea content",onClick:function onClick(){var _inputRef$current;if(isEmpty(value)&&inputRef.current){if(isReactNative(inputRef.current)){inputRef.current.clear();inputRef.current.focus();}else if(inputRef.current instanceof HTMLTextAreaElement){inputRef.current.value='';inputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();inputRef==null?void 0:(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();setShouldShowClearButton(false);}})});}return null;};return jsx(BaseInput,Object.assign({as:"textarea",id:"textarea",componentName:MetaConstants.TextArea,autoFocus:autoFocus,ref:mergedRef,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,necessityIndicator:necessityIndicator,errorText:errorText,helpText:helpText,successText:successText,validationState:validationState,isDisabled:isDisabled,isRequired:isRequired,name:name,maxCharacters:maxCharacters,placeholder:placeholder,interactionElement:renderInteractionElement(),defaultValue:defaultValue,value:value,numberOfLines:numberOfLines,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);}_onChange==null?void 0:_onChange({name:name,value:value});},onFocus:onFocus,onBlur:onBlur,onSubmit:onSubmit,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})}):null;},testID:testID,size:size},styledProps));};var TextArea=assignWithoutSideEffects(React__default.forwardRef(_TextArea),{displayName:'TextArea'});
 
 export { TextArea };
 //# sourceMappingURL=TextArea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../../../../src/components/Input/TextArea/TextArea.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport React from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef } from '~utils/types';\n\ntype TextAreaCommonProps = 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  | 'onSubmit'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'numberOfLines'\n  | 'testID'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n} & StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextAreaPropsWithA11yLabel = {\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 TextAreaPropsWithLabel = {\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 TextAreaProps = (TextAreaPropsWithA11yLabel | TextAreaPropsWithLabel) & TextAreaCommonProps;\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 _TextArea: React.ForwardRefRenderFunction<BladeElementRef, TextAreaProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition,\n    necessityIndicator,\n    errorText,\n    helpText,\n    successText,\n    validationState,\n    defaultValue,\n    isDisabled,\n    isRequired,\n    name,\n    onChange,\n    onFocus,\n    onBlur,\n    onSubmit,\n    placeholder,\n    value,\n    maxCharacters,\n    showClearButton,\n    onClearButtonClick,\n    autoFocus,\n    numberOfLines = 2,\n    testID,\n    ...styledProps\n  },\n  ref,\n) => {\n  const inputRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, inputRef);\n\n  const [shouldShowClearButton, setShouldShowClearButton] = React.useState(false);\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (value?.length || defaultValue?.length)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): React.ReactNode => {\n    if (shouldShowClearButton) {\n      return (\n        <BaseBox paddingTop=\"spacing.3\" marginTop=\"spacing.1\">\n          <IconButton\n            icon={CloseIcon}\n            accessibilityLabel=\"Clear textarea content\"\n            onClick={() => {\n              if (isEmpty(value) && inputRef.current) {\n                // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n                if (isReactNative(inputRef.current)) {\n                  inputRef.current.clear();\n                  inputRef.current.focus();\n                } else if (inputRef.current instanceof HTMLTextAreaElement) {\n                  inputRef.current.value = '';\n                  inputRef.current.focus();\n                }\n              }\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              inputRef?.current?.focus();\n              setShouldShowClearButton(false);\n            }}\n          />\n        </BaseBox>\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      as=\"textarea\"\n      id=\"textarea\"\n      componentName={MetaConstants.TextArea}\n      autoFocus={autoFocus}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      necessityIndicator={necessityIndicator}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      validationState={validationState}\n      isDisabled={isDisabled}\n      isRequired={isRequired}\n      name={name}\n      maxCharacters={maxCharacters}\n      placeholder={placeholder}\n      interactionElement={renderInteractionElement()}\n      defaultValue={defaultValue}\n      value={value}\n      numberOfLines={numberOfLines}\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        onChange?.({ name, value });\n      }}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onSubmit={onSubmit}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop=\"spacing.2\" marginRight=\"spacing.1\">\n            <CharacterCounter currentCount={value?.length ?? 0} maxCount={maxCharacters} />\n          </BaseBox>\n        ) : null;\n      }}\n      testID={testID}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextArea = assignWithoutSideEffects(React.forwardRef(_TextArea), {\n  displayName: 'TextArea',\n});\n\nexport type { TextAreaProps };\nexport { TextArea };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextArea","_ref","ref","label","accessibilityLabel","labelPosition","necessityIndicator","errorText","helpText","successText","validationState","defaultValue","isDisabled","isRequired","name","onChange","onFocus","onBlur","onSubmit","placeholder","value","maxCharacters","showClearButton","onClearButtonClick","autoFocus","_ref$numberOfLines","numberOfLines","testID","styledProps","_objectWithoutProperties","_excluded","inputRef","React","useRef","mergedRef","useMergeRefs","_React$useState","useState","_React$useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","useEffect","Boolean","length","renderInteractionElement","_jsx","BaseBox","paddingTop","marginTop","children","IconButton","icon","CloseIcon","onClick","_inputRef$current","isEmpty","current","clear","focus","HTMLTextAreaElement","BaseInput","Object","assign","as","id","componentName","MetaConstants","TextArea","hideLabelText","interactionElement","_ref2","trailingFooterSlot","_value$length","marginRight","CharacterCounter","currentCount","maxCount","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sources":["../../../../../../src/components/Input/TextArea/TextArea.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport React from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef } from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\n\ntype TextAreaCommonProps = 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  | 'onSubmit'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'numberOfLines'\n  | 'testID'\n  | 'size'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n} & StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextAreaPropsWithA11yLabel = {\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 TextAreaPropsWithLabel = {\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 TextAreaProps = (TextAreaPropsWithA11yLabel | TextAreaPropsWithLabel) & TextAreaCommonProps;\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 _TextArea: React.ForwardRefRenderFunction<BladeElementRef, TextAreaProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition,\n    necessityIndicator,\n    errorText,\n    helpText,\n    successText,\n    validationState,\n    defaultValue,\n    isDisabled,\n    isRequired,\n    name,\n    onChange,\n    onFocus,\n    onBlur,\n    onSubmit,\n    placeholder,\n    value,\n    maxCharacters,\n    showClearButton,\n    onClearButtonClick,\n    autoFocus,\n    numberOfLines = 2,\n    testID,\n    size = 'medium',\n    ...styledProps\n  },\n  ref,\n) => {\n  const inputRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, inputRef);\n\n  const [shouldShowClearButton, setShouldShowClearButton] = React.useState(false);\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (value?.length || defaultValue?.length)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): React.ReactNode => {\n    if (shouldShowClearButton) {\n      return (\n        <BaseBox paddingTop=\"spacing.3\" marginTop=\"spacing.1\">\n          <IconButton\n            icon={CloseIcon}\n            accessibilityLabel=\"Clear textarea content\"\n            onClick={() => {\n              if (isEmpty(value) && inputRef.current) {\n                // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n                if (isReactNative(inputRef.current)) {\n                  inputRef.current.clear();\n                  inputRef.current.focus();\n                } else if (inputRef.current instanceof HTMLTextAreaElement) {\n                  inputRef.current.value = '';\n                  inputRef.current.focus();\n                }\n              }\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              inputRef?.current?.focus();\n              setShouldShowClearButton(false);\n            }}\n          />\n        </BaseBox>\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      as=\"textarea\"\n      id=\"textarea\"\n      componentName={MetaConstants.TextArea}\n      autoFocus={autoFocus}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      necessityIndicator={necessityIndicator}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      validationState={validationState}\n      isDisabled={isDisabled}\n      isRequired={isRequired}\n      name={name}\n      maxCharacters={maxCharacters}\n      placeholder={placeholder}\n      interactionElement={renderInteractionElement()}\n      defaultValue={defaultValue}\n      value={value}\n      numberOfLines={numberOfLines}\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        onChange?.({ name, value });\n      }}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onSubmit={onSubmit}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter currentCount={value?.length ?? 0} maxCount={maxCharacters} />\n          </BaseBox>\n        ) : null;\n      }}\n      testID={testID}\n      size={size}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextArea = assignWithoutSideEffects(React.forwardRef(_TextArea), {\n  displayName: 'TextArea',\n});\n\nexport type { TextAreaProps };\nexport { TextArea };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextArea","_ref","ref","label","accessibilityLabel","labelPosition","necessityIndicator","errorText","helpText","successText","validationState","defaultValue","isDisabled","isRequired","name","onChange","onFocus","onBlur","onSubmit","placeholder","value","maxCharacters","showClearButton","onClearButtonClick","autoFocus","_ref$numberOfLines","numberOfLines","testID","_ref$size","size","styledProps","_objectWithoutProperties","_excluded","inputRef","React","useRef","mergedRef","useMergeRefs","_React$useState","useState","_React$useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","useEffect","Boolean","length","renderInteractionElement","_jsx","BaseBox","paddingTop","marginTop","children","IconButton","icon","CloseIcon","onClick","_inputRef$current","isEmpty","current","clear","focus","HTMLTextAreaElement","BaseInput","Object","assign","as","id","componentName","MetaConstants","TextArea","hideLabelText","interactionElement","_ref2","trailingFooterSlot","_value$length","hintMarginTop","marginRight","CharacterCounter","currentCount","maxCount","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

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

@@ -24,8 +24,9 @@ import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
 import { Spinner } from '../../Spinner/Spinner/Spinner.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 import { useMergeRefs } from '../../../utils/useMergeRefs.js';
+import { hintMarginTop } from '../../Form/formTokens.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"];var getKeyboardAndAutocompleteProps=function getKeyboardAndAutocompleteProps(_ref){var _ref$type=_ref.type,type=_ref$type===void 0?'text':_ref$type,keyboardReturnKeyType=_ref.keyboardReturnKeyType,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType,autoCapitalize=_ref.autoCapitalize;var keyboardAndAutocompleteProps={type:type,keyboardType:'text',keyboardReturnKeyType:'default',autoCompleteSuggestionType:'none',autoCapitalize:autoCapitalize};var keyboardConfigMap={text:{keyboardType:'text',keyboardReturnKeyType:'default',autoCompleteSuggestionType:'none',autoCapitalize:undefined},telephone:{keyboardType:'telephone',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'telephone',autoCapitalize:undefined},email:{keyboardType:'email',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'email',autoCapitalize:'none'},url:{keyboardType:'url',keyboardReturnKeyType:'go',autoCompleteSuggestionType:'none',autoCapitalize:'none'},number:{keyboardType:'decimal',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'none',autoCapitalize:undefined},search:{keyboardType:'search',keyboardReturnKeyType:'search',autoCompleteSuggestionType:'none',autoCapitalize:undefined}};var keyboardConfig=keyboardConfigMap[type];keyboardAndAutocompleteProps.keyboardType=keyboardConfig.keyboardType;keyboardAndAutocompleteProps.keyboardReturnKeyType=keyboardReturnKeyType!=null?keyboardReturnKeyType:keyboardConfig.keyboardReturnKeyType;keyboardAndAutocompleteProps.autoCompleteSuggestionType=autoCompleteSuggestionType!=null?autoCompleteSuggestionType:keyboardConfig.autoCompleteSuggestionType;keyboardAndAutocompleteProps.autoCapitalize=keyboardConfig.autoCapitalize;if(type==='number'){keyboardAndAutocompleteProps.type='text';}if(type==='search'){keyboardAndAutocompleteProps.type='text';}return keyboardAndAutocompleteProps;};var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextInput=function _TextInput(_ref2,ref){var label=_ref2.label,accessibilityLabel=_ref2.accessibilityLabel,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?'top':_ref2$labelPosition,placeholder=_ref2.placeholder,_ref2$type=_ref2.type,type=_ref2$type===void 0?'text':_ref2$type,defaultValue=_ref2.defaultValue,name=_ref2.name,value=_ref2.value,maxCharacters=_ref2.maxCharacters,_onChange=_ref2.onChange,onClick=_ref2.onClick,onFocus=_ref2.onFocus,onBlur=_ref2.onBlur,onSubmit=_ref2.onSubmit,isDisabled=_ref2.isDisabled,necessityIndicator=_ref2.necessityIndicator,validationState=_ref2.validationState,errorText=_ref2.errorText,helpText=_ref2.helpText,successText=_ref2.successText,isRequired=_ref2.isRequired,icon=_ref2.icon,prefix=_ref2.prefix,showClearButton=_ref2.showClearButton,onClearButtonClick=_ref2.onClearButtonClick,isLoading=_ref2.isLoading,suffix=_ref2.suffix,autoFocus=_ref2.autoFocus,keyboardReturnKeyType=_ref2.keyboardReturnKeyType,autoCompleteSuggestionType=_ref2.autoCompleteSuggestionType,autoCapitalize=_ref2.autoCapitalize,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_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];React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&(defaultValue!=null?defaultValue:value)));},[showClearButton,defaultValue,value]);var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content"});}if(shouldShowClearButton){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();}}onClearButtonClick==null?void 0:onClearButtonClick();textInputRef==null?void 0:(_textInputRef$current=textInputRef.current)==null?void 0:_textInputRef$current.focus();setShouldShowClearButton(false);},accessibilityLabel:"Clear Input Content"});}return null;};return jsx(BaseInput,Object.assign({id:"textinput",componentName:MetaConstants.TextInput,ref:mergedRef,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,placeholder:placeholder,defaultValue:defaultValue,value:value,name:name,maxCharacters:maxCharacters,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);}_onChange==null?void 0:_onChange({name:name,value:value});},onClick:onClick,onFocus:onFocus,onBlur:onBlur,onSubmit:onSubmit,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,leadingIcon:icon,prefix:prefix,interactionElement:renderInteractionElement(),suffix:suffix,validationState:validationState,errorText:errorText,helpText:helpText,successText:successText,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:"spacing.2",marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;},autoFocus:autoFocus,testID:testID},getKeyboardAndAutocompleteProps({type:type,keyboardReturnKeyType:keyboardReturnKeyType,autoCompleteSuggestionType:autoCompleteSuggestionType,autoCapitalize:autoCapitalize}),styledProps));};var TextInput=assignWithoutSideEffects(React__default.forwardRef(_TextInput),{displayName:'TextInput'});
+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"];var getKeyboardAndAutocompleteProps=function getKeyboardAndAutocompleteProps(_ref){var _ref$type=_ref.type,type=_ref$type===void 0?'text':_ref$type,keyboardReturnKeyType=_ref.keyboardReturnKeyType,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType,autoCapitalize=_ref.autoCapitalize;var keyboardAndAutocompleteProps={type:type,keyboardType:'text',keyboardReturnKeyType:'default',autoCompleteSuggestionType:'none',autoCapitalize:autoCapitalize};var keyboardConfigMap={text:{keyboardType:'text',keyboardReturnKeyType:'default',autoCompleteSuggestionType:'none',autoCapitalize:undefined},telephone:{keyboardType:'telephone',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'telephone',autoCapitalize:undefined},email:{keyboardType:'email',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'email',autoCapitalize:'none'},url:{keyboardType:'url',keyboardReturnKeyType:'go',autoCompleteSuggestionType:'none',autoCapitalize:'none'},number:{keyboardType:'decimal',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'none',autoCapitalize:undefined},search:{keyboardType:'search',keyboardReturnKeyType:'search',autoCompleteSuggestionType:'none',autoCapitalize:undefined}};var keyboardConfig=keyboardConfigMap[type];keyboardAndAutocompleteProps.keyboardType=keyboardConfig.keyboardType;keyboardAndAutocompleteProps.keyboardReturnKeyType=keyboardReturnKeyType!=null?keyboardReturnKeyType:keyboardConfig.keyboardReturnKeyType;keyboardAndAutocompleteProps.autoCompleteSuggestionType=autoCompleteSuggestionType!=null?autoCompleteSuggestionType:keyboardConfig.autoCompleteSuggestionType;keyboardAndAutocompleteProps.autoCapitalize=keyboardConfig.autoCapitalize;if(type==='number'){keyboardAndAutocompleteProps.type='text';}if(type==='search'){keyboardAndAutocompleteProps.type='text';}return keyboardAndAutocompleteProps;};var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextInput=function _TextInput(_ref2,ref){var label=_ref2.label,accessibilityLabel=_ref2.accessibilityLabel,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?'top':_ref2$labelPosition,placeholder=_ref2.placeholder,_ref2$type=_ref2.type,type=_ref2$type===void 0?'text':_ref2$type,defaultValue=_ref2.defaultValue,name=_ref2.name,value=_ref2.value,maxCharacters=_ref2.maxCharacters,_onChange=_ref2.onChange,onClick=_ref2.onClick,onFocus=_ref2.onFocus,onBlur=_ref2.onBlur,onSubmit=_ref2.onSubmit,isDisabled=_ref2.isDisabled,necessityIndicator=_ref2.necessityIndicator,validationState=_ref2.validationState,errorText=_ref2.errorText,helpText=_ref2.helpText,successText=_ref2.successText,isRequired=_ref2.isRequired,icon=_ref2.icon,prefix=_ref2.prefix,showClearButton=_ref2.showClearButton,onClearButtonClick=_ref2.onClearButtonClick,isLoading=_ref2.isLoading,suffix=_ref2.suffix,autoFocus=_ref2.autoFocus,keyboardReturnKeyType=_ref2.keyboardReturnKeyType,autoCompleteSuggestionType=_ref2.autoCompleteSuggestionType,autoCapitalize=_ref2.autoCapitalize,testID=_ref2.testID,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,leadingIcon=_ref2.leadingIcon,trailingIcon=_ref2.trailingIcon,styledProps=_objectWithoutProperties(_ref2,_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];React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&(defaultValue!=null?defaultValue:value)));},[showClearButton,defaultValue,value]);var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content",color:"primary"});}if(shouldShowClearButton){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();}}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"});}return null;};return jsx(BaseInput,Object.assign({id:"textinput",componentName:MetaConstants.TextInput,ref:mergedRef,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,placeholder:placeholder,defaultValue:defaultValue,value:value,name:name,maxCharacters:maxCharacters,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);}_onChange==null?void 0:_onChange({name:name,value:value});},onClick:onClick,onFocus:onFocus,onBlur:onBlur,onSubmit:onSubmit,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,leadingIcon:leadingIcon!=null?leadingIcon:icon,prefix:prefix,interactionElement:renderInteractionElement(),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},styledProps));};var TextInput=assignWithoutSideEffects(React__default.forwardRef(_TextInput),{displayName:'TextInput'});
 
 export { TextInput };
 //# sourceMappingURL=TextInput.js.map