@tripian/react 9.1.42 → 9.1.43

package/components/base/Input/Input.d.ts

@@ -18,5 +18,5 @@ interface IInput {
     onBlur?: () => void;
     children?: React.ReactNode;
 }
-declare const Input: React.FC<IInput>;
+declare const Input: React.ForwardRefExoticComponent<IInput & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/index.js

@@ -19660,13 +19660,36 @@ module.exports = function isObject(x) {
 
 "use strict";
 
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 });
-const react_1 = __importDefault(__webpack_require__(0));
+const react_1 = __importStar(__webpack_require__(0));
 const Input_scss_1 = __importDefault(__webpack_require__(792));
-const Input = ({ id, className, name, value, size = 'default', style = {}, onChange, onKeyDown, type = 'text', min, max, disabled, placeholder, autocomplete, onFocus, onBlur, children }) => {
+const Input = (0, react_1.forwardRef)(({ id, className, name, value, size = 'default', style = {}, onChange, onKeyDown, type = 'text', min, max, disabled, placeholder, autocomplete, onFocus, onBlur, children }, ref) => {
     const inputClasses = [className, Input_scss_1.default.inputBase];
     if (size === 'small') {
         inputClasses.push(Input_scss_1.default.small);
@@ -19678,7 +19701,7 @@ const Input = ({ id, className, name, value, size = 'default', style = {}, onCha
         inputClasses.push(Input_scss_1.default.default);
     }
     return (react_1.default.createElement("div", { className: Input_scss_1.default.inputBaseRoot, style: { ...style } },
-        react_1.default.createElement("input", { id: id, autoComplete: autocomplete, type: type, placeholder: placeholder, onFocus: () => {
+        react_1.default.createElement("input", { ref: ref, id: id, autoComplete: autocomplete, type: type, placeholder: placeholder, onFocus: () => {
                 if (onFocus)
                     onFocus();
             }, onBlur: () => {
@@ -19686,7 +19709,7 @@ const Input = ({ id, className, name, value, size = 'default', style = {}, onCha
                     onBlur();
             }, onKeyDown: onKeyDown, name: name, min: min, max: max, disabled: disabled, className: inputClasses.join(' '), value: value, onChange: onChange }),
         children));
-};
+});
 exports.default = Input;
 
 
@@ -56234,12 +56257,35 @@ exports.default = CompanionModal;
 
 "use strict";
 
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 });
 /* eslint-disable import/no-extraneous-dependencies */
-const react_1 = __importDefault(__webpack_require__(0));
+const react_1 = __importStar(__webpack_require__(0));
 const model_1 = __webpack_require__(9);
 const NumberInput_1 = __importDefault(__webpack_require__(407));
 const Dropdown_1 = __importDefault(__webpack_require__(46));
@@ -56247,6 +56293,11 @@ const QuestionTemplate_1 = __importDefault(__webpack_require__(154));
 const FormTemplateCompanion_scss_1 = __importDefault(__webpack_require__(791));
 const Input_1 = __importDefault(__webpack_require__(39));
 const FormTemplateCompanion = ({ questions, userCompanion, callbackFormTemplateCompanion, t }) => {
+    const nameInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = nameInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
     const callbackName = (event) => {
         const newCompanionState = model_1.helper.deepCopy(userCompanion);
         newCompanionState.name = event.target.value;
@@ -56277,7 +56328,7 @@ const FormTemplateCompanion = ({ questions, userCompanion, callbackFormTemplateC
                 react_1.default.createElement("div", { className: "col col12 my2" },
                     react_1.default.createElement("h4", { className: FormTemplateCompanion_scss_1.default.header }, t('user.travelCompanions.companionName'))),
                 react_1.default.createElement("div", { className: "col col12" },
-                    react_1.default.createElement(Input_1.default, { type: "text", placeholder: t('user.travelCompanions.companionName'), name: "name", value: userCompanion.name, onChange: callbackName }))),
+                    react_1.default.createElement(Input_1.default, { ref: nameInputRef, type: "text", placeholder: t('user.travelCompanions.companionName'), name: "name", value: userCompanion.name, onChange: callbackName }))),
             react_1.default.createElement("div", { className: "col col12 col6-m p0" },
                 react_1.default.createElement("div", { className: "col col12 my2" },
                     react_1.default.createElement("h4", { className: FormTemplateCompanion_scss_1.default.header }, t('user.travelCompanions.companionAge'))),
@@ -78458,6 +78509,12 @@ const FormTemplateLogin = ({ login, successLogin, reCaptchaSiteKey, showCaptcha
     const [warningMessage, setWarningMessage] = (0, react_1.useState)('');
     const [isRecaptchaActive, setIsRecaptchaActive] = (0, react_1.useState)(false);
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const passwordInputRef = (0, react_1.useRef)(null);
+    const emailInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = emailInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
     const handleChange = (event) => {
         const newUser = { ...user };
         if (event.target.name === 'email') {
@@ -78468,6 +78525,13 @@ const FormTemplateLogin = ({ login, successLogin, reCaptchaSiteKey, showCaptcha
         }
         setUser(newUser);
     };
+    const handleEmailKeyDown = (event) => {
+        var _a;
+        if (event.key === 'Tab' && !event.shiftKey) {
+            event.preventDefault();
+            (_a = passwordInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
     const isValid = () => {
         const emailValid = model_1.helper.emailFormatValid(user.email);
         let newWarningMessage = '';
@@ -78530,13 +78594,13 @@ const FormTemplateLogin = ({ login, successLogin, reCaptchaSiteKey, showCaptcha
                 react_1.default.createElement("div", { className: "col col12 my2" },
                     react_1.default.createElement("h4", { className: FormTemplateLogin_scss_1.default.header }, t('auth.login.email.label'))),
                 react_1.default.createElement("div", { className: "col col12" },
-                    react_1.default.createElement(Input_1.default, { type: "email", placeholder: t('auth.login.email.placeholder'), name: "email", value: user.email, onChange: handleChange, autocomplete: "username" }))),
+                    react_1.default.createElement(Input_1.default, { ref: emailInputRef, type: "email", placeholder: t('auth.login.email.placeholder'), name: "email", value: user.email, onChange: handleChange, autocomplete: "username", onKeyDown: handleEmailKeyDown }))),
             react_1.default.createElement("div", { className: "row mb0" },
                 react_1.default.createElement("div", { className: `col col12 my2 ${FormTemplateLogin_scss_1.default.passwordContent}` },
                     react_1.default.createElement("h4", { className: FormTemplateLogin_scss_1.default.header }, t('auth.login.password.label')),
                     react_1.default.createElement(Button_1.default, { className: FormTemplateLogin_scss_1.default.forgotPasswordButton, text: t('auth.login.forgotPassword'), color: "primary", type: ButtonTypes_1.default.TEXT, onClick: forgotPassword })),
                 react_1.default.createElement("div", { className: "col col12" },
-                    react_1.default.createElement(Input_1.default, { type: showPassword ? 'text' : 'password', placeholder: t('auth.login.password.placeholder'), name: "password", value: user.password, onChange: handleChange, autocomplete: "current-password" },
+                    react_1.default.createElement(Input_1.default, { ref: passwordInputRef, type: showPassword ? 'text' : 'password', placeholder: t('auth.login.password.placeholder'), name: "password", value: user.password, onChange: handleChange, autocomplete: "current-password" },
                         react_1.default.createElement(EyeIconButton_1.default, { show: showPassword, clicked: () => setShowPassword(!showPassword) }))),
                 showCaptcha && isRecaptchaActive ? (react_1.default.createElement("div", { className: `row center mb0 ${FormTemplateLogin_scss_1.default.recaptcha}` },
                     react_1.default.createElement(react_google_recaptcha_1.default, { badge: "inline", sitekey: reCaptchaSiteKey, onChange: verifyCallback }))) : null,
@@ -78681,6 +78745,11 @@ const FormTemplateNewPassword = ({ passwordCallBack, success, t }) => {
     const [error, setError] = (0, react_1.useState)(undefined);
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
     const [showPasswordConfirm, setShowPasswordConfirm] = (0, react_1.useState)(false);
+    const passwordInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = passwordInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
     const handleChange = (event) => {
         if (event.target.name === 'password') {
             setPassword(event.target.value.trim());
@@ -78736,7 +78805,7 @@ const FormTemplateNewPassword = ({ passwordCallBack, success, t }) => {
                 react_1.default.createElement("div", { className: `col col12 my2 ${FormTemplateNewPassword_scss_1.default.content}` },
                     react_1.default.createElement("h4", { className: FormTemplateNewPassword_scss_1.default.header }, t('auth.resetPassword.password.label'))),
                 react_1.default.createElement("div", { className: "col col12" },
-                    react_1.default.createElement(Input_1.default, { type: showPassword ? 'text' : 'password', placeholder: t('auth.resetPassword.password.placeholder'), name: "password", value: password, onChange: handleChange, autocomplete: "password" },
+                    react_1.default.createElement(Input_1.default, { ref: passwordInputRef, type: showPassword ? 'text' : 'password', placeholder: t('auth.resetPassword.password.placeholder'), name: "password", value: password, onChange: handleChange, autocomplete: "password" },
                         react_1.default.createElement(EyeIconButton_1.default, { show: showPassword, clicked: () => setShowPassword(!showPassword) })))),
             react_1.default.createElement("div", { className: "row mb0" },
                 react_1.default.createElement("div", { className: `col col12 my2 ${FormTemplateNewPassword_scss_1.default.content}` },
@@ -78833,6 +78902,7 @@ const FormTemplateProfile = ({ user, profileQuestions, updateUser, updateCallbac
         answers: [...user.answers].sort((a, b) => a - b),
         password: undefined,
     });
+    const firstNameInputRef = (0, react_1.useRef)(null);
     moment_1.default.locale(window.twindow.langCode);
     const areDiffObject = (prevObject, currentObject) => {
         const prevObjectString = JSON.stringify(prevObject);
@@ -78852,6 +78922,10 @@ const FormTemplateProfile = ({ user, profileQuestions, updateUser, updateCallbac
         const areObjectsDifferent = areDiffObject(initialUser, userUpdateRequest);
         setIsFormChanged(areObjectsDifferent);
     }, [userUpdateRequest, initialUser]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = firstNameInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
     const handleChange = (event) => {
         const newUserUpdateRequest = model_1.helper.deepCopy(userUpdateRequest);
         switch (event.target.name) {
@@ -78941,7 +79015,7 @@ const FormTemplateProfile = ({ user, profileQuestions, updateUser, updateCallbac
                     react_1.default.createElement("div", { className: "col col12" },
                         react_1.default.createElement("h4", { className: FormTemplateProfile_scss_1.default.header }, t('auth.register.name.label'))),
                     react_1.default.createElement("div", { className: "col col12" },
-                        react_1.default.createElement(Input_1.default, { type: "text", placeholder: t('auth.register.name.placeholder'), name: "firstName", value: userUpdateRequest.firstName || '', onChange: handleChange, autocomplete: "first-name" }))),
+                        react_1.default.createElement(Input_1.default, { ref: firstNameInputRef, type: "text", placeholder: t('auth.register.name.placeholder'), name: "firstName", value: userUpdateRequest.firstName || '', onChange: handleChange, autocomplete: "first-name" }))),
                 react_1.default.createElement("div", { className: "col col12 col6-m my2 p0" },
                     react_1.default.createElement("div", { className: "col col12" },
                         react_1.default.createElement("h4", { className: FormTemplateProfile_scss_1.default.header }, t('auth.register.surname.label'))),
@@ -79037,6 +79111,11 @@ const UserPasswordChange = ({ updateUser, updateCallback, forgotPassword, close,
     const [showCurrentPassword, setShowCurrentPassword] = (0, react_1.useState)(false);
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
     const [showPasswordConfirm, setShowPasswordConfirm] = (0, react_1.useState)(false);
+    const currentPasswordInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = currentPasswordInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
     const handleChange = (event) => {
         if (event.target.name === 'currentPassword') {
             setCurrentPassword(event.target.value.trim());
@@ -79112,7 +79191,7 @@ const UserPasswordChange = ({ updateUser, updateCallback, forgotPassword, close,
                     react_1.default.createElement("h4", { className: UserPasswordChange_scss_1.default.header }, t('user.profile.changePassword.modal.currentPassword.label')),
                     react_1.default.createElement(Button_1.default, { className: UserPasswordChange_scss_1.default.forgotPasswordButton, text: t('user.profile.changePassword.modal.forgotPassword'), color: "primary", type: ButtonTypes_1.default.TEXT, onClick: forgotPassword })),
                 react_1.default.createElement("div", { className: "col col12" },
-                    react_1.default.createElement(Input_1.default, { type: showCurrentPassword ? 'text' : 'password', placeholder: t('user.profile.changePassword.modal.currentPassword.placeholder'), name: "currentPassword", value: currentPassword, onChange: handleChange, autocomplete: "password" },
+                    react_1.default.createElement(Input_1.default, { ref: currentPasswordInputRef, type: showCurrentPassword ? 'text' : 'password', placeholder: t('user.profile.changePassword.modal.currentPassword.placeholder'), name: "currentPassword", value: currentPassword, onChange: handleChange, autocomplete: "password" },
                         react_1.default.createElement(EyeIconButton_1.default, { show: showCurrentPassword, clicked: () => setShowCurrentPassword(!showCurrentPassword) })))),
             react_1.default.createElement("div", { className: "row mb0" },
                 react_1.default.createElement("div", { className: `col col12 ${UserPasswordChange_scss_1.default.content}` },
@@ -79220,6 +79299,11 @@ const FormTemplateRegister = ({ /* profileQuestions, */ register, successRegiste
     // const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
     const [tosAccepted, setTosAccepted] = (0, react_1.useState)(false);
     const [tosRead, setTosRead] = (0, react_1.useState)(false);
+    const firstNameInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = firstNameInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
     const handleChange = (event) => {
         const newUser = model_1.helper.deepCopy(user);
         if (event.target.name === 'firstName') {
@@ -79320,7 +79404,7 @@ const FormTemplateRegister = ({ /* profileQuestions, */ register, successRegiste
                     react_1.default.createElement("div", { className: "col col12" },
                         react_1.default.createElement("h4", { className: FormTemplateRegister_scss_1.default.header }, t('auth.register.name.label'))),
                     react_1.default.createElement("div", { className: "col col12" },
-                        react_1.default.createElement(Input_1.default, { type: "text", placeholder: t('auth.register.name.placeholder'), name: "firstName", value: user.firstName ? user.firstName : '', onChange: handleChange, autocomplete: "first-name" }))),
+                        react_1.default.createElement(Input_1.default, { ref: firstNameInputRef, type: "text", placeholder: t('auth.register.name.placeholder'), name: "firstName", value: user.firstName ? user.firstName : '', onChange: handleChange, autocomplete: "first-name" }))),
                 react_1.default.createElement("div", { className: "col col12 col6-m my2 p0" },
                     react_1.default.createElement("div", { className: "col col12" },
                         react_1.default.createElement("h4", { className: FormTemplateRegister_scss_1.default.header }, t('auth.register.surname.label'))),