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

package/index.cjs.js

@@ -400,7 +400,7 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
                     toggleButton?.onClick && toggleButton.onClick();
                     setIsOpen(!isOpen);
                 }, children: [jsxRuntime.jsx(reactComponents.Icon, { className: cvaToggleBtnIcon({ rotated: isOpen }), name: "ChevronDown", size: "small" }), jsxRuntime.jsx("span", { children: isOpen ? toggleButton?.collapsedLabel : toggleButton?.expandedLabel })] })] }));
-    const renderDateHeader = () => {
+    const renderDateHeader = react.useCallback(() => {
         if (!dateHeader) {
             return null;
         }
@@ -408,8 +408,8 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
             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-secondary-500", size: "medium", type: "span", weight: "thick", children: ` (${dateAndTimeUtils.timeSinceAuto(date, new Date())})` })] })) : (jsxRuntime.jsx(reactComponents.Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
-    };
+        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 }))] }));
 };
 

package/index.esm.js

@@ -398,7 +398,7 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
                     toggleButton?.onClick && toggleButton.onClick();
                     setIsOpen(!isOpen);
                 }, children: [jsx(Icon, { className: cvaToggleBtnIcon({ rotated: isOpen }), name: "ChevronDown", size: "small" }), jsx("span", { children: isOpen ? toggleButton?.collapsedLabel : toggleButton?.expandedLabel })] })] }));
-    const renderDateHeader = () => {
+    const renderDateHeader = useCallback(() => {
         if (!dateHeader) {
             return null;
         }
@@ -406,8 +406,8 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
             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-secondary-500", size: "medium", type: "span", weight: "thick", children: ` (${timeSinceAuto(date, new Date())})` })] })) : (jsx(Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
-    };
+        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 }))] }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.3.42",
+  "version": "1.3.45",
   "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.40",
-    "@trackunit/react-date-and-time-hooks": "1.3.38",
-    "@trackunit/react-core-hooks": "1.3.37",
-    "@trackunit/date-and-time-utils": "1.3.36",
-    "@trackunit/css-class-variance-utilities": "1.3.36",
-    "@trackunit/ui-icons": "1.3.36",
-    "@trackunit/ui-design-tokens": "1.3.36",
-    "@trackunit/shared-utils": "1.5.36",
-    "@trackunit/i18n-library-translation": "1.3.38"
+    "@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"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",