@trackunit/react-date-and-time-components 1.26.13 → 1.26.16

package/index.cjs.js

@@ -415,37 +415,70 @@ const cvaTriggerButton = cssClassVarianceUtilities.cvaMerge(["justify-start"], {
  */
 const useCalculateCustomDateRangeDisabledDays = () => {
     const { subtract, add, nowDate } = reactDateAndTimeHooks.useDateAndTime();
-    return react.useCallback(({ maxDaysInRange, allowedDirection, }) => {
-        if (!allowedDirection) {
-            return undefined;
+    const calculateDateRange = useCalculateDateRange();
+    const matchesDisabledDays = react.useCallback((matcher, dateToCheck) => {
+        if (typeof matcher === "function") {
+            return matcher(dateToCheck);
         }
-        if (!sharedUtils.nonNullable(maxDaysInRange)) {
-            if (allowedDirection === "last") {
+        if (Array.isArray(matcher)) {
+            return matcher.some(disabledDate => disabledDate.toDateString() === dateToCheck.toDateString());
+        }
+        if ("furtherBackThanDays" in matcher) {
+            const dateRange = calculateDateRange({
+                direction: "last",
+                count: matcher.furtherBackThanDays,
+                unit: "day",
+            });
+            if (dateRange.start && dateRange.end) {
+                return dateToCheck < dateRange.start || dateToCheck > dateRange.end;
+            }
+            return false;
+        }
+        if (matcher.before && dateToCheck.getTime() <= subtract(matcher.before, 1, "days").getTime()) {
+            return true;
+        }
+        if (matcher.after && dateToCheck.getTime() >= matcher.after.getTime()) {
+            return true;
+        }
+        return false;
+    }, [calculateDateRange, subtract]);
+    return react.useCallback(({ maxDaysInRange, allowedDirection, disabledDays, }) => {
+        const calculatedDisabledDays = (() => {
+            if (!allowedDirection) {
+                return undefined;
+            }
+            if (!sharedUtils.nonNullable(maxDaysInRange)) {
+                if (allowedDirection === "last") {
+                    return {
+                        after: nowDate,
+                    };
+                }
                 return {
-                    after: nowDate,
+                    before: nowDate,
                 };
             }
-            else {
+            const adjustedMaxDaysInRangeCount = maxDaysInRange - 1;
+            if (allowedDirection === "last") {
                 return {
-                    before: nowDate,
+                    before: subtract(nowDate, adjustedMaxDaysInRangeCount, "days"),
+                    after: nowDate,
                 };
             }
-        }
-        // Subtract 1 from maxDaysInRange since the range is inclusive of both start and end dates
-        const adjustedMaxDaysInRangeCount = maxDaysInRange - 1;
-        if (allowedDirection === "last") {
-            return {
-                before: subtract(nowDate, adjustedMaxDaysInRangeCount, "days"),
-                after: nowDate,
-            };
-        }
-        else {
             return {
                 before: nowDate,
                 after: add(nowDate, adjustedMaxDaysInRangeCount, "days"),
             };
+        })();
+        if (!calculatedDisabledDays) {
+            return disabledDays;
+        }
+        if (!disabledDays) {
+            return calculatedDisabledDays;
         }
-    }, [nowDate, subtract, add]);
+        return date => {
+            return matchesDisabledDays(calculatedDisabledDays, date) || matchesDisabledDays(disabledDays, date);
+        };
+    }, [nowDate, subtract, add, matchesDisabledDays]);
 };
 
 /**
@@ -655,14 +688,14 @@ const isTemporalDirection = (direction) => {
  * ```
  * @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
  */
-const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
+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", }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
     const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
     const calculateDateRange = useCalculateDateRange();
     const calculateCustomDateRangeDisabledDays = useCalculateCustomDateRangeDisabledDays();
-    const customDateRangeDisabledDays = react.useMemo(() => calculateCustomDateRangeDisabledDays({ maxDaysInRange, allowedDirection }), [calculateCustomDateRangeDisabledDays, maxDaysInRange, allowedDirection]);
+    const customDateRangeDisabledDays = react.useMemo(() => calculateCustomDateRangeDisabledDays({ maxDaysInRange, allowedDirection, disabledDays }), [calculateCustomDateRangeDisabledDays, maxDaysInRange, allowedDirection, disabledDays]);
     const defaultTemporalPeriods = react.useMemo(() => {
         if (initialDateRangeOptions) {
             return filterTemporalPeriodsInRange({ temporalPeriods: initialDateRangeOptions, maxDaysInRange });

package/index.esm.js

@@ -413,37 +413,70 @@ const cvaTriggerButton = cvaMerge(["justify-start"], {
  */
 const useCalculateCustomDateRangeDisabledDays = () => {
     const { subtract, add, nowDate } = useDateAndTime();
-    return useCallback(({ maxDaysInRange, allowedDirection, }) => {
-        if (!allowedDirection) {
-            return undefined;
+    const calculateDateRange = useCalculateDateRange();
+    const matchesDisabledDays = useCallback((matcher, dateToCheck) => {
+        if (typeof matcher === "function") {
+            return matcher(dateToCheck);
         }
-        if (!nonNullable(maxDaysInRange)) {
-            if (allowedDirection === "last") {
+        if (Array.isArray(matcher)) {
+            return matcher.some(disabledDate => disabledDate.toDateString() === dateToCheck.toDateString());
+        }
+        if ("furtherBackThanDays" in matcher) {
+            const dateRange = calculateDateRange({
+                direction: "last",
+                count: matcher.furtherBackThanDays,
+                unit: "day",
+            });
+            if (dateRange.start && dateRange.end) {
+                return dateToCheck < dateRange.start || dateToCheck > dateRange.end;
+            }
+            return false;
+        }
+        if (matcher.before && dateToCheck.getTime() <= subtract(matcher.before, 1, "days").getTime()) {
+            return true;
+        }
+        if (matcher.after && dateToCheck.getTime() >= matcher.after.getTime()) {
+            return true;
+        }
+        return false;
+    }, [calculateDateRange, subtract]);
+    return useCallback(({ maxDaysInRange, allowedDirection, disabledDays, }) => {
+        const calculatedDisabledDays = (() => {
+            if (!allowedDirection) {
+                return undefined;
+            }
+            if (!nonNullable(maxDaysInRange)) {
+                if (allowedDirection === "last") {
+                    return {
+                        after: nowDate,
+                    };
+                }
                 return {
-                    after: nowDate,
+                    before: nowDate,
                 };
             }
-            else {
+            const adjustedMaxDaysInRangeCount = maxDaysInRange - 1;
+            if (allowedDirection === "last") {
                 return {
-                    before: nowDate,
+                    before: subtract(nowDate, adjustedMaxDaysInRangeCount, "days"),
+                    after: nowDate,
                 };
             }
-        }
-        // Subtract 1 from maxDaysInRange since the range is inclusive of both start and end dates
-        const adjustedMaxDaysInRangeCount = maxDaysInRange - 1;
-        if (allowedDirection === "last") {
-            return {
-                before: subtract(nowDate, adjustedMaxDaysInRangeCount, "days"),
-                after: nowDate,
-            };
-        }
-        else {
             return {
                 before: nowDate,
                 after: add(nowDate, adjustedMaxDaysInRangeCount, "days"),
             };
+        })();
+        if (!calculatedDisabledDays) {
+            return disabledDays;
+        }
+        if (!disabledDays) {
+            return calculatedDisabledDays;
         }
-    }, [nowDate, subtract, add]);
+        return date => {
+            return matchesDisabledDays(calculatedDisabledDays, date) || matchesDisabledDays(disabledDays, date);
+        };
+    }, [nowDate, subtract, add, matchesDisabledDays]);
 };
 
 /**
@@ -653,14 +686,14 @@ const isTemporalDirection = (direction) => {
  * ```
  * @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
  */
-const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
+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", }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
     const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
     const calculateDateRange = useCalculateDateRange();
     const calculateCustomDateRangeDisabledDays = useCalculateCustomDateRangeDisabledDays();
-    const customDateRangeDisabledDays = useMemo(() => calculateCustomDateRangeDisabledDays({ maxDaysInRange, allowedDirection }), [calculateCustomDateRangeDisabledDays, maxDaysInRange, allowedDirection]);
+    const customDateRangeDisabledDays = useMemo(() => calculateCustomDateRangeDisabledDays({ maxDaysInRange, allowedDirection, disabledDays }), [calculateCustomDateRangeDisabledDays, maxDaysInRange, allowedDirection, disabledDays]);
     const defaultTemporalPeriods = useMemo(() => {
         if (initialDateRangeOptions) {
             return filterTemporalPeriodsInRange({ temporalPeriods: initialDateRangeOptions, maxDaysInRange });

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.26.13",
+  "version": "1.26.16",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "1.23.8",
-    "@trackunit/date-and-time-utils": "1.12.6",
-    "@trackunit/react-date-and-time-hooks": "1.23.9",
-    "@trackunit/css-class-variance-utilities": "1.12.6",
-    "@trackunit/ui-icons": "1.12.7",
-    "@trackunit/shared-utils": "1.14.7",
-    "@trackunit/i18n-library-translation": "1.20.9",
-    "@trackunit/react-form-components": "1.24.13",
+    "@trackunit/react-components": "1.23.10",
+    "@trackunit/date-and-time-utils": "1.12.7",
+    "@trackunit/react-date-and-time-hooks": "1.23.11",
+    "@trackunit/css-class-variance-utilities": "1.12.7",
+    "@trackunit/ui-icons": "1.12.8",
+    "@trackunit/shared-utils": "1.14.8",
+    "@trackunit/i18n-library-translation": "1.20.11",
+    "@trackunit/react-form-components": "1.24.15",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/DayRangeSelect/DayRangeSelect.d.ts

@@ -43,6 +43,10 @@ export type DayRangeSelectProps = CommonProps & {
      * The maximum amount of days that can be selected
      */
     maxDaysInRange?: number;
+    /**
+     * Define any days which may not be selected in the custom date range picker.
+     */
+    disabledDays?: DayRangePickerProps["disabledDays"];
     /**
      * The size of the button.
      */
@@ -88,4 +92,4 @@ export type DayRangeSelectProps = CommonProps & {
  * ```
  * @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
  */
-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;
+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/src/DayRangeSelect/hooks/useCalculateCustomDateRangeDisabledDays/useCalculateCustomDateRangeDisabledDays.d.ts

@@ -3,9 +3,10 @@ import { TemporalDirection } from "../../types";
 export type CalculateCustomDateRangeDisabledDaysProps = {
     maxDaysInRange: number | undefined;
     allowedDirection: TemporalDirection | undefined;
+    disabledDays?: DayRangePickerProps["disabledDays"];
 };
 /**
  * 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;
+export declare const useCalculateCustomDateRangeDisabledDays: () => ({ maxDaysInRange, allowedDirection, disabledDays, }: CalculateCustomDateRangeDisabledDaysProps) => DayRangePickerProps["disabledDays"] | undefined;