@trackunit/react-date-and-time-components 1.3.45 → 1.3.47

package/index.cjs.js

@@ -28,7 +28,8 @@ var defaultTranslations = {
 	"shared.timePeriods.months_plural": "{{count}} months",
 	"shared.timePeriods.today": "Today",
 	"shared.timePeriods.weeks": "{{count}} week",
-	"shared.timePeriods.weeks_plural": "{{count}} weeks"
+	"shared.timePeriods.weeks_plural": "{{count}} weeks",
+	"timeline.loadMore": "Click for more..."
 };
 
 /** The translation namespace for this library */
@@ -371,6 +372,8 @@ const cvaTimelineElementTime = cssClassVarianceUtilities.cvaMerge([
     },
 });
 
+// Constants for pagination
+const ITEMS_PER_PAGE = 20;
 /**
  * The Timeline component offers a visual representation of events or milestones in chronological order, helping users easily follow the progression of activities, tasks, or data points over time.
  *
@@ -380,19 +383,49 @@ const cvaTimelineElementTime = cssClassVarianceUtilities.cvaMerge([
 const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
     const ref = react.useRef(null);
     const [isOpen, setIsOpen] = react.useState(false);
+    const [visibleCount, setVisibleCount] = react.useState(ITEMS_PER_PAGE);
+    const [isLoadingMore, setIsLoadingMore] = react.useState(false);
     const { formatDate, formatRange } = reactDateAndTimeHooks.useDateAndTime();
     const locale = reactDateAndTimeHooks.useLocale();
     const hourCycle = dateAndTimeUtils.getHourCycle(locale);
+    const { t } = useTranslation();
     const childrenArray = react.useMemo(() => react.Children.toArray(children), [children]);
     const [firstChild, ...remainingChildren] = childrenArray;
     const childProps = react.isValidElement(firstChild) ? firstChild.props : {};
     const lastChild = remainingChildren.pop();
     const middleChildren = remainingChildren;
+    // Slice middleChildren to only render the visible count
+    const visibleMiddleChildren = react.useMemo(() => middleChildren.slice(0, visibleCount), [middleChildren, visibleCount]);
     react.useEffect(() => {
         // Set maxHeight dynamically for smooth animation
         if (ref.current) {
             ref.current.style.maxHeight = isOpen ? `${ref.current.scrollHeight}px` : "0px";
         }
+    }, [isOpen, visibleCount]);
+    const loadMoreItems = react.useCallback(() => {
+        if (isLoadingMore || visibleCount >= middleChildren.length) {
+            return;
+        }
+        setIsLoadingMore(true);
+        // Use requestAnimationFrame to avoid layout thrashing
+        requestAnimationFrame(() => {
+            const scrollPos = ref.current?.scrollTop || 0;
+            setVisibleCount(prev => Math.min(prev + ITEMS_PER_PAGE, middleChildren.length));
+            // After state update, preserve scroll position
+            setTimeout(() => {
+                if (ref.current) {
+                    ref.current.scrollTop = scrollPos;
+                }
+                setIsLoadingMore(false);
+            }, 50); // Small delay to ensure DOM has updated
+        });
+    }, [isLoadingMore, middleChildren.length, visibleCount]);
+    // Reset visible count when toggling open/closed
+    react.useEffect(() => {
+        if (isOpen) {
+            setVisibleCount(ITEMS_PER_PAGE);
+            setIsLoadingMore(false);
+        }
     }, [isOpen]);
     const renderToggleButton = () => (jsxRuntime.jsxs("div", { className: cvaTimelineElement(), children: [childProps.date ? (jsxRuntime.jsx("div", { className: cvaTimelineElementTime({
                     width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
@@ -410,7 +443,10 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
         const { date, dateRange, showTime } = dateHeader;
         return (jsxRuntime.jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsxRuntime.jsx(reactComponents.Text, { className: "text-secondary-500", size: "medium", type: "span", weight: "thick", children: ` (${dateAndTimeUtils.timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsxRuntime.jsx(reactComponents.Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     }, [dateHeader, formatDate, formatRange, customHeader, locale]);
-    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxRuntime.jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxRuntime.jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden transition-all duration-300", ref: ref, children: [jsxRuntime.jsx("div", {}), middleChildren, jsxRuntime.jsx("div", {})] }), lastChild] })) : (jsxRuntime.jsx("div", { children: children }))] }));
+    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxRuntime.jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxRuntime.jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsxRuntime.jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsxRuntime.jsx("div", { className: "flex justify-center py-2", onClick: e => {
+                                    e.stopPropagation(); // Prevent parent handlers from firing
+                                    loadMoreItems();
+                                }, children: jsxRuntime.jsx(reactComponents.Text, { className: "text-secondary-500 hover:text-secondary-600 cursor-pointer", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsxRuntime.jsx("div", {})] }), lastChild] })) : (jsxRuntime.jsx("div", { children: children }))] }));
 };
 
 /**

package/index.esm.js

@@ -26,7 +26,8 @@ var defaultTranslations = {
 	"shared.timePeriods.months_plural": "{{count}} months",
 	"shared.timePeriods.today": "Today",
 	"shared.timePeriods.weeks": "{{count}} week",
-	"shared.timePeriods.weeks_plural": "{{count}} weeks"
+	"shared.timePeriods.weeks_plural": "{{count}} weeks",
+	"timeline.loadMore": "Click for more..."
 };
 
 /** The translation namespace for this library */
@@ -369,6 +370,8 @@ const cvaTimelineElementTime = cvaMerge([
     },
 });
 
+// Constants for pagination
+const ITEMS_PER_PAGE = 20;
 /**
  * The Timeline component offers a visual representation of events or milestones in chronological order, helping users easily follow the progression of activities, tasks, or data points over time.
  *
@@ -378,19 +381,49 @@ const cvaTimelineElementTime = cvaMerge([
 const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
     const ref = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
+    const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
     const { formatDate, formatRange } = useDateAndTime();
     const locale = useLocale$1();
     const hourCycle = getHourCycle(locale);
+    const { t } = useTranslation();
     const childrenArray = useMemo(() => Children.toArray(children), [children]);
     const [firstChild, ...remainingChildren] = childrenArray;
     const childProps = isValidElement(firstChild) ? firstChild.props : {};
     const lastChild = remainingChildren.pop();
     const middleChildren = remainingChildren;
+    // Slice middleChildren to only render the visible count
+    const visibleMiddleChildren = useMemo(() => middleChildren.slice(0, visibleCount), [middleChildren, visibleCount]);
     useEffect(() => {
         // Set maxHeight dynamically for smooth animation
         if (ref.current) {
             ref.current.style.maxHeight = isOpen ? `${ref.current.scrollHeight}px` : "0px";
         }
+    }, [isOpen, visibleCount]);
+    const loadMoreItems = useCallback(() => {
+        if (isLoadingMore || visibleCount >= middleChildren.length) {
+            return;
+        }
+        setIsLoadingMore(true);
+        // Use requestAnimationFrame to avoid layout thrashing
+        requestAnimationFrame(() => {
+            const scrollPos = ref.current?.scrollTop || 0;
+            setVisibleCount(prev => Math.min(prev + ITEMS_PER_PAGE, middleChildren.length));
+            // After state update, preserve scroll position
+            setTimeout(() => {
+                if (ref.current) {
+                    ref.current.scrollTop = scrollPos;
+                }
+                setIsLoadingMore(false);
+            }, 50); // Small delay to ensure DOM has updated
+        });
+    }, [isLoadingMore, middleChildren.length, visibleCount]);
+    // Reset visible count when toggling open/closed
+    useEffect(() => {
+        if (isOpen) {
+            setVisibleCount(ITEMS_PER_PAGE);
+            setIsLoadingMore(false);
+        }
     }, [isOpen]);
     const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [childProps.date ? (jsx("div", { className: cvaTimelineElementTime({
                     width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
@@ -408,7 +441,10 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
         const { date, dateRange, showTime } = dateHeader;
         return (jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxs(Fragment, { children: [jsx(Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsx(Text, { className: "text-secondary-500", size: "medium", type: "span", weight: "thick", children: ` (${timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsx(Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     }, [dateHeader, formatDate, formatRange, customHeader, locale]);
-    return (jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden transition-all duration-300", ref: ref, children: [jsx("div", {}), middleChildren, jsx("div", {})] }), lastChild] })) : (jsx("div", { children: children }))] }));
+    return (jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsx("div", { className: "flex justify-center py-2", onClick: e => {
+                                    e.stopPropagation(); // Prevent parent handlers from firing
+                                    loadMoreItems();
+                                }, children: jsx(Text, { className: "text-secondary-500 hover:text-secondary-600 cursor-pointer", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsx("div", {})] }), lastChild] })) : (jsx("div", { children: children }))] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.3.45",
+  "version": "1.3.47",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,15 +11,15 @@
     "tailwind-merge": "^2.0.0",
     "react-day-picker": "9.5.1",
     "react": "19.0.0",
-    "@trackunit/react-components": "1.4.41",
-    "@trackunit/react-date-and-time-hooks": "1.3.40",
-    "@trackunit/react-core-hooks": "1.3.39",
-    "@trackunit/date-and-time-utils": "1.3.37",
-    "@trackunit/css-class-variance-utilities": "1.3.37",
-    "@trackunit/ui-icons": "1.3.37",
-    "@trackunit/ui-design-tokens": "1.3.37",
-    "@trackunit/shared-utils": "1.5.37",
-    "@trackunit/i18n-library-translation": "1.3.40"
+    "@trackunit/react-components": "1.4.42",
+    "@trackunit/react-date-and-time-hooks": "1.3.41",
+    "@trackunit/react-core-hooks": "1.3.40",
+    "@trackunit/date-and-time-utils": "1.3.38",
+    "@trackunit/css-class-variance-utilities": "1.3.38",
+    "@trackunit/ui-icons": "1.3.38",
+    "@trackunit/ui-design-tokens": "1.3.38",
+    "@trackunit/shared-utils": "1.5.38",
+    "@trackunit/i18n-library-translation": "1.3.41"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Timeline/Timeline.stories.d.ts

@@ -11,3 +11,4 @@ export declare const CustomTimestamp: () => import("react/jsx-runtime").JSX.Elem
 export declare const CustomDot: () => import("react/jsx-runtime").JSX.Element;
 export declare const IncorrectUse: () => import("react/jsx-runtime").JSX.Element;
 export declare const HoverAndSelectBehavior: () => import("react/jsx-runtime").JSX.Element;
+export declare const PaginatedTimeline: () => import("react/jsx-runtime").JSX.Element;

package/src/translation.d.ts

@@ -14,8 +14,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"dateTime.instant.now" | "dayRangePickerPopover.icon.tooltip.calendar" | "layout.actions.apply" | "layout.actions.cancel" | "layout.actions.clear" | "shared.timePeriods.days" | "shared.timePeriods.days_plural" | "shared.timePeriods.hours" | "shared.timePeriods.hours_plural" | "shared.timePeriods.months" | "shared.timePeriods.months_plural" | "shared.timePeriods.today" | "shared.timePeriods.weeks" | "shared.timePeriods.weeks_plural">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"dateTime.instant.now" | "dayRangePickerPopover.icon.tooltip.calendar" | "layout.actions.apply" | "layout.actions.cancel" | "layout.actions.clear" | "shared.timePeriods.days" | "shared.timePeriods.days_plural" | "shared.timePeriods.hours" | "shared.timePeriods.hours_plural" | "shared.timePeriods.months" | "shared.timePeriods.months_plural" | "shared.timePeriods.today" | "shared.timePeriods.weeks" | "shared.timePeriods.weeks_plural">;
+export declare const useTranslation: () => [TransForLibs<"dateTime.instant.now" | "dayRangePickerPopover.icon.tooltip.calendar" | "layout.actions.apply" | "layout.actions.cancel" | "layout.actions.clear" | "shared.timePeriods.days" | "shared.timePeriods.days_plural" | "shared.timePeriods.hours" | "shared.timePeriods.hours_plural" | "shared.timePeriods.months" | "shared.timePeriods.months_plural" | "shared.timePeriods.today" | "shared.timePeriods.weeks" | "shared.timePeriods.weeks_plural" | "timeline.loadMore">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"dateTime.instant.now" | "dayRangePickerPopover.icon.tooltip.calendar" | "layout.actions.apply" | "layout.actions.cancel" | "layout.actions.clear" | "shared.timePeriods.days" | "shared.timePeriods.days_plural" | "shared.timePeriods.hours" | "shared.timePeriods.hours_plural" | "shared.timePeriods.months" | "shared.timePeriods.months_plural" | "shared.timePeriods.today" | "shared.timePeriods.weeks" | "shared.timePeriods.weeks_plural" | "timeline.loadMore">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };