@trackunit/react-date-and-time-components 1.3.25 → 1.3.30

package/index.cjs.js

@@ -5,7 +5,7 @@ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 var reactDateAndTimeHooks = require('@trackunit/react-date-and-time-hooks');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
-var React = require('react');
+var react = require('react');
 var reactComponents = require('@trackunit/react-components');
 var sharedUtils = require('@trackunit/shared-utils');
 var reactDayPicker = require('react-day-picker');
@@ -91,18 +91,18 @@ const MS_PER_HOUR = 60 * 60 * 1000;
 const DateTime = ({ value, format, className, fromNow, withTitle, titleFormat, timezone, subtle, calendar, }) => {
     const { t } = useTranslation();
     const locale = reactDateAndTimeHooks.useLocale();
-    const nowDate = React.useMemo(() => new Date(), []);
+    const nowDate = react.useMemo(() => new Date(), []);
     const date = value ? dateAndTimeUtils.toDateUtil(value) : nowDate;
     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 getTimeSince = react.useCallback((from, to) => {
         const same = dateAndTimeUtils.isEqualUtil(from, to);
         if (same) {
             return t("dateTime.instant.now");
         }
         return dateAndTimeUtils.timeSinceAuto(from, to, timezone?.id, locale);
     }, [locale, t, timezone?.id]);
-    const dateValue = React.useMemo(() => {
+    const dateValue = react.useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
     return (jsxRuntime.jsx("time", { className: className, dateTime: newDateTime, style: subtle ? { color: uiDesignTokens.color("NEUTRAL", 600, "CSS") } : undefined, title: titleDateTime, children: dateValue }));
@@ -153,9 +153,9 @@ const useLocale = (language) => {
 
 /**
  * The DayPicker component is used when the user needs to select a date.
- 
+
  * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {JSX.Element} DayPicker component
+ * @returns {ReactElement} DayPicker component
  */
 const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
     const locale = useLocale(language);
@@ -166,18 +166,18 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * The DayRangePicker component should be used when the user needs to select a range of dates.
  *
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
- * @returns {JSX.Element} DayRangePicker component
+ * @returns {ReactElement} DayRangePicker component
  */
 const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, showQuickOptions, timezone, onClose, }) => {
-    const [newRange, setNewRange] = React.useState(selectedDays ?? { from: undefined, to: undefined });
+    const [newRange, setNewRange] = react.useState(selectedDays ?? { from: undefined, to: undefined });
     const [t] = useTranslation();
     const locale = useLocale(language);
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (selectedDays) {
             setNewRange(selectedDays);
         }
     }, [selectedDays]);
-    const handleOnRangeSelect = React.useCallback((range) => {
+    const handleOnRangeSelect = react.useCallback((range) => {
         if (range && range.from) {
             if (range.to === undefined) {
                 setNewRange({ from: range.from, to: range.from });
@@ -190,7 +190,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
             setNewRange({ from: undefined, to: undefined });
         }
     }, []);
-    const handleCancel = React.useCallback(() => {
+    const handleCancel = react.useCallback(() => {
         if (selectedDays) {
             setNewRange(selectedDays);
         }
@@ -199,7 +199,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
     const clearSelectedDays = () => {
         setNewRange({ from: undefined, to: undefined });
     };
-    const handleApply = React.useCallback(() => {
+    const handleApply = react.useCallback(() => {
         onRangeSelect && onRangeSelect(newRange);
         onClose && onClose();
     }, [onRangeSelect, newRange, onClose]);
@@ -222,7 +222,7 @@ const calcQuickOptions = (numberOfDays) => {
 const QuickOptionButton = ({ option, onClick, timezone }) => {
     const [t] = useTranslation();
     const { nowDate, startOf, endOf, subtract } = reactDateAndTimeHooks.useDateAndTime();
-    const handleClick = React.useCallback(() => {
+    const handleClick = react.useCallback(() => {
         const from = subtract(startOf(nowDate, "day"), option.includeExtraDay ? option.last : option.last - 1, option.unit);
         onClick({
             from,
@@ -282,7 +282,7 @@ const QuickOptionButton = ({ option, onClick, timezone }) => {
 const DayRangePickerPopover = ({ interval = { from: undefined, to: undefined }, showQuickOptions, disabledDays, className, dataTestId, onRangeSelect, variant = "ghost-neutral", size = "small", placement, timezone, fullwidth, bindTo, buttonContent, max, disabled, }) => {
     const { language } = reactCoreHooks.useCurrentUserLanguage();
     const [t] = useTranslation();
-    const handleOnRangeSelect = React.useCallback((range) => {
+    const handleOnRangeSelect = react.useCallback((range) => {
         if (range) {
             onRangeSelect(range);
         }
@@ -375,28 +375,28 @@ const cvaTimelineElementTime = cssClassVarianceUtilities.cvaMerge([
  * The Timeline component offers a visual representation of events or milestones in chronological order, helping users easily follow the progression of activities, tasks, or data points over time.
  *
  * @param {TimelineProps} props - The props for the Timeline component
- * @returns {JSX.Element} Timeline component
+ * @returns {ReactElement} Timeline component
  */
 const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
-    const ref = React.useRef(null);
-    const [isOpen, setIsOpen] = React.useState(false);
+    const ref = react.useRef(null);
+    const [isOpen, setIsOpen] = react.useState(false);
     const { formatDate, formatRange } = reactDateAndTimeHooks.useDateAndTime();
     const locale = reactDateAndTimeHooks.useLocale();
     const hourCycle = dateAndTimeUtils.getHourCycle(locale);
-    const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
+    const childrenArray = react.useMemo(() => react.Children.toArray(children), [children]);
     const [firstChild, ...remainingChildren] = childrenArray;
-    const childProps = React.isValidElement(firstChild) ? firstChild.props : {};
+    const childProps = react.isValidElement(firstChild) ? firstChild.props : {};
     const lastChild = remainingChildren.pop();
     const middleChildren = remainingChildren;
-    React.useEffect(() => {
+    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({
+    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: "text-secondary-500 hover:text-secondary-600 flex min-h-8 cursor-pointer items-center text-sm", "data-testid": "timeline-toggle-btn", onClick: () => {
+                }) })) : 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 })] })] }));
@@ -418,10 +418,10 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
  * - a date as the header and the children provided as body.
  *
  * @param {TimeLineElementProps} props the props
- * @returns {JSX.Element} component
+ * @returns {ReactElement} component
  */
 const TimelineElement = ({ date, children, className, dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
-    const [isHovered, setIsHovered] = React.useState(false);
+    const [isHovered, setIsHovered] = react.useState(false);
     const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
     const locale = reactDateAndTimeHooks.useLocale();
     const formattedDate = date ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" }) : null;

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { toDateUtil, formatDateUtil, isEqualUtil, timeSinceAuto, getHourCycle } from '@trackunit/date-and-time-utils';
 import { useLocale as useLocale$1, useDateAndTime } from '@trackunit/react-date-and-time-hooks';
 import { color } from '@trackunit/ui-design-tokens';
-import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
+import { useMemo, useCallback, useState, useEffect, useRef, Children, isValidElement } from 'react';
 import { Tooltip, IconButton, Icon, Button, Popover, PopoverTrigger, PopoverContent, Card, Text } from '@trackunit/react-components';
 import { DateTimeFormat } from '@trackunit/shared-utils';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
@@ -151,9 +151,9 @@ const useLocale = (language) => {
 
 /**
  * The DayPicker component is used when the user needs to select a date.
- 
+
  * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {JSX.Element} DayPicker component
+ * @returns {ReactElement} DayPicker component
  */
 const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
     const locale = useLocale(language);
@@ -164,7 +164,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * The DayRangePicker component should be used when the user needs to select a range of dates.
  *
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
- * @returns {JSX.Element} DayRangePicker component
+ * @returns {ReactElement} DayRangePicker component
  */
 const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, showQuickOptions, timezone, onClose, }) => {
     const [newRange, setNewRange] = useState(selectedDays ?? { from: undefined, to: undefined });
@@ -373,7 +373,7 @@ const cvaTimelineElementTime = cvaMerge([
  * The Timeline component offers a visual representation of events or milestones in chronological order, helping users easily follow the progression of activities, tasks, or data points over time.
  *
  * @param {TimelineProps} props - The props for the Timeline component
- * @returns {JSX.Element} Timeline component
+ * @returns {ReactElement} Timeline component
  */
 const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
     const ref = useRef(null);
@@ -381,9 +381,9 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
     const { formatDate, formatRange } = useDateAndTime();
     const locale = useLocale$1();
     const hourCycle = getHourCycle(locale);
-    const childrenArray = useMemo(() => React.Children.toArray(children), [children]);
+    const childrenArray = useMemo(() => Children.toArray(children), [children]);
     const [firstChild, ...remainingChildren] = childrenArray;
-    const childProps = React.isValidElement(firstChild) ? firstChild.props : {};
+    const childProps = isValidElement(firstChild) ? firstChild.props : {};
     const lastChild = remainingChildren.pop();
     const middleChildren = remainingChildren;
     useEffect(() => {
@@ -392,9 +392,9 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
             ref.current.style.maxHeight = isOpen ? `${ref.current.scrollHeight}px` : "0px";
         }
     }, [isOpen]);
-    const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [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?.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: () => {
+                }) })) : 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 })] })] }));
@@ -416,7 +416,7 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
  * - a date as the header and the children provided as body.
  *
  * @param {TimeLineElementProps} props the props
- * @returns {JSX.Element} component
+ * @returns {ReactElement} component
  */
 const TimelineElement = ({ date, children, className, dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
     const [isHovered, setIsHovered] = useState(false);

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.3.25",
+  "version": "1.3.30",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=20.x"
   },
   "dependencies": {
-    "react-day-picker": "^8.9.1",
     "date-fns": "^2.30.0",
     "tailwind-merge": "^2.0.0",
-    "react": "18.3.1",
-    "@trackunit/react-components": "1.4.23",
-    "@trackunit/react-date-and-time-hooks": "1.3.24",
-    "@trackunit/react-core-hooks": "1.3.24",
-    "@trackunit/date-and-time-utils": "1.3.23",
-    "@trackunit/css-class-variance-utilities": "1.3.23",
-    "@trackunit/ui-icons": "1.3.23",
-    "@trackunit/ui-design-tokens": "1.3.23",
-    "@trackunit/shared-utils": "1.5.23",
-    "@trackunit/i18n-library-translation": "1.3.24"
+    "react-day-picker": "9.5.1",
+    "react": "19.0.0",
+    "@trackunit/react-components": "1.4.28",
+    "@trackunit/react-date-and-time-hooks": "1.3.29",
+    "@trackunit/react-core-hooks": "1.3.29",
+    "@trackunit/date-and-time-utils": "1.3.28",
+    "@trackunit/css-class-variance-utilities": "1.3.28",
+    "@trackunit/ui-icons": "1.3.28",
+    "@trackunit/ui-design-tokens": "1.3.28",
+    "@trackunit/shared-utils": "1.5.28",
+    "@trackunit/i18n-library-translation": "1.3.29"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/DayPicker/DayPicker.d.ts

@@ -1,5 +1,5 @@
-import { Matcher } from "react-day-picker";
 import { CommonProps } from "@trackunit/react-components";
+import { DateRange, Matcher } from "react-day-picker";
 export interface DayPickerProps extends CommonProps {
     /**
      * A callback function for when a date is selected
@@ -12,7 +12,7 @@ export interface DayPickerProps extends CommonProps {
     /**
      * Set any days which are selected
      */
-    selectedDays?: Matcher | Matcher[];
+    selectedDays?: DateRange;
     /**
      * Set the language
      */
@@ -24,8 +24,8 @@ export interface DayPickerProps extends CommonProps {
 }
 /**
  * The DayPicker component is used when the user needs to select a date.
- 
+
  * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {JSX.Element} DayPicker component
+ * @returns {ReactElement} DayPicker component
  */
 export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }: DayPickerProps) => import("react/jsx-runtime").JSX.Element;

package/src/DayPicker/DayRangePicker.d.ts

@@ -1,4 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
+import { ReactElement } from "react";
 import { DateRange, Matcher } from "react-day-picker";
 import { TimeZone } from "./index";
 export interface ShowQuickOption {
@@ -46,6 +47,6 @@ export interface DayRangePickerProps extends CommonProps {
  * The DayRangePicker component should be used when the user needs to select a range of dates.
  *
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
- * @returns {JSX.Element} DayRangePicker component
+ * @returns {ReactElement} DayRangePicker component
  */
-export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, showQuickOptions, timezone, onClose, }: DayRangePickerProps) => JSX.Element;
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, showQuickOptions, timezone, onClose, }: DayRangePickerProps) => ReactElement;

package/src/DayPicker/DayRangePickerPopover.d.ts

@@ -1,4 +1,5 @@
 import { ButtonVariant, CommonProps, PopoverPlacement, Size } from "@trackunit/react-components";
+import { ReactElement } from "react";
 import { Matcher } from "react-day-picker";
 import { IDateRange, ShowQuickOption } from "./DayRangePicker";
 import { TimeZone } from "./index";
@@ -17,7 +18,7 @@ export interface DayRangePickerPopoverProps extends CommonProps {
     timezone?: TimeZone;
     /** An element to use as the portal root for the popover component */
     bindTo?: HTMLElement;
-    buttonContent: JSX.Element;
+    buttonContent: ReactElement;
     max?: number;
     disabled?: boolean;
 }

package/src/Timeline/Timeline.d.ts

@@ -1,8 +1,8 @@
 import { DateRange } from "@trackunit/date-and-time-utils";
 import { CommonProps } from "@trackunit/react-components";
-import React from "react";
+import { ReactNode } from "react";
 export interface TimelineProps extends CommonProps {
-    children: React.ReactNode;
+    children: ReactNode;
     toggleButton?: {
         expandedLabel: string;
         collapsedLabel: string;
@@ -17,12 +17,12 @@ export interface TimelineProps extends CommonProps {
     }) & {
         showTime?: boolean;
     };
-    customHeader?: React.ReactNode;
+    customHeader?: ReactNode;
 }
 /**
  * The Timeline component offers a visual representation of events or milestones in chronological order, helping users easily follow the progression of activities, tasks, or data points over time.
  *
  * @param {TimelineProps} props - The props for the Timeline component
- * @returns {JSX.Element} Timeline component
+ * @returns {ReactElement} Timeline component
  */
 export declare const Timeline: ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/src/Timeline/TimelineElement.d.ts

@@ -1,16 +1,16 @@
 import { CommonProps, IconColors } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
-import React from "react";
+import { ReactNode, MouseEvent } from "react";
 interface TimeLineElementProps extends CommonProps {
     date?: Date;
-    header?: React.ReactNode;
-    children?: React.ReactNode;
+    header?: ReactNode;
+    children?: ReactNode;
     customDot?: {
         name: IconName;
         color: IconColors;
         keepOnSelection?: boolean;
     };
-    onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (e?: MouseEvent<HTMLDivElement>) => void;
     actionButton?: {
         label: string;
         iconName: IconName;
@@ -24,7 +24,7 @@ interface TimeLineElementProps extends CommonProps {
  * - a date as the header and the children provided as body.
  *
  * @param {TimeLineElementProps} props the props
- * @returns {JSX.Element} component
+ * @returns {ReactElement} component
  */
 export declare const TimelineElement: ({ date, children, className, dataTestId, header, onClick, actionButton, selected, customDot, lineStyle, hoverBehavior, }: TimeLineElementProps) => import("react/jsx-runtime").JSX.Element;
 export {};