npm - @razorpay/blade - Versions diffs - 12.33.1 → 12.33.2 - Mend

@razorpay/blade 12.33.1 → 12.33.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

package/build/lib/web/development/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.js CHANGED Viewed

@@ -2,22 +2,19 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import '../BaseInput/index.js';
 import { InputChevronIcon } from './InputChevronIcon.web.js';
-import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
 import { useDropdown } from '../../Dropdown/useDropdown.js';
 import '../../../utils/index.js';
 import { getActionListContainerRole } from '../../ActionList/getA11yRoles.js';
 import '../../../utils/metaAttribute/index.js';
 import { getTagsGroup } from '../../Tag/getTagsGroup.js';
-import { useFirstRender } from '../../../utils/useFirstRender.js';
 import { useTableContext } from '../../Table/TableContext.js';
 import { rowDensityToIsTableInputCellMapping, tableEditableCellRowDensityToInputSizeMap, validationStateToInputTrailingIconMap } from '../../Table/tokens.js';
 import { useTableEditableCell } from '../../Table/TableEditableCellContext.js';
 import '../../../utils/makeAnalyticsAttribute/index.js';
-import '../../../utils/fireNativeEvent/index.js';
 import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
+import '../../../utils/useControlledDropdownInput/index.js';
 import { jsx } from 'react/jsx-runtime';
-import { isBrowser } from '../../../utils/platform/isBrowser.js';
-import { fireNativeEvent } from '../../../utils/fireNativeEvent/fireNativeEvent.web.js';
+import { useControlledDropdownInput } from '../../../utils/useControlledDropdownInput/useControlledDropdownInput.js';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
 import { BaseInput } from '../BaseInput/BaseInput.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
@@ -25,127 +22,31 @@ import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/ma
 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 useControlledDropdownInput = function useControlledDropdownInput(props) {
-  var isFirstRender = useFirstRender();
-  var _useDropdown = useDropdown(),
-    changeCallbackTriggerer = _useDropdown.changeCallbackTriggerer,
-    isControlled = _useDropdown.isControlled,
-    options = _useDropdown.options,
-    selectedIndices = _useDropdown.selectedIndices,
-    controlledValueIndices = _useDropdown.controlledValueIndices,
-    setSelectedIndices = _useDropdown.setSelectedIndices,
-    selectionType = _useDropdown.selectionType,
-    setIsControlled = _useDropdown.setIsControlled;
-  var getValuesArrayFromIndices = function getValuesArrayFromIndices() {
-    var indices = [];
-    if (isControlled) {
-      indices = controlledValueIndices;
-    } else {
-      indices = selectedIndices;
-    }
-    return indices.map(function (selectionIndex) {
-      return options[selectionIndex].value;
-    });
-  };
-  var selectValues = function selectValues(valuesToSelect) {
-    if (options.length > 0) {
-      // we use empty `''` for clearing the input
-      if (isEmpty(valuesToSelect)) {
-        setSelectedIndices([]);
-      } else if (typeof valuesToSelect === 'string') {
-        // single select control
-        var selectedItemIndex = options.findIndex(function (option) {
-          return option.value === valuesToSelect;
-        });
-        if (selectedItemIndex >= 0) {
-          setSelectedIndices([selectedItemIndex]);
-        }
-      } else {
-        // multiselect control
-        // Handles repeated values in user state
-        var uniqueValues = Array.from(new Set(valuesToSelect));
-        // Handle selectionType single with multiselect values
-        var userValues = selectionType === 'single' ? [valuesToSelect === null || valuesToSelect === void 0 ? void 0 : valuesToSelect[0]] : uniqueValues;
-        var selectedItemIndices = userValues.map(function (optionValue) {
-          return options.findIndex(function (option) {
-            return option.value === optionValue;
-          });
-        }).filter(function (value) {
-          return value >= 0;
-        });
-        setSelectedIndices(selectedItemIndices);
-      }
-    }
-  };
-  // Handles `defaultValue` prop
-  React__default.useEffect(function () {
-    if (options.length > 0 && props.defaultValue) {
-      selectValues(props.defaultValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options.length]);
-  // Handles `value` prop
-  React__default.useEffect(function () {
-    if (options.length > 0 && props.value !== undefined) {
-      if (!isControlled) {
-        setIsControlled(true);
-      }
-      selectValues(props.value);
-      // in single select AutoComplete, we have to set inputValue of autocomplete according to the new selection.
-      if (selectionType === 'single' && !Array.isArray(props.value) && !props.isSelectInput) {
-        var _props$syncInputValue;
-        (_props$syncInputValue = props.syncInputValueWithSelection) === null || _props$syncInputValue === void 0 ? void 0 : _props$syncInputValue.call(props, props.value);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.value, options]);
-  // onChange behaviour
-  React__default.useEffect(function () {
-    // Ignore calling onChange on mount
-    if (!isFirstRender) {
-      var _props$onChange;
-      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
-        name: props.name,
-        values: getValuesArrayFromIndices()
-      });
-      if (isBrowser()) {
-        fireNativeEvent(props.triggererRef, ['change', 'input']);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [changeCallbackTriggerer]);
-};
 var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
   var _props$placeholder, _props$validationStat, _props$maxRows, _props$label;
-  var _useDropdown2 = useDropdown(),
-    isOpen = _useDropdown2.isOpen,
-    activeTagIndex = _useDropdown2.activeTagIndex,
-    setActiveTagIndex = _useDropdown2.setActiveTagIndex,
-    displayValue = _useDropdown2.displayValue,
-    selectionType = _useDropdown2.selectionType,
-    dropdownTriggerer = _useDropdown2.dropdownTriggerer,
-    dropdownBaseId = _useDropdown2.dropdownBaseId,
-    selectedIndices = _useDropdown2.selectedIndices,
-    triggererRef = _useDropdown2.triggererRef,
-    headerAutoCompleteRef = _useDropdown2.headerAutoCompleteRef,
-    triggererWrapperRef = _useDropdown2.triggererWrapperRef,
-    isTagDismissedRef = _useDropdown2.isTagDismissedRef,
-    onTriggerClick = _useDropdown2.onTriggerClick,
-    value = _useDropdown2.value,
-    shouldIgnoreBlurAnimation = _useDropdown2.shouldIgnoreBlurAnimation,
-    setShouldIgnoreBlurAnimation = _useDropdown2.setShouldIgnoreBlurAnimation,
-    activeIndex = _useDropdown2.activeIndex,
-    hasFooterAction = _useDropdown2.hasFooterAction,
-    options = _useDropdown2.options,
-    removeOption = _useDropdown2.removeOption,
-    setChangeCallbackTriggerer = _useDropdown2.setChangeCallbackTriggerer,
-    changeCallbackTriggerer = _useDropdown2.changeCallbackTriggerer;
+  var _useDropdown = useDropdown(),
+    isOpen = _useDropdown.isOpen,
+    activeTagIndex = _useDropdown.activeTagIndex,
+    setActiveTagIndex = _useDropdown.setActiveTagIndex,
+    displayValue = _useDropdown.displayValue,
+    selectionType = _useDropdown.selectionType,
+    dropdownTriggerer = _useDropdown.dropdownTriggerer,
+    dropdownBaseId = _useDropdown.dropdownBaseId,
+    selectedIndices = _useDropdown.selectedIndices,
+    triggererRef = _useDropdown.triggererRef,
+    headerAutoCompleteRef = _useDropdown.headerAutoCompleteRef,
+    triggererWrapperRef = _useDropdown.triggererWrapperRef,
+    isTagDismissedRef = _useDropdown.isTagDismissedRef,
+    onTriggerClick = _useDropdown.onTriggerClick,
+    value = _useDropdown.value,
+    shouldIgnoreBlurAnimation = _useDropdown.shouldIgnoreBlurAnimation,
+    setShouldIgnoreBlurAnimation = _useDropdown.setShouldIgnoreBlurAnimation,
+    activeIndex = _useDropdown.activeIndex,
+    hasFooterAction = _useDropdown.hasFooterAction,
+    options = _useDropdown.options,
+    removeOption = _useDropdown.removeOption,
+    setChangeCallbackTriggerer = _useDropdown.setChangeCallbackTriggerer,
+    changeCallbackTriggerer = _useDropdown.changeCallbackTriggerer;
   var _useTableContext = useTableContext(),
     rowDensity = _useTableContext.rowDensity;
   var _useTableEditableCell = useTableEditableCell(),

package/build/lib/web/development/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.js.map CHANGED Viewed

	@@ -1 +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, useControlledDropdownInputProps } from './types';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { isReactNative, isBrowser } from '~utils';\nimport { getActionListContainerRole } from '~components/ActionList/getA11yRoles';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport type { BladeElementRef } from '~utils/types';\nimport { useFirstRender } from '~utils/useFirstRender';\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 { fireNativeEvent } from '~utils/fireNativeEvent';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\n\nconst useControlledDropdownInput = (props: useControlledDropdownInputProps): void => {\n const isFirstRender = useFirstRender();\n const {\n changeCallbackTriggerer,\n isControlled,\n options,\n selectedIndices,\n controlledValueIndices,\n setSelectedIndices,\n selectionType,\n setIsControlled,\n } = useDropdown();\n\n const getValuesArrayFromIndices = (): string[] => {\n let indices: number[] = [];\n if (isControlled) {\n indices = controlledValueIndices;\n } else {\n indices = selectedIndices;\n }\n\n return indices.map((selectionIndex) => options[selectionIndex].value);\n };\n\n const selectValues = (valuesToSelect: string \| string[]): void => {\n if (options.length > 0) {\n // we use empty `''` for clearing the input\n if (isEmpty(valuesToSelect)) {\n setSelectedIndices([]);\n } else if (typeof valuesToSelect === 'string') {\n // single select control\n const selectedItemIndex = options.findIndex((option) => option.value === valuesToSelect);\n if (selectedItemIndex >= 0) {\n setSelectedIndices([selectedItemIndex]);\n }\n } else {\n // multiselect control\n\n // Handles repeated values in user state\n const uniqueValues = Array.from(new Set(valuesToSelect));\n // Handle selectionType single with multiselect values\n const userValues = selectionType === 'single' ? [valuesToSelect?.[0]] : uniqueValues;\n\n const selectedItemIndices = userValues\n .map((optionValue) => options.findIndex((option) => option.value === optionValue))\n .filter((value) => value >= 0);\n\n setSelectedIndices(selectedItemIndices);\n }\n }\n };\n\n // Handles `defaultValue` prop\n React.useEffect(() => {\n if (options.length > 0 && props.defaultValue) {\n selectValues(props.defaultValue);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [options.length]);\n\n // Handles `value` prop\n React.useEffect(() => {\n if (options.length > 0 && props.value !== undefined) {\n if (!isControlled) {\n setIsControlled(true);\n }\n\n selectValues(props.value);\n\n // in single select AutoComplete, we have to set inputValue of autocomplete according to the new selection.\n if (selectionType === 'single' && !Array.isArray(props.value) && !props.isSelectInput) {\n props.syncInputValueWithSelection?.(props.value);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.value, options]);\n\n // onChange behaviour\n React.useEffect(() => {\n // Ignore calling onChange on mount\n\n if (!isFirstRender) {\n props.onChange?.({\n name: props.name,\n values: getValuesArrayFromIndices(),\n });\n if (isBrowser()) {\n fireNativeEvent(props.triggererRef, ['change', 'input']);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [changeCallbackTriggerer]);\n};\n\nconst _BaseDropdownInputTrigger = (\n props: BaseDropdownInputTriggerProps,\n ref: React.ForwardedRef<BladeElementRef>,\n): React.ReactElement => {\n const {\n isOpen,\n activeTagIndex,\n setActiveTagIndex,\n displayValue,\n selectionType,\n dropdownTriggerer,\n dropdownBaseId,\n selectedIndices,\n triggererRef,\n 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 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":["useControlledDropdownInput","props","isFirstRender","useFirstRender","_useDropdown","useDropdown","changeCallbackTriggerer","isControlled","options","selectedIndices","controlledValueIndices","setSelectedIndices","selectionType","setIsControlled","getValuesArrayFromIndices","indices","map","selectionIndex","value","selectValues","valuesToSelect","length","isEmpty","selectedItemIndex","findIndex","option","uniqueValues","Array","from","Set","userValues","selectedItemIndices","optionValue","filter","React","useEffect","defaultValue","undefined","isArray","isSelectInput","_props$syncInputValue","syncInputValueWithSelection","call","_props$onChange","onChange","name","values","isBrowser","fireNativeEvent","triggererRef","_BaseDropdownInputTrigger","ref","_props$placeholder","_props$validationStat","_props$maxRows","_props$label","_useDropdown2","isOpen","activeTagIndex","setActiveTagIndex","displayValue","dropdownTriggerer","dropdownBaseId","headerAutoCompleteRef","triggererWrapperRef","isTagDismissedRef","onTriggerClick","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","activeIndex","hasFooterAction","removeOption","setChangeCallbackTriggerer","_useTableContext","useTableContext","rowDensity","_useTableEditableCell","useTableEditableCell","isInsideTableEditableCell","dropdownTriggerPlaceholder","placeholder","isAutoCompleteInHeader","dropdownComponentIds","triggers","AutoComplete","getShowAllTags","useCallback","getValue","prefix","labelPosition","label","concat","inputValue","getTags","useMemo","_ref","size","getTagsGroup","tags","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","_objectSpread","as","node","isDropdownTrigger","setInputWrapperRef","wrapperNode","maxTagRows","maxRows","showAllTags","textAlign","hideLabelText","accessibilityLabel","isLabelInsideInput","necessityIndicator","autoCompleteSuggestionType","helpText","errorText","successText","isRequired","suffix","autoFocus","onClick","e","_props$onTriggerClick","onFocus","onBlur","_ref3","_props$onBlur","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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"}
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 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","concat","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","_objectSpread","as","node","isDropdownTrigger","setInputWrapperRef","wrapperNode","maxTagRows","maxRows","showAllTags","textAlign","length","hideLabelText","accessibilityLabel","isLabelInsideInput","necessityIndicator","autoCompleteSuggestionType","helpText","errorText","successText","isRequired","suffix","autoFocus","onClick","e","_props$onTriggerClick","call","onFocus","onBlur","_ref3","_props$onBlur","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/web/development/components/Input/PhoneNumberInput/CountrySelector.web.js CHANGED Viewed

@@ -19,8 +19,7 @@ import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import { size } from '../../../tokens/global/size.js';
 import { Dropdown } from '../../Dropdown/Dropdown.js';
 import { DropdownButton } from '../../Dropdown/DropdownButton.js';
-import ChevronUpIcon from '../../Icons/ChevronUpIcon/ChevronUpIcon.js';
-import ChevronDownIcon from '../../Icons/ChevronDownIcon/ChevronDownIcon.js';
+import ChevronUpDownIcon from '../../Icons/ChevronUpDownIcon/ChevronUpDownIcon.js';
 import { BottomSheet } from '../../BottomSheet/BottomSheet.web.js';
 import { BottomSheetHeader } from '../../BottomSheet/BottomSheetHeader.web.js';
 import { BottomSheetBody } from '../../BottomSheet/BottomSheetBody.web.js';
@@ -83,9 +82,12 @@ var CountrySelector = function CountrySelector(_ref) {
       children: /*#__PURE__*/jsx(DropdownButton, {
         isDisabled: isDisabled,
         size: size$1 === 'medium' ? 'xsmall' : 'medium',
-        variant: "tertiary",
+        variant: "tertiary"
+        //@ts-expect-error
+        ,
+        color: "transparent",
         accessibilityLabel: "".concat(countryNameFormatter.of(selectedCountry), " - Select Country"),
-        icon: isDropdownOpen ? ChevronUpIcon : ChevronDownIcon,
+        icon: ChevronUpDownIcon,
         iconPosition: "right"
         // We need to prevent the click event from propagating to the BaseInputWrapper,
         // Because the BaseInputWrapper is listening for click events to focus the input.

package/build/lib/web/development/components/Input/PhoneNumberInput/CountrySelector.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CountrySelector.web.js","sources":["../../../../../../../src/components/Input/PhoneNumberInput/CountrySelector.web.tsx"],"sourcesContent":["import type { CountryCodeType, getFlagsForAllCountries } from '@razorpay/i18nify-js';\nimport { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n ActionList,\n ActionListItem,\n ActionListItemAsset,\n ActionListItemText,\n} from '~components/ActionList';\nimport { BottomSheet, BottomSheetBody, BottomSheetHeader } from '~components/BottomSheet';\nimport type { DropdownOverlayProps } from '~components/Dropdown';\nimport { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';\nimport { ~~ChevronDownIcon,~~ ~~ChevronUpIcon~~ } from '~components/Icons';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { size as sizes } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst countryNameFormatter = new Intl.DisplayNames(['en'], { type: 'region' });\n\ntype CountryData = {\n code: CountryCodeType;\n name: string;\n}[];\ntype CounterSelectorProps = {\n selectedCountry: CountryCodeType;\n inputWrapperRef: DropdownOverlayProps['referenceRef'];\n countryData: CountryData;\n onItemClick: (props: { name: string }) => void;\n flags: ReturnType<typeof getFlagsForAllCountries>;\n isDisabled?: boolean;\n size: 'medium' \| 'large';\n};\n\nconst CountryDropdownButtonWrapper = styled(BaseBox)(() => {\n return {\n '& > button': {\n padding: '0',\n width: '100%',\n },\n };\n});\n\nconst CountrySelector = ({\n isDisabled,\n selectedCountry,\n inputWrapperRef,\n countryData,\n onItemClick,\n flags,\n size,\n}: CounterSelectorProps): React.ReactElement => {\n const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n const isMobile = useIsMobile();\n\n const actionList = (\n <ActionList isVirtualized>\n {countryData.map((country) => {\n return (\n <ActionListItem\n key={country.code}\n onClick={onItemClick}\n leading={<ActionListItemAsset src={flags[country.code]['4X3']} alt={country.name} />}\n title={country.name}\n value={country.code}\n trailing={\n <ActionListItemText>{getDialCodeByCountryCode(country.code)}</ActionListItemText>\n }\n />\n );\n })}\n </ActionList>\n );\n\n const flagSize = {\n medium: makeSize(sizes[20]),\n large: makeSize(sizes[24]),\n } as const;\n\n return (\n <Dropdown isOpen={isDropdownOpen} onOpenChange={setIsDropdownOpen}>\n {/* TODO: Remove once CountrySelector's button sizing is fixed in figma /}\n <CountryDropdownButtonWrapper\n width={size === 'medium' ? '45px' : '60px'}\n marginLeft={size === 'medium' ? '-3px' : '-2px'}\n >\n <DropdownButton\n isDisabled={isDisabled}\n size={size === 'medium' ? 'xsmall' : 'medium'}\n variant=\"tertiary\"\n accessibilityLabel={`${countryNameFormatter.of(selectedCountry)} - Select Country`}\n icon={~~isDropdownOpen ? ChevronUpIcon : ChevronDownIcon~~}\n iconPosition=\"right\"\n // We need to prevent the click event from propagating to the BaseInputWrapper,\n // Because the BaseInputWrapper is listening for click events to focus the input.\n // We don't want that to happen when the user clicks on the dropdown button\n // otherwise the dropdown will close immediately after opening\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {/ @ts-expect-error */}\n <img\n loading=\"lazy\"\n role=\"presentation\"\n width={flagSize[size]}\n src={getFlagOfCountry(selectedCountry)['4X3']}\n alt=\"\"\n />\n </DropdownButton>\n </CountryDropdownButtonWrapper>\n {isMobile ? (\n <BottomSheet>\n <BottomSheetHeader title=\"Select A Country\" />\n <BottomSheetBody>{actionList}</BottomSheetBody>\n </BottomSheet>\n ) : (\n <DropdownOverlay referenceRef={inputWrapperRef}>{actionList}</DropdownOverlay>\n )}\n </Dropdown>\n );\n};\n\nexport { CountrySelector, countryNameFormatter };\n"],"names":["countryNameFormatter","Intl","DisplayNames","type","CountryDropdownButtonWrapper","styled","BaseBox","withConfig","displayName","componentId","padding","width","CountrySelector","_ref","isDisabled","selectedCountry","inputWrapperRef","countryData","onItemClick","flags","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isDropdownOpen","setIsDropdownOpen","isMobile","useIsMobile","actionList","_jsx","ActionList","isVirtualized","children","map","country","ActionListItem","onClick","leading","ActionListItemAsset","src","code","alt","name","title","value","trailing","ActionListItemText","getDialCodeByCountryCode","flagSize","medium","makeSize","sizes","large","_jsxs","Dropdown","isOpen","onOpenChange","marginLeft","DropdownButton","variant","accessibilityLabel","concat","of","icon","~~ChevronUpIcon~~","~~ChevronDownIcon","~~iconPosition","e","stopPropagation","loading","role","getFlagOfCountry","BottomSheet","BottomSheetHeader","BottomSheetBody","DropdownOverlay","referenceRef"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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~~UAAU~~;~~QAClBC~~,kBAAkB,EAAA,EAAA,CAAAC,MAAA,~~CAAK/D~~,oBAAoB,~~CAACgE~~,EAAE,~~CAACjD~~,eAAe,CAAC,EAAoB,mBAAA,CAAA;~~AACnFkD~~,QAAAA,IAAI,~~EAAEvC~~,~~cAAc,GAAGwC,aAAa,GAAGC,eAAgB~~;~~AACvDC~~,QAAAA,YAAY,EAAC,OAAA;AACb;AACA;AACA;AACA;AAAA;AACA9B,QAAAA,OAAO,EAAE,SAAAA,OAAC+B,CAAAA,CAAC,EAAK;UACdA,CAAC,CAACC,eAAe,EAAE,CAAA;SACnB;AAAApC,QAAAA,QAAA,eAGFH,GAAA,CAAA,KAAA,EAAA;AACEwC,UAAAA,OAAO,EAAC,MAAM;AACdC,UAAAA,IAAI,EAAC,cAAc;AACnB7D,UAAAA,KAAK,EAAEuC,QAAQ,CAAC9B,MAAI,CAAE;AACtBqB,UAAAA,GAAG,EAAEgC,gBAAgB,CAAC1D,eAAe,CAAC,CAAC,KAAK,CAAE;AAC9C4B,UAAAA,GAAG,EAAC,EAAA;SACL,CAAA;OACa,CAAA;AAAC,KACW,CAAC,EAC9Bf,QAAQ,gBACP2B,IAAA,CAACmB,WAAW,EAAA;MAAAxC,QAAA,EAAA,cACVH,GAAA,CAAC4C,iBAAiB,EAAA;AAAC9B,QAAAA,KAAK,EAAC,kBAAA;AAAkB,OAAE,CAAC,eAC9Cd,GAAA,CAAC6C,eAAe,EAAA;AAAA1C,QAAAA,QAAA,EAAEJ,UAAAA;AAAU,OAAkB,CAAC,CAAA;AAAA,KACpC,CAAC,gBAEdC,GAAA,CAAC8C,eAAe,EAAA;AAACC,MAAAA,YAAY,EAAE9D,eAAgB;AAAAkB,MAAAA,QAAA,EAAEJ,UAAAA;AAAU,KAAkB,CAC9E,CAAA;AAAA,GACO,CAAC,CAAA;AAEf;;;;"}
1	+ {"version":3,"file":"CountrySelector.web.js","sources":["../../../../../../../src/components/Input/PhoneNumberInput/CountrySelector.web.tsx"],"sourcesContent":["import type { CountryCodeType, getFlagsForAllCountries } from '@razorpay/i18nify-js';\nimport { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n ActionList,\n ActionListItem,\n ActionListItemAsset,\n ActionListItemText,\n} from '~components/ActionList';\nimport { BottomSheet, BottomSheetBody, BottomSheetHeader } from '~components/BottomSheet';\nimport type { DropdownOverlayProps } from '~components/Dropdown';\nimport { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';\nimport { ChevronUpDownIcon } from '~components/Icons';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { size as sizes } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst countryNameFormatter = new Intl.DisplayNames(['en'], { type: 'region' });\n\ntype CountryData = {\n code: CountryCodeType;\n name: string;\n}[];\ntype CounterSelectorProps = {\n selectedCountry: CountryCodeType;\n inputWrapperRef: DropdownOverlayProps['referenceRef'];\n countryData: CountryData;\n onItemClick: (props: { name: string }) => void;\n flags: ReturnType<typeof getFlagsForAllCountries>;\n isDisabled?: boolean;\n size: 'medium' \| 'large';\n};\n\nconst CountryDropdownButtonWrapper = styled(BaseBox)(() => {\n return {\n '& > button': {\n padding: '0',\n width: '100%',\n },\n };\n});\n\nconst CountrySelector = ({\n isDisabled,\n selectedCountry,\n inputWrapperRef,\n countryData,\n onItemClick,\n flags,\n size,\n}: CounterSelectorProps): React.ReactElement => {\n const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n const isMobile = useIsMobile();\n\n const actionList = (\n <ActionList isVirtualized>\n {countryData.map((country) => {\n return (\n <ActionListItem\n key={country.code}\n onClick={onItemClick}\n leading={<ActionListItemAsset src={flags[country.code]['4X3']} alt={country.name} />}\n title={country.name}\n value={country.code}\n trailing={\n <ActionListItemText>{getDialCodeByCountryCode(country.code)}</ActionListItemText>\n }\n />\n );\n })}\n </ActionList>\n );\n\n const flagSize = {\n medium: makeSize(sizes[20]),\n large: makeSize(sizes[24]),\n } as const;\n\n return (\n <Dropdown isOpen={isDropdownOpen} onOpenChange={setIsDropdownOpen}>\n {/* TODO: Remove once CountrySelector's button sizing is fixed in figma /}\n <CountryDropdownButtonWrapper\n width={size === 'medium' ? '45px' : '60px'}\n marginLeft={size === 'medium' ? '-3px' : '-2px'}\n >\n <DropdownButton\n isDisabled={isDisabled}\n size={size === 'medium' ? 'xsmall' : 'medium'}\n variant=\"tertiary\"\n //@ts-expect-error\n color=\"transparent\"\n accessibilityLabel={`${countryNameFormatter.of(selectedCountry)} - Select Country`}\n icon={ChevronUpDownIcon}\n iconPosition=\"right\"\n // We need to prevent the click event from propagating to the BaseInputWrapper,\n // Because the BaseInputWrapper is listening for click events to focus the input.\n // We don't want that to happen when the user clicks on the dropdown button\n // otherwise the dropdown will close immediately after opening\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {/ @ts-expect-error */}\n <img\n loading=\"lazy\"\n role=\"presentation\"\n width={flagSize[size]}\n src={getFlagOfCountry(selectedCountry)['4X3']}\n alt=\"\"\n />\n </DropdownButton>\n </CountryDropdownButtonWrapper>\n {isMobile ? (\n <BottomSheet>\n <BottomSheetHeader title=\"Select A Country\" />\n <BottomSheetBody>{actionList}</BottomSheetBody>\n </BottomSheet>\n ) : (\n <DropdownOverlay referenceRef={inputWrapperRef}>{actionList}</DropdownOverlay>\n )}\n </Dropdown>\n );\n};\n\nexport { CountrySelector, countryNameFormatter };\n"],"names":["countryNameFormatter","Intl","DisplayNames","type","CountryDropdownButtonWrapper","styled","BaseBox","withConfig","displayName","componentId","padding","width","CountrySelector","_ref","isDisabled","selectedCountry","inputWrapperRef","countryData","onItemClick","flags","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isDropdownOpen","setIsDropdownOpen","isMobile","useIsMobile","actionList","_jsx","ActionList","isVirtualized","children","map","country","ActionListItem","onClick","leading","ActionListItemAsset","src","code","alt","name","title","value","trailing","ActionListItemText","getDialCodeByCountryCode","flagSize","medium","makeSize","sizes","large","_jsxs","Dropdown","isOpen","onOpenChange","marginLeft","DropdownButton","variant","color","accessibilityLabel","concat","of","icon","ChevronUpDownIcon","iconPosition","e","stopPropagation","loading","role","getFlagOfCountry","BottomSheet","BottomSheetHeader","BottomSheetBody","DropdownOverlay","referenceRef"],"mappings":"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"}

package/build/lib/web/development/components/Input/SearchInput/SearchInput.js CHANGED Viewed

@@ -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, useEffect } from 'react';
 import '../BaseInput/index.js';
 import { getKeyboardAndAutocompleteProps } from '../BaseInput/utils.js';
 import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
@@ -15,18 +15,25 @@ import '../../../utils/index.js';
 import { useMergeRefs } from '../../../utils/useMergeRefs.js';
 import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
 import { useDropdown } from '../../Dropdown/useDropdown.js';
-import { jsx } from 'react/jsx-runtime';
+import '../../Dropdown/index.js';
+import '../../Divider/index.js';
+import '../../../utils/isValidAllowedChildren/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 { InputDropdownButton } from '../../Dropdown/InputDropdownButton.web.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 SearchIcon from '../../Icons/SearchIcon/SearchIcon.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
-var _excluded = ["label", "accessibilityLabel", "labelPosition", "placeholder", "defaultValue", "name", "value", "onChange", "onClick", "onFocus", "onBlur", "onSubmit", "isDisabled", "helpText", "onClearButtonClick", "isLoading", "autoCapitalize", "autoFocus", "testID", "size", "showSearchIcon"];
+var _excluded = ["label", "accessibilityLabel", "labelPosition", "placeholder", "defaultValue", "name", "value", "onChange", "onClick", "onFocus", "onBlur", "onSubmit", "isDisabled", "helpText", "onClearButtonClick", "isLoading", "autoCapitalize", "autoFocus", "testID", "size", "showSearchIcon", "trailing"];
 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 SearchInput of React Native and make it believe that `ref.current.clear()` exists
@@ -59,6 +66,7 @@ var _SearchInput = function _SearchInput(_ref, ref) {
     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);
@@ -66,15 +74,87 @@ var _SearchInput = function _SearchInput(_ref, ref) {
     _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;
+    dropdownTriggerer = _useDropdown.dropdownTriggerer,
+    closeParentDropDown = _useDropdown.close,
+    isParentDropDownOpen = _useDropdown.isOpen;
   var isInsideDropdown = dropdownTriggerer === 'SearchInput';
   React__default.useEffect(function () {
     setShouldShowClearButton(Boolean(defaultValue !== null && defaultValue !== void 0 ? defaultValue : value));
   }, [defaultValue, value]);
+  useEffect(function () {
+    if (isParentDropDownOpen && isTrailingDropDownOpen) {
+      setIsTrailingDropDownOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [closeParentDropDown, isParentDropDownOpen]);
+  useEffect(function () {
+    if (isTrailingDropDownOpen && isParentDropDownOpen) {
+      closeParentDropDown();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setIsTrailingDropDownOpen, isTrailingDropDownOpen]);
+  var trailingDropdown = trailing && getComponentId(trailing) === 'Dropdown' ? trailing : null;
+  var renderTrailingDropDown = function renderTrailingDropDown() {
+    if (!trailingDropdown) {
+      return null;
+    }
+    return /*#__PURE__*/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 /*#__PURE__*/React__default.cloneElement(child, {
+            _isInsideSearchInput: true
+          });
+        }
+        if (child.type === DropdownOverlay) {
+          return /*#__PURE__*/React__default.cloneElement(child, {
+            referenceRef: triggererWrapperRef,
+            _isNestedDropdown: true,
+            defaultPlacement: 'bottom-end'
+          });
+        }
+        return child;
+      })
+    });
+  };
+  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();
+          }
+        }
+        // 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 renderInteractionElement = function renderInteractionElement() {
     if (isLoading) {
       return /*#__PURE__*/jsx(Spinner, {
@@ -82,32 +162,18 @@ var _SearchInput = function _SearchInput(_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();
-            }
-          }
-          // 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 && trailingDropdown) {
+      return /*#__PURE__*/jsxs(BaseBox, {
+        display: "flex",
+        gap: "spacing.3",
+        children: [renderClearButton(), " ", /*#__PURE__*/jsx(Divider, {
+          orientation: "vertical"
+        })]
       });
     }
+    if (shouldShowClearButton) {
+      return renderClearButton();
+    }
     return null;
   };
   return /*#__PURE__*/jsx(BaseBox, {
@@ -117,7 +183,7 @@ var _SearchInput = function _SearchInput(_ref, ref) {
       componentName: MetaConstants.SearchInput,
       ref: mergedRef,
       isDropdownTrigger: true,
-      setInputWrapperRef: isInsideDropdown ? function (wrapperNode) {
+      setInputWrapperRef: isInsideDropdown || isTrailingDropDownOpen ? function (wrapperNode) {
         triggererWrapperRef.current = wrapperNode;
       } : undefined,
       label: label,
@@ -158,6 +224,7 @@ var _SearchInput = function _SearchInput(_ref, ref) {
       isDisabled: isDisabled,
       leadingIcon: showSearchIcon ? SearchIcon : undefined,
       trailingInteractionElement: renderInteractionElement(),
+      trailingDropDown: renderTrailingDropDown(),
       helpText: helpText
       // eslint-disable-next-line jsx-a11y/no-autofocus
       ,