@trackunit/react-date-and-time-components 1.13.29 → 1.13.33

package/index.cjs.js

@@ -544,7 +544,7 @@ const isTemporalDirection = (direction) => {
 /**
  * Day range select component.
  */
-const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, }) => {
+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", }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
@@ -638,7 +638,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, select
         setSelectedRange(_selectedDateRange);
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
-    return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", 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 (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: [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, 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
@@ -887,7 +887,7 @@ const renderChildren = (children) => {
     if (!children) {
         return null;
     }
-    return jsxRuntime.jsx("div", { className: "mt-0.5 content-center text-sm text-neutral-500", children: children });
+    return jsxRuntime.jsx("div", { className: "mt-0.5 content-center text-sm", children: children });
 };
 const renderActionButton = (actionButton) => {
     if (!actionButton) {

package/index.esm.js

@@ -542,7 +542,7 @@ const isTemporalDirection = (direction) => {
 /**
  * Day range select component.
  */
-const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, }) => {
+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", }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
@@ -636,7 +636,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, select
         setSelectedRange(_selectedDateRange);
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
-    return (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", 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 (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: [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, 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
@@ -885,7 +885,7 @@ const renderChildren = (children) => {
     if (!children) {
         return null;
     }
-    return jsx("div", { className: "mt-0.5 content-center text-sm text-neutral-500", children: children });
+    return jsx("div", { className: "mt-0.5 content-center text-sm", children: children });
 };
 const renderActionButton = (actionButton) => {
     if (!actionButton) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.13.29",
+  "version": "1.13.33",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,14 +8,14 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.14.26",
-    "@trackunit/date-and-time-utils": "1.10.22",
-    "@trackunit/react-date-and-time-hooks": "1.10.28",
-    "@trackunit/css-class-variance-utilities": "1.10.22",
-    "@trackunit/ui-icons": "1.10.22",
-    "@trackunit/shared-utils": "1.12.22",
-    "@trackunit/i18n-library-translation": "1.10.23",
-    "@trackunit/react-form-components": "1.11.26",
+    "@trackunit/react-components": "1.14.29",
+    "@trackunit/date-and-time-utils": "1.10.23",
+    "@trackunit/react-date-and-time-hooks": "1.10.31",
+    "@trackunit/css-class-variance-utilities": "1.10.23",
+    "@trackunit/ui-icons": "1.10.23",
+    "@trackunit/shared-utils": "1.12.23",
+    "@trackunit/i18n-library-translation": "1.10.25",
+    "@trackunit/react-form-components": "1.11.29",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/DayRangeSelect/DayRangeSelect.d.ts

@@ -1,5 +1,5 @@
 import { DateRange } from "@trackunit/date-and-time-utils";
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, PopoverPlacement } from "@trackunit/react-components";
 import { Size } from "@trackunit/shared-utils";
 import { ReactElement } from "react";
 import { DayRangePickerProps } from "../DayPicker/DayRangePicker";
@@ -56,8 +56,14 @@ export type DayRangeSelectProps = CommonProps & {
      * If provided, this button replaces the default trigger button of the component.
      */
     actionButton?: ReactElement;
+    /**
+     * The placement of the popover menu relative to the trigger button.
+     *
+     * @default "bottom-start"
+     */
+    popoverPlacement?: PopoverPlacement;
 };
 /**
  * Day range select component.
  */
-export declare const DayRangeSelect: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, size, fullWidth, actionButton, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DayRangeSelect: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, size, fullWidth, actionButton, popoverPlacement, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;

package/src/DayRangeSelect/DayRangeSelect.stories.d.ts

@@ -5,7 +5,7 @@ import { DayRangeSelectProps } from "./DayRangeSelect";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, size, fullWidth, actionButton, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, size, fullWidth, actionButton, popoverPlacement, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         docs: {
@@ -30,6 +30,7 @@ declare const meta: {
         size?: import("@trackunit/shared-utils").Size | undefined;
         fullWidth?: boolean | undefined;
         actionButton?: ReactElement | undefined;
+        popoverPlacement?: import("@trackunit/react-components").PopoverPlacement | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;