@trackunit/react-date-and-time-components 1.20.4 → 1.20.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.js +3 -3
- package/index.esm.js +3 -3
- package/package.json +9 -9
package/index.cjs.js
CHANGED
|
@@ -655,7 +655,7 @@ const isTemporalDirection = (direction) => {
|
|
|
655
655
|
* ```
|
|
656
656
|
* @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
|
|
657
657
|
*/
|
|
658
|
-
const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
|
|
658
|
+
const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
|
|
659
659
|
const [t] = useTranslation();
|
|
660
660
|
const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
|
|
661
661
|
const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
|
|
@@ -916,7 +916,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
|
|
|
916
916
|
* @param {TimeLineElementProps} props the props
|
|
917
917
|
* @returns {ReactElement} component
|
|
918
918
|
*/
|
|
919
|
-
const TimelineElement = ({ date, children, className, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
|
|
919
|
+
const TimelineElement = ({ date, children, className, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
|
|
920
920
|
const [isHovered, setIsHovered] = react.useState(false);
|
|
921
921
|
const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
|
|
922
922
|
const locale = reactDateAndTimeHooks.useLocale();
|
|
@@ -971,7 +971,7 @@ const timelineElementTime = (formattedDate, locale) => {
|
|
|
971
971
|
width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
|
|
972
972
|
}), size: "small", subtle: true, children: formattedDate }));
|
|
973
973
|
};
|
|
974
|
-
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" })] }));
|
|
974
|
+
const CircleIcon = ({ selected = false, 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" })] }));
|
|
975
975
|
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" })] }));
|
|
976
976
|
const defaultDot = (hovered, selected) => hovered || selected ? jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsxRuntime.jsx(DotIcon, {});
|
|
977
977
|
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, "data-testid": "timeline-custom-dot", name: name, size: "small" }) }) }));
|
package/index.esm.js
CHANGED
|
@@ -653,7 +653,7 @@ const isTemporalDirection = (direction) => {
|
|
|
653
653
|
* ```
|
|
654
654
|
* @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
|
|
655
655
|
*/
|
|
656
|
-
const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
|
|
656
|
+
const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
|
|
657
657
|
const [t] = useTranslation();
|
|
658
658
|
const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
|
|
659
659
|
const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
|
|
@@ -914,7 +914,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
|
|
|
914
914
|
* @param {TimeLineElementProps} props the props
|
|
915
915
|
* @returns {ReactElement} component
|
|
916
916
|
*/
|
|
917
|
-
const TimelineElement = ({ date, children, className, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
|
|
917
|
+
const TimelineElement = ({ date, children, className, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
|
|
918
918
|
const [isHovered, setIsHovered] = useState(false);
|
|
919
919
|
const { formatDate } = useDateAndTime();
|
|
920
920
|
const locale = useLocale();
|
|
@@ -969,7 +969,7 @@ const timelineElementTime = (formattedDate, locale) => {
|
|
|
969
969
|
width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
|
|
970
970
|
}), size: "small", subtle: true, children: formattedDate }));
|
|
971
971
|
};
|
|
972
|
-
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" })] }));
|
|
972
|
+
const CircleIcon = ({ selected = false, 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" })] }));
|
|
973
973
|
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" })] }));
|
|
974
974
|
const defaultDot = (hovered, selected) => hovered || selected ? jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsx(DotIcon, {});
|
|
975
975
|
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, "data-testid": "timeline-custom-dot", name: name, size: "small" }) }) }));
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-date-and-time-components",
|
|
3
|
-
"version": "1.20.
|
|
3
|
+
"version": "1.20.6",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
7
7
|
"node": ">=24.x"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@trackunit/react-components": "1.20.
|
|
11
|
-
"@trackunit/date-and-time-utils": "1.11.
|
|
12
|
-
"@trackunit/react-date-and-time-hooks": "1.17.
|
|
13
|
-
"@trackunit/css-class-variance-utilities": "1.11.
|
|
14
|
-
"@trackunit/ui-icons": "1.11.
|
|
15
|
-
"@trackunit/shared-utils": "1.13.
|
|
16
|
-
"@trackunit/i18n-library-translation": "1.15.
|
|
17
|
-
"@trackunit/react-form-components": "1.18.
|
|
10
|
+
"@trackunit/react-components": "1.20.5",
|
|
11
|
+
"@trackunit/date-and-time-utils": "1.11.80",
|
|
12
|
+
"@trackunit/react-date-and-time-hooks": "1.17.5",
|
|
13
|
+
"@trackunit/css-class-variance-utilities": "1.11.78",
|
|
14
|
+
"@trackunit/ui-icons": "1.11.74",
|
|
15
|
+
"@trackunit/shared-utils": "1.13.78",
|
|
16
|
+
"@trackunit/i18n-library-translation": "1.15.5",
|
|
17
|
+
"@trackunit/react-form-components": "1.18.5",
|
|
18
18
|
"string-ts": "^2.0.0",
|
|
19
19
|
"tailwind-merge": "^2.0.0",
|
|
20
20
|
"react-calendar": "^6.0.0"
|