@razorpay/blade 12.49.0 → 12.49.1
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.
- package/build/lib/web/development/components/Input/PhoneNumberInput/CountrySelector.web.js +1 -1
- package/build/lib/web/development/components/Input/PhoneNumberInput/CountrySelector.web.js.map +1 -1
- package/build/lib/web/production/components/Input/PhoneNumberInput/CountrySelector.web.js +1 -1
- package/build/lib/web/production/components/Input/PhoneNumberInput/CountrySelector.web.js.map +1 -1
- package/package.json +1 -1
|
@@ -53,7 +53,7 @@ var CountrySelector = function CountrySelector(_ref) {
|
|
|
53
53
|
setIsDropdownOpen = _React$useState2[1];
|
|
54
54
|
var isMobile = useIsMobile();
|
|
55
55
|
var actionList = /*#__PURE__*/jsx(ActionList, {
|
|
56
|
-
isVirtualized:
|
|
56
|
+
isVirtualized: !isMobile,
|
|
57
57
|
children: countryData.map(function (country) {
|
|
58
58
|
return /*#__PURE__*/jsx(ActionListItem, {
|
|
59
59
|
onClick: onItemClick,
|
package/build/lib/web/development/components/Input/PhoneNumberInput/CountrySelector.web.js.map
CHANGED
|
@@ -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 { 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBMA,IAAAA,oBAAoB,GAAG,IAAIC,IAAI,CAACC,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE;AAAEC,EAAAA,IAAI,EAAE,QAAA;AAAS,CAAC,EAAC;AAgB9E,IAAMC,4BAA4B,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,kDAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAA,CAAA,CAAC,YAAM;EACzD,OAAO;AACL,IAAA,YAAY,EAAE;AACZC,MAAAA,OAAO,EAAE,GAAG;AACZC,MAAAA,KAAK,EAAE,MAAA;AACT,KAAA;GACD,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,IAAA,EAQ2B;AAAA,EAAA,IAP9CC,UAAU,GAAAD,IAAA,CAAVC,UAAU;IACVC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IACfC,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,WAAW,GAAAL,IAAA,CAAXK,WAAW;IACXC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,MAAI,GAAAP,IAAA,CAAJO,IAAI,CAAA;AAEJ,EAAA,IAAAC,eAAA,GAA4CC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAA1DK,IAAAA,cAAc,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,iBAAiB,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACxC,EAAA,IAAMI,QAAQ,GAAGC,WAAW,EAAE,CAAA;AAE9B,EAAA,IAAMC,UAAU,gBACdC,GAAA,CAACC,UAAU,EAAA;IAACC,aAAa,
|
|
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={!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 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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"}
|
|
@@ -53,7 +53,7 @@ var CountrySelector = function CountrySelector(_ref) {
|
|
|
53
53
|
setIsDropdownOpen = _React$useState2[1];
|
|
54
54
|
var isMobile = useIsMobile();
|
|
55
55
|
var actionList = /*#__PURE__*/jsx(ActionList, {
|
|
56
|
-
isVirtualized:
|
|
56
|
+
isVirtualized: !isMobile,
|
|
57
57
|
children: countryData.map(function (country) {
|
|
58
58
|
return /*#__PURE__*/jsx(ActionListItem, {
|
|
59
59
|
onClick: onItemClick,
|
package/build/lib/web/production/components/Input/PhoneNumberInput/CountrySelector.web.js.map
CHANGED
|
@@ -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 { 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBMA,IAAAA,oBAAoB,GAAG,IAAIC,IAAI,CAACC,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE;AAAEC,EAAAA,IAAI,EAAE,QAAA;AAAS,CAAC,EAAC;AAgB9E,IAAMC,4BAA4B,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,kDAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAA,CAAA,CAAC,YAAM;EACzD,OAAO;AACL,IAAA,YAAY,EAAE;AACZC,MAAAA,OAAO,EAAE,GAAG;AACZC,MAAAA,KAAK,EAAE,MAAA;AACT,KAAA;GACD,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,IAAA,EAQ2B;AAAA,EAAA,IAP9CC,UAAU,GAAAD,IAAA,CAAVC,UAAU;IACVC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IACfC,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,WAAW,GAAAL,IAAA,CAAXK,WAAW;IACXC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,MAAI,GAAAP,IAAA,CAAJO,IAAI,CAAA;AAEJ,EAAA,IAAAC,eAAA,GAA4CC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAA1DK,IAAAA,cAAc,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,iBAAiB,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACxC,EAAA,IAAMI,QAAQ,GAAGC,WAAW,EAAE,CAAA;AAE9B,EAAA,IAAMC,UAAU,gBACdC,GAAA,CAACC,UAAU,EAAA;IAACC,aAAa,
|
|
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={!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 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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"}
|