@tui-cruises/mein-schiff-web-react-component-library 3.1.11 → 3.1.13

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.13](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.12...v3.1.13) (2026-04-15)
+
+
+### Features
+
+* **PhoneNumberInput:** add disabled support and align muted look with InputField ([9b4ba3d](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/9b4ba3d4617eff7e382b32b18a15a97d7479f10d))
+
+### [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)
 
 

package/package.json

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

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

@@ -15,6 +15,7 @@ import {
 } from '../../../libs/phone-number/types';
 import { CountryCode, parsePhoneNumber } from 'libphonenumber-js';
 import { InputFieldError } from '../InputField/InputFieldError';
+import { twMerge } from 'tailwind-merge';
 
 type PhoneNumberInputProps = InputHTMLAttributes<HTMLInputElement> & {
   countries?: PhoneNumberCountry[];
@@ -86,6 +87,8 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
     ariaLabelCountryCode = 'Country code',
     ariaLabelPhoneNumber = 'Phone number',
     onValueChange,
+    readOnly,
+    disabled,
     ...attrs
   } = props;
 
@@ -119,7 +122,10 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const fullNumber = event.target.value;
-    const justNumber = fullNumber.replace(selectedCountryDialCode, '').trim();
+    const justNumber = fullNumber
+      .replace(selectedCountryDialCode, '')
+      .replace(/[^\d\s]/g, '')
+      .trim();
     setTypedInNumber(justNumber);
     onValueChange?.({
       dialCode: selectedCountryDialCode,
@@ -141,14 +147,25 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
       <div
         ref={ref}
         data-invalid={invalid || error ? 'true' : undefined}
-        className="flex w-full items-center overflow-hidden rounded-md border border-stroke-secondary-40 bg-surface-white p-1 text-marine-high-emphasis transition-all focus-within:border-stroke-primary-100 focus-within:shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)] hover:border-stroke-primary-100 hover:shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)] data-[invalid]:border-stroke-error-100"
+        className={twMerge(
+          'flex w-full items-center overflow-hidden rounded-md border border-stroke-secondary-40 bg-surface-white p-1 text-marine-high-emphasis transition-all focus-within:border-stroke-primary-100 focus-within:shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)] data-[invalid]:border-stroke-error-100',
+          !disabled &&
+            !readOnly &&
+            'hover:border-stroke-primary-100 hover:shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)]',
+          (disabled || readOnly) &&
+            'border-transparent bg-surface-secondary-7 text-marine-medium-emphasis shadow-none',
+        )}
       >
         <SelectPrimitive.Root
           value={selectedCountryCode}
           onValueChange={handleCountryChange}
+          disabled={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"
+            className={twMerge(
+              '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',
+              (disabled || readOnly) && 'bg-transparent',
+            )}
             aria-label={ariaLabelCountryCode}
           >
             <CountryFlag
@@ -189,15 +206,22 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
         <input
           id={phoneInputId}
           type="tel"
-          className="flex-1 p-3 focus:outline-none"
+          className="flex-1 bg-transparent p-3 text-inherit focus:outline-none"
           value={inputValue}
           onChange={handleChange}
+          readOnly={readOnly}
+          disabled={disabled}
           aria-label={ariaLabelPhoneNumber}
           aria-describedby={ariaDescribedBy}
         />
 
         <Form.Control type="tel" asChild>
-          <input type="hidden" {...attrs} defaultValue={inputValue} />
+          <input
+            type="hidden"
+            {...attrs}
+            disabled={disabled}
+            defaultValue={inputValue}
+          />
         </Form.Control>
       </div>
       {error && <InputFieldError id={errorId}>{error}</InputFieldError>}