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

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.14](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.13...v3.1.14) (2026-04-15)
+
+
+### Features
+
+* **BirthdateField:** add controlled value, minYear/maxYear, ISO-8601 support ([ba03b4a](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/ba03b4a443fdfbcb90a7dd24efacdd7106545827))
+* **PhoneNumberInput:** add controlled value prop ([c33f049](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/c33f049febe5ffe0304951b85a1953ecb4b5d409))
+
+### [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)
 
 

package/package.json

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

package/src/components/core/BirthdateField/BirthdateField.tsx

@@ -42,10 +42,17 @@ export type BirthdateFieldProps = InputAttributes & {
   className?: string;
   locale?: string;
   onChange?: (value: string) => void;
-  defaultValue?: string; // YYYY-MM-JJ
+  /** Uncontrolled initial value (YYYY-MM-DD). Ignored if `value` is provided. */
+  defaultValue?: string;
+  /** Controlled value (YYYY-MM-DD). When provided, internal state syncs to this prop. */
+  value?: string;
   readOnly?: Boolean;
   disabled?: Boolean;
   legend?: string;
+  /** Minimum allowed year. Defaults to `currentYear - 100` (birthday mode). */
+  minYear?: number;
+  /** Maximum allowed year. Defaults to `currentYear` (birthday mode). */
+  maxYear?: number;
 };
 
 type SetPartFunction = {
@@ -99,7 +106,9 @@ const createCombinedValue = (day: string, month: string, year: string) => {
  * @returns {object} An object containing day, month and year as strings.
  */
 const parseInitialValue = (value: string) => {
-  const parts = value.split('-');
+  // Strip time portion from ISO 8601 strings (e.g. "2020-01-05T00:00:00Z" → "2020-01-05")
+  const dateOnly = value.split('T')[0] ?? '';
+  const parts = dateOnly.split('-');
   return {
     year: normalizeInitialValueSubPart(parts[0] ?? ''),
     month: normalizeInitialValueSubPart(parts[1] ?? ''),
@@ -135,16 +144,21 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
       locale = 'de-DE',
       onChange,
       defaultValue,
+      value,
       readOnly,
       disabled,
       legend,
+      minYear,
+      maxYear,
       ...props
     },
     ref,
   ) => {
     const format = getFormatBasedOnLocale(locale);
-    const defaultValueAsString = defaultValue?.toString() ?? '';
-    const initials = parseInitialValue(defaultValueAsString);
+    // When `value` is provided the component is controlled; otherwise we
+    // seed internal state from `defaultValue`.
+    const initialValueAsString = (value ?? defaultValue)?.toString() ?? '';
+    const initials = parseInitialValue(initialValueAsString);
     const [day, setDay] = useState(initials.day);
     const [month, setMonth] = useState(initials.month);
     const [year, setYear] = useState(initials.year);
@@ -152,7 +166,11 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
       createCombinedValue(initials.day, initials.month, initials.year),
     );
 
-    const prevValue = useRef(defaultValueAsString);
+    // Tracks the last combined value we either emitted via onChange or
+    // received via the `value` prop — used to avoid firing onChange in
+    // response to our own externally-echoed value, and to detect when
+    // an external `value` change needs to be synced into internal state.
+    const prevValue = useRef(combinedValue);
     const dayRef = useRef<HTMLInputElement>(null);
     const monthRef = useRef<HTMLInputElement>(null);
     const yearRef = useRef<HTMLInputElement>(null);
@@ -175,6 +193,21 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
       }
     }, [day, month, year, onChange]);
 
+    // Controlled mode: when the `value` prop changes from outside (i.e.
+    // differs from what we last emitted) re-seed internal state from it.
+    // Comparing against `prevValue` avoids a feedback loop when the parent
+    // echoes our own onChange value back as `value`.
+    useEffect(() => {
+      if (value === undefined) return;
+      const next = value.toString();
+      if (next === prevValue.current) return;
+      const parts = parseInitialValue(next);
+      prevValue.current = createCombinedValue(parts.day, parts.month, parts.year);
+      setDay(parts.day);
+      setMonth(parts.month);
+      setYear(parts.year);
+    }, [value]);
+
     const handleChange = (
       part: PartKey,
       value: string,
@@ -232,10 +265,14 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
                 nextRef,
               )
             }
-            min={part === 'year' ? new Date().getFullYear() - 100 : 1} // Oldest passenger age: 100
+            min={
+              part === 'year'
+                ? (minYear ?? new Date().getFullYear() - 100) // Oldest passenger age: 100
+                : 1
+            }
             max={
               part === 'year'
-                ? new Date().getFullYear()
+                ? (maxYear ?? new Date().getFullYear())
                 : part === 'month'
                   ? 12
                   : 31

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

@@ -1,6 +1,13 @@
 'use client';
 
-import { InputHTMLAttributes, useRef, useState, useId, ReactNode } from 'react';
+import {
+  InputHTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+  useId,
+  ReactNode,
+} from 'react';
 import { Icon } from '../../core/Icon';
 import * as Form from '@radix-ui/react-form';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -15,8 +22,12 @@ 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> & {
+type PhoneNumberInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'value'
+> & {
   countries?: PhoneNumberCountry[];
   defaultCountryCode?: string;
   invalid?: boolean;
@@ -24,6 +35,12 @@ type PhoneNumberInputProps = InputHTMLAttributes<HTMLInputElement> & {
   error?: string;
   ariaLabelCountryCode?: string;
   ariaLabelPhoneNumber?: string;
+  /**
+   * Controlled value as a combined string (e.g. `"+49 1234567"`). When
+   * provided, internal state syncs to this prop. Use together with
+   * `onValueChange` for full controlled behavior.
+   */
+  value?: string;
   /** Called whenever the value changes with the dial code and number separately. */
   onValueChange?: (value: { dialCode: string; localNumber: string }) => void;
 };
@@ -87,19 +104,23 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
     ariaLabelPhoneNumber = 'Phone number',
     onValueChange,
     readOnly,
+    disabled,
+    defaultValue,
+    value,
     ...attrs
   } = props;
 
+  // When `value` is provided the component is controlled; otherwise we
+  // seed internal state from `defaultValue`.
+  const initialValueAsString = (value ?? defaultValue)?.toString() ?? '';
+
   const defaultCountry = getDefaultCountry(
     defaultCountryCode,
-    props.defaultValue,
+    initialValueAsString,
   );
 
   const [typedInNumber, setTypedInNumber] = useState(
-    props.defaultValue
-      ?.toString()
-      .substring(defaultCountry.dialCode.length)
-      .trim() || '',
+    initialValueAsString.substring(defaultCountry.dialCode.length).trim() || '',
   );
 
   const [selectedCountryCode, setSelectedCountryCode] = useState<string>(
@@ -110,18 +131,42 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
     countries.find(country => country.code === selectedCountryCode)?.dialCode ||
     '';
 
+  // Tracks the last combined `${dialCode} ${localNumber}`.trim() value we
+  // either emitted via onValueChange or received via the `value` prop —
+  // used to avoid re-syncing internal state when the parent echoes our
+  // own value back, and to detect genuine external `value` changes.
+  const lastCombinedRef = useRef<string>(initialValueAsString);
+
+  // Controlled mode: re-seed internal state when `value` changes externally.
+  useEffect(() => {
+    if (value === undefined) return;
+    const asString = value.toString();
+    if (asString === lastCombinedRef.current) return;
+    lastCombinedRef.current = asString;
+    const country = getDefaultCountry(defaultCountryCode, asString);
+    const localNumber =
+      asString.substring(country.dialCode.length).trim() || '';
+    setSelectedCountryCode(country.code);
+    setTypedInNumber(localNumber);
+  }, [value, defaultCountryCode]);
+
   const handleCountryChange = (value: string) => {
     setSelectedCountryCode(value);
     setTypedInNumber('');
     const newDialCode =
       countries.find(country => country.code === value)?.dialCode || '';
+    lastCombinedRef.current = newDialCode.trim();
     onValueChange?.({ dialCode: newDialCode, localNumber: '' });
   };
 
   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);
+    lastCombinedRef.current = `${selectedCountryDialCode} ${justNumber}`.trim();
     onValueChange?.({
       dialCode: selectedCountryDialCode,
       localNumber: justNumber,
@@ -142,15 +187,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={readOnly}
+          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
@@ -191,16 +246,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>}