@tui-cruises/mein-schiff-web-react-component-library 3.1.10 → 3.1.12

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.1.12](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.11...v3.1.12) (2026-04-01)
+
+
+### Features
+
+* **PhoneNumberInput:** add readOnly support ([8d97882](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/8d97882410dc2c27e7a7bacc605c21ad401d4b6a))
+
+### [3.1.11](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.10...v3.1.11) (2026-04-01)
+
+
+### Features
+
+* **PhoneNumberInput:** expose an onValueChange prop for number change events ([72021b2](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/72021b20305eb1dd5ed21a7e346e39fef497afed))
+
 ### [3.1.10](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.9...v3.1.10) (2026-02-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "3.1.10",
+  "version": "3.1.12",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",

package/src/components/core/PhoneNumberInput/PhoneNumberInput.tsx

@@ -24,6 +24,8 @@ type PhoneNumberInputProps = InputHTMLAttributes<HTMLInputElement> & {
   error?: string;
   ariaLabelCountryCode?: string;
   ariaLabelPhoneNumber?: string;
+  /** Called whenever the value changes with the dial code and number separately. */
+  onValueChange?: (value: { dialCode: string; localNumber: string }) => void;
 };
 
 const getDefaultCountry = (
@@ -83,6 +85,8 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
     error,
     ariaLabelCountryCode = 'Country code',
     ariaLabelPhoneNumber = 'Phone number',
+    onValueChange,
+    readOnly,
     ...attrs
   } = props;
 
@@ -109,12 +113,19 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
   const handleCountryChange = (value: string) => {
     setSelectedCountryCode(value);
     setTypedInNumber('');
+    const newDialCode =
+      countries.find(country => country.code === value)?.dialCode || '';
+    onValueChange?.({ dialCode: newDialCode, localNumber: '' });
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const fullNumber = event.target.value;
     const justNumber = fullNumber.replace(selectedCountryDialCode, '').trim();
     setTypedInNumber(justNumber);
+    onValueChange?.({
+      dialCode: selectedCountryDialCode,
+      localNumber: justNumber,
+    });
   };
 
   const inputValue = `${selectedCountryDialCode} ${typedInNumber}`;
@@ -136,6 +147,7 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
         <SelectPrimitive.Root
           value={selectedCountryCode}
           onValueChange={handleCountryChange}
+          disabled={readOnly}
         >
           <SelectPrimitive.Trigger
             className="z-[1] flex items-center gap-2 rounded-md bg-surface-secondary-10 p-3 hover:!shadow-none focus:outline-none focus-visible:shadow-focus-state"
@@ -182,6 +194,7 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
           className="flex-1 p-3 focus:outline-none"
           value={inputValue}
           onChange={handleChange}
+          readOnly={readOnly}
           aria-label={ariaLabelPhoneNumber}
           aria-describedby={ariaDescribedBy}
         />