@razorpay/blade 12.68.0 → 12.89.0

package/build/lib/native/components/Input/BaseInput/useTaggedInput.js

@@ -4,6 +4,8 @@ import React__default from 'react';
 import { getTagsGroup } from '../../Tag/getTagsGroup.js';
 import 'react-native';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
+import '../../../tokens/global/typography.js';
+import '../../../tokens/global/motion.js';
 import '../../BladeProvider/useTheme.js';
 import { useControllableState } from '../../../utils/useControllable.js';
 

package/build/lib/native/components/Input/BaseInput/useTaggedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTaggedInput.js","sources":["../../../../../../src/components/Input/BaseInput/useTaggedInput.ts"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport type { BladeElementRefWithValue } from '~utils/types';\nimport type { FormInputOnEvent, FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport { isReactNative } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\n\ntype TaggedInputProps = {\n  isTaggedInput?: boolean;\n  tags?: string[];\n  onTagChange?: ({ tags }: { tags: string[] }) => void;\n};\n\ntype UseTaggedInputProps = TaggedInputProps &\n  Pick<BaseInputProps, 'isDisabled' | 'onChange' | 'name' | 'value' | 'defaultValue'> & {\n    inputRef: React.RefObject<BladeElementRefWithValue | null>;\n  };\n\ntype UseTaggedInputReturn = {\n  activeTagIndex: number;\n  setActiveTagIndex: (activeTagIndex: number) => void;\n  getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];\n  handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;\n  handleTaggedInputChange: FormInputOnEvent;\n  handleTagsClear: () => void;\n};\n\nconst useTaggedInput = ({\n  tags,\n  isDisabled,\n  onTagChange,\n  isTaggedInput,\n  inputRef,\n  onChange,\n  name,\n  value,\n  defaultValue,\n}: UseTaggedInputProps): UseTaggedInputReturn => {\n  const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n  const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');\n  const [tagsValue, setTagsValue] = useControllableState({\n    value: tags,\n    defaultValue: [],\n    onChange: (tags) => {\n      onTagChange?.({ tags });\n    },\n  });\n\n  const getNewTagsArray = (indexToRemove: number): string[] => {\n    const currentTags = tagsValue;\n\n    if (!currentTags) {\n      return [];\n    }\n\n    // Check if the index is valid\n    if (indexToRemove < 0 || indexToRemove >= currentTags.length) {\n      return currentTags; // Return the original array\n    }\n\n    // Create a new array without the element at the specified index\n    const newArray = currentTags\n      .slice(0, indexToRemove)\n      .concat(currentTags.slice(indexToRemove + 1));\n\n    return newArray;\n  };\n\n  const getTags = React.useMemo(\n    () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {\n      return getTagsGroup({\n        size,\n        tags: tagsValue,\n        activeTagIndex,\n        isDisabled,\n        onDismiss: ({ tagIndex }) => {\n          setTagsValue(() => getNewTagsArray(tagIndex));\n        },\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeTagIndex, tags, tagsValue, isDisabled],\n  );\n\n  const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {\n    if (!isTaggedInput) {\n      return;\n    }\n    setInputValueUncontrolled(value ?? '');\n  };\n\n  const handleTagsClear = (): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    setTagsValue(() => []);\n  };\n\n  const clearInput = (): void => {\n    const isControlledValue = value !== undefined;\n\n    if (isControlledValue) {\n      // In Controlled component, we don't clear input ourselves. We just call onChange with empty value\n      onChange?.({ name, value: '' });\n      return;\n    }\n\n    if (!inputRef.current) {\n      return;\n    }\n\n    setInputValueUncontrolled('');\n\n    if (isReactNative()) {\n      setTimeout(() => {\n        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n        // @ts-ignore: clear does exist in react native\n        inputRef.current?.clear();\n      }, 10);\n      return;\n    }\n\n    inputRef.current.value = '';\n  };\n\n  const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    const currentTags = tagsValue;\n    const isControlledValue = value !== undefined;\n    const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();\n    if (e.key === 'Enter' || e.key === ',') {\n      e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs\n      if (inputValue) {\n        setTagsValue(() => [...currentTags, inputValue]);\n        clearInput();\n        setActiveTagIndex(-1);\n      }\n    }\n    if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {\n      setTagsValue(() => currentTags.slice(0, -1));\n    }\n  };\n\n  return {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  };\n};\n\nexport type { TaggedInputProps };\nexport { useTaggedInput };\n"],"names":["useTaggedInput","_ref","tags","isDisabled","onTagChange","isTaggedInput","inputRef","onChange","name","value","defaultValue","_React$useState","React","useState","_React$useState2","_slicedToArray","activeTagIndex","setActiveTagIndex","_React$useState3","_React$useState4","inputValueUncontrolled","setInputValueUncontrolled","_useControllableState","useControllableState","_useControllableState2","tagsValue","setTagsValue","getNewTagsArray","indexToRemove","currentTags","length","newArray","slice","concat","getTags","useMemo","_ref2","size","getTagsGroup","onDismiss","_ref3","tagIndex","handleTaggedInputChange","_ref4","handleTagsClear","clearInput","isControlledValue","undefined","current","isReactNative","setTimeout","_inputRef$current","clear","handleTaggedInputKeydown","e","inputValue","trim","key","event","preventDefault","_toConsumableArray"],"mappings":"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"}
+{"version":3,"file":"useTaggedInput.js","sources":["../../../../../../src/components/Input/BaseInput/useTaggedInput.ts"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport type { BladeElementRefWithValue } from '~utils/types';\nimport type { FormInputOnEvent, FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport { isReactNative } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\n\ntype TaggedInputProps = {\n  isTaggedInput?: boolean;\n  tags?: string[];\n  onTagChange?: ({ tags }: { tags: string[] }) => void;\n};\n\ntype UseTaggedInputProps = TaggedInputProps &\n  Pick<BaseInputProps, 'isDisabled' | 'onChange' | 'name' | 'value' | 'defaultValue'> & {\n    inputRef: React.RefObject<BladeElementRefWithValue | null>;\n  };\n\ntype UseTaggedInputReturn = {\n  activeTagIndex: number;\n  setActiveTagIndex: (activeTagIndex: number) => void;\n  getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];\n  handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;\n  handleTaggedInputChange: FormInputOnEvent;\n  handleTagsClear: () => void;\n};\n\nconst useTaggedInput = ({\n  tags,\n  isDisabled,\n  onTagChange,\n  isTaggedInput,\n  inputRef,\n  onChange,\n  name,\n  value,\n  defaultValue,\n}: UseTaggedInputProps): UseTaggedInputReturn => {\n  const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n  const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');\n  const [tagsValue, setTagsValue] = useControllableState({\n    value: tags,\n    defaultValue: [],\n    onChange: (tags) => {\n      onTagChange?.({ tags });\n    },\n  });\n\n  const getNewTagsArray = (indexToRemove: number): string[] => {\n    const currentTags = tagsValue;\n\n    if (!currentTags) {\n      return [];\n    }\n\n    // Check if the index is valid\n    if (indexToRemove < 0 || indexToRemove >= currentTags.length) {\n      return currentTags; // Return the original array\n    }\n\n    // Create a new array without the element at the specified index\n    const newArray = currentTags\n      .slice(0, indexToRemove)\n      .concat(currentTags.slice(indexToRemove + 1));\n\n    return newArray;\n  };\n\n  const getTags = React.useMemo(\n    () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {\n      return getTagsGroup({\n        size,\n        tags: tagsValue,\n        activeTagIndex,\n        isDisabled,\n        onDismiss: ({ tagIndex }) => {\n          setTagsValue(() => getNewTagsArray(tagIndex));\n        },\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeTagIndex, tags, tagsValue, isDisabled],\n  );\n\n  const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {\n    if (!isTaggedInput) {\n      return;\n    }\n    setInputValueUncontrolled(value ?? '');\n  };\n\n  const handleTagsClear = (): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    setTagsValue(() => []);\n  };\n\n  const clearInput = (): void => {\n    const isControlledValue = value !== undefined;\n\n    if (isControlledValue) {\n      // In Controlled component, we don't clear input ourselves. We just call onChange with empty value\n      onChange?.({ name, value: '' });\n      return;\n    }\n\n    if (!inputRef.current) {\n      return;\n    }\n\n    setInputValueUncontrolled('');\n\n    if (isReactNative()) {\n      setTimeout(() => {\n        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n        // @ts-ignore: clear does exist in react native\n        inputRef.current?.clear();\n      }, 10);\n      return;\n    }\n\n    inputRef.current.value = '';\n  };\n\n  const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    const currentTags = tagsValue;\n    const isControlledValue = value !== undefined;\n    const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();\n    if (e.key === 'Enter' || e.key === ',') {\n      e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs\n      if (inputValue) {\n        setTagsValue(() => [...currentTags, inputValue]);\n        clearInput();\n        setActiveTagIndex(-1);\n      }\n    }\n    if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {\n      setTagsValue(() => currentTags.slice(0, -1));\n    }\n  };\n\n  return {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  };\n};\n\nexport type { TaggedInputProps };\nexport { useTaggedInput };\n"],"names":["useTaggedInput","_ref","tags","isDisabled","onTagChange","isTaggedInput","inputRef","onChange","name","value","defaultValue","_React$useState","React","useState","_React$useState2","_slicedToArray","activeTagIndex","setActiveTagIndex","_React$useState3","_React$useState4","inputValueUncontrolled","setInputValueUncontrolled","_useControllableState","useControllableState","_useControllableState2","tagsValue","setTagsValue","getNewTagsArray","indexToRemove","currentTags","length","newArray","slice","concat","getTags","useMemo","_ref2","size","getTagsGroup","onDismiss","_ref3","tagIndex","handleTaggedInputChange","_ref4","handleTagsClear","clearInput","isControlledValue","undefined","current","isReactNative","setTimeout","_inputRef$current","clear","handleTaggedInputKeydown","e","inputValue","trim","key","event","preventDefault","_toConsumableArray"],"mappings":"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"}

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

@@ -7,6 +7,8 @@ import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
 import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
 import 'react-native';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
+import '../../../tokens/global/typography.js';
+import '../../../tokens/global/motion.js';
 import '../../BladeProvider/useTheme.js';
 import { jsx } from 'react/jsx-runtime';
 

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

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.js","sources":["../../../../../../src/components/Input/DropdownInputTriggers/AutoComplete.tsx"],"sourcesContent":["import React from 'react';\nimport { useDropdown } from '../../Dropdown/useDropdown';\nimport type { AutoCompleteProps, BaseDropdownInputTriggerProps } from './types';\nimport { BaseDropdownInputTrigger } from './BaseDropdownInputTrigger';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { isReactNative } from '~utils';\n\nconst useAutoComplete = ({\n  props,\n  inputValue,\n  setInputValue,\n  getOptionValues,\n}: {\n  props: AutoCompleteProps;\n  setInputValue: (inputValue: string) => void;\n  inputValue: string;\n  getOptionValues: () => string[];\n}): {\n  onTriggerKeydown: BaseDropdownInputTriggerProps['onTriggerKeydown'];\n  onSelectionChange: BaseDropdownInputTriggerProps['onChange'];\n  onInputValueChange: BaseDropdownInputTriggerProps['onInputValueChange'];\n} => {\n  const {\n    onTriggerKeydown: onBaseDropdownInputKeydown,\n    isOpen,\n    setIsOpen,\n    selectedIndices,\n    setSelectedIndices,\n    setControlledValueIndices,\n    isControlled,\n    options,\n    setFilteredValues: setGlobalFilteredValues,\n    activeTagIndex,\n    setActiveTagIndex,\n    setActiveIndex,\n    filteredValues: globalFilteredValues,\n    selectionType,\n    triggererRef,\n    hasAutoCompleteInHeader,\n  } = useDropdown();\n\n  const resetFilters = (): void => setGlobalFilteredValues(getOptionValues());\n\n  // Makes sure that first item is always in focus\n  React.useEffect((): void => {\n    const firstItemOptionIndex = options.findIndex(\n      (option) => option.value === globalFilteredValues[0],\n    );\n\n    if (firstItemOptionIndex >= 0) {\n      setActiveIndex(firstItemOptionIndex);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [globalFilteredValues.length, options.length]);\n\n  // When input is empty or its single select, we want all items to be shown in filter on open of dropdown\n  React.useEffect(() => {\n    if (isOpen && !inputValue) {\n      resetFilters();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, options]);\n\n  React.useEffect(() => {\n    if (isOpen && selectionType === 'single') {\n      resetFilters();\n    }\n\n    // Just setting autoFocus is setting the input in focus state but its not showing keyboard active.\n    // We do this in web to get around that\n    if (hasAutoCompleteInHeader && isOpen && !isReactNative()) {\n      triggererRef.current?.focus();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const onInputValueChange: BaseDropdownInputTriggerProps['onInputValueChange'] = ({\n    name,\n    value,\n  }) => {\n    setInputValue(value ?? '');\n    props.onInputValueChange?.({ name, value });\n    setActiveTagIndex(-1);\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    // default filtering when filteredValues is uncontrolled\n    if (!props.filteredValues) {\n      // eslint-disable-next-line no-lonely-if\n      if (value && options && options.length > 0) {\n        const filteredOptions = getOptionValues().filter((optionValue) =>\n          String(optionValue).toLowerCase().includes(value.toLowerCase()),\n        );\n        setGlobalFilteredValues(filteredOptions);\n      } else {\n        resetFilters();\n      }\n    }\n  };\n\n  const onTriggerKeydown: BaseDropdownInputTriggerProps['onTriggerKeydown'] = (e) => {\n    // Pressing backspace on empty input should remove the last tag\n    if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && selectedIndices.length > 0) {\n      if (isControlled) {\n        setControlledValueIndices(selectedIndices.slice(0, -1));\n      } else {\n        setSelectedIndices(selectedIndices.slice(0, -1));\n      }\n    }\n    onBaseDropdownInputKeydown?.(e);\n  };\n\n  const onSelectionChange: BaseDropdownInputTriggerProps['onChange'] = ({ values }) => {\n    console.log('selection change', values);\n    if (selectionType === 'multiple') {\n      setInputValue('');\n      props.onInputValueChange?.({ name: props.name, value: '' });\n      setActiveTagIndex(-1);\n      resetFilters();\n    } else {\n      const displayText = options.find((option) => option.value === values[0])?.title;\n      props.onInputValueChange?.({\n        name: props.name,\n        value: displayText,\n      });\n      // Use displayText as inputValue only if its not controlled by user\n      if (hasAutoCompleteInHeader) {\n        setInputValue('');\n      } else if (typeof props.value === 'undefined') {\n        setInputValue(displayText ?? '');\n      }\n    }\n    props.onChange?.({ name: props.name, values });\n  };\n  return {\n    onSelectionChange,\n    onTriggerKeydown,\n    onInputValueChange,\n  };\n};\n\nconst _AutoComplete = (\n  props: AutoCompleteProps,\n  ref: React.ForwardedRef<BladeElementRef>,\n): React.ReactElement => {\n  const [uncontrolledInputValue, setInputValue] = React.useState('');\n  const inputValue = props.inputValue ?? uncontrolledInputValue;\n\n  const {\n    options,\n    setFilteredValues: setGlobalFilteredValues,\n    hasAutoCompleteInHeader,\n    setHasAutoCompleteInHeader,\n    onTriggerClick,\n    dropdownTriggerer,\n  } = useDropdown();\n\n  const getOptionValues = React.useCallback(() => {\n    return options.map((option) => option.value);\n  }, [options]);\n\n  const { onSelectionChange, onTriggerKeydown, onInputValueChange } = useAutoComplete({\n    props,\n    inputValue,\n    setInputValue,\n    getOptionValues,\n  });\n\n  React.useEffect(() => {\n    if (dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete) {\n      // When AutoComplete is mounted but not as trigger,\n      // it has to be somewhere in the BottomSheet (most likely header based on UI but works in other parts too)\n      setHasAutoCompleteInHeader(true);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // handles controlled filteredValues state (syncs it with our global filteredValues)\n  React.useEffect(() => {\n    if (props.filteredValues) {\n      setGlobalFilteredValues(props.filteredValues);\n    }\n  }, [props.filteredValues, setGlobalFilteredValues]);\n\n  // set autoFocus to true when used inside bottomsheet\n  const defaultAutoFocusState = hasAutoCompleteInHeader ? true : undefined;\n\n  return (\n    <BaseBox position=\"relative\">\n      <BaseDropdownInputTrigger\n        {...props}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={props.autoFocus ?? defaultAutoFocusState}\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        ref={ref as any}\n        onChange={onSelectionChange}\n        isSelectInput={false}\n        inputValue={inputValue}\n        syncInputValueWithSelection={(value) => {\n          if (!value) {\n            setInputValue('');\n            return;\n          }\n          const selectedOption = options.find((option) => option.value === value);\n          setInputValue(selectedOption?.title ?? '');\n        }}\n        onTriggerKeydown={onTriggerKeydown}\n        onInputValueChange={onInputValueChange}\n        onTriggerClick={(triggerEvent) => {\n          if (!hasAutoCompleteInHeader) {\n            // we don't want clicking on autocomplete to open / close Dropdown when it is used inside BottomSheet's header\n            onTriggerClick();\n          }\n          props?.onClick?.(triggerEvent);\n        }}\n      />\n    </BaseBox>\n  );\n};\n\n/**\n * ### AutoComplete\n *\n * Extension on top of SelectInput which allows you type and filter between ActionList items\n *\n * To be used in combination of `Dropdown` and `ActionList` component\n *\n * ---\n *\n * #### Usage in Desktop\n *\n * ```diff\n * <Dropdown>\n * + <AutoComplete label=\"Select Fruits\" />\n *   <DropdownOverlay>\n *     <ActionList>\n *       <ActionListItem title=\"Mango\" value=\"mango\" />\n *       <ActionListItem title=\"Apple\" value=\"apple\" />\n *     </ActionList>\n *   </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n * #### Usage in Mobile\n *\n * ```diff\n * <Dropdown>\n * + <SelectInput label=\"Select Fruits\" />\n *   <BottomSheet>\n *      <BottomSheetHeader>\n * +      <AutoComplete label=\"Select Fruits\" />\n *      </BottomSheetHeader>\n *      <BottomSheetBody>\n *       <ActionList>\n *         <ActionListItem title=\"Mango\" value=\"mango\" />\n *         <ActionListItem title=\"Apple\" value=\"apple\" />\n *       </ActionList>\n *      </BottomSheetBody>\n *   </BottomSheet>\n * </Dropdown>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-autocomplete--with-single-select AutoComplete Documentation}.\n */\nconst AutoComplete = assignWithoutSideEffects(React.forwardRef(_AutoComplete), {\n  componentId: dropdownComponentIds.triggers.AutoComplete,\n});\n\nexport { AutoComplete };\n"],"names":["useAutoComplete","_ref","props","inputValue","setInputValue","getOptionValues","_useDropdown","useDropdown","onBaseDropdownInputKeydown","onTriggerKeydown","isOpen","setIsOpen","selectedIndices","setSelectedIndices","setControlledValueIndices","isControlled","options","setGlobalFilteredValues","setFilteredValues","activeTagIndex","setActiveTagIndex","setActiveIndex","globalFilteredValues","filteredValues","selectionType","triggererRef","hasAutoCompleteInHeader","resetFilters","React","useEffect","firstItemOptionIndex","findIndex","option","value","length","isReactNative","_triggererRef$current","current","focus","onInputValueChange","_ref2","name","filteredOptions","filter","optionValue","String","toLowerCase","includes","e","key","slice","onSelectionChange","_ref3","values","console","log","_options$find","displayText","find","title","onChange","_AutoComplete","ref","_props$inputValue","_props$autoFocus","_React$useState","useState","_React$useState2","_slicedToArray","uncontrolledInputValue","_useDropdown2","setHasAutoCompleteInHeader","onTriggerClick","dropdownTriggerer","useCallback","map","_useAutoComplete","dropdownComponentIds","triggers","AutoComplete","defaultAutoFocusState","undefined","_jsx","BaseBox","position","children","BaseDropdownInputTrigger","Object","assign","autoFocus","isSelectInput","syncInputValueWithSelection","_selectedOption$title","selectedOption","triggerEvent","onClick","assignWithoutSideEffects","forwardRef","componentId"],"mappings":"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"}
+{"version":3,"file":"AutoComplete.js","sources":["../../../../../../src/components/Input/DropdownInputTriggers/AutoComplete.tsx"],"sourcesContent":["import React from 'react';\nimport { useDropdown } from '../../Dropdown/useDropdown';\nimport type { AutoCompleteProps, BaseDropdownInputTriggerProps } from './types';\nimport { BaseDropdownInputTrigger } from './BaseDropdownInputTrigger';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { isReactNative } from '~utils';\n\nconst useAutoComplete = ({\n  props,\n  inputValue,\n  setInputValue,\n  getOptionValues,\n}: {\n  props: AutoCompleteProps;\n  setInputValue: (inputValue: string) => void;\n  inputValue: string;\n  getOptionValues: () => string[];\n}): {\n  onTriggerKeydown: BaseDropdownInputTriggerProps['onTriggerKeydown'];\n  onSelectionChange: BaseDropdownInputTriggerProps['onChange'];\n  onInputValueChange: BaseDropdownInputTriggerProps['onInputValueChange'];\n} => {\n  const {\n    onTriggerKeydown: onBaseDropdownInputKeydown,\n    isOpen,\n    setIsOpen,\n    selectedIndices,\n    setSelectedIndices,\n    setControlledValueIndices,\n    isControlled,\n    options,\n    setFilteredValues: setGlobalFilteredValues,\n    activeTagIndex,\n    setActiveTagIndex,\n    setActiveIndex,\n    filteredValues: globalFilteredValues,\n    selectionType,\n    triggererRef,\n    hasAutoCompleteInHeader,\n  } = useDropdown();\n\n  const resetFilters = (): void => setGlobalFilteredValues(getOptionValues());\n\n  // Makes sure that first item is always in focus\n  React.useEffect((): void => {\n    const firstItemOptionIndex = options.findIndex(\n      (option) => option.value === globalFilteredValues[0],\n    );\n\n    if (firstItemOptionIndex >= 0) {\n      setActiveIndex(firstItemOptionIndex);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [globalFilteredValues.length, options.length]);\n\n  // When input is empty or its single select, we want all items to be shown in filter on open of dropdown\n  React.useEffect(() => {\n    if (isOpen && !inputValue) {\n      resetFilters();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, options]);\n\n  React.useEffect(() => {\n    if (isOpen && selectionType === 'single') {\n      resetFilters();\n    }\n\n    // Just setting autoFocus is setting the input in focus state but its not showing keyboard active.\n    // We do this in web to get around that\n    if (hasAutoCompleteInHeader && isOpen && !isReactNative()) {\n      triggererRef.current?.focus();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const onInputValueChange: BaseDropdownInputTriggerProps['onInputValueChange'] = ({\n    name,\n    value,\n  }) => {\n    setInputValue(value ?? '');\n    props.onInputValueChange?.({ name, value });\n    setActiveTagIndex(-1);\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    // default filtering when filteredValues is uncontrolled\n    if (!props.filteredValues) {\n      // eslint-disable-next-line no-lonely-if\n      if (value && options && options.length > 0) {\n        const filteredOptions = getOptionValues().filter((optionValue) =>\n          String(optionValue).toLowerCase().includes(value.toLowerCase()),\n        );\n        setGlobalFilteredValues(filteredOptions);\n      } else {\n        resetFilters();\n      }\n    }\n  };\n\n  const onTriggerKeydown: BaseDropdownInputTriggerProps['onTriggerKeydown'] = (e) => {\n    // Pressing backspace on empty input should remove the last tag\n    if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && selectedIndices.length > 0) {\n      if (isControlled) {\n        setControlledValueIndices(selectedIndices.slice(0, -1));\n      } else {\n        setSelectedIndices(selectedIndices.slice(0, -1));\n      }\n    }\n    onBaseDropdownInputKeydown?.(e);\n  };\n\n  const onSelectionChange: BaseDropdownInputTriggerProps['onChange'] = ({ values }) => {\n    console.log('selection change', values);\n    if (selectionType === 'multiple') {\n      setInputValue('');\n      props.onInputValueChange?.({ name: props.name, value: '' });\n      setActiveTagIndex(-1);\n      resetFilters();\n    } else {\n      const displayText = options.find((option) => option.value === values[0])?.title;\n      props.onInputValueChange?.({\n        name: props.name,\n        value: displayText,\n      });\n      // Use displayText as inputValue only if its not controlled by user\n      if (hasAutoCompleteInHeader) {\n        setInputValue('');\n      } else if (typeof props.value === 'undefined') {\n        setInputValue(displayText ?? '');\n      }\n    }\n    props.onChange?.({ name: props.name, values });\n  };\n  return {\n    onSelectionChange,\n    onTriggerKeydown,\n    onInputValueChange,\n  };\n};\n\nconst _AutoComplete = (\n  props: AutoCompleteProps,\n  ref: React.ForwardedRef<BladeElementRef>,\n): React.ReactElement => {\n  const [uncontrolledInputValue, setInputValue] = React.useState('');\n  const inputValue = props.inputValue ?? uncontrolledInputValue;\n\n  const {\n    options,\n    setFilteredValues: setGlobalFilteredValues,\n    hasAutoCompleteInHeader,\n    setHasAutoCompleteInHeader,\n    onTriggerClick,\n    dropdownTriggerer,\n  } = useDropdown();\n\n  const getOptionValues = React.useCallback(() => {\n    return options.map((option) => option.value);\n  }, [options]);\n\n  const { onSelectionChange, onTriggerKeydown, onInputValueChange } = useAutoComplete({\n    props,\n    inputValue,\n    setInputValue,\n    getOptionValues,\n  });\n\n  React.useEffect(() => {\n    if (dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete) {\n      // When AutoComplete is mounted but not as trigger,\n      // it has to be somewhere in the BottomSheet (most likely header based on UI but works in other parts too)\n      setHasAutoCompleteInHeader(true);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // handles controlled filteredValues state (syncs it with our global filteredValues)\n  React.useEffect(() => {\n    if (props.filteredValues) {\n      setGlobalFilteredValues(props.filteredValues);\n    }\n  }, [props.filteredValues, setGlobalFilteredValues]);\n\n  // set autoFocus to true when used inside bottomsheet\n  const defaultAutoFocusState = hasAutoCompleteInHeader ? true : undefined;\n\n  return (\n    <BaseBox position=\"relative\">\n      <BaseDropdownInputTrigger\n        {...props}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={props.autoFocus ?? defaultAutoFocusState}\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        ref={ref as any}\n        onChange={onSelectionChange}\n        isSelectInput={false}\n        inputValue={inputValue}\n        syncInputValueWithSelection={(value) => {\n          if (!value) {\n            setInputValue('');\n            return;\n          }\n          const selectedOption = options.find((option) => option.value === value);\n          setInputValue(selectedOption?.title ?? '');\n        }}\n        onTriggerKeydown={onTriggerKeydown}\n        onInputValueChange={onInputValueChange}\n        onTriggerClick={(triggerEvent) => {\n          if (!hasAutoCompleteInHeader) {\n            // we don't want clicking on autocomplete to open / close Dropdown when it is used inside BottomSheet's header\n            onTriggerClick();\n          }\n          props?.onClick?.(triggerEvent);\n        }}\n      />\n    </BaseBox>\n  );\n};\n\n/**\n * ### AutoComplete\n *\n * Extension on top of SelectInput which allows you type and filter between ActionList items\n *\n * To be used in combination of `Dropdown` and `ActionList` component\n *\n * ---\n *\n * #### Usage in Desktop\n *\n * ```diff\n * <Dropdown>\n * + <AutoComplete label=\"Select Fruits\" />\n *   <DropdownOverlay>\n *     <ActionList>\n *       <ActionListItem title=\"Mango\" value=\"mango\" />\n *       <ActionListItem title=\"Apple\" value=\"apple\" />\n *     </ActionList>\n *   </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n * #### Usage in Mobile\n *\n * ```diff\n * <Dropdown>\n * + <SelectInput label=\"Select Fruits\" />\n *   <BottomSheet>\n *      <BottomSheetHeader>\n * +      <AutoComplete label=\"Select Fruits\" />\n *      </BottomSheetHeader>\n *      <BottomSheetBody>\n *       <ActionList>\n *         <ActionListItem title=\"Mango\" value=\"mango\" />\n *         <ActionListItem title=\"Apple\" value=\"apple\" />\n *       </ActionList>\n *      </BottomSheetBody>\n *   </BottomSheet>\n * </Dropdown>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-autocomplete--with-single-select AutoComplete Documentation}.\n */\nconst AutoComplete = assignWithoutSideEffects(React.forwardRef(_AutoComplete), {\n  componentId: dropdownComponentIds.triggers.AutoComplete,\n});\n\nexport { AutoComplete };\n"],"names":["useAutoComplete","_ref","props","inputValue","setInputValue","getOptionValues","_useDropdown","useDropdown","onBaseDropdownInputKeydown","onTriggerKeydown","isOpen","setIsOpen","selectedIndices","setSelectedIndices","setControlledValueIndices","isControlled","options","setGlobalFilteredValues","setFilteredValues","activeTagIndex","setActiveTagIndex","setActiveIndex","globalFilteredValues","filteredValues","selectionType","triggererRef","hasAutoCompleteInHeader","resetFilters","React","useEffect","firstItemOptionIndex","findIndex","option","value","length","isReactNative","_triggererRef$current","current","focus","onInputValueChange","_ref2","name","filteredOptions","filter","optionValue","String","toLowerCase","includes","e","key","slice","onSelectionChange","_ref3","values","console","log","_options$find","displayText","find","title","onChange","_AutoComplete","ref","_props$inputValue","_props$autoFocus","_React$useState","useState","_React$useState2","_slicedToArray","uncontrolledInputValue","_useDropdown2","setHasAutoCompleteInHeader","onTriggerClick","dropdownTriggerer","useCallback","map","_useAutoComplete","dropdownComponentIds","triggers","AutoComplete","defaultAutoFocusState","undefined","_jsx","BaseBox","position","children","BaseDropdownInputTrigger","Object","assign","autoFocus","isSelectInput","syncInputValueWithSelection","_selectedOption$title","selectedOption","triggerEvent","onClick","assignWithoutSideEffects","forwardRef","componentId"],"mappings":"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"}

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

@@ -5,6 +5,8 @@ import { useDropdown } from '../../Dropdown/useDropdown.js';
 import 'react-native';
 import '@babel/runtime/helpers/slicedToArray';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
+import '../../../tokens/global/typography.js';
+import '../../../tokens/global/motion.js';
 import '../../BladeProvider/useTheme.js';
 import { getActionListContainerRole } from '../../ActionList/getA11yRoles.js';
 import '@babel/runtime/helpers/defineProperty';

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 type { BaseInputProps } from '../BaseInput';\nimport { InputChevronIcon } from './InputChevronIcon';\nimport type { BaseDropdownInputTriggerProps } from './types';\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 { useTableContext } from '~components/Table/TableContext';\nimport {\n  rowDensityToIsTableInputCellMapping,\n  tableEditableCellRowDensityToInputSizeMap,\n  validationStateToInputTrailingIconMap,\n} from '~components/Table/tokens';\nimport { useTableEditableCell } from '~components/Table/TableEditableCellContext';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { useControlledDropdownInput } from '~utils/useControlledDropdownInput';\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    headerAutoCompleteRef,\n    triggererWrapperRef,\n    isTagDismissedRef,\n    onTriggerClick,\n    value,\n    shouldIgnoreBlurAnimation,\n    setShouldIgnoreBlurAnimation,\n    activeIndex,\n    hasFooterAction,\n    options,\n    removeOption,\n    setChangeCallbackTriggerer,\n    changeCallbackTriggerer,\n  } = useDropdown();\n  const { rowDensity } = useTableContext();\n  const { isInsideTableEditableCell } = useTableEditableCell();\n\n  const dropdownTriggerPlaceholder = props.placeholder ?? 'Select Option';\n  const isAutoCompleteInHeader =\n    !props.isSelectInput && dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete;\n\n  const getShowAllTags = React.useCallback((): boolean => {\n    if (isAutoCompleteInHeader) {\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  }, [isAutoCompleteInHeader, 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    triggererRef,\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  const tableInputProps: Partial<BaseInputProps> = {\n    isTableInputCell: rowDensityToIsTableInputCellMapping[rowDensity],\n    id: 'table-editable-cell-input',\n    size: tableEditableCellRowDensityToInputSizeMap[rowDensity],\n    trailingIcon: validationStateToInputTrailingIconMap[props.validationState ?? 'none'],\n    showHintsAsTooltip: true,\n  };\n\n  const isValidationStateNone =\n    props.validationState === 'none' || props.validationState === undefined;\n\n  return (\n    <BaseInput\n      as={props.isSelectInput ? 'button' : 'input'}\n      ref={\n        (isReactNative()\n          ? null\n          : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (node: any) => {\n              if (isAutoCompleteInHeader) {\n                headerAutoCompleteRef.current = node;\n              } else {\n                triggererRef.current = node;\n              }\n\n              if (ref) {\n                if (typeof ref === 'function') {\n                  ref(node);\n                } else {\n                  ref.current = node;\n                }\n              }\n            }) as never\n      }\n      isDropdownTrigger={true}\n      setInputWrapperRef={(wrapperNode) => {\n        // when autocomplete is in header, its not a trigger but a component inside of DropdownOverlay\n        if (!isAutoCompleteInHeader) {\n          triggererWrapperRef.current = wrapperNode;\n        }\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      valueSuffix={\n        typeof props.valueSuffix === 'function'\n          ? props.valueSuffix({\n              values: options\n                .filter((option, index) => selectedIndices.includes(index))\n                .map((option) => option.value),\n            })\n          : undefined\n      }\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      role={isAutoCompleteInHeader ? 'searchbox' : 'combobox'}\n      hasPopup={\n        isAutoCompleteInHeader\n          ? false\n          : getActionListContainerRole(hasFooterAction, dropdownTriggerer)\n      }\n      isPopupExpanded={isOpen}\n      activeDescendant={activeIndex >= 0 ? `${dropdownBaseId}-${activeIndex}` : undefined}\n      popupId={isAutoCompleteInHeader ? undefined : `${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      {...makeAnalyticsAttribute(props)}\n      onTrailingInteractionElementClick={() => {\n        if (!props.isDisabled) {\n          // Icon onClicks to the SelectInput itself\n          if (!isReactNative()) {\n            triggererRef.current?.focus();\n          }\n          onTriggerClick();\n        }\n      }}\n      trailingInteractionElement={\n        isAutoCompleteInHeader || (isInsideTableEditableCell && !isValidationStateNone) ? null : (\n          <InputChevronIcon isDisabled={props.isDisabled} isOpen={isOpen} />\n        )\n      }\n      {...(isInsideTableEditableCell ? tableInputProps : undefined)}\n      // When AutoComplete is present inside DropdownOverlay, the floating ui adds tabIndex -1 internally. We override it with tabIndex 0 here\n      tabIndex={isAutoCompleteInHeader ? 0 : undefined}\n    />\n  );\n};\n\nconst BaseDropdownInputTrigger = React.forwardRef(_BaseDropdownInputTrigger);\n\nexport { BaseDropdownInputTrigger };\n"],"names":["_BaseDropdownInputTrigger","props","ref","_props$placeholder","_props$validationStat","_props$maxRows","_props$label","_useDropdown","useDropdown","isOpen","activeTagIndex","setActiveTagIndex","displayValue","selectionType","dropdownTriggerer","dropdownBaseId","selectedIndices","triggererRef","headerAutoCompleteRef","triggererWrapperRef","isTagDismissedRef","onTriggerClick","value","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","activeIndex","hasFooterAction","options","removeOption","setChangeCallbackTriggerer","changeCallbackTriggerer","_useTableContext","useTableContext","rowDensity","_useTableEditableCell","useTableEditableCell","isInsideTableEditableCell","dropdownTriggerPlaceholder","placeholder","isAutoCompleteInHeader","isSelectInput","dropdownComponentIds","triggers","AutoComplete","getShowAllTags","React","useCallback","useControlledDropdownInput","onChange","name","defaultValue","syncInputValueWithSelection","getValue","prefix","labelPosition","label","undefined","inputValue","getTags","useMemo","_ref","size","getTagsGroup","tags","map","selectedIndex","_options$selectedInde","title","isDisabled","onDismiss","_ref2","tagIndex","current","isReactNative","_triggererRef$current","focus","Number","tableInputProps","isTableInputCell","rowDensityToIsTableInputCellMapping","id","tableEditableCellRowDensityToInputSizeMap","trailingIcon","validationStateToInputTrailingIconMap","validationState","showHintsAsTooltip","isValidationStateNone","_jsx","BaseInput","Object","assign","as","node","isDropdownTrigger","setInputWrapperRef","wrapperNode","maxTagRows","maxRows","showAllTags","textAlign","length","hideLabelText","accessibilityLabel","isLabelInsideInput","necessityIndicator","autoCompleteSuggestionType","helpText","errorText","successText","isRequired","suffix","valueSuffix","values","filter","option","index","includes","autoFocus","onClick","e","onFocus","onBlur","_ref3","leadingIcon","icon","componentName","MetaConstants","SelectInput","testID","labelId","role","hasPopup","getActionListContainerRole","isPopupExpanded","activeDescendant","popupId","onInputValueChange","onKeyDown","onTriggerKeydown","makeAnalyticsAttribute","onTrailingInteractionElementClick","_triggererRef$current2","trailingInteractionElement","InputChevronIcon","tabIndex","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 { 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 { useTableContext } from '~components/Table/TableContext';\nimport {\n  rowDensityToIsTableInputCellMapping,\n  tableEditableCellRowDensityToInputSizeMap,\n  validationStateToInputTrailingIconMap,\n} from '~components/Table/tokens';\nimport { useTableEditableCell } from '~components/Table/TableEditableCellContext';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { useControlledDropdownInput } from '~utils/useControlledDropdownInput';\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    headerAutoCompleteRef,\n    triggererWrapperRef,\n    isTagDismissedRef,\n    onTriggerClick,\n    value,\n    shouldIgnoreBlurAnimation,\n    setShouldIgnoreBlurAnimation,\n    activeIndex,\n    hasFooterAction,\n    options,\n    removeOption,\n    setChangeCallbackTriggerer,\n    changeCallbackTriggerer,\n  } = useDropdown();\n  const { rowDensity } = useTableContext();\n  const { isInsideTableEditableCell } = useTableEditableCell();\n\n  const dropdownTriggerPlaceholder = props.placeholder ?? 'Select Option';\n  const isAutoCompleteInHeader =\n    !props.isSelectInput && dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete;\n\n  const getShowAllTags = React.useCallback((): boolean => {\n    if (isAutoCompleteInHeader) {\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  }, [isAutoCompleteInHeader, 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    triggererRef,\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  const tableInputProps: Partial<BaseInputProps> = {\n    isTableInputCell: rowDensityToIsTableInputCellMapping[rowDensity],\n    id: 'table-editable-cell-input',\n    size: tableEditableCellRowDensityToInputSizeMap[rowDensity],\n    trailingIcon: validationStateToInputTrailingIconMap[props.validationState ?? 'none'],\n    showHintsAsTooltip: true,\n  };\n\n  const isValidationStateNone =\n    props.validationState === 'none' || props.validationState === undefined;\n\n  return (\n    <BaseInput\n      as={props.isSelectInput ? 'button' : 'input'}\n      ref={\n        (isReactNative()\n          ? null\n          : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (node: any) => {\n              if (isAutoCompleteInHeader) {\n                headerAutoCompleteRef.current = node;\n              } else {\n                triggererRef.current = node;\n              }\n\n              if (ref) {\n                if (typeof ref === 'function') {\n                  ref(node);\n                } else {\n                  ref.current = node;\n                }\n              }\n            }) as never\n      }\n      isDropdownTrigger={true}\n      setInputWrapperRef={(wrapperNode) => {\n        // when autocomplete is in header, its not a trigger but a component inside of DropdownOverlay\n        if (!isAutoCompleteInHeader) {\n          triggererWrapperRef.current = wrapperNode;\n        }\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      valueSuffix={\n        typeof props.valueSuffix === 'function'\n          ? props.valueSuffix({\n              values: options\n                .filter((option, index) => selectedIndices.includes(index))\n                .map((option) => option.value),\n            })\n          : undefined\n      }\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      role={isAutoCompleteInHeader ? 'searchbox' : 'combobox'}\n      hasPopup={\n        isAutoCompleteInHeader\n          ? false\n          : getActionListContainerRole(hasFooterAction, dropdownTriggerer)\n      }\n      isPopupExpanded={isOpen}\n      activeDescendant={activeIndex >= 0 ? `${dropdownBaseId}-${activeIndex}` : undefined}\n      popupId={isAutoCompleteInHeader ? undefined : `${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      {...makeAnalyticsAttribute(props)}\n      onTrailingInteractionElementClick={() => {\n        if (!props.isDisabled) {\n          // Icon onClicks to the SelectInput itself\n          if (!isReactNative()) {\n            triggererRef.current?.focus();\n          }\n          onTriggerClick();\n        }\n      }}\n      trailingInteractionElement={\n        isAutoCompleteInHeader || (isInsideTableEditableCell && !isValidationStateNone) ? null : (\n          <InputChevronIcon isDisabled={props.isDisabled} isOpen={isOpen} />\n        )\n      }\n      {...(isInsideTableEditableCell ? tableInputProps : undefined)}\n      // When AutoComplete is present inside DropdownOverlay, the floating ui adds tabIndex -1 internally. We override it with tabIndex 0 here\n      tabIndex={isAutoCompleteInHeader ? 0 : undefined}\n    />\n  );\n};\n\nconst BaseDropdownInputTrigger = React.forwardRef(_BaseDropdownInputTrigger);\n\nexport { BaseDropdownInputTrigger };\n"],"names":["_BaseDropdownInputTrigger","props","ref","_props$placeholder","_props$validationStat","_props$maxRows","_props$label","_useDropdown","useDropdown","isOpen","activeTagIndex","setActiveTagIndex","displayValue","selectionType","dropdownTriggerer","dropdownBaseId","selectedIndices","triggererRef","headerAutoCompleteRef","triggererWrapperRef","isTagDismissedRef","onTriggerClick","value","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","activeIndex","hasFooterAction","options","removeOption","setChangeCallbackTriggerer","changeCallbackTriggerer","_useTableContext","useTableContext","rowDensity","_useTableEditableCell","useTableEditableCell","isInsideTableEditableCell","dropdownTriggerPlaceholder","placeholder","isAutoCompleteInHeader","isSelectInput","dropdownComponentIds","triggers","AutoComplete","getShowAllTags","React","useCallback","useControlledDropdownInput","onChange","name","defaultValue","syncInputValueWithSelection","getValue","prefix","labelPosition","label","undefined","inputValue","getTags","useMemo","_ref","size","getTagsGroup","tags","map","selectedIndex","_options$selectedInde","title","isDisabled","onDismiss","_ref2","tagIndex","current","isReactNative","_triggererRef$current","focus","Number","tableInputProps","isTableInputCell","rowDensityToIsTableInputCellMapping","id","tableEditableCellRowDensityToInputSizeMap","trailingIcon","validationStateToInputTrailingIconMap","validationState","showHintsAsTooltip","isValidationStateNone","_jsx","BaseInput","Object","assign","as","node","isDropdownTrigger","setInputWrapperRef","wrapperNode","maxTagRows","maxRows","showAllTags","textAlign","length","hideLabelText","accessibilityLabel","isLabelInsideInput","necessityIndicator","autoCompleteSuggestionType","helpText","errorText","successText","isRequired","suffix","valueSuffix","values","filter","option","index","includes","autoFocus","onClick","e","onFocus","onBlur","_ref3","leadingIcon","icon","componentName","MetaConstants","SelectInput","testID","labelId","role","hasPopup","getActionListContainerRole","isPopupExpanded","activeDescendant","popupId","onInputValueChange","onKeyDown","onTriggerKeydown","makeAnalyticsAttribute","onTrailingInteractionElementClick","_triggererRef$current2","trailingInteractionElement","InputChevronIcon","tabIndex","BaseDropdownInputTrigger","forwardRef"],"mappings":"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"}

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

@@ -6,6 +6,8 @@ import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.native.js';
 import 'react-native';
 import '@babel/runtime/helpers/slicedToArray';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
+import '../../../tokens/global/typography.js';
+import '../../../tokens/global/motion.js';
 import '../../BladeProvider/useTheme.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';

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

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

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

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

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

@@ -451,6 +451,8 @@ import { Spinner } from '../../Spinner/Spinner/Spinner.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 import 'react-native';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
+import '../../../tokens/global/typography.js';
+import '../../../tokens/global/motion.js';
 import '../../BladeProvider/useTheme.js';
 import { useMergeRefs } from '../../../utils/useMergeRefs.js';
 import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
@@ -465,8 +467,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { InputDropdownButton } from '../../Dropdown/InputDropdownButton.native.js';
 import { Divider } from '../../Divider/Divider.js';
 import { getComponentId } from '../../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
+import { TopNavOverlayThemeOverride } from '../../TopNav/TopNavOverlayThemeOverride.js';
 
-var _excluded=["label","accessibilityLabel","labelPosition","placeholder","defaultValue","name","value","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","labelSuffix","labelTrailing","helpText","onClearButtonClick","isLoading","autoCapitalize","autoFocus","testID","size","showSearchIcon","trailing"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _SearchInput=function _SearchInput(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,placeholder=_ref.placeholder,defaultValue=_ref.defaultValue,name=_ref.name,value=_ref.value,_onChange=_ref.onChange,_onClick=_ref.onClick,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,isDisabled=_ref.isDisabled,labelSuffix=_ref.labelSuffix,labelTrailing=_ref.labelTrailing,helpText=_ref.helpText,onClearButtonClick=_ref.onClearButtonClick,isLoading=_ref.isLoading,autoCapitalize=_ref.autoCapitalize,autoFocus=_ref.autoFocus,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$showSearchIcon=_ref.showSearchIcon,showSearchIcon=_ref$showSearchIcon===void 0?true:_ref$showSearchIcon,trailing=_ref.trailing,rest=_objectWithoutProperties(_ref,_excluded);var textInputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,textInputRef);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldShowClearButton=_useState2[0],setShouldShowClearButton=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isTrailingDropDownOpen=_useState4[0],setIsTrailingDropDownOpen=_useState4[1];var _useDropdown=useDropdown(),triggererWrapperRef=_useDropdown.triggererWrapperRef,onTriggerKeydown=_useDropdown.onTriggerKeydown,onTriggerClick=_useDropdown.onTriggerClick,dropdownTriggerer=_useDropdown.dropdownTriggerer,closeParentDropDown=_useDropdown.close,isParentDropDownOpen=_useDropdown.isOpen;var isInsideDropdown=dropdownTriggerer==='SearchInput';React__default.useEffect(function(){setShouldShowClearButton(Boolean(defaultValue!=null?defaultValue:value));},[defaultValue,value]);useEffect(function(){if(isParentDropDownOpen&&isTrailingDropDownOpen){setIsTrailingDropDownOpen(false);}},[closeParentDropDown,isParentDropDownOpen]);useEffect(function(){if(isTrailingDropDownOpen&&isParentDropDownOpen){closeParentDropDown();}},[setIsTrailingDropDownOpen,isTrailingDropDownOpen]);var trailingDropdown=trailing&&getComponentId(trailing)==='Dropdown'?trailing:null;var renderTrailingDropDown=function renderTrailingDropDown(){if(!trailingDropdown){return null;}return React__default.cloneElement(trailingDropdown,{selectionType:'single',isOpen:isTrailingDropDownOpen,onOpenChange:function onOpenChange(isOpen){setIsTrailingDropDownOpen(isOpen);},children:React__default.Children.map(trailingDropdown.props.children,function(child){if(child.type===InputDropdownButton){return React__default.cloneElement(child,{_isInsideSearchInput:true});}if(child.type===DropdownOverlay){return React__default.cloneElement(child,{referenceRef:triggererWrapperRef,_isNestedDropdown:true,defaultPlacement:'bottom-end'});}return child;})});};var renderClearButton=function renderClearButton(){return jsx(IconButton,{size:"medium",icon:CloseIcon,onClick:function onClick(){var _textInputRef$current;if(isEmpty(value)&&textInputRef.current){if(isReactNative(textInputRef.current)){textInputRef.current.clear();textInputRef.current.focus();}else if(textInputRef.current instanceof HTMLInputElement){textInputRef.current.value='';textInputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();textInputRef==null?void 0:(_textInputRef$current=textInputRef.current)==null?void 0:_textInputRef$current.focus();setShouldShowClearButton(false);},isDisabled:isDisabled,accessibilityLabel:"Clear Input Content"});};var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content",color:"primary"});}if(shouldShowClearButton&&trailingDropdown){return jsxs(BaseBox,{display:"flex",gap:"spacing.3",children:[renderClearButton()," ",jsx(Divider,{orientation:"vertical"})]});}if(shouldShowClearButton){return renderClearButton();}return null;};return jsx(BaseBox,{position:"relative",children:jsx(BaseInput,Object.assign({id:"searchinput",componentName:MetaConstants.SearchInput,ref:mergedRef,isDropdownTrigger:true,setInputWrapperRef:isInsideDropdown||isTrailingDropDownOpen?function(wrapperNode){triggererWrapperRef.current=wrapperNode;}:undefined,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,labelSuffix:labelSuffix,labelTrailing:labelTrailing,placeholder:placeholder,defaultValue:defaultValue,value:value,name:name,onKeyDown:isInsideDropdown?onTriggerKeydown:undefined,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}_onChange==null?void 0:_onChange({name:name,value:value});},onClick:function onClick(e){if(isDisabled)return;if(isInsideDropdown){onTriggerClick();}_onClick==null?void 0:_onClick(e);},onFocus:onFocus,onBlur:onBlur,onSubmit:onSubmit,isDisabled:isDisabled,leadingIcon:showSearchIcon?SearchIcon:undefined,trailingInteractionElement:renderInteractionElement(),trailingDropDown:renderTrailingDropDown(),helpText:helpText,autoFocus:autoFocus,testID:testID},getKeyboardAndAutocompleteProps({type:'search',autoCapitalize:autoCapitalize}),{size:size},rest))});};var SearchInput=assignWithoutSideEffects(React__default.forwardRef(_SearchInput),{displayName:'SearchInput',componentId:dropdownComponentIds.triggers.SearchInput});
+var _excluded=["label","accessibilityLabel","labelPosition","placeholder","defaultValue","name","value","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","labelSuffix","labelTrailing","helpText","onClearButtonClick","isLoading","autoCapitalize","autoFocus","testID","size","showSearchIcon","trailing"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _SearchInput=function _SearchInput(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,placeholder=_ref.placeholder,defaultValue=_ref.defaultValue,name=_ref.name,value=_ref.value,_onChange=_ref.onChange,_onClick=_ref.onClick,_onFocus=_ref.onFocus,_onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,isDisabled=_ref.isDisabled,labelSuffix=_ref.labelSuffix,labelTrailing=_ref.labelTrailing,helpText=_ref.helpText,onClearButtonClick=_ref.onClearButtonClick,isLoading=_ref.isLoading,autoCapitalize=_ref.autoCapitalize,autoFocus=_ref.autoFocus,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$showSearchIcon=_ref.showSearchIcon,showSearchIcon=_ref$showSearchIcon===void 0?true:_ref$showSearchIcon,trailing=_ref.trailing,rest=_objectWithoutProperties(_ref,_excluded);var textInputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,textInputRef);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldShowClearButton=_useState2[0],setShouldShowClearButton=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isTrailingDropDownOpen=_useState4[0],setIsTrailingDropDownOpen=_useState4[1];var _useDropdown=useDropdown(),triggererWrapperRef=_useDropdown.triggererWrapperRef,onTriggerKeydown=_useDropdown.onTriggerKeydown,onTriggerClick=_useDropdown.onTriggerClick,dropdownTriggerer=_useDropdown.dropdownTriggerer,closeParentDropDown=_useDropdown.close,isParentDropDownOpen=_useDropdown.isOpen;var isInsideDropdown=dropdownTriggerer==='SearchInput';var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),isSearchFocused=_useState6[0],setIsSearchFocused=_useState6[1];React__default.useEffect(function(){setShouldShowClearButton(Boolean(defaultValue!=null?defaultValue:value));},[defaultValue,value]);useEffect(function(){if(isParentDropDownOpen&&isTrailingDropDownOpen){setIsTrailingDropDownOpen(false);}},[closeParentDropDown,isParentDropDownOpen]);useEffect(function(){if(isTrailingDropDownOpen&&isParentDropDownOpen){closeParentDropDown();}},[setIsTrailingDropDownOpen,isTrailingDropDownOpen]);var trailingDropdown=trailing&&getComponentId(trailing)==='Dropdown'?trailing:null;var renderTrailingDropDown=function renderTrailingDropDown(){if(!trailingDropdown){return null;}return React__default.cloneElement(trailingDropdown,{selectionType:'single',isOpen:isTrailingDropDownOpen,height:'100%',onOpenChange:function onOpenChange(isOpen){setIsTrailingDropDownOpen(isOpen);},children:React__default.Children.map(trailingDropdown.props.children,function(child){if(child.type===InputDropdownButton){return React__default.cloneElement(child,{_isInsideSearchInput:true,size:size});}if(child.type===DropdownOverlay){return React__default.cloneElement(child,{referenceRef:triggererWrapperRef,_isNestedDropdown:true,defaultPlacement:'bottom-end'});}return child;})});};var renderClearButton=function renderClearButton(){return jsx(IconButton,{size:"medium",icon:CloseIcon,onClick:function onClick(){var _textInputRef$current;if(isEmpty(value)&&textInputRef.current){if(isReactNative(textInputRef.current)){textInputRef.current.clear();textInputRef.current.focus();}else if(textInputRef.current instanceof HTMLInputElement){textInputRef.current.value='';textInputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();textInputRef==null?void 0:(_textInputRef$current=textInputRef.current)==null?void 0:_textInputRef$current.focus();setShouldShowClearButton(false);},isDisabled:isDisabled,accessibilityLabel:"Clear Input Content"});};var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content",color:"primary"});}if(shouldShowClearButton&&trailingDropdown){return jsxs(BaseBox,{display:"flex",gap:"spacing.3",children:[renderClearButton()," ",jsx(Divider,{orientation:"vertical"})]});}if(shouldShowClearButton){return renderClearButton();}return null;};var searchContent=jsx(BaseBox,{position:"relative",children:jsx(BaseInput,Object.assign({id:"searchinput",componentName:MetaConstants.SearchInput,ref:mergedRef,isDropdownTrigger:true,setInputWrapperRef:isInsideDropdown||isTrailingDropDownOpen?function(wrapperNode){triggererWrapperRef.current=wrapperNode;}:undefined,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,labelSuffix:labelSuffix,labelTrailing:labelTrailing,placeholder:placeholder,defaultValue:defaultValue,value:value,name:name,onKeyDown:isInsideDropdown?onTriggerKeydown:undefined,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}_onChange==null?void 0:_onChange({name:name,value:value});},onClick:function onClick(e){if(isDisabled)return;if(isInsideDropdown){onTriggerClick();}_onClick==null?void 0:_onClick(e);},onFocus:function onFocus(e){setIsSearchFocused(true);_onFocus==null?void 0:_onFocus(e);},onBlur:function onBlur(e){setIsSearchFocused(false);_onBlur==null?void 0:_onBlur(e);},onSubmit:onSubmit,isDisabled:isDisabled,leadingIcon:showSearchIcon?SearchIcon:undefined,trailingInteractionElement:renderInteractionElement(),trailingDropDown:renderTrailingDropDown(),helpText:helpText,autoFocus:autoFocus,testID:testID},getKeyboardAndAutocompleteProps({type:'search',autoCapitalize:autoCapitalize}),{size:size},rest))});return jsx(TopNavOverlayThemeOverride,{shouldOverrideTheme:isSearchFocused,children:searchContent});};var SearchInput=assignWithoutSideEffects(React__default.forwardRef(_SearchInput),{displayName:'SearchInput',componentId:dropdownComponentIds.triggers.SearchInput});
 
 export { SearchInput };
 //# sourceMappingURL=SearchInput.js.map