@trackunit/react-date-and-time-components 1.0.15 → 1.0.17

package/index.cjs.js

@@ -93,15 +93,15 @@ const DateTime = ({ value, format, className, fromNow, withTitle, titleFormat, t
     const locale = reactDateAndTimeHooks.useLocale();
     const nowDate = React.useMemo(() => new Date(), []);
     const date = value ? dateAndTimeUtils.toDateUtil(value) : nowDate;
-    const newDateTime = dateAndTimeUtils.formatDateUtil(date, format, timezone === null || timezone === void 0 ? void 0 : timezone.id, locale);
-    const titleDateTime = withTitle ? dateAndTimeUtils.formatDateUtil(date, titleFormat, timezone === null || timezone === void 0 ? void 0 : timezone.id, locale) : undefined;
+    const newDateTime = dateAndTimeUtils.formatDateUtil(date, format, timezone?.id, locale);
+    const titleDateTime = withTitle ? dateAndTimeUtils.formatDateUtil(date, titleFormat, timezone?.id, locale) : undefined;
     const getTimeSince = React.useCallback((from, to) => {
         const same = dateAndTimeUtils.isEqualUtil(from, to);
         if (same) {
             return t("dateTime.instant.now");
         }
-        return dateAndTimeUtils.timeSinceAuto(from, to, timezone === null || timezone === void 0 ? void 0 : timezone.id, locale);
-    }, [locale, t, timezone === null || timezone === void 0 ? void 0 : timezone.id]);
+        return dateAndTimeUtils.timeSinceAuto(from, to, timezone?.id, locale);
+    }, [locale, t, timezone?.id]);
     const dateValue = React.useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
@@ -169,7 +169,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * @returns {JSX.Element} DayRangePicker component
  */
 const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, showQuickOptions, timezone, onClose, }) => {
-    const [newRange, setNewRange] = React.useState(selectedDays !== null && selectedDays !== void 0 ? selectedDays : { from: undefined, to: undefined });
+    const [newRange, setNewRange] = React.useState(selectedDays ?? { from: undefined, to: undefined });
     const [t] = useTranslation();
     const locale = useLocale(language);
     React.useEffect(() => {
@@ -287,7 +287,7 @@ const DayRangePickerPopover = ({ interval = { from: undefined, to: undefined },
             onRangeSelect(range);
         }
     }, [onRangeSelect]);
-    return (jsxRuntime.jsxs(reactComponents.Popover, { placement: placement, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { className: className, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-date-range", disabled: disabled, fullWidth: fullwidth, size: size, suffix: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("dayRangePickerPopover.icon.tooltip.calendar"), name: "Calendar", size: "small" }), variant: variant, children: buttonContent }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: close => (jsxRuntime.jsx(reactComponents.Card, { className: "min-w-min p-4", dataTestId: "range-popover-list", children: jsxRuntime.jsx(DayRangePicker, { disabledDays: disabledDays, language: language || "en", max: max, onClose: close, onRangeSelect: handleOnRangeSelect, selectedDays: interval, showQuickOptions: showQuickOptions, timezone: timezone }) })) })] }));
+    return (jsxRuntime.jsxs(reactComponents.Popover, { placement: placement, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { className: className, dataTestId: dataTestId ?? "show-date-range", disabled: disabled, fullWidth: fullwidth, size: size, suffix: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("dayRangePickerPopover.icon.tooltip.calendar"), name: "Calendar", size: "small" }), variant: variant, children: buttonContent }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: close => (jsxRuntime.jsx(reactComponents.Card, { className: "min-w-min p-4", dataTestId: "range-popover-list", children: jsxRuntime.jsx(DayRangePicker, { disabledDays: disabledDays, language: language || "en", max: max, onClose: close, onRangeSelect: handleOnRangeSelect, selectedDays: interval, showQuickOptions: showQuickOptions, timezone: timezone }) })) })] }));
 };
 
 const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge([
@@ -378,7 +378,6 @@ const cvaTimelineElementTime = cssClassVarianceUtilities.cvaMerge([
  * @returns {JSX.Element} Timeline component
  */
 const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
-    var _a;
     const ref = React.useRef(null);
     const [isOpen, setIsOpen] = React.useState(false);
     const { formatDate, formatRange } = reactDateAndTimeHooks.useDateAndTime();
@@ -389,9 +388,9 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
     const childProps = React.isValidElement(firstChild) ? firstChild.props : {};
     const lastChild = remainingChildren.pop();
     const middleChildren = remainingChildren;
-    const renderToggleButton = () => (jsxRuntime.jsxs("div", { className: cvaTimelineElement(), children: [(childProps === null || childProps === void 0 ? void 0 : childProps.date) ? (jsxRuntime.jsx("div", { className: cvaTimelineElementTime({
+    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 === null || childProps === void 0 ? void 0 : 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 === null || toggleButton === void 0 ? void 0 : toggleButton.collapsedLabel : toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.expandedLabel })] })] }));
+                }) })) : 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 })] })] }));
     const renderDateHeader = () => {
         if (!dateHeader) {
             return null;
@@ -402,7 +401,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 ? `${(_a = ref.current) === null || _a === void 0 ? void 0 : _a.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: "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 }))] }));
 };
 
 /**
@@ -438,7 +437,7 @@ const renderDate = (formattedDate, locale) => {
     return (jsxRuntime.jsx("div", { className: "pt-2 items-center", children: timelineElementTime(formattedDate, locale) }));
 };
 const renderDot = (customDot, isHovered, selected) => {
-    return (customDot === null || customDot === void 0 ? void 0 : customDot.name)
+    return customDot?.name
         ? customDotElement(customDot.name, isHovered, selected, customDot.color)
         : defaultDot(isHovered, selected);
 };

package/index.esm.js

@@ -91,15 +91,15 @@ const DateTime = ({ value, format, className, fromNow, withTitle, titleFormat, t
     const locale = useLocale$1();
     const nowDate = useMemo(() => new Date(), []);
     const date = value ? toDateUtil(value) : nowDate;
-    const newDateTime = formatDateUtil(date, format, timezone === null || timezone === void 0 ? void 0 : timezone.id, locale);
-    const titleDateTime = withTitle ? formatDateUtil(date, titleFormat, timezone === null || timezone === void 0 ? void 0 : timezone.id, locale) : undefined;
+    const newDateTime = formatDateUtil(date, format, timezone?.id, locale);
+    const titleDateTime = withTitle ? formatDateUtil(date, titleFormat, timezone?.id, locale) : undefined;
     const getTimeSince = useCallback((from, to) => {
         const same = isEqualUtil(from, to);
         if (same) {
             return t("dateTime.instant.now");
         }
-        return timeSinceAuto(from, to, timezone === null || timezone === void 0 ? void 0 : timezone.id, locale);
-    }, [locale, t, timezone === null || timezone === void 0 ? void 0 : timezone.id]);
+        return timeSinceAuto(from, to, timezone?.id, locale);
+    }, [locale, t, timezone?.id]);
     const dateValue = useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
@@ -167,7 +167,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * @returns {JSX.Element} DayRangePicker component
  */
 const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, showQuickOptions, timezone, onClose, }) => {
-    const [newRange, setNewRange] = useState(selectedDays !== null && selectedDays !== void 0 ? selectedDays : { from: undefined, to: undefined });
+    const [newRange, setNewRange] = useState(selectedDays ?? { from: undefined, to: undefined });
     const [t] = useTranslation();
     const locale = useLocale(language);
     useEffect(() => {
@@ -285,7 +285,7 @@ const DayRangePickerPopover = ({ interval = { from: undefined, to: undefined },
             onRangeSelect(range);
         }
     }, [onRangeSelect]);
-    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button, { className: className, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-date-range", disabled: disabled, fullWidth: fullwidth, size: size, suffix: jsx(Icon, { ariaLabel: t("dayRangePickerPopover.icon.tooltip.calendar"), name: "Calendar", size: "small" }), variant: variant, children: buttonContent }) }), jsx(PopoverContent, { children: close => (jsx(Card, { className: "min-w-min p-4", dataTestId: "range-popover-list", children: jsx(DayRangePicker, { disabledDays: disabledDays, language: language || "en", max: max, onClose: close, onRangeSelect: handleOnRangeSelect, selectedDays: interval, showQuickOptions: showQuickOptions, timezone: timezone }) })) })] }));
+    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button, { className: className, dataTestId: dataTestId ?? "show-date-range", disabled: disabled, fullWidth: fullwidth, size: size, suffix: jsx(Icon, { ariaLabel: t("dayRangePickerPopover.icon.tooltip.calendar"), name: "Calendar", size: "small" }), variant: variant, children: buttonContent }) }), jsx(PopoverContent, { children: close => (jsx(Card, { className: "min-w-min p-4", dataTestId: "range-popover-list", children: jsx(DayRangePicker, { disabledDays: disabledDays, language: language || "en", max: max, onClose: close, onRangeSelect: handleOnRangeSelect, selectedDays: interval, showQuickOptions: showQuickOptions, timezone: timezone }) })) })] }));
 };
 
 const cvaTimelineElement = cvaMerge([
@@ -376,7 +376,6 @@ const cvaTimelineElementTime = cvaMerge([
  * @returns {JSX.Element} Timeline component
  */
 const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
-    var _a;
     const ref = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const { formatDate, formatRange } = useDateAndTime();
@@ -387,9 +386,9 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
     const childProps = React.isValidElement(firstChild) ? firstChild.props : {};
     const lastChild = remainingChildren.pop();
     const middleChildren = remainingChildren;
-    const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [(childProps === null || childProps === void 0 ? void 0 : childProps.date) ? (jsx("div", { className: cvaTimelineElementTime({
+    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 === null || childProps === void 0 ? void 0 : 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 === null || toggleButton === void 0 ? void 0 : toggleButton.collapsedLabel : toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.expandedLabel })] })] }));
+                }) })) : 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 })] })] }));
     const renderDateHeader = () => {
         if (!dateHeader) {
             return null;
@@ -400,7 +399,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 ? `${(_a = ref.current) === null || _a === void 0 ? void 0 : _a.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: "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 }))] }));
 };
 
 /**
@@ -436,7 +435,7 @@ const renderDate = (formattedDate, locale) => {
     return (jsx("div", { className: "pt-2 items-center", children: timelineElementTime(formattedDate, locale) }));
 };
 const renderDot = (customDot, isHovered, selected) => {
-    return (customDot === null || customDot === void 0 ? void 0 : customDot.name)
+    return customDot?.name
         ? customDotElement(customDot.name, isHovered, selected, customDot.color)
         : defaultDot(isHovered, selected);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,8 +11,8 @@
     "date-fns": "^2.30.0",
     "tailwind-merge": "^2.0.0",
     "react": "18.3.1",
-    "@trackunit/react-components": "^1.0.13",
-    "@trackunit/react-date-and-time-hooks": "^1.0.7",
+    "@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",
     "@trackunit/css-class-variance-utilities": "^1.0.1",