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

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "3.1.13",
+  "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';
@@ -17,7 +24,10 @@ 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;
@@ -25,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;
 };
@@ -89,19 +105,22 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
     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>(
@@ -112,11 +131,31 @@ 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: '' });
   };
 
@@ -127,6 +166,7 @@ const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
       .replace(/[^\d\s]/g, '')
       .trim();
     setTypedInNumber(justNumber);
+    lastCombinedRef.current = `${selectedCountryDialCode} ${justNumber}`.trim();
     onValueChange?.({
       dialCode: selectedCountryDialCode,
       localNumber: justNumber,