react-day-picker - npm Package Compare versions

Comparing version 9.0.3 to 9.0.4

dist/cjs/DayPicker.js

@@ -67,3 +67,3 @@ "use strict";
     ]);
-    const { captionLayout, firstWeekContainsDate, locale, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props;
+    const { captionLayout, firstWeekContainsDate, locale, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props;
     const formatOptions = {
@@ -132,2 +132,8 @@ locale,
     }, [moveFocus, onDayKeyDown, props.dir]);
+    const handleDayMouseEnter = (0, react_1.useCallback)((day, modifiers) => (e) => {
+        onDayMouseEnter?.(day.date, modifiers, e);
+    }, [onDayMouseEnter]);
+    const handleDayMouseLeave = (0, react_1.useCallback)((day, modifiers) => (e) => {
+        onDayMouseLeave?.(day.date, modifiers, e);
+    }, [onDayMouseLeave]);
     const { className, style } = (0, react_1.useMemo)(() => ({
@@ -214,3 +220,3 @@ className: [classNames[UI_js_1.UI.Root], props.className]
                                         };
-                                        return (react_1.default.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: modifiers, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": modifiers.hidden || undefined, "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, ...dataAttributes }, isInteractive ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], day: day, modifiers: modifiers, disabled: modifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, labelOptions, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers) }, formatDay(date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib))));
+                                        return (react_1.default.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: modifiers, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": modifiers.hidden || undefined, "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, ...dataAttributes }, isInteractive ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], day: day, modifiers: modifiers, disabled: modifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, labelOptions, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib))));
                                     })));
@@ -217,0 +223,0 @@ })))));

dist/cjs/types/props.d.ts

@@ -377,2 +377,6 @@ import React from "react";
     onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
+    /** Event handler when the mouse enters a day. */
+    onDayMouseEnter?: DayEventHandler<React.MouseEvent>;
+    /** Event handler when the mouse leaves a day. */
+    onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
     /**
@@ -379,0 +383,0 @@ * Replace the default date library with a custom one.

dist/cjs/useCalendar.js

@@ -17,3 +17,3 @@ "use strict";
     const [navStart, navEnd] = (0, getNavMonth_js_1.getNavMonths)(props, dateLib);
-    const { startOfMonth } = dateLib;
+    const { startOfMonth, endOfMonth } = dateLib;
     const initialDisplayMonth = (0, getInitialMonth_js_1.getInitialMonth)(props, dateLib);
@@ -25,3 +25,3 @@ // The first month displayed in the calendar
     /** The dates displayed in the calendar. */
-    const dates = (0, getDates_js_1.getDates)(displayMonths, props.endMonth, props, dateLib);
+    const dates = (0, getDates_js_1.getDates)(displayMonths, props.endMonth ? endOfMonth(props.endMonth) : undefined, props, dateLib);
     /** The Months displayed in the calendar. */
@@ -28,0 +28,0 @@ const months = (0, getMonths_js_1.getMonths)(displayMonths, dates, props, dateLib);

dist/esm/DayPicker.js

@@ -41,3 +41,3 @@ import React, { useCallback, useMemo } from "react";
     ]);
-    const { captionLayout, firstWeekContainsDate, locale, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props;
+    const { captionLayout, firstWeekContainsDate, locale, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props;
     const formatOptions = {
@@ -106,2 +106,8 @@ locale,
     }, [moveFocus, onDayKeyDown, props.dir]);
+    const handleDayMouseEnter = useCallback((day, modifiers) => (e) => {
+        onDayMouseEnter?.(day.date, modifiers, e);
+    }, [onDayMouseEnter]);
+    const handleDayMouseLeave = useCallback((day, modifiers) => (e) => {
+        onDayMouseLeave?.(day.date, modifiers, e);
+    }, [onDayMouseLeave]);
     const { className, style } = useMemo(() => ({
@@ -188,3 +194,3 @@ className: [classNames[UI.Root], props.className]
                                         };
-                                        return (React.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: modifiers, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": modifiers.hidden || undefined, "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, ...dataAttributes }, isInteractive ? (React.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], day: day, modifiers: modifiers, disabled: modifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, labelOptions, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers) }, formatDay(date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib))));
+                                        return (React.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: modifiers, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": modifiers.hidden || undefined, "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, ...dataAttributes }, isInteractive ? (React.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], day: day, modifiers: modifiers, disabled: modifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, labelOptions, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib))));
                                     })));
@@ -191,0 +197,0 @@ })))));

dist/esm/types/props.d.ts

@@ -377,2 +377,6 @@ import React from "react";
     onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
+    /** Event handler when the mouse enters a day. */
+    onDayMouseEnter?: DayEventHandler<React.MouseEvent>;
+    /** Event handler when the mouse leaves a day. */
+    onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
     /**
@@ -379,0 +383,0 @@ * Replace the default date library with a custom one.

dist/esm/useCalendar.js

@@ -14,3 +14,3 @@ import { getDates } from "./helpers/getDates.js";
     const [navStart, navEnd] = getNavMonths(props, dateLib);
-    const { startOfMonth } = dateLib;
+    const { startOfMonth, endOfMonth } = dateLib;
     const initialDisplayMonth = getInitialMonth(props, dateLib);
@@ -22,3 +22,3 @@ // The first month displayed in the calendar
     /** The dates displayed in the calendar. */
-    const dates = getDates(displayMonths, props.endMonth, props, dateLib);
+    const dates = getDates(displayMonths, props.endMonth ? endOfMonth(props.endMonth) : undefined, props, dateLib);
     /** The Months displayed in the calendar. */
@@ -25,0 +25,0 @@ const months = getMonths(displayMonths, dates, props, dateLib);

package.json

 {
   "name": "react-day-picker",
-  "version": "9.0.3",
+  "version": "9.0.4",
   "description": "Customizable Date Picker for React",
@@ -5,0 +5,0 @@ "author": "Giampaolo Bellavite <[e-mail]>",

src/types/props.ts

@@ -409,2 +409,6 @@ import React from "react";
   onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
+  /** Event handler when the mouse enters a day. */
+  onDayMouseEnter?: DayEventHandler<React.MouseEvent>;
+  /** Event handler when the mouse leaves a day. */
+  onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
 
@@ -411,0 +415,0 @@ /**

src/useCalendar.ts

@@ -70,3 +70,3 @@ import type {
 
-  const { startOfMonth } = dateLib;
+  const { startOfMonth, endOfMonth } = dateLib;
 
@@ -85,3 +85,8 @@ const initialDisplayMonth = getInitialMonth(props, dateLib);
   /** The dates displayed in the calendar. */
-  const dates = getDates(displayMonths, props.endMonth, props, dateLib);
+  const dates = getDates(
+    displayMonths,
+    props.endMonth ? endOfMonth(props.endMonth) : undefined,
+    props,
+    dateLib
+  );
 
@@ -88,0 +93,0 @@ /** The Months displayed in the calendar. */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1015626

increased by0.79%

Number of package files

888

increased by0.11%

Lines of code

19806

increased by0.59%

No dependency changes