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

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.15](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.14...v3.1.15) (2026-05-19)
+
+
+### Features
+
+* **Chip:** Add a dismissable chip variant ([73d4189](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/73d41894e86c52450ac42523923150f474e0e6f4))
+
+
+### Bug Fixes
+
+* **Checkbox:** Align hover effect with design system ([d824ffb](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/d824ffbd067cc4d19284d70f7c860d50266a7379))
+
+### [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,12 +1,12 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "3.1.13",
+  "version": "3.1.15",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",
   "scripts": {
     "lint": "eslint \"**/*.ts*\"",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run",
     "prettier": "prettier --write ./src",
     "dev": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -79,6 +79,9 @@
     "@storybook/addon-docs": "10.0.1",
     "@storybook/nextjs": "10.0.1",
     "@svgr/cli": "^8.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",
@@ -91,6 +94,7 @@
     "esbuild": "^0.25.11",
     "eslint": "^8.47.0",
     "eslint-plugin-storybook": "10.0.1",
+    "jsdom": "^29.1.1",
     "postcss": "^8.4.26",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.4.1",
@@ -101,6 +105,7 @@
     "tailwindcss": "^3.4.17",
     "ts-loader": "^9.5.2",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "vitest": "^4.1.6"
   }
 }

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/Checkbox/Checkbox.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import type { ForwardRefRenderFunction, InputHTMLAttributes } from 'react';
-import { Icon } from '../../core/Icon';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import { twJoin } from 'tailwind-merge';
+import { Icon } from '../../core/Icon';
+import { twMerge } from 'tailwind-merge';
 
 type BaseProps = {
   checked?: boolean | 'indeterminate';
   defaultChecked?: boolean | 'indeterminate';
   invalid?: string;
+  on?: 'white' | 'gray';
 };
 
 export type CheckboxProps = BaseProps &
@@ -17,7 +18,10 @@ export type CheckboxProps = BaseProps &
 const CheckboxRenderFunction: ForwardRefRenderFunction<
   HTMLInputElement | null,
   CheckboxProps
-> = ({ checked, defaultChecked, invalid, ...rest }, forwardedRef) => {
+> = (
+  { checked, defaultChecked, invalid, on = 'gray', ...rest },
+  forwardedRef,
+) => {
   const ref = useRef<HTMLInputElement | null>(null);
   const checkedProp = checked === 'indeterminate' ? false : checked;
   const defaultCheckedProp =
@@ -54,15 +58,18 @@ const CheckboxRenderFunction: ForwardRefRenderFunction<
     <span className="relative inline-block h-8 w-8 flex-shrink-0 md:h-6 md:w-6">
       <input
         {...rest}
-        className={twJoin(
-          'peer absolute inset-0 h-8 w-8 appearance-none rounded-sm md:h-6 md:w-6',
-          'before:absolute before:inset-0 before:rounded-sm before:border before:border-stroke-primary-100',
+        className={twMerge(
+          'peer absolute inset-0 h-8 w-8 appearance-none rounded-[2px] bg-surface-white md:h-6 md:w-6',
+          'before:absolute before:inset-0 before:rounded-[2px] before:border before:border-stroke-primary-100',
           'checked:before:border-transparent checked:before:bg-surface-primary-100',
           'indeterminate:before:border-transparent indeterminate:before:bg-surface-primary-100',
           'invalid:before:border-stroke-error-100',
-          'hover:cursor-pointer hover:bg-surface-secondary-7',
+          'hover:cursor-pointer hover:before:border-4',
           'focus:outline-none focus-visible:shadow-focus-state',
-          'disabled:before:border-stroke-secondary-40 disabled:hover:cursor-not-allowed disabled:hover:bg-transparent',
+          on === 'white' &&
+            'disabled:before:border-stroke-secondary-40 disabled:hover:cursor-not-allowed disabled:hover:bg-transparent',
+          on === 'gray' &&
+            'disabled:checked:before:bg-surface-white disabled:hover:before:border disabled:hover:cursor-not-allowed disabled:bg-surface-secondary-7 disabled:hover:bg-transparent',
         )}
         type="checkbox"
         defaultChecked={defaultCheckedProp}

package/src/components/core/Chip/Chip.test.tsx

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Chip } from './Chip';
+
+describe('Chip', () => {
+  describe('dismissable', () => {
+    it('renders dismiss button when onDismiss is provided', () => {
+      render(<Chip onDismiss={() => {}}>Label</Chip>);
+      expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
+    });
+
+    it('does not render dismiss button when onDismiss is not provided', () => {
+      render(<Chip>Label</Chip>);
+      expect(screen.queryByRole('button', { name: 'Dismiss' })).not.toBeInTheDocument();
+    });
+
+    it('calls onDismiss when dismiss button is clicked', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+      render(<Chip onDismiss={onDismiss}>Label</Chip>);
+
+      await user.click(screen.getByRole('button', { name: 'Dismiss' }));
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onDismiss on Enter key', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+      render(<Chip onDismiss={onDismiss}>Label</Chip>);
+
+      screen.getByRole('button', { name: 'Dismiss' }).focus();
+      await user.keyboard('{Enter}');
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onDismiss on Space key', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+      render(<Chip onDismiss={onDismiss}>Label</Chip>);
+
+      screen.getByRole('button', { name: 'Dismiss' }).focus();
+      await user.keyboard(' ');
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not propagate click to parent chip button', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+      const onClick = vi.fn();
+      render(
+        <Chip onClick={onClick} onDismiss={onDismiss}>
+          Label
+        </Chip>,
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Dismiss' }));
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/components/core/Chip/Chip.tsx

@@ -1,7 +1,8 @@
-import type { ReactNode, RefObject } from 'react';
+import type { ButtonHTMLAttributes, ReactNode, RefObject } from 'react';
 import { twJoin, twMerge } from 'tailwind-merge';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { Pictogram, PictogramName } from '../Pictogram';
+import { Icon } from '../Icon';
 
 /**
  * All allowed variants for the Chip component.
@@ -11,15 +12,13 @@ type Variant = 'text' | 'pictogram';
 /**
  * Props for the Chip component.
  */
-export type ChipProps = {
+export type ChipProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   asChild?: boolean;
-  className?: string;
   variant?: Variant;
   pictogram?: PictogramName;
   on?: 'white' | 'gray';
-  children?: ReactNode;
   active?: boolean;
-  disabled?: boolean;
+  onDismiss?: () => void;
   ref?: RefObject<HTMLButtonElement>;
 };
 
@@ -34,6 +33,7 @@ const Chip = ({
   on = 'white',
   active = false,
   disabled = false,
+  onDismiss,
   children,
   ref,
   ...args
@@ -41,12 +41,17 @@ const Chip = ({
   const Element = asChild ? Slot : 'button';
 
   const borderRadius = variant === 'text' ? 'rounded-full' : 'rounded-md';
-  const padding = variant === 'text' ? 'px-4 py-3' : 'p-3 lg:p-2';
+  const padding =
+    variant === 'text'
+      ? onDismiss
+        ? 'pl-4 pr-3 py-2'
+        : 'px-4 py-3'
+      : 'p-3 lg:p-2';
   const variantClasses = twMerge(
     'border-none text-center text-sm font-semibold transition-all',
 
     // Variants
-    variant === 'text' && [
+    variant === 'text' && !onDismiss && [
       // Shared
       'text-marine-high-emphasis hover:bg-surface-primary-100',
 
@@ -63,6 +68,10 @@ const Chip = ({
         'bg-surface-white shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-20)]',
     ],
 
+    variant === 'text' && onDismiss && [
+      'text-marine-high-emphasis bg-surface-white shadow-[inset_0_0_0_1px_theme(colors.stroke.secondary-20)] cursor-default',
+    ],
+
     variant === 'pictogram' && [
       // Shared
       'bg-surface-white shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)] hover:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)]',
@@ -83,7 +92,7 @@ const Chip = ({
       ref={ref}
       {...args}
       className={twJoin(
-        'inline-flex items-center justify-center',
+        'inline-flex items-center justify-center gap-2',
         borderRadius,
         padding,
         variantClasses,
@@ -92,6 +101,27 @@ const Chip = ({
     >
       <Slottable>{children ?? ''}</Slottable>
       {pictogram && <Pictogram name={pictogram} size="sm" />}
+      {onDismiss && (
+        <span
+          role="button"
+          aria-label="Dismiss"
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDismiss();
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              e.stopPropagation();
+              onDismiss();
+            }
+          }}
+          className="inline-flex cursor-pointer"
+        >
+          <Icon name="cancel" size="xs" />
+        </span>
+      )}
     </Element>
   );
 };

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,