@trackunit/react-date-and-time-components 1.3.221 → 1.4.0

package/src/DayPicker/DayRangePicker.stories.d.ts

@@ -8,4 +8,3 @@ export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
 export declare const DefaultSDA: () => import("react/jsx-runtime").JSX.Element;
 export declare const VariantWithMax: () => import("react/jsx-runtime").JSX.Element;
 export declare const VariantWithDisabledDays: () => import("react/jsx-runtime").JSX.Element;
-export declare const VariantWithQuickButtons: () => import("react/jsx-runtime").JSX.Element;

package/src/DayPicker/index.d.ts

@@ -18,4 +18,3 @@ export interface TimeZone {
 }
 export * from "./DayPicker";
 export * from "./DayRangePicker";
-export * from "./DayRangePickerPopover";

package/src/DayRangeSelect/DayRangeSelect.d.ts

@@ -0,0 +1,56 @@
+import { CommonProps } from "@trackunit/react-components";
+import { Size } from "@trackunit/shared-utils";
+import { DayRangePickerProps } from "../DayPicker/DayRangePicker";
+import { DateRange, SelectedDateRange, TemporalDirection, TemporalPeriod } from "./types";
+export type DayRangeSelectProps = CommonProps & {
+    /**
+     * Whether the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The selected date range.
+     * When a temporal period is provided, the date range will be calculated and rendered as if a options was selected.
+     * When a date range is provided, it will be rendered as a custom date range.
+     */
+    selectedDateRange?: DateRange | TemporalPeriod;
+    /**
+     * If initialDateRangeOptions is provided, it will be used instead of the components default options.
+     */
+    initialDateRangeOptions?: Array<TemporalPeriod>;
+    /**
+     * Callback function that is called when a date range is selected.
+     */
+    onRangeSelect: (params?: SelectedDateRange) => void;
+    /**
+     * The direction of the date range to allow. If not provided, both 'last' and 'next' directions are allowed.
+     */
+    allowedDirection?: TemporalDirection;
+    /**
+     * Whether to show the date range search input.
+     */
+    showDateRangeSearch?: boolean;
+    /**
+     * Whether to show the custom date range option with a calendar picker.
+     */
+    showCustomDateRangeOption?: boolean;
+    /**
+     * The timezone for the date range picker.
+     */
+    timezone?: DayRangePickerProps["timezone"];
+    /**
+     * The maximum amount of days that can be selected
+     */
+    maxDaysInRange?: number;
+    /**
+     * The size of the button.
+     */
+    size?: Size;
+    /**
+     * Whether the trigger button is full width.
+     */
+    fullWidth?: boolean;
+};
+/**
+ * Day range select component.
+ */
+export declare const DayRangeSelect: ({ className, dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, size, fullWidth, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { DayRangeSelect } from "./DayRangeSelect";
+type Story = StoryObj<typeof DayRangeSelect>;
+declare const meta: Meta<typeof DayRangeSelect>;
+export default meta;
+export declare const Default: Story;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const VariantWithoutCustomDateRangeOptionAndSearch: Story;
+export declare const VariantWithAllowedDirectionSet: Story;
+export declare const VariantWithInitialDateRangeOptionsSet: Story;

package/src/DayRangeSelect/DayRangeSelect.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaTriggerButton: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/DayRangeSelect/components/DayRangeSelectOptions.d.ts

@@ -0,0 +1,11 @@
+import { CommonProps } from "@trackunit/react-components";
+import { SelectedDateRange, TemporalPeriod } from "../types";
+export type DayRangeSelectOptionsProps = CommonProps & {
+    temporalPeriods: Array<TemporalPeriod>;
+    onSelect: (option: SelectedDateRange) => void;
+    selectedDateRange: SelectedDateRange | undefined;
+};
+/**
+ * Renders a list of options for the DayRangeSelect component.
+ */
+export declare const DayRangeSelectOptions: ({ dataTestId, temporalPeriods, selectedDateRange, onSelect, }: DayRangeSelectOptionsProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];

package/src/DayRangeSelect/hooks/useCalculateCustomDateRangeDisabledDays/useCalculateCustomDateRangeDisabledDays.d.ts

@@ -0,0 +1,11 @@
+import { DayRangePickerProps } from "../../../DayPicker";
+import { TemporalDirection } from "../../types";
+export type CalculateCustomDateRangeDisabledDaysProps = {
+    maxDaysInRange: number | undefined;
+    allowedDirection: TemporalDirection | undefined;
+};
+/**
+ * Calculate the disabled days for the custom date range picker based on the maxDaysInRange and allowedDirection.
+ * The range is inclusive of both start and end dates, so we subtract 1 from maxDaysInRange to get the correct number of days.
+ */
+export declare const useCalculateCustomDateRangeDisabledDays: () => ({ maxDaysInRange, allowedDirection, }: CalculateCustomDateRangeDisabledDaysProps) => DayRangePickerProps["disabledDays"] | undefined;

package/src/DayRangeSelect/hooks/useCalculateDateRange/useCalculateDateRange.d.ts

@@ -0,0 +1,9 @@
+import { DateRange, TemporalPeriod } from "../../types";
+/**
+ * Calculate a date range based on a temporal period.
+ *
+ * @example
+ * getDataRange({ direction: "next", count: 1, unit: "month" }); // { from: 2025-06-01, to: 2025-07-01 }
+ * getDataRange({ direction: "last", count: 2, unit: "weeks" }); // { from: 2025-05-24, to: 2025-06-01 }
+ */
+export declare const useCalculateDateRange: () => ({ direction, count, unit }: TemporalPeriod) => DateRange;

package/src/DayRangeSelect/hooks/useFilterTemporalPeriodsInRange/useFilterTemporalPeriodsInRange.d.ts

@@ -0,0 +1,18 @@
+import { TemporalPeriod } from "../../types";
+/**
+ * Filter temporal periods to only include those within a max day count.
+ *
+ * @example
+ * getTemporalPeriodsInRange({
+ *   temporalPeriods: [
+ *     { direction: "next", count: 1, unit: "week" },
+ *     { direction: "next", count: 1, unit: "month" },
+ *   ],
+ *   maxDaysInRange: 7,
+ * });
+ * ); // [{ direction: "next", count: 1, unit: "week" }]
+ */
+export declare const useFilterTemporalPeriodsInRange: () => ({ temporalPeriods, maxDaysInRange, }: {
+    temporalPeriods: Array<TemporalPeriod>;
+    maxDaysInRange: number | undefined;
+}) => Array<TemporalPeriod>;

package/src/DayRangeSelect/hooks/useFormatTemporalPeriodLabel/useFormatTemporalPeriodLabel.d.ts

@@ -0,0 +1,9 @@
+import { TemporalPeriod } from "../../types";
+/**
+ * Format a temporal period into a label.
+ *
+ * @example
+ * formatTemporalPeriodLabel({ direction: "last", count: 2, unit: "days" }); // Last 2 days
+ * formatTemporalPeriodLabel({ direction: "next", count: 1, unit: "week" }); // Next week
+ */
+export declare const useFormatTemporalPeriodLabel: () => (option: TemporalPeriod) => string;

package/src/DayRangeSelect/hooks/useParseTemporalPeriodFromText/hooks/useFindTemporalDirection.d.ts

@@ -0,0 +1,5 @@
+import { TemporalDirection } from "../../../types";
+/**
+ * Find the TemporalDirection type matching the value.
+ */
+export declare const useFindTemporalDirection: () => (value: string | undefined) => TemporalDirection | undefined;

package/src/DayRangeSelect/hooks/useParseTemporalPeriodFromText/hooks/useFindTemporalUnit.d.ts

@@ -0,0 +1,5 @@
+import { TemporalUnit } from "../../../types";
+/**
+ * Find the TemporalUnit type matching the value.
+ */
+export declare const useFindTemporalUnit: () => (value: string | undefined) => TemporalUnit | undefined;

package/src/DayRangeSelect/hooks/useParseTemporalPeriodFromText/useParseTemporalPeriodFromText.d.ts

@@ -0,0 +1,10 @@
+import { TemporalPeriod } from "../../types";
+/**
+ * Parse a text string into a temporal period object.
+ *
+ * @example
+ * parseTemporalPeriodFromText("Last 2 days"); // { direction: "last", count: 2, unit: "days" }
+ * parseTemporalPeriodFromText("next 3"); // { direction: "next", count: 3 }
+ * parseTemporalPeriodFromText("1 month"); // {count: 1, unit: "month" }
+ */
+export declare const useParseTemporalPeriodFromText: () => (value: string) => Partial<TemporalPeriod>;

package/src/DayRangeSelect/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./DayRangeSelect";
+export * from "./hooks/useCalculateDateRange/useCalculateDateRange";
+export * from "./hooks/useFormatTemporalPeriodLabel/useFormatTemporalPeriodLabel";
+export * from "./types";
+export * from "./utils/formatCustomDateRangeLabel/formatCustomDateRangeLabel";
+export * from "./utils/isTemporalPeriod/isTemporalPeriod";

package/src/DayRangeSelect/types.d.ts

@@ -0,0 +1,16 @@
+import { TemporalArithmeticType, TemporalSameType } from "@trackunit/react-date-and-time-hooks";
+export type DateRange = {
+    from: Date;
+    to: Date;
+};
+export type TemporalUnit = Exclude<TemporalArithmeticType | TemporalSameType, "year" | "hours" | "minutes" | "years">;
+export type TemporalDirection = "next" | "last";
+export type TemporalPeriod = {
+    direction: TemporalDirection;
+    count: number;
+    unit: TemporalUnit;
+};
+export type SelectedDateRange = {
+    dateRange: DateRange;
+    temporalPeriod: TemporalPeriod | undefined;
+};

package/src/DayRangeSelect/utils/createTemporalPeriodCombinations/createTemporalPeriodCombinations.d.ts

@@ -0,0 +1,12 @@
+import { TemporalPeriod } from "../../types";
+/**
+ * Generate all possible temporal period combinations for a given temporal period.
+ * If direction is not provided, both "last" and "next" directions are used.
+ * If count is not provided, the count defaults to 1.
+ * If unit is not provided, both "day", "week", and "month" are used in plural or singular form depending on the count.
+ *
+ * @example
+ * createTemporalPeriodCombinations({ direction: "last", count: 2, unit: "days" }); // [{ direction: "last", count: 2, unit: "days" }]
+ * createTemporalPeriodCombinations({ direction: "next", count: 1 }); // [{ direction: "next", count: 1, unit: "day" }, { direction: "next", count: 1, unit: "week" }, { direction: "next", count: 1, unit: "month" }]
+ */
+export declare const createTemporalPeriodCombinations: ({ direction, count, unit, }: Partial<TemporalPeriod>) => Array<TemporalPeriod>;

package/src/DayRangeSelect/utils/formatCustomDateRangeLabel/formatCustomDateRangeLabel.d.ts

@@ -0,0 +1,8 @@
+import { DateRange } from "../../types";
+/**
+ * Format a label representing the provided date range.
+ *
+ * @example
+ * formatCustomDateRangeLabel({ from: new Date("2025-06-16"), to: new Date("2025-06-17") }); // "June 16, 2025 - June 17, 2025"
+ */
+export declare const formatCustomDateRangeLabel: (dateRange: DateRange) => string;

package/src/DayRangeSelect/utils/isTemporalPeriod/isTemporalPeriod.d.ts

@@ -0,0 +1,8 @@
+import { DateRange, TemporalPeriod } from "../../types";
+/**
+ * Check if a value is a temporal period.
+ *
+ * @param value - The value to check.
+ * @returns {boolean} - Whether the value is a temporal period.
+ */
+export declare const isTemporalPeriod: (value: DateRange | TemporalPeriod | undefined) => value is TemporalPeriod;

package/src/DayRangeSelect/utils/temporalUnitMappings.d.ts

@@ -0,0 +1,3 @@
+import { TemporalArithmeticType } from "@trackunit/react-date-and-time-hooks";
+import { TemporalUnit } from "../types";
+export declare const temporalArithmeticTypeMapping: Record<TemporalUnit, TemporalArithmeticType>;

package/src/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./dateTime";
 export * from "./DayPicker";
+export * from "./DayRangeSelect";
 export * from "./Timeline";

package/src/translation.d.ts

@@ -14,8 +14,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"dateTime.instant.now" | "dayRangePickerPopover.icon.tooltip.calendar" | "layout.actions.apply" | "layout.actions.cancel" | "layout.actions.clear" | "shared.timePeriods.days" | "shared.timePeriods.days_plural" | "shared.timePeriods.hours" | "shared.timePeriods.hours_plural" | "shared.timePeriods.months" | "shared.timePeriods.months_plural" | "shared.timePeriods.today" | "shared.timePeriods.weeks" | "shared.timePeriods.weeks_plural" | "timeline.loadMore">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"dateTime.instant.now" | "dayRangePickerPopover.icon.tooltip.calendar" | "layout.actions.apply" | "layout.actions.cancel" | "layout.actions.clear" | "shared.timePeriods.days" | "shared.timePeriods.days_plural" | "shared.timePeriods.hours" | "shared.timePeriods.hours_plural" | "shared.timePeriods.months" | "shared.timePeriods.months_plural" | "shared.timePeriods.today" | "shared.timePeriods.weeks" | "shared.timePeriods.weeks_plural" | "timeline.loadMore">;
+export declare const useTranslation: () => [TransForLibs<"dateTime.instant.now" | "input.combined" | "input.direction.last" | "input.direction.next" | "input.icon.tooltip.calendar" | "input.noOptions" | "input.placeholder.customRange.last" | "input.placeholder.customRange.next" | "input.today" | "input.unit.day" | "input.unit.days" | "input.unit.month" | "input.unit.months" | "input.unit.week" | "input.unit.weeks" | "layout.actions.apply" | "layout.actions.back" | "layout.actions.cancel" | "layout.actions.clear" | "layout.actions.reset" | "shared.timePeriods.days" | "shared.timePeriods.days_plural" | "shared.timePeriods.hours" | "shared.timePeriods.hours_plural" | "shared.timePeriods.months" | "shared.timePeriods.months_plural" | "shared.timePeriods.today" | "shared.timePeriods.weeks" | "shared.timePeriods.weeks_plural" | "timeline.loadMore" | "trigger.customRange" | "trigger.selectDateRange">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"dateTime.instant.now" | "input.combined" | "input.direction.last" | "input.direction.next" | "input.icon.tooltip.calendar" | "input.noOptions" | "input.placeholder.customRange.last" | "input.placeholder.customRange.next" | "input.today" | "input.unit.day" | "input.unit.days" | "input.unit.month" | "input.unit.months" | "input.unit.week" | "input.unit.weeks" | "layout.actions.apply" | "layout.actions.back" | "layout.actions.cancel" | "layout.actions.clear" | "layout.actions.reset" | "shared.timePeriods.days" | "shared.timePeriods.days_plural" | "shared.timePeriods.hours" | "shared.timePeriods.hours_plural" | "shared.timePeriods.months" | "shared.timePeriods.months_plural" | "shared.timePeriods.today" | "shared.timePeriods.weeks" | "shared.timePeriods.weeks_plural" | "timeline.loadMore" | "trigger.customRange" | "trigger.selectDateRange">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };

package/src/DayPicker/DayRangePickerPopover.d.ts

@@ -1,45 +0,0 @@
-import { ButtonVariant, CommonProps, PopoverPlacement, Size } from "@trackunit/react-components";
-import { ReactElement } from "react";
-import { Matcher } from "react-day-picker";
-import { IDateRange, ShowQuickOption } from "./DayRangePicker";
-import { TimeZone } from "./index";
-export interface DayRangePickerPopoverProps extends CommonProps {
-    interval: IDateRange;
-    showQuickOptions?: ShowQuickOption;
-    disabledDays?: Matcher | Array<Matcher>;
-    onRangeSelect: (range: IDateRange) => void;
-    placement?: PopoverPlacement;
-    variant?: Extract<ButtonVariant, "secondary">;
-    size?: Size;
-    fullwidth?: boolean;
-    /**
-     * Shown time ranges will take timezone into consideration
-     */
-    timezone?: TimeZone;
-    /** An element to use as the portal root for the popover component */
-    bindTo?: HTMLElement;
-    buttonContent: ReactElement;
-    max?: number;
-    disabled?: boolean;
-}
-/**
- * A popover to select a range of dates. Consider providing quick options.
- * quickOptions takes optional "includeExtraDay". This is because customers often want to see 8 days when selecting "week" so they can compare this monday to last weeks monday. Same goes for months. This option will not impact the label of the button.
- *
- * @param { DayRangePickerPopoverProps} props - The properties for the DayRangePickerPopover component.
- * @param props.interval initial date range
- * @param props.showQuickOptions display additional buttons for quick date range selection
- * @param props.disabledDays disable days from selecting possibility
- * @param props.className custom className to be added to the component
- * @param props.dataTestId id used for tests
- * @param props.onRangeSelect hook function to handle applied date range
- * @param props.variant popover button variant
- * @param props.size popover button size
- * @param props.placement popover button placement
- * @param props.timezone timezone for DayRangePicker
- * @param props.fullwidth popover button fill width
- * @param props.buttonContent popover button content
- * @param props.max The maximum amount of days that can be selected
- * @param props.disabled disabling popover button
- */
-export declare const DayRangePickerPopover: ({ interval, showQuickOptions, disabledDays, className, dataTestId, onRangeSelect, variant, size, placement, timezone, fullwidth, bindTo, buttonContent, max, disabled, }: DayRangePickerPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/src/DayPicker/DayRangePickerPopover.stories.d.ts

@@ -1,10 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { DayRangePickerPopover } from "./DayRangePickerPopover";
-type Story = StoryObj<typeof DayRangePickerPopover>;
-declare const meta: Meta<typeof DayRangePickerPopover>;
-export default meta;
-export declare const Default: Story;
-export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
-export declare const VariantWithMax: () => import("react/jsx-runtime").JSX.Element;
-export declare const VariantWithDisabledDays: () => import("react/jsx-runtime").JSX.Element;
-export declare const VariantWithQuickButtons: () => import("react/jsx-runtime").JSX.Element;