@trackunit/react-date-and-time-components 1.17.14 → 1.18.0

package/index.cjs.js

@@ -469,7 +469,7 @@ const useFilterTemporalPeriodsInRange = () => {
         return difference(start ?? new Date(), end ?? new Date(), "day");
     }, [calculateDateRange, difference]);
     return react.useCallback(({ temporalPeriods, maxDaysInRange, }) => {
-        if (!maxDaysInRange) {
+        if (maxDaysInRange === undefined || maxDaysInRange === 0) {
             return temporalPeriods;
         }
         return temporalPeriods.filter(period => {
@@ -612,7 +612,8 @@ const TEMPORAL_DIRECTIONS = ["last", "next"];
  * @param value - The value to check.
  * @returns {boolean} - Whether the value is a temporal period.
  */
-const isTemporalPeriod = (value) => !!value &&
+const isTemporalPeriod = (value) => value !== null &&
+    value !== undefined &&
     typeof value === "object" &&
     "direction" in value &&
     "count" in value &&
@@ -866,7 +867,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
         setIsLoadingMore(true);
         // Use requestAnimationFrame to avoid layout thrashing
         requestAnimationFrame(() => {
-            const scrollPos = ref.current?.scrollTop || 0;
+            const scrollPos = ref.current?.scrollTop ?? 0;
             setVisibleCount(prev => Math.min(prev + ITEMS_PER_PAGE, middleChildren.length));
             // After state update, preserve scroll position
             setTimeout(() => {
@@ -884,7 +885,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
             setIsLoadingMore(false);
         }
     }, [isOpen]);
-    const renderToggleButton = () => (jsxRuntime.jsxs("div", { className: cvaTimelineElement(), children: [childProps.date ? (jsxRuntime.jsx("div", { className: cvaTimelineElementTime({
+    const renderToggleButton = () => (jsxRuntime.jsxs("div", { className: cvaTimelineElement(), children: [childProps.date !== undefined ? (jsxRuntime.jsx("div", { className: cvaTimelineElementTime({
                     width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
                 }) })) : null, jsxRuntime.jsx("div", { className: cvaDotWrapper(), children: jsxRuntime.jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxRuntime.jsxs("div", { className: "min-h-8 flex cursor-pointer items-center text-sm text-neutral-500 hover:text-neutral-600", "data-testid": "timeline-toggle-btn", onClick: () => {
                     if (toggleButton?.onClick) {
@@ -896,13 +897,13 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
         if (!dateHeader) {
             return null;
         }
-        if (customHeader) {
+        if (customHeader !== undefined && customHeader !== null) {
             return null;
         }
         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-neutral-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, ref: refProp, 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 => {
+    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, ref: refProp, children: [renderDateHeader(), customHeader !== undefined && customHeader !== null ? 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: "cursor-pointer text-neutral-500 hover:text-neutral-600", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsxRuntime.jsx("div", {})] }), lastChild] })) : (jsxRuntime.jsx("div", { children: children }))] }));
@@ -944,7 +945,7 @@ const renderDot = (customDot, isHovered, selected) => {
         : defaultDot(isHovered, selected);
 };
 const renderHeader = (header, dataTestId) => {
-    if (!header) {
+    if (header === undefined || header === null) {
         return null;
     }
     if (typeof header === "string") {
@@ -953,7 +954,7 @@ const renderHeader = (header, dataTestId) => {
     return header;
 };
 const renderChildren = (children) => {
-    if (!children) {
+    if (children === undefined || children === null) {
         return null;
     }
     return jsxRuntime.jsx("div", { className: "mt-0.5 content-center text-sm", children: children });

package/index.esm.js

@@ -467,7 +467,7 @@ const useFilterTemporalPeriodsInRange = () => {
         return difference(start ?? new Date(), end ?? new Date(), "day");
     }, [calculateDateRange, difference]);
     return useCallback(({ temporalPeriods, maxDaysInRange, }) => {
-        if (!maxDaysInRange) {
+        if (maxDaysInRange === undefined || maxDaysInRange === 0) {
             return temporalPeriods;
         }
         return temporalPeriods.filter(period => {
@@ -610,7 +610,8 @@ const TEMPORAL_DIRECTIONS = ["last", "next"];
  * @param value - The value to check.
  * @returns {boolean} - Whether the value is a temporal period.
  */
-const isTemporalPeriod = (value) => !!value &&
+const isTemporalPeriod = (value) => value !== null &&
+    value !== undefined &&
     typeof value === "object" &&
     "direction" in value &&
     "count" in value &&
@@ -864,7 +865,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
         setIsLoadingMore(true);
         // Use requestAnimationFrame to avoid layout thrashing
         requestAnimationFrame(() => {
-            const scrollPos = ref.current?.scrollTop || 0;
+            const scrollPos = ref.current?.scrollTop ?? 0;
             setVisibleCount(prev => Math.min(prev + ITEMS_PER_PAGE, middleChildren.length));
             // After state update, preserve scroll position
             setTimeout(() => {
@@ -882,7 +883,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
             setIsLoadingMore(false);
         }
     }, [isOpen]);
-    const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [childProps.date ? (jsx("div", { className: cvaTimelineElementTime({
+    const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [childProps.date !== undefined ? (jsx("div", { className: cvaTimelineElementTime({
                     width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
                 }) })) : null, jsx("div", { className: cvaDotWrapper(), children: jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxs("div", { className: "min-h-8 flex cursor-pointer items-center text-sm text-neutral-500 hover:text-neutral-600", "data-testid": "timeline-toggle-btn", onClick: () => {
                     if (toggleButton?.onClick) {
@@ -894,13 +895,13 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
         if (!dateHeader) {
             return null;
         }
-        if (customHeader) {
+        if (customHeader !== undefined && customHeader !== null) {
             return null;
         }
         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-neutral-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, ref: refProp, 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 => {
+    return (jsxs("div", { className: className, "data-testid": dataTestId, ref: refProp, children: [renderDateHeader(), customHeader !== undefined && customHeader !== null ? 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: "cursor-pointer text-neutral-500 hover:text-neutral-600", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsx("div", {})] }), lastChild] })) : (jsx("div", { children: children }))] }));
@@ -942,7 +943,7 @@ const renderDot = (customDot, isHovered, selected) => {
         : defaultDot(isHovered, selected);
 };
 const renderHeader = (header, dataTestId) => {
-    if (!header) {
+    if (header === undefined || header === null) {
         return null;
     }
     if (typeof header === "string") {
@@ -951,7 +952,7 @@ const renderHeader = (header, dataTestId) => {
     return header;
 };
 const renderChildren = (children) => {
-    if (!children) {
+    if (children === undefined || children === null) {
         return null;
     }
     return jsx("div", { className: "mt-0.5 content-center text-sm", children: children });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.17.14",
+  "version": "1.18.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,13 +9,13 @@
   "dependencies": {
     "react": "19.0.0",
     "@trackunit/react-components": "1.18.9",
-    "@trackunit/date-and-time-utils": "1.11.69",
-    "@trackunit/react-date-and-time-hooks": "1.14.14",
+    "@trackunit/date-and-time-utils": "1.11.70",
+    "@trackunit/react-date-and-time-hooks": "1.15.0",
     "@trackunit/css-class-variance-utilities": "1.11.68",
     "@trackunit/ui-icons": "1.11.66",
     "@trackunit/shared-utils": "1.13.68",
-    "@trackunit/i18n-library-translation": "1.12.59",
-    "@trackunit/react-form-components": "1.15.9",
+    "@trackunit/i18n-library-translation": "1.13.0",
+    "@trackunit/react-form-components": "1.16.0",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"