@razorpay/blade 12.33.1 → 12.34.0

package/build/lib/web/development/components/Input/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { CloseIcon, SearchIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type {\n  BladeElementRef,\n  BladeElementRefWithValue,\n  DataAnalyticsAttribute,\n} from '~utils/types';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\n\ntype SearchInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'helpText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'autoFocus'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | keyof DataAnalyticsAttribute\n> & {\n  /**\n   * Event handler to handle the onClick event for clear button.\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n  /**\n   * Toggle the visibility of the search icon.\n   *\n   * @default true\n   */\n  showSearchIcon?: boolean;\n} & StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype SearchInputPropsWithA11yLabel = {\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 SearchInputPropsWithLabel = {\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 SearchInputProps = (SearchInputPropsWithA11yLabel | SearchInputPropsWithLabel) &\n  SearchInputCommonProps;\n\n// need to do this to tell TS to infer type as SearchInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef?: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _SearchInput: React.ForwardRefRenderFunction<BladeElementRef, SearchInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    defaultValue,\n    name,\n    value,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    helpText,\n    onClearButtonClick,\n    isLoading,\n    autoCapitalize,\n    autoFocus,\n    testID,\n    size = 'medium',\n    showSearchIcon = true,\n    ...rest\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRefWithValue>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n  const {\n    triggererWrapperRef,\n    onTriggerKeydown,\n    onTriggerClick,\n    dropdownTriggerer,\n  } = useDropdown();\n  const isInsideDropdown = dropdownTriggerer === 'SearchInput';\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(defaultValue ?? value));\n  }, [defaultValue, value]);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton) {\n      return (\n        <IconButton\n          size=\"medium\"\n          icon={CloseIcon}\n          onClick={() => {\n            if (isEmpty(value) && textInputRef.current) {\n              // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n              if (isReactNative(textInputRef.current)) {\n                textInputRef.current.clear();\n                textInputRef.current.focus();\n              } else if (textInputRef.current instanceof HTMLInputElement) {\n                textInputRef.current.value = '';\n                textInputRef.current.focus();\n              }\n            }\n\n            // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n            onClearButtonClick?.();\n            textInputRef?.current?.focus();\n            setShouldShowClearButton(false);\n          }}\n          isDisabled={isDisabled}\n          accessibilityLabel=\"Clear Input Content\"\n        />\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseBox position=\"relative\">\n      <BaseInput\n        id=\"searchinput\"\n        componentName={MetaConstants.SearchInput}\n        ref={mergedRef}\n        isDropdownTrigger={true}\n        setInputWrapperRef={\n          isInsideDropdown\n            ? (wrapperNode) => {\n                triggererWrapperRef.current = wrapperNode;\n              }\n            : undefined\n        }\n        label={label as string}\n        accessibilityLabel={accessibilityLabel}\n        hideLabelText={!Boolean(label)}\n        labelPosition={labelPosition}\n        placeholder={placeholder}\n        defaultValue={defaultValue}\n        value={value}\n        name={name}\n        onKeyDown={isInsideDropdown ? onTriggerKeydown : undefined}\n        onChange={({ name, value }) => {\n          if (value?.length) {\n            // show the clear button when the user starts typing in\n            setShouldShowClearButton(true);\n          }\n\n          if (shouldShowClearButton && !value?.length) {\n            // hide the clear button when the input field is empty\n            setShouldShowClearButton(false);\n          }\n\n          onChange?.({ name, value });\n        }}\n        onClick={(e) => {\n          if (isDisabled) return;\n          if (isInsideDropdown) {\n            onTriggerClick();\n          }\n          onClick?.(e);\n        }}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onSubmit={onSubmit}\n        isDisabled={isDisabled}\n        leadingIcon={showSearchIcon ? SearchIcon : undefined}\n        trailingInteractionElement={renderInteractionElement()}\n        helpText={helpText}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={autoFocus}\n        testID={testID}\n        {...getKeyboardAndAutocompleteProps({\n          type: 'search',\n          autoCapitalize,\n        })}\n        size={size}\n        {...rest}\n      />\n    </BaseBox>\n  );\n};\n\nconst SearchInput = assignWithoutSideEffects(React.forwardRef(_SearchInput), {\n  displayName: 'SearchInput',\n  componentId: dropdownComponentIds.triggers.SearchInput,\n});\n\nexport type { SearchInputProps };\nexport { SearchInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_SearchInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","defaultValue","name","value","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","helpText","onClearButtonClick","isLoading","autoCapitalize","autoFocus","testID","_ref$size","size","_ref$showSearchIcon","showSearchIcon","rest","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","_useDropdown","useDropdown","triggererWrapperRef","onTriggerKeydown","onTriggerClick","dropdownTriggerer","isInsideDropdown","useEffect","Boolean","renderInteractionElement","_jsx","Spinner","color","IconButton","icon","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","BaseBox","position","children","BaseInput","_objectSpread","id","componentName","MetaConstants","SearchInput","isDropdownTrigger","setInputWrapperRef","wrapperNode","undefined","hideLabelText","onKeyDown","_ref2","length","e","leadingIcon","SearchIcon","trailingInteractionElement","getKeyboardAndAutocompleteProps","type","assignWithoutSideEffects","forwardRef","displayName","componentId","dropdownComponentIds","triggers"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../../../../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { CloseIcon, SearchIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type {\n  BladeElementRef,\n  BladeElementRefWithValue,\n  DataAnalyticsAttribute,\n} from '~utils/types';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { DropdownOverlay, InputDropdownButton } from '~components/Dropdown';\nimport { Divider } from '~components/Divider';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\ntype SearchInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'helpText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'autoFocus'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | keyof DataAnalyticsAttribute\n> & {\n  /**\n   * Event handler to handle the onClick event for clear button.\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n  /**\n   * Toggle the visibility of the search icon.\n   *\n   * @default true\n   */\n  showSearchIcon?: boolean;\n  /**\n   * Optional trailing  to be shown at the end of the input.\n   */\n  trailing?: React.ReactNode;\n} & StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype SearchInputPropsWithA11yLabel = {\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 SearchInputPropsWithLabel = {\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 SearchInputProps = (SearchInputPropsWithA11yLabel | SearchInputPropsWithLabel) &\n  SearchInputCommonProps;\n\n// need to do this to tell TS to infer type as SearchInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef?: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _SearchInput: React.ForwardRefRenderFunction<BladeElementRef, SearchInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    defaultValue,\n    name,\n    value,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    helpText,\n    onClearButtonClick,\n    isLoading,\n    autoCapitalize,\n    autoFocus,\n    testID,\n    size = 'medium',\n    showSearchIcon = true,\n    trailing,\n    ...rest\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRefWithValue>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n  const [isTrailingDropDownOpen, setIsTrailingDropDownOpen] = useState(false);\n  const {\n    triggererWrapperRef,\n    onTriggerKeydown,\n    onTriggerClick,\n    dropdownTriggerer,\n    close: closeParentDropDown,\n    isOpen: isParentDropDownOpen,\n  } = useDropdown();\n  const isInsideDropdown = dropdownTriggerer === 'SearchInput';\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(defaultValue ?? value));\n  }, [defaultValue, value]);\n\n  useEffect(() => {\n    if (isParentDropDownOpen && isTrailingDropDownOpen) {\n      setIsTrailingDropDownOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [closeParentDropDown, isParentDropDownOpen]);\n\n  useEffect(() => {\n    if (isTrailingDropDownOpen && isParentDropDownOpen) {\n      closeParentDropDown();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [setIsTrailingDropDownOpen, isTrailingDropDownOpen]);\n\n  const trailingDropdown =\n    trailing && getComponentId(trailing as React.ReactElement) === 'Dropdown' ? trailing : null;\n\n  const renderTrailingDropDown = (): React.ReactElement | null => {\n    if (!trailingDropdown) {\n      return null;\n    }\n    return React.cloneElement(trailingDropdown as React.ReactElement, {\n      selectionType: 'single',\n      isOpen: isTrailingDropDownOpen,\n      onOpenChange: (isOpen: boolean) => {\n        setIsTrailingDropDownOpen(isOpen);\n      },\n      children: React.Children.map(\n        (trailingDropdown as React.ReactElement).props.children,\n        (child) => {\n          if (child.type === InputDropdownButton) {\n            return React.cloneElement(child, {\n              _isInsideSearchInput: true,\n            });\n          }\n          if (child.type === DropdownOverlay) {\n            return React.cloneElement(child, {\n              referenceRef: triggererWrapperRef,\n              _isNestedDropdown: true,\n              defaultPlacement: 'bottom-end',\n            });\n          }\n          return child;\n        },\n      ),\n    });\n  };\n\n  const renderClearButton = (): React.ReactElement => {\n    return (\n      <IconButton\n        size=\"medium\"\n        icon={CloseIcon}\n        onClick={() => {\n          if (isEmpty(value) && textInputRef.current) {\n            // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n            if (isReactNative(textInputRef.current)) {\n              textInputRef.current.clear();\n              textInputRef.current.focus();\n            } else if (textInputRef.current instanceof HTMLInputElement) {\n              textInputRef.current.value = '';\n              textInputRef.current.focus();\n            }\n          }\n\n          // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n          onClearButtonClick?.();\n          textInputRef?.current?.focus();\n          setShouldShowClearButton(false);\n        }}\n        isDisabled={isDisabled}\n        accessibilityLabel=\"Clear Input Content\"\n      />\n    );\n  };\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton && trailingDropdown) {\n      return (\n        <BaseBox display=\"flex\" gap=\"spacing.3\">\n          {renderClearButton()} <Divider orientation=\"vertical\" />\n        </BaseBox>\n      );\n    }\n    if (shouldShowClearButton) {\n      return renderClearButton();\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseBox position=\"relative\">\n      <BaseInput\n        id=\"searchinput\"\n        componentName={MetaConstants.SearchInput}\n        ref={mergedRef}\n        isDropdownTrigger={true}\n        setInputWrapperRef={\n          isInsideDropdown || isTrailingDropDownOpen\n            ? (wrapperNode) => {\n                triggererWrapperRef.current = wrapperNode;\n              }\n            : undefined\n        }\n        label={label as string}\n        accessibilityLabel={accessibilityLabel}\n        hideLabelText={!Boolean(label)}\n        labelPosition={labelPosition}\n        placeholder={placeholder}\n        defaultValue={defaultValue}\n        value={value}\n        name={name}\n        onKeyDown={isInsideDropdown ? onTriggerKeydown : undefined}\n        onChange={({ name, value }) => {\n          if (value?.length) {\n            // show the clear button when the user starts typing in\n            setShouldShowClearButton(true);\n          }\n\n          if (shouldShowClearButton && !value?.length) {\n            // hide the clear button when the input field is empty\n            setShouldShowClearButton(false);\n          }\n\n          onChange?.({ name, value });\n        }}\n        onClick={(e) => {\n          if (isDisabled) return;\n          if (isInsideDropdown) {\n            onTriggerClick();\n          }\n          onClick?.(e);\n        }}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onSubmit={onSubmit}\n        isDisabled={isDisabled}\n        leadingIcon={showSearchIcon ? SearchIcon : undefined}\n        trailingInteractionElement={renderInteractionElement()}\n        trailingDropDown={renderTrailingDropDown()}\n        helpText={helpText}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={autoFocus}\n        testID={testID}\n        {...getKeyboardAndAutocompleteProps({\n          type: 'search',\n          autoCapitalize,\n        })}\n        size={size}\n        {...rest}\n      />\n    </BaseBox>\n  );\n};\n\nconst SearchInput = assignWithoutSideEffects(React.forwardRef(_SearchInput), {\n  displayName: 'SearchInput',\n  componentId: dropdownComponentIds.triggers.SearchInput,\n});\n\nexport type { SearchInputProps };\nexport { SearchInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_SearchInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","defaultValue","name","value","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","helpText","onClearButtonClick","isLoading","autoCapitalize","autoFocus","testID","_ref$size","size","_ref$showSearchIcon","showSearchIcon","trailing","rest","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","_useState3","_useState4","isTrailingDropDownOpen","setIsTrailingDropDownOpen","_useDropdown","useDropdown","triggererWrapperRef","onTriggerKeydown","onTriggerClick","dropdownTriggerer","closeParentDropDown","close","isParentDropDownOpen","isOpen","isInsideDropdown","useEffect","Boolean","trailingDropdown","getComponentId","renderTrailingDropDown","cloneElement","selectionType","onOpenChange","children","Children","map","props","child","type","InputDropdownButton","_isInsideSearchInput","DropdownOverlay","referenceRef","_isNestedDropdown","defaultPlacement","renderClearButton","_jsx","IconButton","icon","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","renderInteractionElement","Spinner","color","_jsxs","BaseBox","display","gap","Divider","orientation","position","BaseInput","_objectSpread","id","componentName","MetaConstants","SearchInput","isDropdownTrigger","setInputWrapperRef","wrapperNode","undefined","hideLabelText","onKeyDown","_ref2","length","e","leadingIcon","SearchIcon","trailingInteractionElement","trailingDropDown","getKeyboardAndAutocompleteProps","assignWithoutSideEffects","forwardRef","displayName","componentId","dropdownComponentIds","triggers"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React__default, { useState } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import '../BaseInput/index.js';
 import { getKeyboardAndAutocompleteProps } from '../BaseInput/utils.js';
 import { useTaggedInput } from '../BaseInput/useTaggedInput.js';
@@ -16,18 +16,24 @@ import '../../../utils/assignWithoutSideEffects/index.js';
 import '../../../utils/index.js';
 import { useMergeRefs } from '../../../utils/useMergeRefs.js';
 import { hintMarginTop } from '../../Form/formTokens.js';
-import { jsx } from 'react/jsx-runtime';
+import '../../Divider/index.js';
+import '../../../utils/isValidAllowedChildren/index.js';
+import '../../Dropdown/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
-import { Spinner } from '../../Spinner/Spinner/Spinner.js';
+import { getComponentId } from '../../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
+import { DropdownOverlay } from '../../Dropdown/DropdownOverlay.web.js';
 import { IconButton } from '../../Button/IconButton/IconButton.js';
 import CloseIcon from '../../Icons/CloseIcon/CloseIcon.js';
+import { Spinner } from '../../Spinner/Spinner/Spinner.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { Divider } from '../../Divider/Divider.js';
 import { BaseInput } from '../BaseInput/BaseInput.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
 import { CharacterCounter } from '../../Form/CharacterCounter/CharacterCounter.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["label", "accessibilityLabel", "labelPosition", "placeholder", "type", "defaultValue", "name", "value", "maxCharacters", "onChange", "onClick", "onFocus", "onBlur", "onSubmit", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "icon", "prefix", "showClearButton", "onClearButtonClick", "isLoading", "suffix", "autoFocus", "keyboardReturnKeyType", "autoCompleteSuggestionType", "autoCapitalize", "testID", "size", "leadingIcon", "trailingIcon", "isTaggedInput", "tags", "onTagChange"];
+var _excluded = ["label", "accessibilityLabel", "labelPosition", "placeholder", "type", "defaultValue", "name", "value", "maxCharacters", "onChange", "onClick", "onFocus", "onBlur", "onSubmit", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "icon", "prefix", "showClearButton", "onClearButtonClick", "isLoading", "suffix", "autoFocus", "keyboardReturnKeyType", "autoCompleteSuggestionType", "autoCapitalize", "testID", "size", "leadingIcon", "trailingIcon", "isTaggedInput", "tags", "onTagChange", "trailing", "leading"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists
@@ -36,6 +42,7 @@ var isReactNative = function isReactNative(_textInputRef) {
   return getPlatformType() === 'react-native';
 };
 var _TextInput = function _TextInput(_ref, ref) {
+  var _leading$name, _trailing$name, _ref3;
   var label = _ref.label,
     accessibilityLabel = _ref.accessibilityLabel,
     _ref$labelPosition = _ref.labelPosition,
@@ -77,6 +84,8 @@ var _TextInput = function _TextInput(_ref, ref) {
     isTaggedInput = _ref.isTaggedInput,
     tags = _ref.tags,
     onTagChange = _ref.onTagChange,
+    trailing = _ref.trailing,
+    leading = _ref.leading,
     rest = _objectWithoutProperties(_ref, _excluded);
   var textInputRef = React__default.useRef(null);
   var mergedRef = useMergeRefs(ref, textInputRef);
@@ -104,9 +113,88 @@ var _TextInput = function _TextInput(_ref, ref) {
     handleTaggedInputKeydown = _useTaggedInput.handleTaggedInputKeydown,
     handleTaggedInputChange = _useTaggedInput.handleTaggedInputChange,
     handleTagsClear = _useTaggedInput.handleTagsClear;
+  var _React$useState = React__default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isTrailingDropDownOpen = _React$useState2[0],
+    setIsTrailingDropDownOpen = _React$useState2[1];
+  var _React$useState3 = React__default.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isLeadingDropDownOpen = _React$useState4[0],
+    setIsLeadingDropDownOpen = _React$useState4[1];
+  var textInputWrapperRef = useRef(null);
+  useEffect(function () {
+    if (isTrailingDropDownOpen && isLeadingDropDownOpen) {
+      setIsLeadingDropDownOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isTrailingDropDownOpen]);
+  useEffect(function () {
+    if (isLeadingDropDownOpen && isTrailingDropDownOpen) {
+      setIsTrailingDropDownOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLeadingDropDownOpen]);
+  var leadingDropDown = leading && getComponentId(leading) === 'Dropdown' ? leading : null;
+  var trailingDropdown = trailing && getComponentId(trailing) === 'Dropdown' ? trailing : null;
+  // we need to look into name of component and check if it 's and icon or a dropdown
+  var _leadingIcon = leading && typeof leading === 'function' && (_leading$name = leading.name) !== null && _leading$name !== void 0 && _leading$name.endsWith('Icon') ? leading : undefined;
+  var _trailingIcon = trailing && typeof trailing === 'function' && (_trailing$name = trailing.name) !== null && _trailing$name !== void 0 && _trailing$name.endsWith('Icon') ? trailing : undefined;
+  var hasLeadingInteractionElement = !_leadingIcon && !leadingDropDown && leading;
+  var hasTrailingInteractionElement = !_trailingIcon && !trailingDropdown && trailing;
+  var renderDropdown = function renderDropdown(dropdown, isOpen, setIsOpen, defaultPlacement) {
+    if (!dropdown) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.cloneElement(dropdown, {
+      selectionType: 'single',
+      isOpen: isOpen,
+      onOpenChange: function onOpenChange(isOpen) {
+        setIsOpen(isOpen);
+      },
+      children: React__default.Children.map(dropdown.props.children, function (child) {
+        if (child.type === DropdownOverlay) {
+          return /*#__PURE__*/React__default.cloneElement(child, {
+            referenceRef: textInputWrapperRef,
+            _isNestedDropdown: true,
+            defaultPlacement: defaultPlacement
+          });
+        }
+        return child;
+      })
+    });
+  };
+  var renderLeadingDropDown = renderDropdown(leadingDropDown, isLeadingDropDownOpen, setIsLeadingDropDownOpen, 'bottom-start');
+  var renderTrailingDropDown = renderDropdown(trailingDropdown, isTrailingDropDownOpen, setIsTrailingDropDownOpen, 'bottom-end');
   React__default.useEffect(function () {
     setShouldShowClearButton(Boolean(showClearButton && (defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)));
   }, [showClearButton, defaultValue, value]);
+  var renderClearButton = function renderClearButton() {
+    return /*#__PURE__*/jsx(IconButton, {
+      size: "medium",
+      icon: CloseIcon,
+      onClick: function onClick() {
+        var _textInputRef$current;
+        if (isEmpty(value) && textInputRef.current) {
+          // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function
+          if (isReactNative(textInputRef.current)) {
+            textInputRef.current.clear();
+            textInputRef.current.focus();
+          } else if (textInputRef.current instanceof HTMLInputElement) {
+            textInputRef.current.value = '';
+            textInputRef.current.focus();
+          }
+        }
+        handleTagsClear();
+        // if the input field is controlled just call the click handler and the value change shall be left upto the consumer
+        onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
+        textInputRef === null || textInputRef === void 0 ? void 0 : (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
+        setShouldShowClearButton(false);
+      },
+      isDisabled: isDisabled,
+      accessibilityLabel: "Clear Input Content"
+    });
+  };
+  var hasTrailingDropDown = Boolean(trailingDropdown);
   var renderInteractionElement = function renderInteractionElement() {
     if (isLoading) {
       return /*#__PURE__*/jsx(Spinner, {
@@ -114,38 +202,39 @@ var _TextInput = function _TextInput(_ref, ref) {
         color: "primary"
       });
     }
-    if (shouldShowClearButton) {
-      return /*#__PURE__*/jsx(IconButton, {
-        size: "medium",
-        icon: CloseIcon,
-        onClick: function onClick() {
-          var _textInputRef$current;
-          if (isEmpty(value) && textInputRef.current) {
-            // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function
-            if (isReactNative(textInputRef.current)) {
-              textInputRef.current.clear();
-              textInputRef.current.focus();
-            } else if (textInputRef.current instanceof HTMLInputElement) {
-              textInputRef.current.value = '';
-              textInputRef.current.focus();
-            }
-          }
-          handleTagsClear();
-          // if the input field is controlled just call the click handler and the value change shall be left upto the consumer
-          onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
-          textInputRef === null || textInputRef === void 0 ? void 0 : (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
-          setShouldShowClearButton(false);
-        },
-        isDisabled: isDisabled,
-        accessibilityLabel: "Clear Input Content"
+    if (shouldShowClearButton && hasTrailingDropDown) {
+      return /*#__PURE__*/jsxs(BaseBox, {
+        display: "flex",
+        gap: "spacing.3",
+        children: [renderClearButton(), " ", /*#__PURE__*/jsx(Divider, {
+          orientation: "vertical"
+        })]
+      });
+    }
+    if (showClearButton && hasTrailingInteractionElement) {
+      return /*#__PURE__*/jsxs(BaseBox, {
+        display: "flex",
+        gap: "spacing.3",
+        children: [renderClearButton(), " ", /*#__PURE__*/jsx(Divider, {
+          orientation: "vertical"
+        }), " ", trailing]
       });
     }
+    if (shouldShowClearButton) {
+      return renderClearButton();
+    }
+    if (hasTrailingInteractionElement) {
+      return trailing;
+    }
     return null;
   };
   return /*#__PURE__*/jsx(BaseInput, _objectSpread(_objectSpread({
     id: "textinput",
     componentName: MetaConstants.TextInput,
     ref: mergedRef,
+    setInputWrapperRef: function setInputWrapperRef(wrapperNode) {
+      textInputWrapperRef.current = wrapperNode;
+    },
     label: label,
     accessibilityLabel: accessibilityLabel,
     hideLabelText: !Boolean(label),
@@ -163,6 +252,9 @@ var _TextInput = function _TextInput(_ref, ref) {
     maxTagRows: "single",
     activeTagIndex: activeTagIndex,
     setActiveTagIndex: setActiveTagIndex,
+    leadingDropDown: renderLeadingDropDown,
+    trailingDropDown: renderTrailingDropDown,
+    leadingInteractionElement: hasLeadingInteractionElement ? leading : null,
     onChange: function onChange(_ref2) {
       var name = _ref2.name,
         value = _ref2.value;
@@ -199,10 +291,10 @@ var _TextInput = function _TextInput(_ref, ref) {
     isDisabled: isDisabled,
     necessityIndicator: necessityIndicator,
     isRequired: isRequired,
-    leadingIcon: leadingIcon !== null && leadingIcon !== void 0 ? leadingIcon : icon,
+    leadingIcon: (_ref3 = _leadingIcon !== null && _leadingIcon !== void 0 ? _leadingIcon : leadingIcon) !== null && _ref3 !== void 0 ? _ref3 : icon,
     prefix: prefix,
     trailingInteractionElement: renderInteractionElement(),
-    trailingIcon: trailingIcon,
+    trailingIcon: _trailingIcon !== null && _trailingIcon !== void 0 ? _trailingIcon : trailingIcon,
     suffix: suffix,
     validationState: validationState,
     errorText: errorText,

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport type { TaggedInputProps } from '../BaseInput/useTaggedInput';\nimport { useTaggedInput } from '../BaseInput/useTaggedInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type {\n  BladeElementRef,\n  BladeElementRefWithValue,\n  DataAnalyticsAttribute,\n} from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | 'leadingIcon'\n  | 'trailingButton'\n  | 'trailingIcon'\n  | 'textAlign'\n  | keyof DataAnalyticsAttribute\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   * @deprecated Use `leadingIcon` instead. This prop will be removed in the next major version.\n   */\n  icon?: IconComponent;\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n} & TaggedInputProps &\n  StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    size = 'medium',\n    leadingIcon,\n    trailingIcon,\n    isTaggedInput,\n    tags,\n    onTagChange,\n    ...rest\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRefWithValue>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n  const [isInputFocussed, setIsInputFocussed] = useState(autoFocus ?? false);\n  const {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  } = useTaggedInput({\n    isTaggedInput,\n    tags,\n    onTagChange,\n    isDisabled,\n    onChange,\n    name,\n    value,\n    inputRef: textInputRef,\n  });\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? value)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton) {\n      return (\n        <IconButton\n          size=\"medium\"\n          icon={CloseIcon}\n          onClick={() => {\n            if (isEmpty(value) && textInputRef.current) {\n              // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n              if (isReactNative(textInputRef.current)) {\n                textInputRef.current.clear();\n                textInputRef.current.focus();\n              } else if (textInputRef.current instanceof HTMLInputElement) {\n                textInputRef.current.value = '';\n                textInputRef.current.focus();\n              }\n            }\n            handleTagsClear();\n            // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n            onClearButtonClick?.();\n            textInputRef?.current?.focus();\n            setShouldShowClearButton(false);\n          }}\n          isDisabled={isDisabled}\n          accessibilityLabel=\"Clear Input Content\"\n        />\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      maxCharacters={maxCharacters}\n      isDropdownTrigger={isTaggedInput}\n      tags={isTaggedInput ? getTags({ size }) : undefined}\n      showAllTags={isInputFocussed}\n      maxTagRows=\"single\"\n      activeTagIndex={activeTagIndex}\n      setActiveTagIndex={setActiveTagIndex}\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        handleTaggedInputChange({ name, value });\n        onChange?.({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={(e) => {\n        setIsInputFocussed(true);\n        onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        setIsInputFocussed(false);\n        onBlur?.(e);\n      }}\n      onKeyDown={(e) => {\n        handleTaggedInputKeydown(e);\n      }}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={leadingIcon ?? icon}\n      prefix={prefix}\n      trailingInteractionElement={renderInteractionElement()}\n      trailingIcon={trailingIcon}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter\n              currentCount={value?.length ?? 0}\n              maxCount={maxCharacters}\n              size={size}\n            />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      size={size}\n      {...rest}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","_ref$type","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","_ref$size","size","leadingIcon","trailingIcon","isTaggedInput","tags","onTagChange","rest","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","_useState3","_useState4","isInputFocussed","setIsInputFocussed","_useTaggedInput","useTaggedInput","inputRef","activeTagIndex","setActiveTagIndex","getTags","handleTaggedInputKeydown","handleTaggedInputChange","handleTagsClear","useEffect","Boolean","renderInteractionElement","_jsx","Spinner","color","IconButton","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","BaseInput","_objectSpread","id","componentName","MetaConstants","TextInput","hideLabelText","isDropdownTrigger","undefined","showAllTags","maxTagRows","_ref2","length","e","onKeyDown","trailingInteractionElement","trailingFooterSlot","_value$length","BaseBox","marginTop","hintMarginTop","marginRight","children","CharacterCounter","currentCount","maxCount","getKeyboardAndAutocompleteProps","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sources":["../../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport type { TaggedInputProps } from '../BaseInput/useTaggedInput';\nimport { useTaggedInput } from '../BaseInput/useTaggedInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type {\n  BladeElementRef,\n  BladeElementRefWithValue,\n  ContainerElementType,\n  DataAnalyticsAttribute,\n} from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\nimport { Divider } from '~components/Divider';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { DropdownOverlay } from '~components/Dropdown';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | 'leadingIcon'\n  | 'trailingButton'\n  | 'trailingIcon'\n  | 'textAlign'\n  | keyof DataAnalyticsAttribute\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   * @deprecated Use `leading` instead. This prop will be removed in the next major version.\n   */\n  icon?: IconComponent;\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n  /**\n   *\n   * Icon or React Element to be rendered at the end of the input field\n   */\n  trailing?: React.ReactElement | IconComponent;\n  /**\n   * Icon or React Element to be rendered at the beginning of the input field\n   */\n  leading?: React.ReactElement | IconComponent;\n} & TaggedInputProps &\n  StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    size = 'medium',\n    leadingIcon,\n    trailingIcon,\n    isTaggedInput,\n    tags,\n    onTagChange,\n    trailing,\n    leading,\n    ...rest\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRefWithValue>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n  const [isInputFocussed, setIsInputFocussed] = useState(autoFocus ?? false);\n  const {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  } = useTaggedInput({\n    isTaggedInput,\n    tags,\n    onTagChange,\n    isDisabled,\n    onChange,\n    name,\n    value,\n    inputRef: textInputRef,\n  });\n  const [isTrailingDropDownOpen, setIsTrailingDropDownOpen] = React.useState(false);\n  const [isLeadingDropDownOpen, setIsLeadingDropDownOpen] = React.useState(false);\n  const textInputWrapperRef = useRef<ContainerElementType | null>(null);\n\n  useEffect(() => {\n    if (isTrailingDropDownOpen && isLeadingDropDownOpen) {\n      setIsLeadingDropDownOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTrailingDropDownOpen]);\n\n  useEffect(() => {\n    if (isLeadingDropDownOpen && isTrailingDropDownOpen) {\n      setIsTrailingDropDownOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLeadingDropDownOpen]);\n\n  const leadingDropDown =\n    leading && getComponentId(leading as React.ReactElement) === 'Dropdown' ? leading : null;\n\n  const trailingDropdown =\n    trailing && getComponentId(trailing as React.ReactElement) === 'Dropdown' ? trailing : null;\n  // we need to look into name of component and check if it 's and icon or a dropdown\n  const _leadingIcon: IconComponent | undefined =\n    leading && typeof leading === 'function' && leading.name?.endsWith('Icon')\n      ? (leading as IconComponent)\n      : undefined;\n\n  const _trailingIcon: IconComponent | undefined =\n    trailing && typeof trailing === 'function' && trailing.name?.endsWith('Icon')\n      ? (trailing as IconComponent)\n      : undefined;\n  const hasLeadingInteractionElement = !_leadingIcon && !leadingDropDown && leading;\n\n  const hasTrailingInteractionElement = !_trailingIcon && !trailingDropdown && trailing;\n\n  const renderDropdown = (\n    dropdown: React.ReactElement,\n    isOpen: boolean,\n    setIsOpen: (isOpen: boolean) => void,\n    defaultPlacement: 'bottom-start' | 'bottom-end',\n  ): React.ReactElement | null => {\n    if (!dropdown) {\n      return null;\n    }\n    return React.cloneElement(dropdown, {\n      selectionType: 'single',\n      isOpen,\n      onOpenChange: (isOpen: boolean) => {\n        setIsOpen(isOpen);\n      },\n      children: React.Children.map(dropdown.props.children, (child) => {\n        if (child.type === DropdownOverlay) {\n          return React.cloneElement(child, {\n            referenceRef: textInputWrapperRef,\n            _isNestedDropdown: true,\n            defaultPlacement,\n          });\n        }\n        return child;\n      }),\n    });\n  };\n\n  const renderLeadingDropDown = renderDropdown(\n    leadingDropDown as React.ReactElement,\n    isLeadingDropDownOpen,\n    setIsLeadingDropDownOpen,\n    'bottom-start',\n  );\n  const renderTrailingDropDown = renderDropdown(\n    trailingDropdown as React.ReactElement,\n    isTrailingDropDownOpen,\n    setIsTrailingDropDownOpen,\n    'bottom-end',\n  );\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? value)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderClearButton = (): React.ReactElement => {\n    return (\n      <IconButton\n        size=\"medium\"\n        icon={CloseIcon}\n        onClick={() => {\n          if (isEmpty(value) && textInputRef.current) {\n            // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n            if (isReactNative(textInputRef.current)) {\n              textInputRef.current.clear();\n              textInputRef.current.focus();\n            } else if (textInputRef.current instanceof HTMLInputElement) {\n              textInputRef.current.value = '';\n              textInputRef.current.focus();\n            }\n          }\n          handleTagsClear();\n          // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n          onClearButtonClick?.();\n          textInputRef?.current?.focus();\n          setShouldShowClearButton(false);\n        }}\n        isDisabled={isDisabled}\n        accessibilityLabel=\"Clear Input Content\"\n      />\n    );\n  };\n  const hasTrailingDropDown = Boolean(trailingDropdown);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton && hasTrailingDropDown) {\n      return (\n        <BaseBox display=\"flex\" gap=\"spacing.3\">\n          {renderClearButton()} <Divider orientation=\"vertical\" />\n        </BaseBox>\n      );\n    }\n\n    if (showClearButton && hasTrailingInteractionElement) {\n      return (\n        <BaseBox display=\"flex\" gap=\"spacing.3\">\n          {renderClearButton()} <Divider orientation=\"vertical\" /> {trailing as React.ReactElement}\n        </BaseBox>\n      );\n    }\n\n    if (shouldShowClearButton) {\n      return renderClearButton();\n    }\n\n    if (hasTrailingInteractionElement) {\n      return trailing as React.ReactElement;\n    }\n    return null;\n  };\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      setInputWrapperRef={(wrapperNode) => {\n        textInputWrapperRef.current = wrapperNode;\n      }}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      maxCharacters={maxCharacters}\n      isDropdownTrigger={isTaggedInput}\n      tags={isTaggedInput ? getTags({ size }) : undefined}\n      showAllTags={isInputFocussed}\n      maxTagRows=\"single\"\n      activeTagIndex={activeTagIndex}\n      setActiveTagIndex={setActiveTagIndex}\n      leadingDropDown={renderLeadingDropDown}\n      trailingDropDown={renderTrailingDropDown}\n      leadingInteractionElement={\n        hasLeadingInteractionElement ? (leading as React.ReactElement) : null\n      }\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        handleTaggedInputChange({ name, value });\n        onChange?.({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={(e) => {\n        setIsInputFocussed(true);\n        onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        setIsInputFocussed(false);\n        onBlur?.(e);\n      }}\n      onKeyDown={(e) => {\n        handleTaggedInputKeydown(e);\n      }}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={_leadingIcon ?? leadingIcon ?? icon}\n      prefix={prefix}\n      trailingInteractionElement={renderInteractionElement()}\n      trailingIcon={_trailingIcon ?? trailingIcon}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter\n              currentCount={value?.length ?? 0}\n              maxCount={maxCharacters}\n              size={size}\n            />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      size={size}\n      {...rest}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextInput","_ref","ref","_leading$name","_trailing$name","_ref3","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","_ref$type","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","_ref$size","size","leadingIcon","trailingIcon","isTaggedInput","tags","onTagChange","trailing","leading","rest","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","_useState3","_useState4","isInputFocussed","setIsInputFocussed","_useTaggedInput","useTaggedInput","inputRef","activeTagIndex","setActiveTagIndex","getTags","handleTaggedInputKeydown","handleTaggedInputChange","handleTagsClear","_React$useState","_React$useState2","isTrailingDropDownOpen","setIsTrailingDropDownOpen","_React$useState3","_React$useState4","isLeadingDropDownOpen","setIsLeadingDropDownOpen","textInputWrapperRef","useEffect","leadingDropDown","getComponentId","trailingDropdown","_leadingIcon","endsWith","undefined","_trailingIcon","hasLeadingInteractionElement","hasTrailingInteractionElement","renderDropdown","dropdown","isOpen","setIsOpen","defaultPlacement","cloneElement","selectionType","onOpenChange","children","Children","map","props","child","DropdownOverlay","referenceRef","_isNestedDropdown","renderLeadingDropDown","renderTrailingDropDown","Boolean","renderClearButton","_jsx","IconButton","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","hasTrailingDropDown","renderInteractionElement","Spinner","color","_jsxs","BaseBox","display","gap","Divider","orientation","BaseInput","_objectSpread","id","componentName","MetaConstants","TextInput","setInputWrapperRef","wrapperNode","hideLabelText","isDropdownTrigger","showAllTags","maxTagRows","trailingDropDown","leadingInteractionElement","_ref2","length","e","onKeyDown","trailingInteractionElement","trailingFooterSlot","_value$length","marginTop","hintMarginTop","marginRight","CharacterCounter","currentCount","maxCount","getKeyboardAndAutocompleteProps","assignWithoutSideEffects","forwardRef","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmJA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,aAAkB,EAA4C;AACnF,EAAA,OAAOC,eAAe,EAAE,KAAK,cAAc,CAAA;AAC7C,CAAC,CAAA;AAED,IAAMC,UAA2E,GAAG,SAA9EA,UAA2EA,CAAAC,IAAA,EA4C/EC,GAAG,EACc;AAAA,EAAA,IAAAC,aAAA,EAAAC,cAAA,EAAAC,KAAA,CAAA;AAAA,EAAA,IA3CfC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,kBAAkB,GAAAN,IAAA,CAAlBM,kBAAkB;IAAAC,kBAAA,GAAAP,IAAA,CAClBQ,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,kBAAA;IACrBE,WAAW,GAAAT,IAAA,CAAXS,WAAW;IAAAC,SAAA,GAAAV,IAAA,CACXW,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,SAAA;IACbE,YAAY,GAAAZ,IAAA,CAAZY,YAAY;IACZC,IAAI,GAAAb,IAAA,CAAJa,IAAI;IACJC,KAAK,GAAAd,IAAA,CAALc,KAAK;IACLC,aAAa,GAAAf,IAAA,CAAbe,aAAa;IACbC,SAAQ,GAAAhB,IAAA,CAARgB,QAAQ;IACRC,OAAO,GAAAjB,IAAA,CAAPiB,OAAO;IACPC,QAAO,GAAAlB,IAAA,CAAPkB,OAAO;IACPC,OAAM,GAAAnB,IAAA,CAANmB,MAAM;IACNC,QAAQ,GAAApB,IAAA,CAARoB,QAAQ;IACRC,UAAU,GAAArB,IAAA,CAAVqB,UAAU;IACVC,kBAAkB,GAAAtB,IAAA,CAAlBsB,kBAAkB;IAClBC,eAAe,GAAAvB,IAAA,CAAfuB,eAAe;IACfC,SAAS,GAAAxB,IAAA,CAATwB,SAAS;IACTC,QAAQ,GAAAzB,IAAA,CAARyB,QAAQ;IACRC,WAAW,GAAA1B,IAAA,CAAX0B,WAAW;IACXC,UAAU,GAAA3B,IAAA,CAAV2B,UAAU;IACVC,IAAI,GAAA5B,IAAA,CAAJ4B,IAAI;IACJC,MAAM,GAAA7B,IAAA,CAAN6B,MAAM;IACNC,eAAe,GAAA9B,IAAA,CAAf8B,eAAe;IACfC,kBAAkB,GAAA/B,IAAA,CAAlB+B,kBAAkB;IAClBC,SAAS,GAAAhC,IAAA,CAATgC,SAAS;IACTC,MAAM,GAAAjC,IAAA,CAANiC,MAAM;IACNC,SAAS,GAAAlC,IAAA,CAATkC,SAAS;IACTC,qBAAqB,GAAAnC,IAAA,CAArBmC,qBAAqB;IACrBC,0BAA0B,GAAApC,IAAA,CAA1BoC,0BAA0B;IAC1BC,cAAc,GAAArC,IAAA,CAAdqC,cAAc;IACdC,MAAM,GAAAtC,IAAA,CAANsC,MAAM;IAAAC,SAAA,GAAAvC,IAAA,CACNwC,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IACfE,WAAW,GAAAzC,IAAA,CAAXyC,WAAW;IACXC,YAAY,GAAA1C,IAAA,CAAZ0C,YAAY;IACZC,aAAa,GAAA3C,IAAA,CAAb2C,aAAa;IACbC,IAAI,GAAA5C,IAAA,CAAJ4C,IAAI;IACJC,WAAW,GAAA7C,IAAA,CAAX6C,WAAW;IACXC,QAAQ,GAAA9C,IAAA,CAAR8C,QAAQ;IACRC,OAAO,GAAA/C,IAAA,CAAP+C,OAAO;AACJC,IAAAA,IAAI,GAAAC,wBAAA,CAAAjD,IAAA,EAAAkD,SAAA,CAAA,CAAA;AAIT,EAAA,IAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,CAA2B,IAAI,CAAC,CAAA;AACjE,EAAA,IAAMC,SAAS,GAAGC,YAAY,CAACtD,GAAG,EAAEkD,YAAY,CAAC,CAAA;AACjD,EAAA,IAAAK,SAAA,GAA0DC,QAAQ,CAAC,KAAK,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAlEI,IAAAA,qBAAqB,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,wBAAwB,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;EACtD,IAAAI,UAAA,GAA8CL,QAAQ,CAACvB,SAAS,KAATA,IAAAA,IAAAA,SAAS,KAATA,KAAAA,CAAAA,GAAAA,SAAS,GAAI,KAAK,CAAC;IAAA6B,UAAA,GAAAJ,cAAA,CAAAG,UAAA,EAAA,CAAA,CAAA;AAAnEE,IAAAA,eAAe,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,kBAAkB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;EAC1C,IAAAG,eAAA,GAOIC,cAAc,CAAC;AACjBxB,MAAAA,aAAa,EAAbA,aAAa;AACbC,MAAAA,IAAI,EAAJA,IAAI;AACJC,MAAAA,WAAW,EAAXA,WAAW;AACXxB,MAAAA,UAAU,EAAVA,UAAU;AACVL,MAAAA,QAAQ,EAARA,SAAQ;AACRH,MAAAA,IAAI,EAAJA,IAAI;AACJC,MAAAA,KAAK,EAALA,KAAK;AACLsD,MAAAA,QAAQ,EAAEjB,YAAAA;AACZ,KAAC,CAAC;IAfAkB,cAAc,GAAAH,eAAA,CAAdG,cAAc;IACdC,iBAAiB,GAAAJ,eAAA,CAAjBI,iBAAiB;IACjBC,OAAO,GAAAL,eAAA,CAAPK,OAAO;IACPC,wBAAwB,GAAAN,eAAA,CAAxBM,wBAAwB;IACxBC,uBAAuB,GAAAP,eAAA,CAAvBO,uBAAuB;IACvBC,eAAe,GAAAR,eAAA,CAAfQ,eAAe,CAAA;AAWjB,EAAA,IAAAC,eAAA,GAA4DvB,cAAK,CAACK,QAAQ,CAAC,KAAK,CAAC;IAAAmB,gBAAA,GAAAjB,cAAA,CAAAgB,eAAA,EAAA,CAAA,CAAA;AAA1EE,IAAAA,sBAAsB,GAAAD,gBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,yBAAyB,GAAAF,gBAAA,CAAA,CAAA,CAAA,CAAA;AACxD,EAAA,IAAAG,gBAAA,GAA0D3B,cAAK,CAACK,QAAQ,CAAC,KAAK,CAAC;IAAAuB,gBAAA,GAAArB,cAAA,CAAAoB,gBAAA,EAAA,CAAA,CAAA;AAAxEE,IAAAA,qBAAqB,GAAAD,gBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,wBAAwB,GAAAF,gBAAA,CAAA,CAAA,CAAA,CAAA;AACtD,EAAA,IAAMG,mBAAmB,GAAG9B,MAAM,CAA8B,IAAI,CAAC,CAAA;AAErE+B,EAAAA,SAAS,CAAC,YAAM;IACd,IAAIP,sBAAsB,IAAII,qBAAqB,EAAE;MACnDC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AACjC,KAAA;AACA;AACF,GAAC,EAAE,CAACL,sBAAsB,CAAC,CAAC,CAAA;AAE5BO,EAAAA,SAAS,CAAC,YAAM;IACd,IAAIH,qBAAqB,IAAIJ,sBAAsB,EAAE;MACnDC,yBAAyB,CAAC,KAAK,CAAC,CAAA;AAClC,KAAA;AACA;AACF,GAAC,EAAE,CAACG,qBAAqB,CAAC,CAAC,CAAA;AAE3B,EAAA,IAAMI,eAAe,GACnBtC,OAAO,IAAIuC,cAAc,CAACvC,OAA6B,CAAC,KAAK,UAAU,GAAGA,OAAO,GAAG,IAAI,CAAA;AAE1F,EAAA,IAAMwC,gBAAgB,GACpBzC,QAAQ,IAAIwC,cAAc,CAACxC,QAA8B,CAAC,KAAK,UAAU,GAAGA,QAAQ,GAAG,IAAI,CAAA;AAC7F;EACA,IAAM0C,YAAuC,GAC3CzC,OAAO,IAAI,OAAOA,OAAO,KAAK,UAAU,IAAA,CAAA7C,aAAA,GAAI6C,OAAO,CAAClC,IAAI,MAAAX,IAAAA,IAAAA,aAAA,KAAZA,KAAAA,CAAAA,IAAAA,aAAA,CAAcuF,QAAQ,CAAC,MAAM,CAAC,GACrE1C,OAAO,GACR2C,SAAS,CAAA;EAEf,IAAMC,aAAwC,GAC5C7C,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,IAAA,CAAA3C,cAAA,GAAI2C,QAAQ,CAACjC,IAAI,MAAAV,IAAAA,IAAAA,cAAA,KAAbA,KAAAA,CAAAA,IAAAA,cAAA,CAAesF,QAAQ,CAAC,MAAM,CAAC,GACxE3C,QAAQ,GACT4C,SAAS,CAAA;EACf,IAAME,4BAA4B,GAAG,CAACJ,YAAY,IAAI,CAACH,eAAe,IAAItC,OAAO,CAAA;EAEjF,IAAM8C,6BAA6B,GAAG,CAACF,aAAa,IAAI,CAACJ,gBAAgB,IAAIzC,QAAQ,CAAA;AAErF,EAAA,IAAMgD,cAAc,GAAG,SAAjBA,cAAcA,CAClBC,QAA4B,EAC5BC,MAAe,EACfC,SAAoC,EACpCC,gBAA+C,EACjB;IAC9B,IAAI,CAACH,QAAQ,EAAE;AACb,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;AACA,IAAA,oBAAO3C,cAAK,CAAC+C,YAAY,CAACJ,QAAQ,EAAE;AAClCK,MAAAA,aAAa,EAAE,QAAQ;AACvBJ,MAAAA,MAAM,EAANA,MAAM;AACNK,MAAAA,YAAY,EAAE,SAAAA,YAACL,CAAAA,MAAe,EAAK;QACjCC,SAAS,CAACD,MAAM,CAAC,CAAA;OAClB;AACDM,MAAAA,QAAQ,EAAElD,cAAK,CAACmD,QAAQ,CAACC,GAAG,CAACT,QAAQ,CAACU,KAAK,CAACH,QAAQ,EAAE,UAACI,KAAK,EAAK;AAC/D,QAAA,IAAIA,KAAK,CAAC/F,IAAI,KAAKgG,eAAe,EAAE;AAClC,UAAA,oBAAOvD,cAAK,CAAC+C,YAAY,CAACO,KAAK,EAAE;AAC/BE,YAAAA,YAAY,EAAEzB,mBAAmB;AACjC0B,YAAAA,iBAAiB,EAAE,IAAI;AACvBX,YAAAA,gBAAgB,EAAhBA,gBAAAA;AACF,WAAC,CAAC,CAAA;AACJ,SAAA;AACA,QAAA,OAAOQ,KAAK,CAAA;OACb,CAAA;AACH,KAAC,CAAC,CAAA;GACH,CAAA;EAED,IAAMI,qBAAqB,GAAGhB,cAAc,CAC1CT,eAAe,EACfJ,qBAAqB,EACrBC,wBAAwB,EACxB,cACF,CAAC,CAAA;EACD,IAAM6B,sBAAsB,GAAGjB,cAAc,CAC3CP,gBAAgB,EAChBV,sBAAsB,EACtBC,yBAAyB,EACzB,YACF,CAAC,CAAA;EAED1B,cAAK,CAACgC,SAAS,CAAC,YAAM;AACpBvB,IAAAA,wBAAwB,CAACmD,OAAO,CAAClF,eAAe,KAAKlB,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAA,KAAA,CAAA,GAAZA,YAAY,GAAIE,KAAK,CAAC,CAAC,CAAC,CAAA;GAC9E,EAAE,CAACgB,eAAe,EAAElB,YAAY,EAAEE,KAAK,CAAC,CAAC,CAAA;AAE1C,EAAA,IAAMmG,iBAAiB,GAAG,SAApBA,iBAAiBA,GAA6B;IAClD,oBACEC,GAAA,CAACC,UAAU,EAAA;AACT3E,MAAAA,IAAI,EAAC,QAAQ;AACbZ,MAAAA,IAAI,EAAEwF,SAAU;MAChBnG,OAAO,EAAE,SAAAA,OAAAA,GAAM;AAAA,QAAA,IAAAoG,qBAAA,CAAA;QACb,IAAIC,OAAO,CAACxG,KAAK,CAAC,IAAIqC,YAAY,CAACoE,OAAO,EAAE;AAC1C;AACA,UAAA,IAAI3H,aAAa,CAACuD,YAAY,CAACoE,OAAO,CAAC,EAAE;AACvCpE,YAAAA,YAAY,CAACoE,OAAO,CAACC,KAAK,EAAE,CAAA;AAC5BrE,YAAAA,YAAY,CAACoE,OAAO,CAACE,KAAK,EAAE,CAAA;AAC9B,WAAC,MAAM,IAAItE,YAAY,CAACoE,OAAO,YAAYG,gBAAgB,EAAE;AAC3DvE,YAAAA,YAAY,CAACoE,OAAO,CAACzG,KAAK,GAAG,EAAE,CAAA;AAC/BqC,YAAAA,YAAY,CAACoE,OAAO,CAACE,KAAK,EAAE,CAAA;AAC9B,WAAA;AACF,SAAA;AACA/C,QAAAA,eAAe,EAAE,CAAA;AACjB;AACA3C,QAAAA,kBAAkB,KAAlBA,IAAAA,IAAAA,kBAAkB,KAAlBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAkB,EAAI,CAAA;AACtBoB,QAAAA,YAAY,KAAZA,IAAAA,IAAAA,YAAY,KAAAkE,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,qBAAA,GAAZlE,YAAY,CAAEoE,OAAO,MAAA,IAAA,IAAAF,qBAAA,KAArBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAA,CAAuBI,KAAK,EAAE,CAAA;QAC9B5D,wBAAwB,CAAC,KAAK,CAAC,CAAA;OAC/B;AACFxC,MAAAA,UAAU,EAAEA,UAAW;AACvBf,MAAAA,kBAAkB,EAAC,qBAAA;AAAqB,KACzC,CAAC,CAAA;GAEL,CAAA;AACD,EAAA,IAAMqH,mBAAmB,GAAGX,OAAO,CAACzB,gBAAgB,CAAC,CAAA;AAErD,EAAA,IAAMqC,wBAAwB,GAAG,SAA3BA,wBAAwBA,GAAoB;AAChD,IAAA,IAAI5F,SAAS,EAAE;MACb,oBAAOkF,GAAA,CAACW,OAAO,EAAA;AAACvH,QAAAA,kBAAkB,EAAC,iBAAiB;AAACwH,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AACzE,KAAA;IAEA,IAAIlE,qBAAqB,IAAI+D,mBAAmB,EAAE;MAChD,oBACEI,IAAA,CAACC,OAAO,EAAA;AAACC,QAAAA,OAAO,EAAC,MAAM;AAACC,QAAAA,GAAG,EAAC,WAAW;QAAA5B,QAAA,EAAA,CACpCW,iBAAiB,EAAE,EAAC,GAAC,eAAAC,GAAA,CAACiB,OAAO,EAAA;AAACC,UAAAA,WAAW,EAAC,UAAA;AAAU,SAAE,CAAC,CAAA;AAAA,OACjD,CAAC,CAAA;AAEd,KAAA;IAEA,IAAItG,eAAe,IAAI+D,6BAA6B,EAAE;MACpD,oBACEkC,IAAA,CAACC,OAAO,EAAA;AAACC,QAAAA,OAAO,EAAC,MAAM;AAACC,QAAAA,GAAG,EAAC,WAAW;QAAA5B,QAAA,EAAA,CACpCW,iBAAiB,EAAE,EAAC,GAAC,eAAAC,GAAA,CAACiB,OAAO,EAAA;AAACC,UAAAA,WAAW,EAAC,UAAA;SAAY,CAAC,EAAC,GAAA,EAACtF,QAAQ,CAAA;AAAA,OAC3D,CAAC,CAAA;AAEd,KAAA;AAEA,IAAA,IAAIc,qBAAqB,EAAE;MACzB,OAAOqD,iBAAiB,EAAE,CAAA;AAC5B,KAAA;AAEA,IAAA,IAAIpB,6BAA6B,EAAE;AACjC,MAAA,OAAO/C,QAAQ,CAAA;AACjB,KAAA;AACA,IAAA,OAAO,IAAI,CAAA;GACZ,CAAA;AACD,EAAA,oBACEoE,GAAA,CAACmB,SAAS,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACRC,IAAAA,EAAE,EAAC,WAAW;IACdC,aAAa,EAAEC,aAAa,CAACC,SAAU;AACvCzI,IAAAA,GAAG,EAAEqD,SAAU;AACfqF,IAAAA,kBAAkB,EAAE,SAAAA,kBAACC,CAAAA,WAAW,EAAK;MACnCzD,mBAAmB,CAACoC,OAAO,GAAGqB,WAAW,CAAA;KACzC;AACFvI,IAAAA,KAAK,EAAEA,KAAgB;AACvBC,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCuI,IAAAA,aAAa,EAAE,CAAC7B,OAAO,CAAC3G,KAAK,CAAE;AAC/BG,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,WAAW,EAAEA,WAAY;AACzBG,IAAAA,YAAY,EAAEA,YAAa;AAC3BE,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,IAAI,EAAEA,IAAK;AACXE,IAAAA,aAAa,EAAEA,aAAc;AAC7B+H,IAAAA,iBAAiB,EAAEnG,aAAc;AACjCC,IAAAA,IAAI,EAAED,aAAa,GAAG4B,OAAO,CAAC;AAAE/B,MAAAA,IAAI,EAAJA,IAAAA;KAAM,CAAC,GAAGkD,SAAU;AACpDqD,IAAAA,WAAW,EAAE/E,eAAgB;AAC7BgF,IAAAA,UAAU,EAAC,QAAQ;AACnB3E,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,iBAAiB,EAAEA,iBAAkB;AACrCe,IAAAA,eAAe,EAAEyB,qBAAsB;AACvCmC,IAAAA,gBAAgB,EAAElC,sBAAuB;AACzCmC,IAAAA,yBAAyB,EACvBtD,4BAA4B,GAAI7C,OAAO,GAA0B,IAClE;AACD/B,IAAAA,QAAQ,EAAE,SAAAA,QAAAmI,CAAAA,KAAA,EAAqB;AAAA,MAAA,IAAlBtI,IAAI,GAAAsI,KAAA,CAAJtI,IAAI;QAAEC,KAAK,GAAAqI,KAAA,CAALrI,KAAK,CAAA;MACtB,IAAIgB,eAAe,IAAIhB,KAAK,KAAA,IAAA,IAALA,KAAK,KAALA,KAAAA,CAAAA,IAAAA,KAAK,CAAEsI,MAAM,EAAE;AACpC;QACAvF,wBAAwB,CAAC,IAAI,CAAC,CAAA;AAChC,OAAA;MAEA,IAAID,qBAAqB,IAAI,EAAC9C,KAAK,KAAA,IAAA,IAALA,KAAK,KAALA,KAAAA,CAAAA,IAAAA,KAAK,CAAEsI,MAAM,CAAE,EAAA;AAC3C;QACAvF,wBAAwB,CAAC,KAAK,CAAC,CAAA;AACjC,OAAA;AAEAY,MAAAA,uBAAuB,CAAC;AAAE5D,QAAAA,IAAI,EAAJA,IAAI;AAAEC,QAAAA,KAAK,EAALA,KAAAA;AAAM,OAAC,CAAC,CAAA;AACxCE,MAAAA,SAAQ,KAARA,IAAAA,IAAAA,SAAQ,KAARA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,SAAQ,CAAG;AAAEH,QAAAA,IAAI,EAAJA,IAAI;AAAEC,QAAAA,KAAK,EAALA,KAAAA;AAAM,OAAC,CAAC,CAAA;KAC3B;AACFG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,OAAO,EAAE,SAAAA,OAACmI,CAAAA,CAAC,EAAK;MACdpF,kBAAkB,CAAC,IAAI,CAAC,CAAA;AACxB/C,MAAAA,QAAO,aAAPA,QAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,QAAO,CAAGmI,CAAC,CAAC,CAAA;KACZ;AACFlI,IAAAA,MAAM,EAAE,SAAAA,MAACkI,CAAAA,CAAC,EAAK;MACbpF,kBAAkB,CAAC,KAAK,CAAC,CAAA;AACzB9C,MAAAA,OAAM,aAANA,OAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,OAAM,CAAGkI,CAAC,CAAC,CAAA;KACX;AACFC,IAAAA,SAAS,EAAE,SAAAA,SAACD,CAAAA,CAAC,EAAK;MAChB7E,wBAAwB,CAAC6E,CAAC,CAAC,CAAA;KAC3B;AACFjI,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCK,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,WAAW,EAAArC,CAAAA,KAAA,GAAEoF,YAAY,aAAZA,YAAY,KAAA,KAAA,CAAA,GAAZA,YAAY,GAAI/C,WAAW,MAAArC,IAAAA,IAAAA,KAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAA,GAAIwB,IAAK;AACjDC,IAAAA,MAAM,EAAEA,MAAO;IACf0H,0BAA0B,EAAE3B,wBAAwB,EAAG;AACvDlF,IAAAA,YAAY,EAAEiD,aAAa,KAAA,IAAA,IAAbA,aAAa,KAAbA,KAAAA,CAAAA,GAAAA,aAAa,GAAIjD,YAAa;AAC5CT,IAAAA,MAAM,EAAEA,MAAO;AACfV,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,WAAW,EAAEA,WAAY;AACzB8H,IAAAA,kBAAkB,EAAE,SAAAA,kBAAC1I,CAAAA,KAAK,EAAK;AAAA,MAAA,IAAA2I,aAAA,CAAA;AAC7B,MAAA,OAAO1I,aAAa,gBAClBmG,GAAA,CAACc,OAAO,EAAA;AAAC0B,QAAAA,SAAS,EAAEC,aAAa,CAACnH,IAAI,CAAE;AAACoH,QAAAA,WAAW,EAAC,WAAW;QAAAtD,QAAA,eAC9DY,GAAA,CAAC2C,gBAAgB,EAAA;AACfC,UAAAA,YAAY,EAAAL,CAAAA,aAAA,GAAE3I,KAAK,aAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAALA,KAAK,CAAEsI,MAAM,MAAAK,IAAAA,IAAAA,aAAA,KAAAA,KAAAA,CAAAA,GAAAA,aAAA,GAAI,CAAE;AACjCM,UAAAA,QAAQ,EAAEhJ,aAAc;AACxByB,UAAAA,IAAI,EAAEA,IAAAA;SACP,CAAA;OACM,CAAC,GACR,IAAI,CAAA;AACV,KAAA;AACA;AAAA;AACAN,IAAAA,SAAS,EAAEA,SAAU;AACrBI,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EACX0H,+BAA+B,CAAC;AAClCrJ,IAAAA,IAAI,EAAJA,IAAI;AACJwB,IAAAA,qBAAqB,EAArBA,qBAAqB;AACrBC,IAAAA,0BAA0B,EAA1BA,0BAA0B;AAC1BC,IAAAA,cAAc,EAAdA,cAAAA;AACF,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACFG,IAAAA,IAAI,EAAEA,IAAAA;GACFQ,EAAAA,IAAI,CACT,CAAC,CAAA;AAEN,CAAC,CAAA;AAEK0F,IAAAA,SAAS,gBAAGuB,wBAAwB,eAAC7G,cAAK,CAAC8G,UAAU,CAACnK,UAAU,CAAC,EAAE;AACvEoK,EAAAA,WAAW,EAAE,WAAA;AACf,CAAC;;;;"}

package/build/lib/web/development/components/Toast/ToastContainer.web.js

@@ -20,7 +20,7 @@ import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded = ["reverseOrder", "position", "toastOptions", "containerClassName"];
+var _excluded = ["reverseOrder", "position", "offsetBottom", "toastOptions", "containerClassName"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var StyledToastWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
@@ -80,6 +80,7 @@ var Toaster = function Toaster(_ref2) {
   var reverseOrder = _ref2.reverseOrder,
     _ref2$position = _ref2.position,
     position = _ref2$position === void 0 ? 'top-center' : _ref2$position,
+    offsetBottom = _ref2.offsetBottom,
     toastOptions = _ref2.toastOptions,
     containerClassName = _ref2.containerClassName,
     rest = _objectWithoutProperties(_ref2, _excluded);
@@ -98,7 +99,8 @@ var Toaster = function Toaster(_ref2) {
     setHasManuallyExpanded = _React$useState4[1];
   var isMobile = useIsMobile();
   var minToasts = isMobile ? MIN_TOAST_MOBILE : MIN_TOAST_DESKTOP;
-  var containerGutter = isMobile ? CONTAINER_GUTTER_MOBILE : CONTAINER_GUTTER_DESKTOP;
+  var defaultGutter = isMobile ? CONTAINER_GUTTER_MOBILE : CONTAINER_GUTTER_DESKTOP;
+  var bottomGutter = offsetBottom !== null && offsetBottom !== void 0 ? offsetBottom : defaultGutter;
   var infoToasts = React__default.useMemo(function () {
     return toasts.filter(function (toast) {
       return !isPromotionalToast(toast);
@@ -219,11 +221,11 @@ var Toaster = function Toaster(_ref2) {
   return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
     position: "fixed",
     zIndex: TOAST_Z_INDEX,
-    top: makeSize(containerGutter),
-    left: makeSize(containerGutter),
-    right: makeSize(containerGutter),
-    bottom: makeSize(containerGutter),
-    width: "calc(100% - ".concat(containerGutter * 2, "px)"),
+    top: makeSize(defaultGutter),
+    left: makeSize(defaultGutter),
+    right: makeSize(defaultGutter),
+    bottom: makeSize(bottomGutter),
+    width: "calc(100% - ".concat(defaultGutter * 2, "px)"),
     maxWidth: makeSize(TOAST_MAX_WIDTH),
     pointerEvents: "none",
     className: containerClassName
@@ -304,8 +306,10 @@ var Toaster = function Toaster(_ref2) {
     })]
   }));
 };
-var ToastContainer = function ToastContainer() {
+var ToastContainer = function ToastContainer(_ref4) {
+  var offsetBottom = _ref4.offsetBottom;
   return /*#__PURE__*/jsx(Toaster, {
+    offsetBottom: offsetBottom,
     position: "bottom-left"
   });
 };