@hh.ru/magritte-ui-phone-input 4.3.42 → 4.3.43

package/RegionSelect.js

@@ -5,55 +5,122 @@ import classNames from 'classnames';
 import { useIsFlagEmojiSupported, useFlagEmojiFont } from '@hh.ru/magritte-common-flag-emoji-font';
 import { CellText, Cell, CellRightLabel } from '@hh.ru/magritte-ui-cell';
 import { NavBar } from '@hh.ru/magritte-ui-nav-bar';
-import { s as styles, C as CallingCodeInput } from './CallingCodeInput-Ogu4q8KJ.js';
+import { s as styles, C as CallingCodeInput } from './CallingCodeInput-CccAVXGJ.js';
 import { Select } from '@hh.ru/magritte-ui-select';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-breakpoint';
 
 const getFlagEmoji = (countryCode) => {
-    const codePoints = countryCode
-        .toUpperCase()
-        .split('')
-        .map((char) => 127397 + char.charCodeAt(0));
-    return String.fromCodePoint(...codePoints);
+  const codePoints = countryCode.toUpperCase().split("").map((char) => 127397 + char.charCodeAt(0));
+  return String.fromCodePoint(...codePoints);
 };
 const SelectItem = ({ data, onChange, type }) => {
-    if (type === 'delimiter') {
-        return (jsx(CellText, { maxLines: 1, style: "secondary", children: data.text }));
+  if (type === "delimiter") {
+    return /* @__PURE__ */ jsx(CellText, { maxLines: 1, style: "secondary", children: data.text });
+  }
+  return /* @__PURE__ */ jsx(
+    Cell,
+    {
+      left: /* @__PURE__ */ jsx("div", { className: styles.flagContainer, children: /* @__PURE__ */ jsx("span", { className: classNames(styles.flagEmoji), children: getFlagEmoji(data.value) }) }),
+      right: /* @__PURE__ */ jsxs(CellRightLabel, { hideIcon: true, children: [
+        "+",
+        data.callingCode
+      ] }),
+      horPadding: false,
+      vertPadding: false,
+      onClick: () => onChange(data),
+      tabIndex: -1,
+      children: /* @__PURE__ */ jsx(CellText, { children: data.text })
     }
-    return (jsx(Cell, { left: jsx("div", { className: styles.flagContainer, children: jsx("span", { className: classNames(styles.flagEmoji), children: getFlagEmoji(data.value) }) }), right: jsxs(CellRightLabel, { hideIcon: true, children: ["+", data.callingCode] }), horPadding: false, vertPadding: false, onClick: () => onChange(data), tabIndex: -1, children: jsx(CellText, { children: data.text }) }));
+  );
 };
-const RegionSelect = forwardRef(({ selectDataProvider, selectOptions, country, countryLocked, callingCode, onChange, invalid, libPhoneNumberAPI, showSearchInMobile, disabled, metadataVariant, descriptionId, }, ref) => {
+const RegionSelect = forwardRef(
+  ({
+    selectDataProvider,
+    selectOptions,
+    country,
+    countryLocked,
+    callingCode,
+    onChange,
+    invalid,
+    libPhoneNumberAPI,
+    showSearchInMobile,
+    disabled,
+    metadataVariant,
+    descriptionId
+  }, ref) => {
     const { getCountryCallingCode } = libPhoneNumberAPI;
     const [inputValue, setInputValue] = useState(`+${callingCode}`);
     const exactMatchRef = useRef(true);
     const isFlagEmojiSupported = useIsFlagEmojiSupported();
     useFlagEmojiFont(metadataVariant, isFlagEmojiSupported);
-    const pickerRefCallback = useCallback((node) => {
+    const pickerRefCallback = useCallback(
+      (node) => {
         if (node) {
-            node.classList.toggle(styles.noFlagEmoji, !isFlagEmojiSupported);
+          node.classList.toggle(styles.noFlagEmoji, !isFlagEmojiSupported);
         }
-    }, [isFlagEmojiSupported]);
+      },
+      [isFlagEmojiSupported]
+    );
     useEffect(() => {
-        setInputValue(`+${callingCode}`);
+      setInputValue(`+${callingCode}`);
     }, [callingCode]);
     const value = useMemo(() => selectOptions.find((item) => item.value === country), [selectOptions, country]);
-    return (jsxs(Select, { dataProvider: selectDataProvider, value: value, onChange: (selectedValue) => {
-            exactMatchRef.current = true;
-            onChange?.(selectedValue.value, getCountryCallingCode(selectedValue.value));
-        }, onBlur: () => {
-            if (!exactMatchRef.current) {
-                const code = inputValue.substring(1);
-                const bestMatch = selectOptions.find((option) => option?.callingCode.startsWith(code));
-                if (bestMatch && bestMatch.value) {
-                    onChange(bestMatch.value, bestMatch.callingCode);
-                    setInputValue(`+${bestMatch.callingCode}`);
-                }
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        dataProvider: selectDataProvider,
+        value,
+        onChange: (selectedValue) => {
+          exactMatchRef.current = true;
+          onChange?.(selectedValue.value, getCountryCallingCode(selectedValue.value));
+        },
+        onBlur: () => {
+          if (!exactMatchRef.current) {
+            const code = inputValue.substring(1);
+            const bestMatch = selectOptions.find((option) => option?.callingCode.startsWith(code));
+            if (bestMatch && bestMatch.value) {
+              onChange(bestMatch.value, bestMatch.callingCode);
+              setInputValue(`+${bestMatch.callingCode}`);
             }
-        }, children: [jsx(CallingCodeInput, { inputElementRef: ref, className: !isFlagEmojiSupported && styles.noFlagEmoji, flag: jsx("span", { className: classNames(styles.flagEmoji), children: getFlagEmoji(country) }), invalid: invalid, disabled: disabled || countryLocked, descriptionId: descriptionId, selectOptions: selectOptions, exactMatchRef: exactMatchRef, onChange: onChange, value: inputValue, setValue: setInputValue }), jsx(Select.Drop, { widthEqualToActivator: false, ref: pickerRefCallback, children: jsx(Select.Options, { type: "radio", optionLayoutComponent: SelectItem }) }), jsx(Select.BottomSheet, { ref: pickerRefCallback, header: jsxs(NavBar, { children: [jsx(NavBar.Pane, { children: jsx(NavBar.Actions, { centered: true, right: jsx(Select.PickerCloseIcon, {}) }) }), showSearchInMobile && (jsx(NavBar.Pane, { children: jsx(Select.SearchInput, { clearable: true, size: "medium" }) }))] }), children: jsx(Select.Options, { type: "radio", optionLayoutComponent: SelectItem }) })] }));
-});
-RegionSelect.displayName = 'RegionSelect';
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            CallingCodeInput,
+            {
+              inputElementRef: ref,
+              className: !isFlagEmojiSupported && styles.noFlagEmoji,
+              flag: /* @__PURE__ */ jsx("span", { className: classNames(styles.flagEmoji), children: getFlagEmoji(country) }),
+              invalid,
+              disabled: disabled || countryLocked,
+              descriptionId,
+              selectOptions,
+              exactMatchRef,
+              onChange,
+              value: inputValue,
+              setValue: setInputValue
+            }
+          ),
+          /* @__PURE__ */ jsx(Select.Drop, { widthEqualToActivator: false, ref: pickerRefCallback, children: /* @__PURE__ */ jsx(Select.Options, { type: "radio", optionLayoutComponent: SelectItem }) }),
+          /* @__PURE__ */ jsx(
+            Select.BottomSheet,
+            {
+              ref: pickerRefCallback,
+              header: /* @__PURE__ */ jsxs(NavBar, { children: [
+                /* @__PURE__ */ jsx(NavBar.Pane, { children: /* @__PURE__ */ jsx(NavBar.Actions, { centered: true, right: /* @__PURE__ */ jsx(Select.PickerCloseIcon, {}) }) }),
+                showSearchInMobile && /* @__PURE__ */ jsx(NavBar.Pane, { children: /* @__PURE__ */ jsx(Select.SearchInput, { clearable: true, size: "medium" }) })
+              ] }),
+              children: /* @__PURE__ */ jsx(Select.Options, { type: "radio", optionLayoutComponent: SelectItem })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RegionSelect.displayName = "RegionSelect";
 
 export { RegionSelect };
 //# sourceMappingURL=RegionSelect.js.map

package/RegionSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegionSelect.js","sources":["src/RegionSelect.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useCallback, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { type CountryCode, type CountryCallingCode } from 'libphonenumber-js';\n\nimport { DataProvider } from '@hh.ru/magritte-common-data-provider';\nimport { useFlagEmojiFont, useIsFlagEmojiSupported } from '@hh.ru/magritte-common-flag-emoji-font';\nimport { Cell, CellRightLabel, CellText } from '@hh.ru/magritte-ui-cell';\nimport { NavBar } from '@hh.ru/magritte-ui-nav-bar';\nimport { CallingCodeInput } from '@hh.ru/magritte-ui-phone-input/CallingCodeInput';\nimport { type PhoneCodeOption } from '@hh.ru/magritte-ui-phone-input/useCountrySelectDataProvider';\nimport { type LibPhoneNumberAPI, type MetadataVariant } from '@hh.ru/magritte-ui-phone-input/useLibPhoneNumber';\nimport { Select, OptionCustomLayoutComponent } from '@hh.ru/magritte-ui-select';\n\nimport styles from './phoneInput.less';\n\nconst getFlagEmoji = (countryCode: CountryCode) => {\n    const codePoints = countryCode\n        .toUpperCase()\n        .split('')\n        .map((char) => 127397 + char.charCodeAt(0));\n    return String.fromCodePoint(...codePoints);\n};\n\nconst SelectItem: OptionCustomLayoutComponent<PhoneCodeOption> = ({ data, onChange, type }) => {\n    if (type === 'delimiter') {\n        return (\n            <CellText maxLines={1} style=\"secondary\">\n                {data.text}\n            </CellText>\n        );\n    }\n\n    return (\n        <Cell\n            left={\n                <div className={styles.flagContainer}>\n                    <span className={classNames(styles.flagEmoji)}>{getFlagEmoji(data.value)}</span>\n                </div>\n            }\n            right={<CellRightLabel hideIcon>+{data.callingCode}</CellRightLabel>}\n            horPadding={false}\n            vertPadding={false}\n            onClick={() => onChange(data)}\n            tabIndex={-1}\n        >\n            <CellText>{data.text}</CellText>\n        </Cell>\n    );\n};\n\ntype RegionSelectProps = {\n    country: CountryCode;\n    countryLocked: boolean;\n    selectDataProvider: DataProvider<PhoneCodeOption>;\n    selectOptions: PhoneCodeOption[];\n    callingCode: CountryCallingCode;\n    onChange: (country: CountryCode, callingCode: CountryCallingCode) => void;\n    availableCountries?: CountryCode[];\n    priorityCountries: CountryCode[];\n    invalid?: boolean;\n    libPhoneNumberAPI: LibPhoneNumberAPI;\n    showSearchInMobile: boolean;\n    disabled?: boolean;\n    metadataVariant: MetadataVariant;\n    descriptionId: string;\n};\n\nexport const RegionSelect = forwardRef<HTMLInputElement, RegionSelectProps>(\n    (\n        {\n            selectDataProvider,\n            selectOptions,\n            country,\n            countryLocked,\n            callingCode,\n            onChange,\n            invalid,\n            libPhoneNumberAPI,\n            showSearchInMobile,\n            disabled,\n            metadataVariant,\n            descriptionId,\n        },\n        ref\n    ) => {\n        const { getCountryCallingCode } = libPhoneNumberAPI;\n        const [inputValue, setInputValue] = useState<string>(`+${callingCode}`);\n        const exactMatchRef = useRef(true);\n\n        const isFlagEmojiSupported = useIsFlagEmojiSupported();\n        useFlagEmojiFont(metadataVariant, isFlagEmojiSupported);\n        const pickerRefCallback = useCallback(\n            (node: HTMLElement) => {\n                if (node) {\n                    node.classList.toggle(styles.noFlagEmoji, !isFlagEmojiSupported);\n                }\n            },\n            [isFlagEmojiSupported]\n        );\n\n        useEffect(() => {\n            setInputValue(`+${callingCode}`);\n        }, [callingCode]);\n\n        const value = useMemo(() => selectOptions.find((item) => item.value === country), [selectOptions, country]);\n        return (\n            <Select\n                dataProvider={selectDataProvider}\n                value={value}\n                onChange={(selectedValue) => {\n                    exactMatchRef.current = true;\n                    onChange?.(selectedValue.value, getCountryCallingCode(selectedValue.value));\n                }}\n                onBlur={() => {\n                    if (!exactMatchRef.current) {\n                        const code = inputValue.substring(1);\n                        const bestMatch = selectOptions.find((option) => option?.callingCode.startsWith(code));\n                        if (bestMatch && bestMatch.value) {\n                            onChange(bestMatch.value, bestMatch.callingCode);\n                            setInputValue(`+${bestMatch.callingCode}`);\n                        }\n                    }\n                }}\n            >\n                <CallingCodeInput\n                    inputElementRef={ref}\n                    className={!isFlagEmojiSupported && styles.noFlagEmoji}\n                    flag={<span className={classNames(styles.flagEmoji)}>{getFlagEmoji(country)}</span>}\n                    invalid={invalid}\n                    disabled={disabled || countryLocked}\n                    descriptionId={descriptionId}\n                    selectOptions={selectOptions}\n                    exactMatchRef={exactMatchRef}\n                    onChange={onChange}\n                    value={inputValue}\n                    setValue={setInputValue}\n                />\n                <Select.Drop widthEqualToActivator={false} ref={pickerRefCallback}>\n                    <Select.Options type=\"radio\" optionLayoutComponent={SelectItem} />\n                </Select.Drop>\n                <Select.BottomSheet\n                    ref={pickerRefCallback}\n                    header={\n                        <NavBar>\n                            <NavBar.Pane>\n                                <NavBar.Actions centered right={<Select.PickerCloseIcon />} />\n                            </NavBar.Pane>\n                            {showSearchInMobile && (\n                                <NavBar.Pane>\n                                    <Select.SearchInput clearable size=\"medium\" />\n                                </NavBar.Pane>\n                            )}\n                        </NavBar>\n                    }\n                >\n                    <Select.Options type=\"radio\" optionLayoutComponent={SelectItem} />\n                </Select.BottomSheet>\n            </Select>\n        );\n    }\n);\n\nRegionSelect.displayName = 'RegionSelect';\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;AAeA,MAAM,YAAY,GAAG,CAAC,WAAwB,KAAI;IAC9C,MAAM,UAAU,GAAG,WAAW;AACzB,SAAA,WAAW,EAAE;SACb,KAAK,CAAC,EAAE,CAAC;AACT,SAAA,GAAG,CAAC,CAAC,IAAI,KAAK,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAChD,IAAA,OAAO,MAAM,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,UAAU,GAAiD,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAI;AAC1F,IAAA,IAAI,IAAI,KAAK,WAAW,EAAE;AACtB,QAAA,QACIA,GAAC,CAAA,QAAQ,EAAC,EAAA,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,WAAW,EACnC,QAAA,EAAA,IAAI,CAAC,IAAI,EAAA,CACH,EACb;KACL;AAED,IAAA,QACIA,GAAC,CAAA,IAAI,EACD,EAAA,IAAI,EACAA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA,QAAA,EAChCA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,EAAA,QAAA,EAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,CAAQ,GAC9E,EAEV,KAAK,EAAEC,IAAA,CAAC,cAAc,EAAC,EAAA,QAAQ,EAAG,IAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAA,IAAI,CAAC,WAAW,CAAA,EAAA,CAAkB,EACpE,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAEZ,QAAA,EAAAD,GAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,IAAI,CAAC,IAAI,EAAY,CAAA,EAAA,CAC7B,EACT;AACN,CAAC,CAAC;AAmBK,MAAM,YAAY,GAAG,UAAU,CAClC,CACI,EACI,kBAAkB,EAClB,aAAa,EACb,OAAO,EACP,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAO,EACP,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,eAAe,EACf,aAAa,GAChB,EACD,GAAG,KACH;AACA,IAAA,MAAM,EAAE,qBAAqB,EAAE,GAAG,iBAAiB,CAAC;AACpD,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,CAAI,CAAA,EAAA,WAAW,CAAE,CAAA,CAAC,CAAC;AACxE,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAEnC,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;AACvD,IAAA,gBAAgB,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC;AACxD,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,IAAiB,KAAI;QAClB,IAAI,IAAI,EAAE;AACN,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,oBAAoB,CAAC,CAAC;SACpE;AACL,KAAC,EACD,CAAC,oBAAoB,CAAC,CACzB,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,CAAA,CAAA,EAAI,WAAW,CAAA,CAAE,CAAC,CAAC;AACrC,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AAElB,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;AAC5G,IAAA,QACIC,IAAC,CAAA,MAAM,EACH,EAAA,YAAY,EAAE,kBAAkB,EAChC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,aAAa,KAAI;AACxB,YAAA,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;AAC7B,YAAA,QAAQ,GAAG,aAAa,CAAC,KAAK,EAAE,qBAAqB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAChF,SAAC,EACD,MAAM,EAAE,MAAK;AACT,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;gBACxB,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBACrC,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,EAAE,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;AACvF,gBAAA,IAAI,SAAS,IAAI,SAAS,CAAC,KAAK,EAAE;oBAC9B,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;AACjD,oBAAA,aAAa,CAAC,CAAI,CAAA,EAAA,SAAS,CAAC,WAAW,CAAA,CAAE,CAAC,CAAC;iBAC9C;aACJ;AACL,SAAC,aAEDD,GAAC,CAAA,gBAAgB,IACb,eAAe,EAAE,GAAG,EACpB,SAAS,EAAE,CAAC,oBAAoB,IAAI,MAAM,CAAC,WAAW,EACtD,IAAI,EAAEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,YAAG,YAAY,CAAC,OAAO,CAAC,GAAQ,EACnF,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,aAAa,EACnC,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EAAA,CACzB,EACFA,GAAC,CAAA,MAAM,CAAC,IAAI,EAAA,EAAC,qBAAqB,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,QAAA,EAC7DA,IAAC,MAAM,CAAC,OAAO,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,qBAAqB,EAAE,UAAU,EAAI,CAAA,EAAA,CACxD,EACdA,GAAA,CAAC,MAAM,CAAC,WAAW,IACf,GAAG,EAAE,iBAAiB,EACtB,MAAM,EACFC,IAAA,CAAC,MAAM,EACH,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,MAAM,CAAC,IAAI,cACRA,GAAC,CAAA,MAAM,CAAC,OAAO,IAAC,QAAQ,EAAA,IAAA,EAAC,KAAK,EAAEA,GAAA,CAAC,MAAM,CAAC,eAAe,EAAG,EAAA,CAAA,EAAA,CAAI,GACpD,EACb,kBAAkB,KACfA,GAAA,CAAC,MAAM,CAAC,IAAI,EACR,EAAA,QAAA,EAAAA,GAAA,CAAC,MAAM,CAAC,WAAW,IAAC,SAAS,EAAA,IAAA,EAAC,IAAI,EAAC,QAAQ,EAAG,CAAA,EAAA,CACpC,CACjB,CACI,EAAA,CAAA,EAAA,QAAA,EAGbA,IAAC,MAAM,CAAC,OAAO,EAAC,EAAA,IAAI,EAAC,OAAO,EAAC,qBAAqB,EAAE,UAAU,GAAI,EACjD,CAAA,CAAA,EAAA,CAChB,EACX;AACN,CAAC,EACH;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"RegionSelect.js","sources":["src/RegionSelect.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useCallback, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { type CountryCode, type CountryCallingCode } from 'libphonenumber-js';\n\nimport { DataProvider } from '@hh.ru/magritte-common-data-provider';\nimport { useFlagEmojiFont, useIsFlagEmojiSupported } from '@hh.ru/magritte-common-flag-emoji-font';\nimport { Cell, CellRightLabel, CellText } from '@hh.ru/magritte-ui-cell';\nimport { NavBar } from '@hh.ru/magritte-ui-nav-bar';\nimport { CallingCodeInput } from '@hh.ru/magritte-ui-phone-input/CallingCodeInput';\nimport { type PhoneCodeOption } from '@hh.ru/magritte-ui-phone-input/useCountrySelectDataProvider';\nimport { type LibPhoneNumberAPI, type MetadataVariant } from '@hh.ru/magritte-ui-phone-input/useLibPhoneNumber';\nimport { Select, OptionCustomLayoutComponent } from '@hh.ru/magritte-ui-select';\n\nimport styles from './phoneInput.less';\n\nconst getFlagEmoji = (countryCode: CountryCode) => {\n    const codePoints = countryCode\n        .toUpperCase()\n        .split('')\n        .map((char) => 127397 + char.charCodeAt(0));\n    return String.fromCodePoint(...codePoints);\n};\n\nconst SelectItem: OptionCustomLayoutComponent<PhoneCodeOption> = ({ data, onChange, type }) => {\n    if (type === 'delimiter') {\n        return (\n            <CellText maxLines={1} style=\"secondary\">\n                {data.text}\n            </CellText>\n        );\n    }\n\n    return (\n        <Cell\n            left={\n                <div className={styles.flagContainer}>\n                    <span className={classNames(styles.flagEmoji)}>{getFlagEmoji(data.value)}</span>\n                </div>\n            }\n            right={<CellRightLabel hideIcon>+{data.callingCode}</CellRightLabel>}\n            horPadding={false}\n            vertPadding={false}\n            onClick={() => onChange(data)}\n            tabIndex={-1}\n        >\n            <CellText>{data.text}</CellText>\n        </Cell>\n    );\n};\n\ntype RegionSelectProps = {\n    country: CountryCode;\n    countryLocked: boolean;\n    selectDataProvider: DataProvider<PhoneCodeOption>;\n    selectOptions: PhoneCodeOption[];\n    callingCode: CountryCallingCode;\n    onChange: (country: CountryCode, callingCode: CountryCallingCode) => void;\n    availableCountries?: CountryCode[];\n    priorityCountries: CountryCode[];\n    invalid?: boolean;\n    libPhoneNumberAPI: LibPhoneNumberAPI;\n    showSearchInMobile: boolean;\n    disabled?: boolean;\n    metadataVariant: MetadataVariant;\n    descriptionId: string;\n};\n\nexport const RegionSelect = forwardRef<HTMLInputElement, RegionSelectProps>(\n    (\n        {\n            selectDataProvider,\n            selectOptions,\n            country,\n            countryLocked,\n            callingCode,\n            onChange,\n            invalid,\n            libPhoneNumberAPI,\n            showSearchInMobile,\n            disabled,\n            metadataVariant,\n            descriptionId,\n        },\n        ref\n    ) => {\n        const { getCountryCallingCode } = libPhoneNumberAPI;\n        const [inputValue, setInputValue] = useState<string>(`+${callingCode}`);\n        const exactMatchRef = useRef(true);\n\n        const isFlagEmojiSupported = useIsFlagEmojiSupported();\n        useFlagEmojiFont(metadataVariant, isFlagEmojiSupported);\n        const pickerRefCallback = useCallback(\n            (node: HTMLElement) => {\n                if (node) {\n                    node.classList.toggle(styles.noFlagEmoji, !isFlagEmojiSupported);\n                }\n            },\n            [isFlagEmojiSupported]\n        );\n\n        useEffect(() => {\n            setInputValue(`+${callingCode}`);\n        }, [callingCode]);\n\n        const value = useMemo(() => selectOptions.find((item) => item.value === country), [selectOptions, country]);\n        return (\n            <Select\n                dataProvider={selectDataProvider}\n                value={value}\n                onChange={(selectedValue) => {\n                    exactMatchRef.current = true;\n                    onChange?.(selectedValue.value, getCountryCallingCode(selectedValue.value));\n                }}\n                onBlur={() => {\n                    if (!exactMatchRef.current) {\n                        const code = inputValue.substring(1);\n                        const bestMatch = selectOptions.find((option) => option?.callingCode.startsWith(code));\n                        if (bestMatch && bestMatch.value) {\n                            onChange(bestMatch.value, bestMatch.callingCode);\n                            setInputValue(`+${bestMatch.callingCode}`);\n                        }\n                    }\n                }}\n            >\n                <CallingCodeInput\n                    inputElementRef={ref}\n                    className={!isFlagEmojiSupported && styles.noFlagEmoji}\n                    flag={<span className={classNames(styles.flagEmoji)}>{getFlagEmoji(country)}</span>}\n                    invalid={invalid}\n                    disabled={disabled || countryLocked}\n                    descriptionId={descriptionId}\n                    selectOptions={selectOptions}\n                    exactMatchRef={exactMatchRef}\n                    onChange={onChange}\n                    value={inputValue}\n                    setValue={setInputValue}\n                />\n                <Select.Drop widthEqualToActivator={false} ref={pickerRefCallback}>\n                    <Select.Options type=\"radio\" optionLayoutComponent={SelectItem} />\n                </Select.Drop>\n                <Select.BottomSheet\n                    ref={pickerRefCallback}\n                    header={\n                        <NavBar>\n                            <NavBar.Pane>\n                                <NavBar.Actions centered right={<Select.PickerCloseIcon />} />\n                            </NavBar.Pane>\n                            {showSearchInMobile && (\n                                <NavBar.Pane>\n                                    <Select.SearchInput clearable size=\"medium\" />\n                                </NavBar.Pane>\n                            )}\n                        </NavBar>\n                    }\n                >\n                    <Select.Options type=\"radio\" optionLayoutComponent={SelectItem} />\n                </Select.BottomSheet>\n            </Select>\n        );\n    }\n);\n\nRegionSelect.displayName = 'RegionSelect';\n"],"names":[],"mappings":"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"}