@trackunit/react-date-and-time-components 2.4.4 → 2.4.7-alpha-770d9994af7.0

package/index.cjs.js

@@ -712,7 +712,9 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
         return filterTemporalPeriodsInRange({ temporalPeriods: defaultCombinations, maxDaysInRange });
     }, [initialDateRangeOptions, filterTemporalPeriodsInRange, allowedDirection, maxDaysInRange]);
     const [temporalPeriods, setTemporalPeriods] = react.useState(defaultTemporalPeriods);
-    const [dateRangeSearchValue, setDateRangeSearchValue] = react.useState();
+    // Starts as an empty string rather than undefined: clearing the search would otherwise switch the
+    // input from uncontrolled to controlled, which React warns about.
+    const [dateRangeSearchValue, setDateRangeSearchValue] = react.useState("");
     const [selectedRange, setSelectedRange] = react.useState();
     const currentSelectedRange = react.useMemo(() => {
         // Internal selected range takes precedence
@@ -787,7 +789,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
     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 => {
-                    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"
+                    return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuContent, { 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"
                                                     ? t("input.placeholder.customRange.last")
                                                     : 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
                                 ? {

package/index.esm.js

@@ -5,7 +5,7 @@ import { useLocale, useHourCycle, useTimezone, useDateAndTime } from '@trackunit
 import { truthy, DateTimeFormat, nonNullable, objectKeys } from '@trackunit/shared-utils';
 import { useMemo, useCallback, useState, useEffect, useRef, Children, isValidElement } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { Tooltip, Button, MenuItem, Icon, Popover, PopoverTrigger, PopoverContent, MenuList, MenuDivider, Card, Text } from '@trackunit/react-components';
+import { Tooltip, Button, MenuItem, Icon, Popover, PopoverTrigger, PopoverContent, MenuContent, MenuDivider, Card, Text } from '@trackunit/react-components';
 import Calendar from 'react-calendar';
 import { Search } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -710,7 +710,9 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
         return filterTemporalPeriodsInRange({ temporalPeriods: defaultCombinations, maxDaysInRange });
     }, [initialDateRangeOptions, filterTemporalPeriodsInRange, allowedDirection, maxDaysInRange]);
     const [temporalPeriods, setTemporalPeriods] = useState(defaultTemporalPeriods);
-    const [dateRangeSearchValue, setDateRangeSearchValue] = useState();
+    // Starts as an empty string rather than undefined: clearing the search would otherwise switch the
+    // input from uncontrolled to controlled, which React warns about.
+    const [dateRangeSearchValue, setDateRangeSearchValue] = useState("");
     const [selectedRange, setSelectedRange] = useState();
     const currentSelectedRange = useMemo(() => {
         // Internal selected range takes precedence
@@ -785,7 +787,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
     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 => {
-                    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"
+                    return !isCustomDateRangeOpen ? (jsxs(MenuContent, { 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"
                                                     ? t("input.placeholder.customRange.last")
                                                     : 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
                                 ? {

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "2.4.4",
+  "version": "2.4.7-alpha-770d9994af7.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.5.4",
-    "@trackunit/date-and-time-utils": "1.14.1",
-    "@trackunit/react-date-and-time-hooks": "2.4.4",
-    "@trackunit/css-class-variance-utilities": "1.14.1",
-    "@trackunit/ui-icons": "1.14.1",
-    "@trackunit/shared-utils": "1.16.1",
-    "@trackunit/i18n-library-translation": "2.3.1",
-    "@trackunit/react-form-components": "2.4.4",
+    "@trackunit/react-components": "2.6.2-alpha-770d9994af7.0",
+    "@trackunit/date-and-time-utils": "1.14.3-alpha-770d9994af7.0",
+    "@trackunit/react-date-and-time-hooks": "2.4.7-alpha-770d9994af7.0",
+    "@trackunit/css-class-variance-utilities": "1.14.3-alpha-770d9994af7.0",
+    "@trackunit/ui-icons": "1.14.3-alpha-770d9994af7.0",
+    "@trackunit/shared-utils": "1.16.3-alpha-770d9994af7.0",
+    "@trackunit/i18n-library-translation": "2.3.4-alpha-770d9994af7.0",
+    "@trackunit/react-form-components": "2.4.7-alpha-770d9994af7.0",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"