@trackunit/react-components 0.1.107 → 0.1.108

package/index.cjs

@@ -1957,9 +1957,9 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", dot = jsxRuntime.jsx(Indicator, { className: tailwindStyledComponents.tws `mt-[-1px]`, color: "neutral", icon: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
+const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsxRuntime.jsx(Indicator, { className: tailwindStyledComponents.tws `mt-[-1px]`, color: "neutral", icon: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
     var _a;
-    return (jsxRuntime.jsxs("li", Object.assign({ className: `${tailwindStyledComponents.tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick() }, { children: [jsxRuntime.jsx("div", Object.assign({ className: tailwindStyledComponents.tws `tu-timeline-element__dot` }, { children: dot })), jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { children: children }) })] })));
+    return (jsxRuntime.jsxs("li", Object.assign({ className: `${tailwindStyledComponents.tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": date, "data-testid": dataTestId && dataTestId, onClick: () => onClick && onClick() }, { children: [jsxRuntime.jsx("div", Object.assign({ className: tailwindStyledComponents.tws `tu-timeline-element__dot` }, { children: dot })), jsxRuntime.jsx("div", Object.assign({ className: headerClassName }, { 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(), {

package/index.js

@@ -1930,9 +1930,9 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", dot = jsx(Indicator, { className: tws `mt-[-1px]`, color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
+const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsx(Indicator, { className: tws `mt-[-1px]`, color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
     var _a;
-    return (jsxs("li", Object.assign({ className: `${tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick() }, { children: [jsx("div", Object.assign({ className: tws `tu-timeline-element__dot` }, { children: dot })), jsx("div", { children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] })));
+    return (jsxs("li", Object.assign({ className: `${tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": date, "data-testid": dataTestId && dataTestId, onClick: () => onClick && onClick() }, { children: [jsx("div", Object.assign({ className: tws `tu-timeline-element__dot` }, { children: dot })), jsx("div", Object.assign({ className: headerClassName }, { 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(), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.107",
+  "version": "0.1.108",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Timeline/Timeline.d.ts

@@ -20,6 +20,7 @@ interface TimeLineElementProps extends CommonProps {
     children: React.ReactNode;
     dot?: React.ReactNode;
     onClick?: () => void;
+    headerClassName?: string;
 }
 /**
  * TimelineElement - entry on a timeline - rendered with an icon on the timeline
@@ -28,5 +29,5 @@ interface TimeLineElementProps extends CommonProps {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-export declare const TimelineElement: ({ date, showTime, children, className, dataTestId, dot, header, onClick, }: TimeLineElementProps) => JSX.Element;
+export declare const TimelineElement: ({ date, showTime, children, className, dataTestId, headerClassName, dot, header, onClick, }: TimeLineElementProps) => JSX.Element;
 export {};