import { ReactNode } from 'react'; import { Theme } from './Theme'; import { TimelineItemModel } from './TimelineItemModel'; import { LayoutConfig, InteractionConfig, ContentConfig, DisplayConfig, MediaConfig, AnimationConfig, StyleConfig, AccessibilityConfig, I18nConfig, DarkModeConfig } from './TimelineConfig'; /** * Timeline display modes */ export type TimelineMode = 'horizontal' | 'vertical' | 'alternating' | 'horizontal-all'; /** * New improved Timeline component props with grouped configuration * This provides a cleaner, more intuitive API surface */ export interface TimelinePropsV2 { /** Array of timeline items to display */ items: TimelineItemModel[]; /** Timeline display mode */ mode?: TimelineMode; /** Custom React content for timeline cards */ children?: ReactNode | ReactNode[]; /** Visual theme configuration */ theme?: Theme; /** Index of initially active timeline item */ activeItemIndex?: number; /** Layout and sizing options */ layout?: LayoutConfig; /** User interaction and navigation options */ interaction?: InteractionConfig; /** Content handling and display options */ content?: ContentConfig; /** Visual display and styling options */ display?: DisplayConfig; /** Media content configuration */ media?: MediaConfig; /** Animation and slideshow options */ animation?: AnimationConfig; /** Custom styling and CSS classes */ style?: StyleConfig; /** Accessibility and internationalization */ accessibility?: AccessibilityConfig; /** Comprehensive internationalization configuration */ i18n?: I18nConfig; /** Callback when a timeline item is selected */ onItemSelected?: (data: { item: Pick; index: number; }) => void; /** Callback when scrolling reaches the end */ onScrollEnd?: () => void; /** Callback when theme changes (e.g., dark mode toggle) */ onThemeChange?: (theme: Theme) => void; /** Callback when slideshow restarts */ onRestartSlideshow?: () => void; /** Enable dynamic updates to timeline items */ allowDynamicUpdate?: boolean; /** Custom unique identifier for the timeline */ id?: string; /** Dark mode configuration */ darkMode?: DarkModeConfig; } /** * Backward compatibility: Maps old props to new grouped structure */ export interface LegacyTimelineProps { /** @deprecated Use layout.cardWidth */ cardWidth?: number; /** @deprecated Use layout.cardHeight */ cardHeight?: number | 'auto'; /** @deprecated Use layout.pointSize */ timelinePointDimension?: number; /** @deprecated Use layout.lineWidth */ lineWidth?: number; /** @deprecated Use layout.itemWidth */ itemWidth?: number; /** @deprecated Use layout.responsive.breakpoint */ responsiveBreakPoint?: number; /** @deprecated Use layout.responsive.enabled */ enableBreakPoint?: boolean; /** @deprecated Use layout.positioning.cardPosition */ cardPositionHorizontal?: 'TOP' | 'BOTTOM'; /** @deprecated Use layout.positioning.flipLayout */ flipLayout?: boolean; /** @deprecated Use interaction.keyboardNavigation */ disableNavOnKey?: boolean; /** @deprecated Use interaction.pointClick */ disableClickOnCircle?: boolean; /** @deprecated Use interaction.autoScroll */ disableAutoScrollOnClick?: boolean; /** @deprecated Use interaction.focusOnLoad */ focusActiveItemOnLoad?: boolean; /** @deprecated Use interaction.cardHover */ highlightCardsOnHover?: boolean; /** @deprecated Use interaction.disabled */ disableInteraction?: boolean; /** @deprecated Use content.allowHTML */ parseDetailsAsHTML?: boolean; /** @deprecated Use content.readMore */ useReadMore?: boolean; /** @deprecated Use content.textOverlay */ textOverlay?: boolean; /** @deprecated Use content.dateFormat */ titleDateFormat?: string; /** @deprecated Use content.compactText */ textDensity?: 'LOW' | 'HIGH'; /** @deprecated Use content.semanticTags */ semanticTags?: { cardTitle?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div'; cardSubtitle?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div'; }; /** @deprecated Use display.borderless */ borderLessCards?: boolean; /** @deprecated Use display.cardsDisabled */ cardLess?: boolean; /** @deprecated Use display.pointsDisabled */ disableTimelinePoint?: boolean; /** @deprecated Use display.pointShape */ timelinePointShape?: 'circle' | 'square' | 'diamond'; /** @deprecated Use display.allCardsVisible */ showAllCardsHorizontal?: boolean; /** @deprecated Use display.toolbar.enabled */ disableToolbar?: boolean; /** @deprecated Use display.toolbar.position */ toolbarPosition?: 'top' | 'bottom'; /** @deprecated Use display.scrollable */ scrollable?: boolean | { scrollbar: boolean; }; /** @deprecated Use media.height */ mediaHeight?: number; /** @deprecated Use media config */ mediaSettings?: { align?: 'left' | 'right' | 'center'; fit?: 'cover' | 'contain' | 'fill' | 'none'; }; /** @deprecated Use animation.slideshow.enabled */ slideShow?: boolean; /** @deprecated Use animation.slideshow.duration */ slideItemDuration?: number; /** @deprecated Use animation.slideshow.type */ slideShowType?: 'reveal' | 'slide_in' | 'slide_from_sides'; /** @deprecated Use animation.slideshow.showProgress */ showProgressOnSlideshow?: boolean; /** @deprecated Use animation.slideshow.showOverallProgress */ showOverallSlideshowProgress?: boolean; /** @deprecated Use style.classNames */ classNames?: { card?: string; cardMedia?: string; cardSubTitle?: string; cardText?: string; cardTitle?: string; controls?: string; title?: string; }; /** @deprecated Use style.fontSizes */ fontSizes?: { cardSubtitle?: string; cardText?: string; cardTitle?: string; title?: string; }; /** @deprecated Use accessibility.buttonTexts */ buttonTexts?: { first: string; last: string; next?: string; previous?: string; play?: string; stop?: string; }; /** @deprecated No longer used */ noUniqueId?: boolean; /** @deprecated Use id prop instead */ uniqueId?: string; /** @deprecated Internal prop, should not be used externally */ isChild?: boolean; /** @deprecated Use content.detailsHeight or remove entirely */ contentDetailsHeight?: number; /** @deprecated Use media.height instead */ nestedCardHeight?: number; /** @deprecated Use darkMode.enabled and darkMode.showToggle */ darkMode?: boolean; /** @deprecated Use darkMode.showToggle */ enableDarkToggle?: boolean; /** @deprecated Use display.toolbar configuration */ enableQuickJump?: boolean; /** @deprecated Use display.toolbar configuration */ enableLayoutSwitch?: boolean; } //# sourceMappingURL=TimelinePropsV2.d.ts.map