@trackunit/react-date-and-time-components 2.3.7 → 2.3.9-alpha-90b6c9b97dd.0
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,
|
|
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", }) => {
|
|
695
695
|
const [t] = useTranslation();
|
|
696
696
|
const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
|
|
697
697
|
const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
|
|
@@ -731,7 +731,6 @@ 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;
|
|
735
734
|
const popoverTriggerLabel = react.useMemo(() => {
|
|
736
735
|
return currentSelectedRange
|
|
737
736
|
? currentSelectedRange.temporalPeriod
|
|
@@ -787,9 +786,9 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
|
|
|
787
786
|
onRangeSelect(_selectedDateRange);
|
|
788
787
|
}, [onRangeSelect, handleReset]);
|
|
789
788
|
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 => {
|
|
790
|
-
return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuList, { className: "min-w-[280px]", children: [
|
|
791
|
-
|
|
792
|
-
|
|
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
|
+
? t("input.placeholder.customRange.last")
|
|
791
|
+
: t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, 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") })] }), jsxRuntime.jsx("hr", { className: "my-1 border-neutral-200", role: "separator" }), 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
|
|
793
792
|
? {
|
|
794
793
|
start: dateRange.start ?? undefined,
|
|
795
794
|
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,
|
|
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", }) => {
|
|
693
693
|
const [t] = useTranslation();
|
|
694
694
|
const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
|
|
695
695
|
const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
|
|
@@ -729,7 +729,6 @@ 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;
|
|
733
732
|
const popoverTriggerLabel = useMemo(() => {
|
|
734
733
|
return currentSelectedRange
|
|
735
734
|
? currentSelectedRange.temporalPeriod
|
|
@@ -785,9 +784,9 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
|
|
|
785
784
|
onRangeSelect(_selectedDateRange);
|
|
786
785
|
}, [onRangeSelect, handleReset]);
|
|
787
786
|
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 => {
|
|
788
|
-
return !isCustomDateRangeOpen ? (jsxs(MenuList, { className: "min-w-[280px]", children: [
|
|
789
|
-
|
|
790
|
-
|
|
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
|
+
? t("input.placeholder.customRange.last")
|
|
789
|
+
: t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, 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") })] }), jsx("hr", { className: "my-1 border-neutral-200", role: "separator" }), 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
|
|
791
790
|
? {
|
|
792
791
|
start: dateRange.start ?? undefined,
|
|
793
792
|
end: dateRange.end ?? undefined,
|
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.9-alpha-90b6c9b97dd.0",
|
|
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.4.0",
|
|
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.2-alpha-90b6c9b97dd.0",
|
|
11
|
+
"@trackunit/date-and-time-utils": "1.13.95-alpha-90b6c9b97dd.0",
|
|
12
|
+
"@trackunit/react-date-and-time-hooks": "2.3.8-alpha-90b6c9b97dd.0",
|
|
13
|
+
"@trackunit/css-class-variance-utilities": "1.13.92-alpha-90b6c9b97dd.0",
|
|
14
|
+
"@trackunit/ui-icons": "1.13.93-alpha-90b6c9b97dd.0",
|
|
15
|
+
"@trackunit/shared-utils": "1.15.95-alpha-90b6c9b97dd.0",
|
|
16
|
+
"@trackunit/i18n-library-translation": "2.2.7-alpha-90b6c9b97dd.0",
|
|
17
|
+
"@trackunit/react-form-components": "2.3.8-alpha-90b6c9b97dd.0",
|
|
18
18
|
"string-ts": "^2.0.0",
|
|
19
19
|
"tailwind-merge": "^2.0.0",
|
|
20
20
|
"react-calendar": "^6.0.0"
|
|
@@ -31,10 +31,6 @@ 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;
|
|
38
34
|
/**
|
|
39
35
|
* Whether to show the custom date range option with a calendar picker.
|
|
40
36
|
*/
|
|
@@ -96,4 +92,4 @@ export type DayRangeSelectProps = CommonProps & {
|
|
|
96
92
|
* ```
|
|
97
93
|
* @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
|
|
98
94
|
*/
|
|
99
|
-
export declare const DayRangeSelect: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch,
|
|
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;
|
package/migrations/entry.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/date-and-time-components/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}
|