@tui-cruises/mein-schiff-web-react-component-library 2.2.10 → 3.0.0

package/CHANGELOG.md

@@ -2,24 +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.
 
-### [2.2.10](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.9...v2.2.10) (2025-09-09)
+## [3.0.0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.9...v3.0.0) (2025-09-12)
 
-### [2.2.9](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.7...v2.2.9) (2025-09-09)
-
-
-### Bug Fixes
-
-* **OM-2216:** change pagination icon button size on mobile/tablet according to design (pull request [#6](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/issues/6)) ([6541f91](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/6541f9109995bab9644ddf46682005988bee2255))
-* **Pagination:** adjust icon button sizes on mobile/tablet to match design ([c468b10](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/c468b1075f2425fcfa871c3d4459a1b401a61423))
-* **Tag:** use text-center (pull request [#7](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/issues/7)) ([f6184d1](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/f6184d1027637018693aef04e2986d36b86521aa))
-* typefix ([b7fccaf](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/b7fccaf80e990db4d68b42411c1ce57a6356ad05))
-
-### [2.2.8](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.7...v2.2.8) (2025-09-08)
 
+### Features
 
-### Bug Fixes
+* next15 prep ([46b3477](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/46b3477fda31e4bb8b29a12da0a544e620cdbc11))
 
-* **Calendar:** Typefix i18n ([b7fccaf](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/b7fccaf80e990db4d68b42411c1ce57a6356ad05))
+### [2.2.9](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.8...v2.2.9) (2025-09-08)
 
 ### [2.2.7](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.6...v2.2.7) (2025-08-25)
 

package/icons/icons/index.ts

@@ -1,3 +1,4 @@
+'use client';
 import dynamic from 'next/dynamic';
 
 export const dynamicComponents = {

package/icons/pictograms/index.ts

@@ -1,3 +1,4 @@
+'use client';
 import dynamic from 'next/dynamic';
 
 export const dynamicComponents = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "2.2.10",
+  "version": "3.0.0",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",
@@ -37,7 +37,6 @@
     "README.md"
   ],
   "dependencies": {
-    "@next/font": "^13.5.3",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -56,6 +55,7 @@
     "@tuic/i18n": "^1.0.0",
     "@tuic/lib": "^1.0.0",
     "@tuic/logger": "^1.0.0",
+    "@tuic/tailwind-config": "file:/usr/local/var/www/tuic-nextjs-frontend/packages/tailwind-config",
     "@tuic/tracking": "^1.0.0",
     "d3": "^7.9.0",
     "date-fns": "^3.4.0",
@@ -65,11 +65,11 @@
     "libphonenumber-js": "^1.10.54",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
-    "next": "^14.1.3",
-    "react": "^18.2.0",
+    "next": "^15.5.2",
+    "react": "^19.1.1",
     "react-country-flag": "^3.1.0",
-    "react-day-picker": "^8.10.0",
-    "react-dom": "^18.2.0",
+    "react-day-picker": "^9.9.0",
+    "react-dom": "^19.1.1",
     "react-is": "^18.2.0",
     "react-slider": "^2.0.6",
     "react-youtube": "^10.1.0",
@@ -97,8 +97,8 @@
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",
-    "@types/react": "^18.2.48",
-    "@types/react-is": "^18.2.3",
+    "@types/react": "^19.1.12",
+    "@types/react-is": "*",
     "@types/react-slider": "^1.3.6",
     "autoprefixer": "^10.4.14",
     "chromatic": "^11.27.0",

package/src/components/core/Accordion/utils.tsx

@@ -3,11 +3,22 @@ import { ReactElement } from 'react';
 export const assignDefaultValues = (
   children: ReactElement[],
 ): ReactElement[] => {
-  return children.map((item, idx) => ({
-    ...item,
-    props: {
-      ...item.props,
-      value: item.props.value ?? `intermediateValue${idx}`,
-    },
-  }));
+  return children.map((item, idx) => {
+    const props = item.props
+      ? {
+          ...item.props,
+          value:
+            (item.props &&
+            typeof item.props === 'object' &&
+            'value' in item.props
+              ? item.props.value
+              : undefined) ?? `intermediateValue${idx}`,
+        }
+      : undefined;
+
+    return {
+      ...item,
+      props,
+    };
+  });
 };

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

@@ -174,7 +174,7 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
     const handleChange = (
       part: PartKey,
       value: string,
-      nextRef?: React.RefObject<HTMLInputElement> | null,
+      nextRef?: React.RefObject<HTMLInputElement | null>,
     ) => {
       if (readOnly || disabled) return;
 

package/src/components/core/Button/Button.tsx

@@ -1,8 +1,7 @@
 import { Icon, IconName } from '../../core/Icon';
 import {
   ButtonHTMLAttributes,
-  ForwardRefRenderFunction,
-  forwardRef,
+  RefObject
 } from 'react';
 import { twJoin, twMerge } from 'tailwind-merge';
 import { Slot, Slottable } from '@radix-ui/react-slot';
@@ -21,12 +20,10 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
     active?: boolean;
     hasFullWidthOnMobile?: boolean;
     indicating?: boolean;
+    ref?: RefObject<HTMLButtonElement>
   };
 
-const ButtonRenderFunction: ForwardRefRenderFunction<
-  HTMLButtonElement,
-  ButtonProps
-> = (props, ref) => {
+const ButtonRenderFunction = (props: ButtonProps) => {
   const {
     asChild,
     className,
@@ -40,6 +37,7 @@ const ButtonRenderFunction: ForwardRefRenderFunction<
     disabled: disabledArg,
     hasFullWidthOnMobile, // @revisit
     indicating,
+    ref,
     ...rest
   } = props;
 
@@ -190,6 +188,4 @@ const ButtonRenderFunction: ForwardRefRenderFunction<
   );
 };
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ButtonRenderFunction,
-) as typeof ButtonRenderFunction;
+export const Button = ButtonRenderFunction

package/src/components/core/Calendar/Calendar.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import {
   DayPicker,
-  DayPickerBase,
+  PropsBase,
   DayPickerMultipleProps,
   DayPickerRangeProps,
   DayPickerSingleProps,
@@ -14,12 +14,11 @@ import { de, enGB } from 'date-fns/locale';
 
 import { twJoin } from 'tailwind-merge';
 import { Icon } from '../Icon';
-import { Locale as I18nLocale } from '@tuic/i18n';
 import { TextButton } from '../TextButton';
 import { differenceInMonths, type Locale } from 'date-fns';
 
-type BaseProps = Omit<DayPickerBase, 'locale' | 'fromDate'> & {
-  localeCode?: I18nLocale;
+type BaseProps = Omit<PropsBase, 'locale' | 'fromDate'> & {
+  localeCode?: string;
   useShowMoreButtonOnMobile?: boolean;
   showPrevMonthsButtonLabel?: string;
   showNextMonthsButtonLabel?: string;
@@ -32,7 +31,7 @@ export type CalendarProps =
   | (BaseProps & DayPickerMultipleProps)
   | (BaseProps & DayPickerRangeProps);
 
-const DEFAULT_LOCALE: I18nLocale = 'de';
+const DEFAULT_LOCALE: string = 'de';
 
 /**
  * Calendar integration
@@ -59,7 +58,7 @@ function Calendar({
   toMonth,
   ...props
 }: CalendarProps) {
-  const [usedLocale, setUsedLocale] = useState<I18nLocale | undefined>(undefined);
+  const [usedLocale, setUsedLocale] = useState<Locale | undefined>(undefined);
   const [currentMonth, setCurrentMonth] = useState<Date | undefined>(
     useShowMoreButtonOnMobile ? (month ?? defaultMonth) : undefined,
   );
@@ -280,18 +279,18 @@ function Calendar({
           day_hidden: 'invisible',
           ...classNames,
         }}
-        components={{
-          IconLeft: ({ ...props }) => (
-            <Icon className="-ml-2 h-5 w-5" name="nav-arrow-left" size="lg" />
-          ),
-          IconRight: ({ ...props }) => (
-            <Icon
-              className="-mr-2 ml-auto h-5 w-5"
-              name="nav-arrow-right"
-              size="lg"
-            />
-          ),
-        }}
+        // components={{
+        //   IconLeft: ({ ...props }) => (
+        //     <Icon className="-ml-2 h-5 w-5" name="nav-arrow-left" size="lg" />
+        //   ),
+        //   IconRight: ({ ...props }) => (
+        //     <Icon
+        //       className="-mr-2 ml-auto h-5 w-5"
+        //       name="nav-arrow-right"
+        //       size="lg"
+        //     />
+        //   ),
+        // }}
         locale={usedLocale}
         {...props}
       />

package/src/components/core/FormLabel/FormLabel.tsx

@@ -1,7 +1,6 @@
 import {
-  forwardRef,
   LabelHTMLAttributes,
-  ForwardRefRenderFunction,
+  RefObject
 } from 'react';
 import { twJoin } from 'tailwind-merge';
 import { Slot, Slottable } from '@radix-ui/react-slot';
@@ -11,13 +10,11 @@ export type FormLabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
   /** Indicates if the associated field is required. */
   required?: boolean;
   'data-invalid'?: boolean;
+  ref?: RefObject<HTMLLabelElement>
 };
 
-const FormLabelImplementation: ForwardRefRenderFunction<
-  HTMLLabelElement,
-  FormLabelProps
-> = (props, ref) => {
-  const { asChild, className, required, children, ...args } = props;
+const FormLabelImplementation = (props: FormLabelProps) => {
+  const { asChild, className, required, children, ref, ...args } = props;
 
   const Component = asChild ? Slot : 'label';
 
@@ -81,6 +78,4 @@ const FormLabelImplementation: ForwardRefRenderFunction<
  * </FormLabel>
  * ```
  */
-export const FormLabel = forwardRef(
-  FormLabelImplementation,
-) as typeof FormLabelImplementation;
+export const FormLabel = FormLabelImplementation;

package/src/components/core/Pagination/Pagination.tsx

@@ -66,7 +66,7 @@ export const Pagination = ({
     variant: 'secondary',
     iconName: 'nav-arrow-left',
     disabled: !forcePreviousClickable && (pending || minCurrent <= 1),
-    size: ['md', { lg: 'sm' }],
+    size: 'sm',
     onClick: createNavigationHandler(setPending, onPrevious),
     'aria-label': i18n?.previousPage ?? 'Vorherige Seite',
   });
@@ -75,7 +75,7 @@ export const Pagination = ({
     variant: 'secondary',
     iconName: 'nav-arrow-right',
     disabled: !forceNextClickable && (pending || maxCurrent >= total),
-    size: ['md', { lg: 'sm' }],
+    size: 'sm',
     onClick: createNavigationHandler(setPending, onNext),
     'aria-label': i18n?.nextPage ?? 'Nächste Seite',
   });

package/src/components/core/Select/Select.tsx

@@ -59,7 +59,7 @@ const SelectRenderFunction: ForwardRefRenderFunction<
 
   let combinedOptions = useMemo(() => {
     let optionsFromChildren = getChildrenAsArrayOfElements(children).map(
-      (node): Option => node.props,
+      (node): Option => node.props as never,
     );
 
     return [...options, ...optionsFromChildren];

package/src/components/core/Tag/Tag.tsx

@@ -105,7 +105,7 @@ const Tag = ({
     <div
       {...args}
       className={twJoin(
-        'inline-flex items-center justify-center text-center font-semibold text-marine-high-emphasis',
+        'inline-flex items-center justify-center font-semibold text-marine-high-emphasis',
         borderRadius,
         textSize,
         padding,

package/src/components/core/TextButton/TextButton.tsx

@@ -1,7 +1,6 @@
 import {
   ButtonHTMLAttributes,
-  ForwardRefRenderFunction,
-  PropsWithChildren,
+  PropsWithChildren, RefObject
 } from 'react';
 import React, { forwardRef } from 'react';
 import { Icon, IconName } from '../../core/Icon';
@@ -18,6 +17,7 @@ type CommonProps = ButtonHTMLAttributes<HTMLButtonElement> &
     iconSize?: 'xs' | 'sm' | 'md' | 'lg';
     size?: 'sm' | 'md' | 'lg';
     on?: 'white' | 'gray' | 'ocean' | 'image';
+    ref?: RefObject<HTMLButtonElement>
   }>;
 
 type ButtonAttributes = Omit<
@@ -28,10 +28,7 @@ type ButtonAttributes = Omit<
 
 export type TextButtonProps = ButtonAttributes & CommonProps;
 
-const TextButtonRenderFunction: ForwardRefRenderFunction<
-  HTMLButtonElement,
-  TextButtonProps
-> = (
+const TextButtonRenderFunction = (
   {
     children,
     asChild,
@@ -41,9 +38,9 @@ const TextButtonRenderFunction: ForwardRefRenderFunction<
     size = 'md',
     on = 'white',
     className: classNameArg,
+    ref,
     ...rest
-  },
-  ref,
+  }: TextButtonProps,
 ) => {
   const Comp = asChild ? Slot : 'button';
 
@@ -104,6 +101,4 @@ const TextButtonRenderFunction: ForwardRefRenderFunction<
 /**
  * `TextButton` is a component that renders a text button.
  */
-export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(
-  TextButtonRenderFunction,
-) as typeof TextButtonRenderFunction;
+export const TextButton = TextButtonRenderFunction

package/src/components/shared/NextFontMeinSchiffSansPro/NextFontMeinSchiffSansPro.tsx

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import localFont from '@next/font/local';
+import localFont from 'next/font/local';
 
 type Props = {
   children: (font: ReturnType<typeof localFont>) => ReactNode;

package/src/components/shared/UniversalCarousel/helpers.ts

@@ -11,7 +11,7 @@ import { CarouselStage } from './CarouselStage';
 import { ScrollToIndex } from './CarouselInterface';
 import { logger } from '@tuic/logger';
 
-type StageRef = RefObject<HTMLUListElement>;
+type StageRef = RefObject<HTMLUListElement | undefined | null>;
 
 type ItemsChildren = ComponentPropsWithoutRef<typeof CarouselStage>['children'];
 

package/src/helpers/slot.tsx

@@ -1,4 +1,4 @@
-import { Children, cloneElement, isValidElement, ReactNode } from 'react';
+import { Children, cloneElement, isValidElement, PropsWithChildren, ReactNode } from 'react';
 
 /**
  * Dynamically wraps the children intended for a Radix UI `Slot` with a specified wrapper element or component.
@@ -63,6 +63,8 @@ export const wrapSlottableChildren = (
   if (!isValidElement(child)) {
     return wrapper(children);
   }
+  
+  const props = child.props as PropsWithChildren
 
-  return cloneElement(child, undefined, wrapper(child.props.children));
+  return cloneElement(child, undefined, wrapper(props?.children));
 };

package/src/hooks/use-intersection-observer.ts

@@ -98,7 +98,7 @@ export function useIntersectionObserver({
     entry: undefined,
   }));
 
-  const callbackRef = useRef<UseIntersectionObserverOptions['onChange']>();
+  const callbackRef = useRef<UseIntersectionObserverOptions['onChange'] | null>(null);
 
   callbackRef.current = onChange;