@razorpay/blade 12.68.0 → 12.89.0

package/build/lib/web/development/components/Input/BaseInput/baseInputTokens.js

@@ -37,20 +37,57 @@ var baseInputBorderColor = {
 };
 var baseInputBackgroundColor = {
   "default": 'surface.background.gray.intense',
-  hovered: 'surface.background.gray.moderate',
-  focused: 'surface.background.gray.moderate',
-  disabled: 'surface.background.gray.subtle',
+  hovered: 'surface.background.gray.intense',
+  focused: 'surface.background.gray.intense',
+  disabled: 'surface.background.gray.moderate',
   error: 'surface.background.gray.intense',
   success: 'surface.background.gray.intense'
 };
 var baseInputBorderlessBackgroundColor = {
   "default": 'transparent',
-  hovered: 'surface.background.gray.moderate',
-  focused: 'surface.background.gray.moderate',
-  disabled: 'surface.background.gray.intense',
+  hovered: 'surface.background.gray.intense',
+  focused: 'surface.background.gray.intense',
+  disabled: 'surface.background.gray.moderate',
   error: 'feedback.background.negative.subtle',
   success: 'feedback.background.positive.subtle'
 };
+
+/**
+ * Border radius tokens for input sizes
+ * - xsmall, small: 8px (small)
+ * - medium: 8px (small)
+ * - large: 12px (medium)
+ */
+var baseInputBorderRadius = {
+  xsmall: 'small',
+  small: 'small',
+  medium: 'small',
+  large: 'medium'
+};
+
+/**
+ * Border radius for input dropdown buttons (in px)
+ * - xsmall, small: 6px
+ * - medium: 6px
+ * - large: 8px
+ */
+var inputDropdownButtonBorderRadius = {
+  xsmall: size['6'],
+  small: size['6'],
+  medium: size['6'],
+  large: size['8']
+};
+
+/**
+ * Padding for input dropdown button wrapper
+ * Uses spacing tokens (1 = 2px, 2 = 4px)
+ */
+var inputDropdownButtonPadding = {
+  xsmall: 1,
+  small: 1,
+  medium: 2,
+  large: 2
+};
 var baseInputBorderWidth = {
   "default": 'thin',
   hovered: 'thin',
@@ -65,8 +102,8 @@ var baseInputBorderBackgroundMotion = {
     easing: 'emphasized'
   },
   exit: {
-    duration: 'gentle',
-    easing: 'standard'
+    duration: 'xgentle',
+    easing: 'emphasized'
   }
 };
 var baseInputPaddingTokens = {
@@ -132,5 +169,5 @@ var baseInputCounterInputPaddingTokens = {
   }
 };
 
-export { BASEINPUT_MAX_ROWS, TAG_GAP, TAG_HEIGHT, baseInputBackgroundColor, baseInputBorderBackgroundMotion, baseInputBorderColor, baseInputBorderWidth, baseInputBorderlessBackgroundColor, baseInputCounterInputPaddingTokens, baseInputHeight, baseInputPaddingTokens, baseInputWrapperMaxHeight, formHintLeftLabelMarginLeft };
+export { BASEINPUT_MAX_ROWS, TAG_GAP, TAG_HEIGHT, baseInputBackgroundColor, baseInputBorderBackgroundMotion, baseInputBorderColor, baseInputBorderRadius, baseInputBorderWidth, baseInputBorderlessBackgroundColor, baseInputCounterInputPaddingTokens, baseInputHeight, baseInputPaddingTokens, baseInputWrapperMaxHeight, formHintLeftLabelMarginLeft, inputDropdownButtonBorderRadius, inputDropdownButtonPadding };
 //# sourceMappingURL=baseInputTokens.js.map

package/build/lib/web/development/components/Input/BaseInput/baseInputTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"baseInputTokens.js","sources":["../../../../../../../src/components/Input/BaseInput/baseInputTokens.ts"],"sourcesContent":["import type { BaseInputProps } from './BaseInput';\nimport { size, spacing } from '~tokens/global';\n\nexport const BASEINPUT_MAX_ROWS = 4;\n\nexport const TAG_HEIGHT = size['20'];\nexport const TAG_GAP = spacing['3'];\n\n/**\n * 36px\n */\nexport const baseInputHeight: Record<\n  NonNullable<BaseInputProps['size']>,\n  typeof size[keyof typeof size]\n> = {\n  xsmall: size['26'],\n  small: size['30'],\n  medium: size['36'],\n  large: size['48'],\n};\n\n/**\n * medium - 144px (36px height * 4 rows)\n * large - 192px (48px height * 4 rows)\n */\n// we don't want exact number but rough number to be able to animate correctly in height.\nexport const baseInputWrapperMaxHeight = {\n  xsmall: baseInputHeight.xsmall * BASEINPUT_MAX_ROWS,\n  small: baseInputHeight.small * BASEINPUT_MAX_ROWS,\n  medium: baseInputHeight.medium * BASEINPUT_MAX_ROWS,\n  large: baseInputHeight.large * BASEINPUT_MAX_ROWS,\n} as const;\n\nexport const baseInputBorderColor = {\n  default: 'interactive.border.gray.default',\n  hovered: 'interactive.border.gray.highlighted',\n  focused: 'interactive.border.primary.default',\n  disabled: 'interactive.border.gray.disabled',\n  error: 'interactive.border.negative.default',\n  success: 'interactive.border.positive.default',\n} as const;\n\nexport const baseInputBackgroundColor = {\n  default: 'surface.background.gray.intense',\n  hovered: 'surface.background.gray.moderate',\n  focused: 'surface.background.gray.moderate',\n  disabled: 'surface.background.gray.subtle',\n  error: 'surface.background.gray.intense',\n  success: 'surface.background.gray.intense',\n} as const;\n\nexport const baseInputBorderlessBackgroundColor = {\n  default: 'transparent',\n  hovered: 'surface.background.gray.moderate',\n  focused: 'surface.background.gray.moderate',\n  disabled: 'surface.background.gray.intense',\n  error: 'feedback.background.negative.subtle',\n  success: 'feedback.background.positive.subtle',\n} as const;\n\nexport const baseInputBorderWidth = {\n  default: 'thin',\n  hovered: 'thin',\n  disabled: 'thin',\n  focused: 'thick',\n  error: 'thick',\n  success: 'thick',\n} as const;\n\nexport const baseInputBorderBackgroundMotion = {\n  enter: { duration: 'xgentle', easing: 'emphasized' },\n  exit: { duration: 'gentle', easing: 'standard' },\n} as const;\n\nexport const baseInputPaddingTokens = {\n  top: {\n    xsmall: 2,\n    small: 2,\n    medium: 3,\n    large: 4,\n  },\n  bottom: {\n    xsmall: 2,\n    small: 2,\n    medium: 3,\n    large: 4,\n  },\n  left: {\n    xsmall: 3,\n    small: 3,\n    medium: 4,\n    large: 4,\n  },\n  right: {\n    xsmall: 3,\n    small: 3,\n    medium: 4,\n    large: 4,\n  },\n} as const;\n\n/* the magic number 192 is basically max-width of label \ni.e 176 and then right margin \ni.e 16 which is the spacing between label and input field */\nexport const formHintLeftLabelMarginLeft = {\n  xsmall: 136,\n  small: 136,\n  medium: 136,\n  large: 192,\n} as const;\n\nexport const baseInputCounterInputPaddingTokens = {\n  top: {\n    xsmall: 2,\n    small: 2,\n    medium: 2,\n    large: 2,\n  },\n  bottom: {\n    xsmall: 2,\n    small: 2,\n    medium: 2,\n    large: 2,\n  },\n  left: {\n    xsmall: 2,\n    small: 2,\n    medium: 2,\n    large: 2,\n  },\n  right: {\n    xsmall: 2,\n    small: 2,\n    medium: 2,\n    large: 2,\n  },\n} as const;\n"],"names":["BASEINPUT_MAX_ROWS","TAG_HEIGHT","size","TAG_GAP","spacing","baseInputHeight","xsmall","small","medium","large","baseInputWrapperMaxHeight","baseInputBorderColor","hovered","focused","disabled","error","success","baseInputBackgroundColor","baseInputBorderlessBackgroundColor","baseInputBorderWidth","baseInputBorderBackgroundMotion","enter","duration","easing","exit","baseInputPaddingTokens","top","bottom","left","right","formHintLeftLabelMarginLeft","baseInputCounterInputPaddingTokens"],"mappings":"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"}
+{"version":3,"file":"baseInputTokens.js","sources":["../../../../../../../src/components/Input/BaseInput/baseInputTokens.ts"],"sourcesContent":["import type { BaseInputProps } from './BaseInput';\nimport { size, spacing } from '~tokens/global';\n\nexport const BASEINPUT_MAX_ROWS = 4;\n\nexport const TAG_HEIGHT = size['20'];\nexport const TAG_GAP = spacing['3'];\n\n/**\n * 36px\n */\nexport const baseInputHeight: Record<\n  NonNullable<BaseInputProps['size']>,\n  typeof size[keyof typeof size]\n> = {\n  xsmall: size['26'],\n  small: size['30'],\n  medium: size['36'],\n  large: size['48'],\n};\n\n/**\n * medium - 144px (36px height * 4 rows)\n * large - 192px (48px height * 4 rows)\n */\n// we don't want exact number but rough number to be able to animate correctly in height.\nexport const baseInputWrapperMaxHeight = {\n  xsmall: baseInputHeight.xsmall * BASEINPUT_MAX_ROWS,\n  small: baseInputHeight.small * BASEINPUT_MAX_ROWS,\n  medium: baseInputHeight.medium * BASEINPUT_MAX_ROWS,\n  large: baseInputHeight.large * BASEINPUT_MAX_ROWS,\n} as const;\n\nexport const baseInputBorderColor = {\n  default: 'interactive.border.gray.default',\n  hovered: 'interactive.border.gray.highlighted',\n  focused: 'interactive.border.primary.default',\n  disabled: 'interactive.border.gray.disabled',\n  error: 'interactive.border.negative.default',\n  success: 'interactive.border.positive.default',\n} as const;\n\nexport const baseInputBackgroundColor = {\n  default: 'surface.background.gray.intense',\n  hovered: 'surface.background.gray.intense',\n  focused: 'surface.background.gray.intense',\n  disabled: 'surface.background.gray.moderate',\n  error: 'surface.background.gray.intense',\n  success: 'surface.background.gray.intense',\n} as const;\n\nexport const baseInputBorderlessBackgroundColor = {\n  default: 'transparent',\n  hovered: 'surface.background.gray.intense',\n  focused: 'surface.background.gray.intense',\n  disabled: 'surface.background.gray.moderate',\n  error: 'feedback.background.negative.subtle',\n  success: 'feedback.background.positive.subtle',\n} as const;\n\n/**\n * Border radius tokens for input sizes\n * - xsmall, small: 8px (small)\n * - medium: 8px (small)\n * - large: 12px (medium)\n */\nexport const baseInputBorderRadius = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\n/**\n * Border radius for input dropdown buttons (in px)\n * - xsmall, small: 6px\n * - medium: 6px\n * - large: 8px\n */\nexport const inputDropdownButtonBorderRadius = {\n  xsmall: size['6'],\n  small: size['6'],\n  medium: size['6'],\n  large: size['8'],\n} as const;\n\n/**\n * Padding for input dropdown button wrapper\n * Uses spacing tokens (1 = 2px, 2 = 4px)\n */\nexport const inputDropdownButtonPadding = {\n  xsmall: 1,\n  small: 1,\n  medium: 2,\n  large: 2,\n} as const;\n\nexport const baseInputBorderWidth = {\n  default: 'thin',\n  hovered: 'thin',\n  disabled: 'thin',\n  focused: 'thick',\n  error: 'thick',\n  success: 'thick',\n} as const;\n\nexport const baseInputBorderBackgroundMotion = {\n  enter: { duration: 'xgentle', easing: 'emphasized' },\n  exit: { duration: 'xgentle', easing: 'emphasized' },\n} as const;\n\nexport const baseInputPaddingTokens = {\n  top: {\n    xsmall: 2,\n    small: 2,\n    medium: 3,\n    large: 4,\n  },\n  bottom: {\n    xsmall: 2,\n    small: 2,\n    medium: 3,\n    large: 4,\n  },\n  left: {\n    xsmall: 3,\n    small: 3,\n    medium: 4,\n    large: 4,\n  },\n  right: {\n    xsmall: 3,\n    small: 3,\n    medium: 4,\n    large: 4,\n  },\n} as const;\n\n/* the magic number 192 is basically max-width of label \ni.e 176 and then right margin \ni.e 16 which is the spacing between label and input field */\nexport const formHintLeftLabelMarginLeft = {\n  xsmall: 136,\n  small: 136,\n  medium: 136,\n  large: 192,\n} as const;\n\nexport const baseInputCounterInputPaddingTokens = {\n  top: {\n    xsmall: 2,\n    small: 2,\n    medium: 2,\n    large: 2,\n  },\n  bottom: {\n    xsmall: 2,\n    small: 2,\n    medium: 2,\n    large: 2,\n  },\n  left: {\n    xsmall: 2,\n    small: 2,\n    medium: 2,\n    large: 2,\n  },\n  right: {\n    xsmall: 2,\n    small: 2,\n    medium: 2,\n    large: 2,\n  },\n} as const;\n"],"names":["BASEINPUT_MAX_ROWS","TAG_HEIGHT","size","TAG_GAP","spacing","baseInputHeight","xsmall","small","medium","large","baseInputWrapperMaxHeight","baseInputBorderColor","hovered","focused","disabled","error","success","baseInputBackgroundColor","baseInputBorderlessBackgroundColor","baseInputBorderRadius","inputDropdownButtonBorderRadius","inputDropdownButtonPadding","baseInputBorderWidth","baseInputBorderBackgroundMotion","enter","duration","easing","exit","baseInputPaddingTokens","top","bottom","left","right","formHintLeftLabelMarginLeft","baseInputCounterInputPaddingTokens"],"mappings":"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"}

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

@@ -1,25 +1,20 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';
 import React__default from 'react';
-import styled from 'styled-components';
+import '../../../tokens/global/index.js';
+import '../../../utils/index.js';
 import '../../ActionList/index.js';
 import '../../BottomSheet/index.js';
 import '../../Dropdown/index.js';
-import '../../Icons/index.js';
 import { useIsMobile } from '../../../utils/useIsMobile.js';
-import '../../../tokens/global/index.js';
-import '../../../utils/index.js';
-import '../../Box/BaseBox/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { size } from '../../../tokens/global/size.js';
 import { ActionList } from '../../ActionList/ActionList.js';
 import { ActionListItem, ActionListItemText } from '../../ActionList/ActionListItem.js';
 import { ActionListItemAsset } from '../../ActionList/ActionListItemAsset.web.js';
-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 ChevronUpDownIcon from '../../Icons/ChevronUpDownIcon/ChevronUpDownIcon.js';
+import { InputDropdownButton } from '../../Dropdown/InputDropdownButton.web.js';
 import { BottomSheet } from '../../BottomSheet/BottomSheet.web.js';
 import { BottomSheetHeader } from '../../BottomSheet/BottomSheetHeader.web.js';
 import { BottomSheetBody } from '../../BottomSheet/BottomSheetBody.web.js';
@@ -28,17 +23,12 @@ import { DropdownOverlay } from '../../Dropdown/DropdownOverlay.web.js';
 var countryNameFormatter = new Intl.DisplayNames(['en'], {
   type: 'region'
 });
-var CountryDropdownButtonWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "CountrySelectorweb__CountryDropdownButtonWrapper",
-  componentId: "nhlxq5-0"
-})(function () {
-  return {
-    '& > button': {
-      padding: '0',
-      width: '100%'
-    }
-  };
-});
+var flagSize = {
+  xsmall: makeSize(size[16]),
+  small: makeSize(size[16]),
+  medium: makeSize(size[20]),
+  large: makeSize(size[24])
+};
 var CountrySelector = function CountrySelector(_ref) {
   var isDisabled = _ref.isDisabled,
     selectedCountry = _ref.selectedCountry,
@@ -46,7 +36,7 @@ var CountrySelector = function CountrySelector(_ref) {
     countryData = _ref.countryData,
     onItemClick = _ref.onItemClick,
     flags = _ref.flags,
-    size$1 = _ref.size;
+    size = _ref.size;
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isDropdownOpen = _React$useState2[0],
@@ -56,7 +46,6 @@ var CountrySelector = function CountrySelector(_ref) {
     isVirtualized: !isMobile,
     children: countryData.map(function (country) {
       return /*#__PURE__*/jsx(ActionListItem, {
-        onClick: onItemClick,
         leading: /*#__PURE__*/jsx(ActionListItemAsset, {
           src: flags[country.code]['4X3'],
           alt: country.name
@@ -69,44 +58,28 @@ var CountrySelector = function CountrySelector(_ref) {
       }, country.code);
     })
   });
-  var flagSize = {
-    xsmall: makeSize(size[16]),
-    small: makeSize(size[16]),
-    medium: makeSize(size[20]),
-    large: makeSize(size[24])
-  };
+  var flagImage = /*#__PURE__*/jsx("img", {
+    loading: "lazy",
+    role: "presentation",
+    width: flagSize[size],
+    src: getFlagOfCountry(selectedCountry)['4X3'],
+    alt: ""
+  });
   return /*#__PURE__*/jsxs(Dropdown, {
     isOpen: isDropdownOpen,
     onOpenChange: setIsDropdownOpen,
-    children: [/*#__PURE__*/jsx(CountryDropdownButtonWrapper, {
-      width: size$1 === 'medium' ? '45px' : '60px',
-      marginLeft: size$1 === 'medium' ? '-3px' : '-2px',
-      children: /*#__PURE__*/jsx(DropdownButton, {
-        isDisabled: isDisabled,
-        size: size$1 === 'medium' ? 'xsmall' : 'medium',
-        variant: "tertiary"
-        //@ts-expect-error
-        ,
-        color: "transparent",
-        accessibilityLabel: "".concat(countryNameFormatter.of(selectedCountry), " - Select Country"),
-        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.
-        // We don't want that to happen when the user clicks on the dropdown button
-        // otherwise the dropdown will close immediately after opening
-        ,
-        onClick: function onClick(e) {
-          e.stopPropagation();
-        },
-        children: /*#__PURE__*/jsx("img", {
-          loading: "lazy",
-          role: "presentation",
-          width: flagSize[size$1],
-          src: getFlagOfCountry(selectedCountry)['4X3'],
-          alt: ""
-        })
-      })
+    children: [/*#__PURE__*/jsx(InputDropdownButton, {
+      value: selectedCountry,
+      onChange: function onChange(_ref2) {
+        var value = _ref2.value;
+        return onItemClick({
+          name: value
+        });
+      },
+      accessibilityLabel: "".concat(countryNameFormatter.of(selectedCountry), " - Select Country"),
+      isDisabled: isDisabled,
+      size: size,
+      leading: flagImage
     }), isMobile ? /*#__PURE__*/jsxs(BottomSheet, {
       children: [/*#__PURE__*/jsx(BottomSheetHeader, {
         title: "Select A Country"

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

@@ -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 { 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: 'xsmall' | 'small' | '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={!isMobile}>\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    xsmall: makeSize(sizes[16]),\n    small: makeSize(sizes[16]),\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","xsmall","makeSize","sizes","small","medium","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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"}
+{"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 { size as sizes } from '~tokens/global';\nimport { makeSize } from '~utils';\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, DropdownOverlay, InputDropdownButton } from '~components/Dropdown';\nimport { useIsMobile } from '~utils/useIsMobile';\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: 'xsmall' | 'small' | 'medium' | 'large';\n};\n\nconst flagSize = {\n  xsmall: makeSize(sizes[16]),\n  small: makeSize(sizes[16]),\n  medium: makeSize(sizes[20]),\n  large: makeSize(sizes[24]),\n} as const;\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={!isMobile}>\n      {countryData.map((country) => {\n        return (\n          <ActionListItem\n            key={country.code}\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 flagImage = (\n    <img\n      loading=\"lazy\"\n      role=\"presentation\"\n      width={flagSize[size]}\n      src={getFlagOfCountry(selectedCountry)['4X3']}\n      alt=\"\"\n    />\n  );\n\n  return (\n    <Dropdown isOpen={isDropdownOpen} onOpenChange={setIsDropdownOpen}>\n      <InputDropdownButton\n        value={selectedCountry}\n        onChange={({ value }) => onItemClick({ name: value })}\n        accessibilityLabel={`${countryNameFormatter.of(selectedCountry)} - Select Country`}\n        isDisabled={isDisabled}\n        size={size}\n        leading={flagImage}\n      />\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","flagSize","xsmall","makeSize","sizes","small","medium","large","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","leading","ActionListItemAsset","src","code","alt","name","title","value","trailing","ActionListItemText","getDialCodeByCountryCode","flagImage","loading","role","width","getFlagOfCountry","_jsxs","Dropdown","isOpen","onOpenChange","InputDropdownButton","onChange","_ref2","accessibilityLabel","concat","of","BottomSheet","BottomSheetHeader","BottomSheetBody","DropdownOverlay","referenceRef"],"mappings":"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"}

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

@@ -18,6 +18,7 @@ import { useDropdown } from '../../Dropdown/useDropdown.js';
 import '../../Dropdown/index.js';
 import '../../Divider/index.js';
 import '../../../utils/isValidAllowedChildren/index.js';
+import { TopNavOverlayThemeOverride } from '../../TopNav/TopNavOverlayThemeOverride.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
 import { getComponentId } from '../../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
@@ -52,8 +53,8 @@ var _SearchInput = function _SearchInput(_ref, ref) {
     value = _ref.value,
     _onChange = _ref.onChange,
     _onClick = _ref.onClick,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
+    _onFocus = _ref.onFocus,
+    _onBlur = _ref.onBlur,
     onSubmit = _ref.onSubmit,
     isDisabled = _ref.isDisabled,
     labelSuffix = _ref.labelSuffix,
@@ -88,6 +89,10 @@ var _SearchInput = function _SearchInput(_ref, ref) {
     closeParentDropDown = _useDropdown.close,
     isParentDropDownOpen = _useDropdown.isOpen;
   var isInsideDropdown = dropdownTriggerer === 'SearchInput';
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSearchFocused = _useState6[0],
+    setIsSearchFocused = _useState6[1];
   React__default.useEffect(function () {
     setShouldShowClearButton(Boolean(defaultValue !== null && defaultValue !== void 0 ? defaultValue : value));
   }, [defaultValue, value]);
@@ -111,13 +116,15 @@ var _SearchInput = function _SearchInput(_ref, ref) {
     return /*#__PURE__*/React__default.cloneElement(trailingDropdown, {
       selectionType: 'single',
       isOpen: isTrailingDropDownOpen,
+      height: '100%',
       onOpenChange: function onOpenChange(isOpen) {
         setIsTrailingDropDownOpen(isOpen);
       },
       children: React__default.Children.map(trailingDropdown.props.children, function (child) {
         if (child.type === InputDropdownButton) {
           return /*#__PURE__*/React__default.cloneElement(child, {
-            _isInsideSearchInput: true
+            _isInsideSearchInput: true,
+            size: size
           });
         }
         if (child.type === DropdownOverlay) {
@@ -178,7 +185,7 @@ var _SearchInput = function _SearchInput(_ref, ref) {
     }
     return null;
   };
-  return /*#__PURE__*/jsx(BaseBox, {
+  var searchContent = /*#__PURE__*/jsx(BaseBox, {
     position: "relative",
     children: /*#__PURE__*/jsx(BaseInput, _objectSpread(_objectSpread({
       id: "searchinput",
@@ -222,8 +229,14 @@ var _SearchInput = function _SearchInput(_ref, ref) {
         }
         _onClick === null || _onClick === void 0 || _onClick(e);
       },
-      onFocus: onFocus,
-      onBlur: onBlur,
+      onFocus: function onFocus(e) {
+        setIsSearchFocused(true);
+        _onFocus === null || _onFocus === void 0 || _onFocus(e);
+      },
+      onBlur: function onBlur(e) {
+        setIsSearchFocused(false);
+        _onBlur === null || _onBlur === void 0 || _onBlur(e);
+      },
       onSubmit: onSubmit,
       isDisabled: isDisabled,
       leadingIcon: showSearchIcon ? SearchIcon : undefined,
@@ -241,6 +254,10 @@ var _SearchInput = function _SearchInput(_ref, ref) {
       size: size
     }, rest))
   });
+  return /*#__PURE__*/jsx(TopNavOverlayThemeOverride, {
+    shouldOverrideTheme: isSearchFocused,
+    children: searchContent
+  });
 };
 var SearchInput = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_SearchInput), {
   displayName: 'SearchInput',

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, { 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  | 'labelSuffix'\n  | 'labelTrailing'\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    labelSuffix,\n    labelTrailing,\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        labelSuffix={labelSuffix}\n        labelTrailing={labelTrailing}\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","labelSuffix","labelTrailing","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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"}
+{"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';\nimport { TopNavOverlayThemeOverride } from '~components/TopNav/TopNavOverlayThemeOverride';\n\ntype SearchInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'labelSuffix'\n  | 'labelTrailing'\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    labelSuffix,\n    labelTrailing,\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  const [isSearchFocused, setIsSearchFocused] = useState(false);\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      height: '100%',\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              size,\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  const searchContent = (\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        labelSuffix={labelSuffix}\n        labelTrailing={labelTrailing}\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={(e) => {\n          setIsSearchFocused(true);\n          onFocus?.(e);\n        }}\n        onBlur={(e) => {\n          setIsSearchFocused(false);\n          onBlur?.(e);\n        }}\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  return (\n    <TopNavOverlayThemeOverride shouldOverrideTheme={isSearchFocused}>\n      {searchContent}\n    </TopNavOverlayThemeOverride>\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","labelSuffix","labelTrailing","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","_useState5","_useState6","isSearchFocused","setIsSearchFocused","useEffect","Boolean","trailingDropdown","getComponentId","renderTrailingDropDown","cloneElement","selectionType","height","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","searchContent","position","BaseInput","_objectSpread","id","componentName","MetaConstants","SearchInput","isDropdownTrigger","setInputWrapperRef","wrapperNode","undefined","hideLabelText","onKeyDown","_ref2","length","e","leadingIcon","SearchIcon","trailingInteractionElement","trailingDropDown","getKeyboardAndAutocompleteProps","TopNavOverlayThemeOverride","shouldOverrideTheme","assignWithoutSideEffects","forwardRef","displayName","componentId","dropdownComponentIds","triggers"],"mappings":"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"}

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

@@ -20,6 +20,7 @@ import { hintMarginTop } from '../../Form/formTokens.js';
 import '../../Divider/index.js';
 import '../../../utils/isValidAllowedChildren/index.js';
 import '../../Dropdown/index.js';
+import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
 import '../../../utils/isIconComponent/index.js';
 import { useDatePickerContext } from '../../DatePicker/DatePickerContext.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -189,6 +190,7 @@ var _TextInput = function _TextInput(_ref, ref) {
     return /*#__PURE__*/React__default.cloneElement(dropdown, {
       selectionType: 'single',
       isOpen: isOpen,
+      height: '100%',
       onOpenChange: function onOpenChange(isOpen) {
         setIsOpen(isOpen);
       },
@@ -200,6 +202,12 @@ var _TextInput = function _TextInput(_ref, ref) {
             defaultPlacement: defaultPlacement
           });
         }
+        // Pass size to InputDropdownButton
+        if (getComponentId(child) === dropdownComponentIds.triggers.InputDropdownButton) {
+          return /*#__PURE__*/React__default.cloneElement(child, {
+            size: size
+          });
+        }
         return child;
       })
     });