@escapenavigator/hooks 1.10.147 → 1.10.148

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './functional-popover';
+export * from './input-tel';
 export * from './players-and-variation-picker';
 export * from './use-debounced-value';
 export * from './use-localstore-state';

package/dist/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./functional-popover"), exports);
+__exportStar(require("./input-tel"), exports);
 __exportStar(require("./players-and-variation-picker"), exports);
 __exportStar(require("./use-debounced-value"), exports);
 __exportStar(require("./use-localstore-state"), exports);

package/dist/input-tel/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import 'react-phone-input-2/lib/style.css';
+export type InputTelProps = {
+    value: string;
+    onChange: (props: {
+        phone: string;
+        isValid: boolean;
+    }) => void;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    /** Organization / widget profile country — preferred default for new numbers. */
+    profileCountry?: string | null;
+    /** i18n.language or another BCP-47 tag. */
+    locale?: string | null;
+    /** @deprecated Use profileCountry — kept for gradual migration. */
+    initialCountry?: string;
+    /** Widget-specific tweaks (long SE numbers, empty mask). */
+    widgetMode?: boolean;
+};
+export declare const InputTel: React.FC<InputTelProps>;

package/dist/input-tel/index.js

@@ -0,0 +1,81 @@
+"use strict";
+/* eslint-disable import/no-extraneous-dependencies */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputTel = void 0;
+const ui_1 = require("@alphakits/ui");
+const phone_1 = require("@escapenavigator/utils/dist/phone");
+const react_1 = __importStar(require("react"));
+const react_phone_input_2_1 = __importDefault(require("react-phone-input-2"));
+require("react-phone-input-2/lib/style.css");
+const index_module_css_1 = __importDefault(require("./index.module.css"));
+const normalizePhoneValue = (value) => `+${value.replace(/\D/g, '')}`;
+const InputTel = ({ value, onChange, label, error, disabled, profileCountry, locale, initialCountry, widgetMode = false, }) => {
+    const resolvedCountry = (0, react_1.useMemo)(() => (0, phone_1.resolvePhoneCountry)({
+        phone: value,
+        profileCountry: profileCountry !== null && profileCountry !== void 0 ? profileCountry : initialCountry,
+        locale,
+    }), [value, profileCountry, initialCountry, locale]);
+    const [country, setCountry] = (0, react_1.useState)(resolvedCountry);
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    onChangeRef.current = onChange;
+    (0, react_1.useEffect)(() => {
+        setCountry(resolvedCountry);
+    }, [resolvedCountry]);
+    (0, react_1.useEffect)(() => {
+        if (!value) {
+            return;
+        }
+        const phone = normalizePhoneValue(value);
+        onChangeRef.current({
+            phone,
+            isValid: (0, phone_1.validatePhoneNumber)(phone),
+        });
+    }, [value]);
+    const handleChange = (v, c) => {
+        const phone = `+${v}`;
+        const isValid = (0, phone_1.validatePhoneNumber)(phone);
+        setCountry(c.countryCode);
+        onChangeRef.current({ phone, isValid });
+    };
+    return (react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 4 },
+        !!label && (react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'secondary' }, label)),
+        react_1.default.createElement(react_phone_input_2_1.default, { containerClass: index_module_css_1.default.container, buttonClass: index_module_css_1.default.dropdown, inputClass: index_module_css_1.default.input, country: country, disabled: disabled, enableClickOutside: false, value: value, onChange: handleChange, masks: widgetMode ? { se: '' } : undefined, enableLongNumbers: widgetMode }),
+        !!error && (react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'negative' }, error))));
+};
+exports.InputTel = InputTel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escapenavigator/hooks",
-  "version": "1.10.147",
+  "version": "1.10.148",
   "publishConfig": {
     "access": "public"
   },
@@ -14,10 +14,12 @@
     "test": "jest"
   },
   "dependencies": {
-    "@escapenavigator/services": "^1.10.155",
-    "@escapenavigator/types": "^1.10.145",
-    "@escapenavigator/utils": "^1.10.150",
-    "react": "19.2.6"
+    "@escapenavigator/services": "^1.10.156",
+    "@escapenavigator/types": "^1.10.146",
+    "@escapenavigator/utils": "^1.10.151",
+    "libphonenumber-js": "^1.12.24",
+    "react": "19.2.6",
+    "react-phone-input-2": "^2.15.1"
   },
   "peerDependencies": {
     "@alphakits/icons": "*",
@@ -30,5 +32,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.6"
   },
-  "gitHead": "a544fe463f486e809bc002494b1260c6bb596aaf"
+  "gitHead": "b7cc49e197a4d4cda6337a2595d620dd88b7bd89"
 }