@ui5/webcomponents-react/wrappers/webComponents/Timeline/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * The `Timeline` component shows entries (such as objects, events, or posts) in chronological order.
 * A common use case is to provide information about changes to an object, or events related to an object.
 * These entries can be generated by the system (for example, value XY changed from A to B), or added manually.
 * There are two distinct variants of the timeline: basic and social. The basic timeline is read-only,
 * while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
 *
 * ### Header and Info Bar Slots
 *
 * The Timeline exposes two named slots above the items area:
 *
 * - `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).
 * The most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open
 * a filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or
 * searching — the application listens for events from its own controls and reorders, hides, or
 * adds items in the default slot accordingly.
 *
 * - `infoBar` — for a status bar that reflects the result of the controls (active filters,
 * applied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.
 *
 * The Timeline itself does not filter, sort, or search — the application owns that logic.
 * Use `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline
 * a constrained height in this mode so it owns its scrollbar.
 *
 * __Note:__ This is a UI5 Web Component! [Timeline UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/Timeline) | [Repository](https://github.com/UI5/webcomponents)
 */
const Timeline = withWebComponent('ui5-timeline', ['accessibleName', 'growing', 'layout', 'loadingDelay'], ['loading', 'stickyHeader'], ['header', 'infoBar'], ['load-more']);
Timeline.displayName = 'Timeline';
export { Timeline };