@trackunit/react-components 0.4.26 → 0.4.28

package/index.cjs.js

@@ -21,7 +21,7 @@ var omit = require('lodash/omit');
 var tailwindMerge = require('tailwind-merge');
 var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
-var dateFns = require('date-fns');
+var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 var reactTablePagination = require('@trackunit/react-table-pagination');
 
 function _interopNamespaceDefault(e) {
@@ -3775,7 +3775,7 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger({ children, rend
     }
 });
 
-const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"]);
+const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge(["flex"]);
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -4731,10 +4731,15 @@ const TimelineElement = ({ date, showTime, children, className, dataTestId = "ti
     return (jsxRuntime.jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId ? `${dataTestId}` : null, onClick: () => onClick && onClick(), children: [jsxRuntime.jsx("div", { className: cvaTimelineDot(), children: dot }), jsxRuntime.jsx("div", { className: "text-secondary-500 text-sm", children: header }), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { children: children }) })] }));
 };
 function defaultHeader(date, showTime) {
-    return `${dateFns.format(date, showTime ? "MMM d, yyyy H:mm" : "MMM d, yyyy")} (${dateFns.formatDistance(date, new Date(), {
-        addSuffix: true,
-    })})`;
+    return `${formattedDate(date, showTime)} (${dateAndTimeUtils.timeSinceAuto(date, new Date())})`;
 }
+const formattedDate = (date, showTime) => {
+    return dateAndTimeUtils.formatDateUtil(date, {
+        dateFormat: "medium",
+        timeFormat: "short",
+        selectFormat: !showTime ? "dateOnly" : undefined,
+    }, undefined, undefined, "h23");
+};
 
 const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
 const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {

package/index.esm.js

@@ -20,7 +20,7 @@ import omit from 'lodash/omit';
 import { twMerge } from 'tailwind-merge';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List, Root } from '@radix-ui/react-tabs';
-import { format, formatDistance } from 'date-fns';
+import { timeSinceAuto, formatDateUtil } from '@trackunit/date-and-time-utils';
 import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
 
 const docs = {
@@ -3755,7 +3755,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ children, renderButt
     }
 });
 
-const cvaTooltipFlexContainer = cvaMerge(["inline-flex"]);
+const cvaTooltipFlexContainer = cvaMerge(["flex"]);
 const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -4711,10 +4711,15 @@ const TimelineElement = ({ date, showTime, children, className, dataTestId = "ti
     return (jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId ? `${dataTestId}` : null, onClick: () => onClick && onClick(), children: [jsx("div", { className: cvaTimelineDot(), children: dot }), jsx("div", { className: "text-secondary-500 text-sm", children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] }));
 };
 function defaultHeader(date, showTime) {
-    return `${format(date, showTime ? "MMM d, yyyy H:mm" : "MMM d, yyyy")} (${formatDistance(date, new Date(), {
-        addSuffix: true,
-    })})`;
+    return `${formattedDate(date, showTime)} (${timeSinceAuto(date, new Date())})`;
 }
+const formattedDate = (date, showTime) => {
+    return formatDateUtil(date, {
+        dateFormat: "medium",
+        timeFormat: "short",
+        selectFormat: !showTime ? "dateOnly" : undefined,
+    }, undefined, undefined, "h23");
+};
 
 const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
 const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.4.26",
+  "version": "0.4.28",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,9 +10,9 @@
     "@trackunit/ui-design-tokens": "*",
     "@radix-ui/react-slot": "^1.0.2",
     "react": "18.3.1",
+    "@trackunit/date-and-time-utils": "*",
     "@trackunit/css-class-variance-utilities": "*",
     "usehooks-ts": "^3.1.0",
-    "date-fns": "^2.30.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@trackunit/ui-icons": "*",
     "@trackunit/shared-utils": "*",