@trackunit/react-date-and-time-components 1.0.16 → 1.0.18

package/index.cjs.js

@@ -388,9 +388,18 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
     const childProps = React.isValidElement(firstChild) ? firstChild.props : {};
     const lastChild = remainingChildren.pop();
     const middleChildren = remainingChildren;
+    React.useEffect(() => {
+        // Set maxHeight dynamically for smooth animation
+        if (ref.current) {
+            ref.current.style.maxHeight = isOpen ? `${ref.current.scrollHeight}px` : "0px";
+        }
+    }, [isOpen]);
     const renderToggleButton = () => (jsxRuntime.jsxs("div", { className: cvaTimelineElement(), children: [childProps?.date ? (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: "flex text-sm text-secondary-500 cursor-pointer items-center min-h-8 hover:text-secondary-600", "data-testid": "timeline-toggle-btn", 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 })] })] }));
+                }) })) : null, jsxRuntime.jsx("div", { className: cvaDotWrapper(), children: jsxRuntime.jsx("div", { className: cvaLine({ lineStyle: childProps?.lineStyle }) }) }), jsxRuntime.jsxs("div", { className: "text-secondary-500 hover:text-secondary-600 flex min-h-8 cursor-pointer items-center text-sm", "data-testid": "timeline-toggle-btn", onClick: () => {
+                    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 = () => {
         if (!dateHeader) {
             return null;
@@ -401,7 +410,7 @@ 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())})` })] })) : (jsxRuntime.jsx(reactComponents.Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     };
-    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsxRuntime.jsx("div", { className: "pb-4 font-semibold text-sm", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxRuntime.jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxRuntime.jsxs("div", { "aria-hidden": !isOpen, className: "transition-all duration-300 overflow-hidden", ref: ref, style: { height: isOpen ? `${ref.current?.scrollHeight}px` : "0px" }, 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 transition-all duration-300", ref: ref, children: [jsxRuntime.jsx("div", {}), middleChildren, jsxRuntime.jsx("div", {})] }), lastChild] })) : (jsxRuntime.jsx("div", { children: children }))] }));
 };
 
 /**
@@ -415,9 +424,7 @@ const TimelineElement = ({ date, children, className, dataTestId = "timeline-ele
     const [isHovered, setIsHovered] = React.useState(false);
     const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
     const locale = reactDateAndTimeHooks.useLocale();
-    const formattedDate = date
-        ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" })
-        : null;
+    const formattedDate = date ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" }) : null;
     const handleMouseEnter = () => {
         if (hoverBehavior) {
             setIsHovered(true);
@@ -428,24 +435,24 @@ const TimelineElement = ({ date, children, className, dataTestId = "timeline-ele
             setIsHovered(false);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [renderDate(formattedDate, locale), jsxRuntime.jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsxRuntime.jsx("div", { className: cvaLine({ lineStyle }) })] }), jsxRuntime.jsxs("div", { className: "pt-2 pb-2", children: [renderHeader(header), renderChildren(children), renderActionButton(actionButton)] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [renderDate(formattedDate, locale), jsxRuntime.jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsxRuntime.jsx("div", { className: cvaLine({ lineStyle }) })] }), jsxRuntime.jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header), renderChildren(children), renderActionButton(actionButton)] })] }));
 };
 const renderDate = (formattedDate, locale) => {
     if (!formattedDate) {
         return null;
     }
-    return (jsxRuntime.jsx("div", { className: "pt-2 items-center", children: timelineElementTime(formattedDate, locale) }));
+    return jsxRuntime.jsx("div", { className: "items-center pt-2", children: timelineElementTime(formattedDate, locale) });
 };
 const renderDot = (customDot, isHovered, selected) => {
     return customDot?.name
-        ? customDotElement(customDot.name, isHovered, selected, customDot.color)
+        ? customDotElement(customDot.name, isHovered, selected, customDot.color, customDot.keepOnSelection)
         : defaultDot(isHovered, selected);
 };
 const renderHeader = (header) => {
     if (!header) {
         return null;
     }
-    return jsxRuntime.jsx("div", { className: "text-sm mt-0.5 content-center font-medium", children: header });
+    return jsxRuntime.jsx("div", { className: "mt-0.5 content-center text-sm font-medium", children: header });
 };
 const renderChildren = (children) => {
     if (!children) {
@@ -462,15 +469,13 @@ const renderActionButton = (actionButton) => {
 const timelineElementTime = (formattedDate, locale) => {
     const hourCycle = dateAndTimeUtils.getHourCycle(locale);
     return (jsxRuntime.jsx(reactComponents.Text, { align: "right", className: cvaTimelineElementTime({
-            width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small"
+            width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
         }), size: "small", subtle: true, children: formattedDate }));
 };
 const CircleIcon = ({ selected, hovered }) => (jsxRuntime.jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-circle-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: selected ? "#EFF6FF" : hovered ? "#F9FAFB" : "white", r: "10" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "8" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "white", r: "3" })] }));
 const DotIcon = () => (jsxRuntime.jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-dot-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "white", r: "6" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "4" })] }));
-const defaultDot = (hovered, selected) => (hovered || selected) ? jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsxRuntime.jsx(DotIcon, {});
-const customDotElement = (name, hovered, selected, color) => (hovered || selected
-    ? jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected })
-    : (jsxRuntime.jsx("div", { className: "w-6 h-6 flex items-center justify-center", children: jsxRuntime.jsx("div", { className: cvaCustomDot(), children: jsxRuntime.jsx(reactComponents.Icon, { className: "block", color: color, dataTestId: "timeline-custom-dot", name: name, size: "small" }) }) })));
+const defaultDot = (hovered, selected) => hovered || selected ? jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsxRuntime.jsx(DotIcon, {});
+const customDotElement = (name, hovered, selected, color, keepOnSelection) => (hovered || selected) && !keepOnSelection ? (jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected })) : (jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center", children: jsxRuntime.jsx("div", { className: cvaCustomDot(), children: jsxRuntime.jsx(reactComponents.Icon, { className: "block", color: color, dataTestId: "timeline-custom-dot", name: name, size: "small" }) }) }));
 
 /*
  * ----------------------------

package/index.esm.js

@@ -386,9 +386,18 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
     const childProps = React.isValidElement(firstChild) ? firstChild.props : {};
     const lastChild = remainingChildren.pop();
     const middleChildren = remainingChildren;
+    useEffect(() => {
+        // Set maxHeight dynamically for smooth animation
+        if (ref.current) {
+            ref.current.style.maxHeight = isOpen ? `${ref.current.scrollHeight}px` : "0px";
+        }
+    }, [isOpen]);
     const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [childProps?.date ? (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: "flex text-sm text-secondary-500 cursor-pointer items-center min-h-8 hover:text-secondary-600", "data-testid": "timeline-toggle-btn", onClick: () => setIsOpen(!isOpen), children: [jsx(Icon, { className: cvaToggleBtnIcon({ rotated: isOpen }), name: "ChevronDown", size: "small" }), jsx("span", { children: isOpen ? toggleButton?.collapsedLabel : toggleButton?.expandedLabel })] })] }));
+                }) })) : null, jsx("div", { className: cvaDotWrapper(), children: jsx("div", { className: cvaLine({ lineStyle: childProps?.lineStyle }) }) }), jsxs("div", { className: "text-secondary-500 hover:text-secondary-600 flex min-h-8 cursor-pointer items-center text-sm", "data-testid": "timeline-toggle-btn", onClick: () => {
+                    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 = () => {
         if (!dateHeader) {
             return null;
@@ -399,7 +408,7 @@ 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())})` })] })) : (jsx(Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     };
-    return (jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsx("div", { className: "pb-4 font-semibold text-sm", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxs("div", { "aria-hidden": !isOpen, className: "transition-all duration-300 overflow-hidden", ref: ref, style: { height: isOpen ? `${ref.current?.scrollHeight}px` : "0px" }, 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 transition-all duration-300", ref: ref, children: [jsx("div", {}), middleChildren, jsx("div", {})] }), lastChild] })) : (jsx("div", { children: children }))] }));
 };
 
 /**
@@ -413,9 +422,7 @@ const TimelineElement = ({ date, children, className, dataTestId = "timeline-ele
     const [isHovered, setIsHovered] = useState(false);
     const { formatDate } = useDateAndTime();
     const locale = useLocale$1();
-    const formattedDate = date
-        ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" })
-        : null;
+    const formattedDate = date ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" }) : null;
     const handleMouseEnter = () => {
         if (hoverBehavior) {
             setIsHovered(true);
@@ -426,24 +433,24 @@ const TimelineElement = ({ date, children, className, dataTestId = "timeline-ele
             setIsHovered(false);
         }
     };
-    return (jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [renderDate(formattedDate, locale), jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsx("div", { className: cvaLine({ lineStyle }) })] }), jsxs("div", { className: "pt-2 pb-2", children: [renderHeader(header), renderChildren(children), renderActionButton(actionButton)] })] }));
+    return (jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [renderDate(formattedDate, locale), jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsx("div", { className: cvaLine({ lineStyle }) })] }), jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header), renderChildren(children), renderActionButton(actionButton)] })] }));
 };
 const renderDate = (formattedDate, locale) => {
     if (!formattedDate) {
         return null;
     }
-    return (jsx("div", { className: "pt-2 items-center", children: timelineElementTime(formattedDate, locale) }));
+    return jsx("div", { className: "items-center pt-2", children: timelineElementTime(formattedDate, locale) });
 };
 const renderDot = (customDot, isHovered, selected) => {
     return customDot?.name
-        ? customDotElement(customDot.name, isHovered, selected, customDot.color)
+        ? customDotElement(customDot.name, isHovered, selected, customDot.color, customDot.keepOnSelection)
         : defaultDot(isHovered, selected);
 };
 const renderHeader = (header) => {
     if (!header) {
         return null;
     }
-    return jsx("div", { className: "text-sm mt-0.5 content-center font-medium", children: header });
+    return jsx("div", { className: "mt-0.5 content-center text-sm font-medium", children: header });
 };
 const renderChildren = (children) => {
     if (!children) {
@@ -460,15 +467,13 @@ const renderActionButton = (actionButton) => {
 const timelineElementTime = (formattedDate, locale) => {
     const hourCycle = getHourCycle(locale);
     return (jsx(Text, { align: "right", className: cvaTimelineElementTime({
-            width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small"
+            width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
         }), size: "small", subtle: true, children: formattedDate }));
 };
 const CircleIcon = ({ selected, hovered }) => (jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-circle-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsx("circle", { cx: "12", cy: "12", fill: selected ? "#EFF6FF" : hovered ? "#F9FAFB" : "white", r: "10" }), jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "8" }), jsx("circle", { cx: "12", cy: "12", fill: "white", r: "3" })] }));
 const DotIcon = () => (jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-dot-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsx("circle", { cx: "12", cy: "12", fill: "white", r: "6" }), jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "4" })] }));
-const defaultDot = (hovered, selected) => (hovered || selected) ? jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsx(DotIcon, {});
-const customDotElement = (name, hovered, selected, color) => (hovered || selected
-    ? jsx(CircleIcon, { hovered: hovered, selected: selected })
-    : (jsx("div", { className: "w-6 h-6 flex items-center justify-center", children: jsx("div", { className: cvaCustomDot(), children: jsx(Icon, { className: "block", color: color, dataTestId: "timeline-custom-dot", name: name, size: "small" }) }) })));
+const defaultDot = (hovered, selected) => hovered || selected ? jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsx(DotIcon, {});
+const customDotElement = (name, hovered, selected, color, keepOnSelection) => (hovered || selected) && !keepOnSelection ? (jsx(CircleIcon, { hovered: hovered, selected: selected })) : (jsx("div", { className: "flex h-6 w-6 items-center justify-center", children: jsx("div", { className: cvaCustomDot(), children: jsx(Icon, { className: "block", color: color, dataTestId: "timeline-custom-dot", name: name, size: "small" }) }) }));
 
 /*
  * ----------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,7 +11,7 @@
     "date-fns": "^2.30.0",
     "tailwind-merge": "^2.0.0",
     "react": "18.3.1",
-    "@trackunit/react-components": "^1.0.13",
+    "@trackunit/react-components": "^1.1.0",
     "@trackunit/react-date-and-time-hooks": "^1.0.8",
     "@trackunit/react-core-hooks": "^1.0.5",
     "@trackunit/date-and-time-utils": "^1.0.1",

package/src/Timeline/Timeline.d.ts

@@ -6,6 +6,7 @@ export interface TimelineProps extends CommonProps {
     toggleButton?: {
         expandedLabel: string;
         collapsedLabel: string;
+        onClick?: () => void;
     };
     dateHeader?: ({
         date: Date;

package/src/Timeline/TimelineElement.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
 import { CommonProps, IconColors } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
+import React from "react";
 interface TimeLineElementProps extends CommonProps {
     date?: Date;
     header?: React.ReactNode;
@@ -8,8 +8,9 @@ interface TimeLineElementProps extends CommonProps {
     customDot?: {
         name: IconName;
         color: IconColors;
+        keepOnSelection?: boolean;
     };
-    onClick?: () => void;
+    onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
     actionButton?: {
         label: string;
         iconName: IconName;