@trackunit/react-date-and-time-components 2.3.3 → 2.3.7
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
CHANGED
|
@@ -691,7 +691,7 @@ const isTemporalDirection = (direction) => {
|
|
|
691
691
|
* ```
|
|
692
692
|
* @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
|
|
693
693
|
*/
|
|
694
|
-
const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
|
|
694
|
+
const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showResetButton = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
|
|
695
695
|
const [t] = useTranslation();
|
|
696
696
|
const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
|
|
697
697
|
const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
|
|
@@ -731,6 +731,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
|
|
|
731
731
|
}, [selectedRange, selectedDateRange, calculateDateRange]);
|
|
732
732
|
const isCustomDateRangeSelected = react.useMemo(() => currentSelectedRange && !currentSelectedRange.temporalPeriod, [currentSelectedRange]);
|
|
733
733
|
const [isCustomDateRangeOpen, setIsCustomDateRangeOpen] = react.useState(false);
|
|
734
|
+
const showPopoverHeader = showDateRangeSearch || showResetButton;
|
|
734
735
|
const popoverTriggerLabel = react.useMemo(() => {
|
|
735
736
|
return currentSelectedRange
|
|
736
737
|
? currentSelectedRange.temporalPeriod
|
|
@@ -786,9 +787,9 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
|
|
|
786
787
|
onRangeSelect(_selectedDateRange);
|
|
787
788
|
}, [onRangeSelect, handleReset]);
|
|
788
789
|
return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: popoverPlacement, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: !actionButton ? (jsxRuntime.jsx(reactComponents.Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), "data-testid": dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "neutral" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsxRuntime.jsx("div", { children: actionButton })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { "data-testid": dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
|
|
789
|
-
return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuList, { className: "min-w-[280px]", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsxRuntime.jsx(reactFormComponents.Search, { className: "w-full", "data-testid": dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
|
|
790
|
-
|
|
791
|
-
|
|
790
|
+
return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuList, { className: "min-w-[280px]", children: [showPopoverHeader ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsxRuntime.jsx(reactFormComponents.Search, { className: "w-full", "data-testid": dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
|
|
791
|
+
? t("input.placeholder.customRange.last")
|
|
792
|
+
: t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, showResetButton ? (jsxRuntime.jsx(reactComponents.Button, { className: "ml-auto", "data-testid": dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })) : null] }), jsxRuntime.jsx("hr", { className: "my-1 border-neutral-200", role: "separator" })] })) : null, jsxRuntime.jsx(DayRangeSelectOptions, { "data-testid": dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxRuntime.jsxs("section", { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isCustomDateRangeSelected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: "small" }) : null, jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsxRuntime.jsx(reactComponents.Card, { children: jsxRuntime.jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
|
|
792
793
|
? {
|
|
793
794
|
start: dateRange.start ?? undefined,
|
|
794
795
|
end: dateRange.end ?? undefined,
|
package/index.esm.js
CHANGED
|
@@ -689,7 +689,7 @@ const isTemporalDirection = (direction) => {
|
|
|
689
689
|
* ```
|
|
690
690
|
* @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
|
|
691
691
|
*/
|
|
692
|
-
const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
|
|
692
|
+
const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showResetButton = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
|
|
693
693
|
const [t] = useTranslation();
|
|
694
694
|
const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
|
|
695
695
|
const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
|
|
@@ -729,6 +729,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
|
|
|
729
729
|
}, [selectedRange, selectedDateRange, calculateDateRange]);
|
|
730
730
|
const isCustomDateRangeSelected = useMemo(() => currentSelectedRange && !currentSelectedRange.temporalPeriod, [currentSelectedRange]);
|
|
731
731
|
const [isCustomDateRangeOpen, setIsCustomDateRangeOpen] = useState(false);
|
|
732
|
+
const showPopoverHeader = showDateRangeSearch || showResetButton;
|
|
732
733
|
const popoverTriggerLabel = useMemo(() => {
|
|
733
734
|
return currentSelectedRange
|
|
734
735
|
? currentSelectedRange.temporalPeriod
|
|
@@ -784,9 +785,9 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
|
|
|
784
785
|
onRangeSelect(_selectedDateRange);
|
|
785
786
|
}, [onRangeSelect, handleReset]);
|
|
786
787
|
return (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: popoverPlacement, children: [jsx(PopoverTrigger, { children: !actionButton ? (jsx(Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), "data-testid": dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsx(Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "neutral" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsx("div", { children: actionButton })) }), jsx(PopoverContent, { "data-testid": dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
|
|
787
|
-
return !isCustomDateRangeOpen ? (jsxs(MenuList, { className: "min-w-[280px]", children: [jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsx(Search, { className: "w-full", "data-testid": dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
|
|
788
|
-
|
|
789
|
-
|
|
788
|
+
return !isCustomDateRangeOpen ? (jsxs(MenuList, { className: "min-w-[280px]", children: [showPopoverHeader ? (jsxs("div", { children: [jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsx(Search, { className: "w-full", "data-testid": dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
|
|
789
|
+
? t("input.placeholder.customRange.last")
|
|
790
|
+
: t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, showResetButton ? (jsx(Button, { className: "ml-auto", "data-testid": dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })) : null] }), jsx("hr", { className: "my-1 border-neutral-200", role: "separator" })] })) : null, jsx(DayRangeSelectOptions, { "data-testid": dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxs("section", { children: [jsx(MenuDivider, {}), jsx(MenuItem, { "data-testid": dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxs(Fragment, { children: [isCustomDateRangeSelected ? jsx(Icon, { color: "primary", name: "Check", size: "small" }) : null, jsx(Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsx(Card, { children: jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
|
|
790
791
|
? {
|
|
791
792
|
start: dateRange.start ?? undefined,
|
|
792
793
|
end: dateRange.end ?? undefined,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/date-and-time-components/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-date-and-time-components",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.7",
|
|
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": "2.
|
|
11
|
-
"@trackunit/date-and-time-utils": "1.13.
|
|
12
|
-
"@trackunit/react-date-and-time-hooks": "2.3.
|
|
13
|
-
"@trackunit/css-class-variance-utilities": "1.13.
|
|
14
|
-
"@trackunit/ui-icons": "1.13.
|
|
15
|
-
"@trackunit/shared-utils": "1.15.
|
|
16
|
-
"@trackunit/i18n-library-translation": "2.2.
|
|
17
|
-
"@trackunit/react-form-components": "2.3.
|
|
10
|
+
"@trackunit/react-components": "2.4.0",
|
|
11
|
+
"@trackunit/date-and-time-utils": "1.13.93",
|
|
12
|
+
"@trackunit/react-date-and-time-hooks": "2.3.6",
|
|
13
|
+
"@trackunit/css-class-variance-utilities": "1.13.90",
|
|
14
|
+
"@trackunit/ui-icons": "1.13.91",
|
|
15
|
+
"@trackunit/shared-utils": "1.15.93",
|
|
16
|
+
"@trackunit/i18n-library-translation": "2.2.5",
|
|
17
|
+
"@trackunit/react-form-components": "2.3.6",
|
|
18
18
|
"string-ts": "^2.0.0",
|
|
19
19
|
"tailwind-merge": "^2.0.0",
|
|
20
20
|
"react-calendar": "^6.0.0"
|
|
@@ -31,6 +31,10 @@ export type DayRangeSelectProps = CommonProps & {
|
|
|
31
31
|
* Whether to show the date range search input.
|
|
32
32
|
*/
|
|
33
33
|
showDateRangeSearch?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Whether to show the reset button above the preset options.
|
|
36
|
+
*/
|
|
37
|
+
showResetButton?: boolean;
|
|
34
38
|
/**
|
|
35
39
|
* Whether to show the custom date range option with a calendar picker.
|
|
36
40
|
*/
|
|
@@ -92,4 +96,4 @@ export type DayRangeSelectProps = CommonProps & {
|
|
|
92
96
|
* ```
|
|
93
97
|
* @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
|
|
94
98
|
*/
|
|
95
|
-
export declare const DayRangeSelect: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, disabledDays, size, fullWidth, actionButton, popoverPlacement, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
99
|
+
export declare const DayRangeSelect: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showResetButton, showCustomDateRangeOption, timezone, maxDaysInRange, disabledDays, size, fullWidth, actionButton, popoverPlacement, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;
|