Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-day-picker

Package Overview
Dependencies
Maintainers
0
Versions
250
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-day-picker - npm Package Compare versions

Comparing version 9.0.6 to 9.0.7

9

dist/cjs/DayPicker.js

@@ -40,2 +40,3 @@ "use strict";

const defaultLabels = __importStar(require("./labels/index.js"));
const locales_js_1 = require("./lib/locales.js");
const useCalendar_js_1 = require("./useCalendar.js");

@@ -55,3 +56,3 @@ const useDayPicker_js_1 = require("./useDayPicker.js");

function DayPicker(props) {
const { components, formatters, labels, dateLib, classNames } = (0, react_1.useMemo)(() => ({
const { components, formatters, labels, dateLib, locale, classNames } = (0, react_1.useMemo)(() => ({
dateLib: (0, getDateLib_js_1.getDateLib)(props.dateLib),

@@ -61,2 +62,3 @@ components: (0, getComponents_js_1.getComponents)(props.components),

labels: { ...defaultLabels, ...props.labels },
locale: { ...locales_js_1.enUS, ...props.locale },
classNames: { ...(0, getDefaultClassNames_js_1.getDefaultClassNames)(), ...props.classNames }

@@ -68,5 +70,6 @@ }), [

props.formatters,
props.labels
props.labels,
props.locale
]);
const { captionLayout, firstWeekContainsDate, locale, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props;
const { captionLayout, firstWeekContainsDate, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props;
const formatOptions = {

@@ -73,0 +76,0 @@ locale,

@@ -12,1 +12,2 @@ export * from "./DayPicker.js";

export * from "./useDayPicker.js";
export { enUS as defaultLocale } from "./lib/locales.js";

@@ -17,2 +17,3 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultLocale = void 0;
__exportStar(require("./DayPicker.js"), exports);

@@ -29,2 +30,4 @@ __exportStar(require("./types/index.js"), exports);

__exportStar(require("./useDayPicker.js"), exports);
var locales_js_1 = require("./lib/locales.js");
Object.defineProperty(exports, "defaultLocale", { enumerable: true, get: function () { return locales_js_1.enUS; } });
//# sourceMappingURL=index.js.map

@@ -11,9 +11,3 @@ "use strict";

const [selected, setSelected] = react_1.default.useState(initiallySelected);
const { isSameDay, Date } = dateLib;
// Update the selected date if the required flag is set.
react_1.default.useEffect(() => {
if (required && selected === undefined) {
setSelected([new Date()]);
}
}, [required, selected, Date, mode]);
const { isSameDay } = dateLib;
// Update the selected date if the selected value from props changes.

@@ -20,0 +14,0 @@ react_1.default.useEffect(() => {

@@ -11,10 +11,4 @@ "use strict";

function useRange(props, dateLib) {
const { mode, disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;
const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;
const [selected, setSelected] = react_1.default.useState(initiallySelected);
// Update the selected date if the required flag is set.
react_1.default.useEffect(() => {
if (required && selected === undefined) {
setSelected({ from: undefined, to: undefined });
}
}, [required, selected, mode]);
// Update the selected date if the `selected` prop changes.

@@ -21,0 +15,0 @@ react_1.default.useEffect(() => {

@@ -9,11 +9,5 @@ "use strict";

function useSingle(props, dateLib) {
const { selected: initiallySelected, required, onSelect, mode } = props;
const { selected: initiallySelected, required, onSelect } = props;
const [selected, setSelected] = react_1.default.useState(initiallySelected);
const { isSameDay, Date, startOfDay } = dateLib;
// Update the selected date if the required flag is set.
react_1.default.useEffect(() => {
if (required && selected === undefined) {
setSelected(startOfDay(new Date()));
}
}, [required, selected, Date, startOfDay, mode]);
const { isSameDay } = dateLib;
// Update the selected date if the `selected` value changes.

@@ -20,0 +14,0 @@ react_1.default.useEffect(() => {

@@ -15,4 +15,7 @@ import React from "react";

/**
* Props used for customization of the calendar, localization, and event
* handling.
* Props for customizing the calendar, handling localization, and managing
* events. These exclude the selection mode props.
*
* @group DayPicker
* @see https://daypicker.dev/api/interfaces/PropsBase
*/

@@ -311,8 +314,13 @@ export interface PropsBase {

/**
* The date-fns locale object used to localize dates.
* The locale object used to localize dates. Pass a locale from `date-fns` to
* localize the calendar.
*
* @defaultValue en-US
* @example
* import { es } from "date-fns/locale";
* <DayPicker locale={es} />
*
* @defaultValue enUS - The English locale default of `date-fns`.
* @see https://daypicker.dev/docs/localization
*/
locale?: Locale | undefined;
locale?: Partial<Locale> | undefined;
/**

@@ -441,3 +449,3 @@ * The index of the first day of the week (0 - Sunday). Overrides the locale's

/** The selected date. */
selected: Date;
selected: Date | undefined;
/** Event handler when a day is selected. */

@@ -468,3 +476,3 @@ onSelect?: (selected: Date, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;

/** The selected dates. */
selected: Date[];
selected: Date[] | undefined;
/** Event handler when days are selected. */

@@ -510,3 +518,3 @@ onSelect?: (selected: Date[], triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;

/** The selected range. */
selected: DateRange;
selected: DateRange | undefined;
/** Event handler when a range is selected. */

@@ -513,0 +521,0 @@ onSelect?: (selected: DateRange, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;

@@ -48,2 +48,2 @@ import type { CalendarWeek, CalendarDay, CalendarMonth } from "./classes/index.js";

/** @private */
export declare function useCalendar(props: DayPickerProps, dateLib: DateLib): Calendar;
export declare function useCalendar(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "fixedWeeks" | "ISOWeek" | "weekStartsOn" | "numberOfMonths" | "disableNavigation" | "onMonthChange" | "month" | "defaultMonth" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): Calendar;
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCalendar = useCalendar;
const react_1 = require("react");
const getDates_js_1 = require("./helpers/getDates.js");

@@ -13,5 +14,5 @@ const getDays_js_1 = require("./helpers/getDays.js");

const getWeeks_js_1 = require("./helpers/getWeeks.js");
const useControlledValue_js_1 = require("./helpers/useControlledValue.js");
/** @private */
function useCalendar(props, dateLib) {
const { fromYear, toYear, startMonth, endMonth, today, numberOfMonths, month, defaultMonth } = props;
const [navStart, navEnd] = (0, getNavMonth_js_1.getNavMonths)(props, dateLib);

@@ -21,3 +22,26 @@ const { startOfMonth, endOfMonth } = dateLib;

// The first month displayed in the calendar
const [firstMonth, setFirstMonth] = (0, useControlledValue_js_1.useControlledValue)(initialDisplayMonth, props.month ? startOfMonth(props.month) : undefined);
const [firstMonth, setFirstMonth] = (0, react_1.useState)(initialDisplayMonth);
(0, react_1.useEffect)(() => {
const initialDisplayMonth = (0, getInitialMonth_js_1.getInitialMonth)({
fromYear,
toYear,
startMonth,
endMonth,
month,
defaultMonth,
today,
numberOfMonths
}, dateLib);
setFirstMonth(initialDisplayMonth);
}, [
dateLib,
defaultMonth,
endMonth,
fromYear,
month,
numberOfMonths,
startMonth,
toYear,
today
]);
/** The months displayed in the calendar. */

@@ -24,0 +48,0 @@ const displayMonths = (0, getDisplayMonths_js_1.getDisplayMonths)(firstMonth, navEnd, props, dateLib);

@@ -6,2 +6,3 @@ import { CalendarDay } from "./classes/CalendarDay.js";

import { Modifiers } from "./types/shared.js";
/** @private */
export declare const dayPickerContext: import("react").Context<DayPickerContext<DayPickerProps> | undefined>;

@@ -8,0 +9,0 @@ export type DayPickerContext<T extends DayPickerProps> = {

@@ -6,3 +6,3 @@ "use strict";

const react_1 = require("react");
// Create a context with a default value
/** @private */
exports.dayPickerContext = (0, react_1.createContext)(undefined);

@@ -9,0 +9,0 @@ /**

@@ -14,2 +14,3 @@ import React, { useCallback, useMemo } from "react";

import * as defaultLabels from "./labels/index.js";
import { enUS } from "./lib/locales.js";
import { useCalendar } from "./useCalendar.js";

@@ -29,3 +30,3 @@ import { dayPickerContext } from "./useDayPicker.js";

export function DayPicker(props) {
const { components, formatters, labels, dateLib, classNames } = useMemo(() => ({
const { components, formatters, labels, dateLib, locale, classNames } = useMemo(() => ({
dateLib: getDateLib(props.dateLib),

@@ -35,2 +36,3 @@ components: getComponents(props.components),

labels: { ...defaultLabels, ...props.labels },
locale: { ...enUS, ...props.locale },
classNames: { ...getDefaultClassNames(), ...props.classNames }

@@ -42,5 +44,6 @@ }), [

props.formatters,
props.labels
props.labels,
props.locale
]);
const { captionLayout, firstWeekContainsDate, locale, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props;
const { captionLayout, firstWeekContainsDate, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props;
const formatOptions = {

@@ -47,0 +50,0 @@ locale,

@@ -12,1 +12,2 @@ export * from "./DayPicker.js";

export * from "./useDayPicker.js";
export { enUS as defaultLocale } from "./lib/locales.js";

@@ -12,2 +12,3 @@ export * from "./DayPicker.js";

export * from "./useDayPicker.js";
export { enUS as defaultLocale } from "./lib/locales.js";
//# sourceMappingURL=index.js.map

@@ -5,9 +5,3 @@ import React from "react";

const [selected, setSelected] = React.useState(initiallySelected);
const { isSameDay, Date } = dateLib;
// Update the selected date if the required flag is set.
React.useEffect(() => {
if (required && selected === undefined) {
setSelected([new Date()]);
}
}, [required, selected, Date, mode]);
const { isSameDay } = dateLib;
// Update the selected date if the selected value from props changes.

@@ -14,0 +8,0 @@ React.useEffect(() => {

@@ -5,10 +5,4 @@ import React from "react";

export function useRange(props, dateLib) {
const { mode, disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;
const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;
const [selected, setSelected] = React.useState(initiallySelected);
// Update the selected date if the required flag is set.
React.useEffect(() => {
if (required && selected === undefined) {
setSelected({ from: undefined, to: undefined });
}
}, [required, selected, mode]);
// Update the selected date if the `selected` prop changes.

@@ -15,0 +9,0 @@ React.useEffect(() => {

import React from "react";
export function useSingle(props, dateLib) {
const { selected: initiallySelected, required, onSelect, mode } = props;
const { selected: initiallySelected, required, onSelect } = props;
const [selected, setSelected] = React.useState(initiallySelected);
const { isSameDay, Date, startOfDay } = dateLib;
// Update the selected date if the required flag is set.
React.useEffect(() => {
if (required && selected === undefined) {
setSelected(startOfDay(new Date()));
}
}, [required, selected, Date, startOfDay, mode]);
const { isSameDay } = dateLib;
// Update the selected date if the `selected` value changes.

@@ -13,0 +7,0 @@ React.useEffect(() => {

@@ -15,4 +15,7 @@ import React from "react";

/**
* Props used for customization of the calendar, localization, and event
* handling.
* Props for customizing the calendar, handling localization, and managing
* events. These exclude the selection mode props.
*
* @group DayPicker
* @see https://daypicker.dev/api/interfaces/PropsBase
*/

@@ -311,8 +314,13 @@ export interface PropsBase {

/**
* The date-fns locale object used to localize dates.
* The locale object used to localize dates. Pass a locale from `date-fns` to
* localize the calendar.
*
* @defaultValue en-US
* @example
* import { es } from "date-fns/locale";
* <DayPicker locale={es} />
*
* @defaultValue enUS - The English locale default of `date-fns`.
* @see https://daypicker.dev/docs/localization
*/
locale?: Locale | undefined;
locale?: Partial<Locale> | undefined;
/**

@@ -441,3 +449,3 @@ * The index of the first day of the week (0 - Sunday). Overrides the locale's

/** The selected date. */
selected: Date;
selected: Date | undefined;
/** Event handler when a day is selected. */

@@ -468,3 +476,3 @@ onSelect?: (selected: Date, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;

/** The selected dates. */
selected: Date[];
selected: Date[] | undefined;
/** Event handler when days are selected. */

@@ -510,3 +518,3 @@ onSelect?: (selected: Date[], triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;

/** The selected range. */
selected: DateRange;
selected: DateRange | undefined;
/** Event handler when a range is selected. */

@@ -513,0 +521,0 @@ onSelect?: (selected: DateRange, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;

@@ -48,2 +48,2 @@ import type { CalendarWeek, CalendarDay, CalendarMonth } from "./classes/index.js";

/** @private */
export declare function useCalendar(props: DayPickerProps, dateLib: DateLib): Calendar;
export declare function useCalendar(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "fixedWeeks" | "ISOWeek" | "weekStartsOn" | "numberOfMonths" | "disableNavigation" | "onMonthChange" | "month" | "defaultMonth" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): Calendar;

@@ -0,1 +1,2 @@

import { useEffect, useState } from "react";
import { getDates } from "./helpers/getDates.js";

@@ -10,5 +11,5 @@ import { getDays } from "./helpers/getDays.js";

import { getWeeks } from "./helpers/getWeeks.js";
import { useControlledValue } from "./helpers/useControlledValue.js";
/** @private */
export function useCalendar(props, dateLib) {
const { fromYear, toYear, startMonth, endMonth, today, numberOfMonths, month, defaultMonth } = props;
const [navStart, navEnd] = getNavMonths(props, dateLib);

@@ -18,3 +19,26 @@ const { startOfMonth, endOfMonth } = dateLib;

// The first month displayed in the calendar
const [firstMonth, setFirstMonth] = useControlledValue(initialDisplayMonth, props.month ? startOfMonth(props.month) : undefined);
const [firstMonth, setFirstMonth] = useState(initialDisplayMonth);
useEffect(() => {
const initialDisplayMonth = getInitialMonth({
fromYear,
toYear,
startMonth,
endMonth,
month,
defaultMonth,
today,
numberOfMonths
}, dateLib);
setFirstMonth(initialDisplayMonth);
}, [
dateLib,
defaultMonth,
endMonth,
fromYear,
month,
numberOfMonths,
startMonth,
toYear,
today
]);
/** The months displayed in the calendar. */

@@ -21,0 +45,0 @@ const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);

@@ -6,2 +6,3 @@ import { CalendarDay } from "./classes/CalendarDay.js";

import { Modifiers } from "./types/shared.js";
/** @private */
export declare const dayPickerContext: import("react").Context<DayPickerContext<DayPickerProps> | undefined>;

@@ -8,0 +9,0 @@ export type DayPickerContext<T extends DayPickerProps> = {

import { createContext, useContext } from "react";
// Create a context with a default value
/** @private */
export const dayPickerContext = createContext(undefined);

@@ -4,0 +4,0 @@ /**

{
"name": "react-day-picker",
"version": "9.0.6",
"version": "9.0.7",
"description": "Customizable Date Picker for React",

@@ -144,3 +144,3 @@ "author": "Giampaolo Bellavite <io@gpbl.dev>",

"@types/jest": "^29.5.12",
"@types/node": "^22.0.0",
"@types/node": "^22.1.0",
"@types/react": "^18.3.3",

@@ -156,3 +156,3 @@ "@types/react-dom": "^18.3.0",

"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jest": "^28.6.0",
"eslint-plugin-jest": "^28.7.0",
"eslint-plugin-prettier": "^5.2.1",

@@ -171,3 +171,3 @@ "eslint-plugin-react": "^7.35.0",

"react-dom": "^18.3.1",
"ts-jest": "^29.2.3",
"ts-jest": "^29.2.4",
"ts-node": "^10.9.2",

@@ -174,0 +174,0 @@ "tslib": "^2.6.3",

@@ -16,1 +16,3 @@ export * from "./DayPicker.js";

export * from "./useDayPicker.js";
export { enUS as defaultLocale } from "./lib/locales.js";

@@ -40,4 +40,7 @@ import React from "react";

/**
* Props used for customization of the calendar, localization, and event
* handling.
* Props for customizing the calendar, handling localization, and managing
* events. These exclude the selection mode props.
*
* @group DayPicker
* @see https://daypicker.dev/api/interfaces/PropsBase
*/

@@ -339,8 +342,13 @@ export interface PropsBase {

/**
* The date-fns locale object used to localize dates.
* The locale object used to localize dates. Pass a locale from `date-fns` to
* localize the calendar.
*
* @defaultValue en-US
* @example
* import { es } from "date-fns/locale";
* <DayPicker locale={es} />
*
* @defaultValue enUS - The English locale default of `date-fns`.
* @see https://daypicker.dev/docs/localization
*/
locale?: Locale | undefined;
locale?: Partial<Locale> | undefined;
/**

@@ -475,3 +483,3 @@ * The index of the first day of the week (0 - Sunday). Overrides the locale's

/** The selected date. */
selected: Date;
selected: Date | undefined;
/** Event handler when a day is selected. */

@@ -512,3 +520,3 @@ onSelect?: (

/** The selected dates. */
selected: Date[];
selected: Date[] | undefined;
/** Event handler when days are selected. */

@@ -564,3 +572,3 @@ onSelect?: (

/** The selected range. */
selected: DateRange;
selected: DateRange | undefined;
/** Event handler when a range is selected. */

@@ -567,0 +575,0 @@ onSelect?: (

@@ -0,1 +1,3 @@

import { useEffect, useState } from "react";
import type {

@@ -15,3 +17,2 @@ CalendarWeek,

import { getWeeks } from "./helpers/getWeeks.js";
import { useControlledValue } from "./helpers/useControlledValue.js";
import type { DayPickerProps } from "./types/props.js";

@@ -68,3 +69,35 @@ import type { DateLib } from "./types/shared.js";

/** @private */
export function useCalendar(props: DayPickerProps, dateLib: DateLib): Calendar {
export function useCalendar(
props: Pick<
DayPickerProps,
| "captionLayout"
| "endMonth"
| "startMonth"
| "today"
| "fixedWeeks"
| "ISOWeek"
| "weekStartsOn"
| "numberOfMonths"
| "disableNavigation"
| "onMonthChange"
| "month"
| "defaultMonth"
// Deprecated:
| "fromMonth"
| "fromYear"
| "toMonth"
| "toYear"
>,
dateLib: DateLib
): Calendar {
const {
fromYear,
toYear,
startMonth,
endMonth,
today,
numberOfMonths,
month,
defaultMonth
} = props;
const [navStart, navEnd] = getNavMonths(props, dateLib);

@@ -77,7 +110,31 @@

// The first month displayed in the calendar
const [firstMonth, setFirstMonth] = useControlledValue(
initialDisplayMonth,
props.month ? startOfMonth(props.month) : undefined
);
const [firstMonth, setFirstMonth] = useState(initialDisplayMonth);
useEffect(() => {
const initialDisplayMonth = getInitialMonth(
{
fromYear,
toYear,
startMonth,
endMonth,
month,
defaultMonth,
today,
numberOfMonths
},
dateLib
);
setFirstMonth(initialDisplayMonth);
}, [
dateLib,
defaultMonth,
endMonth,
fromYear,
month,
numberOfMonths,
startMonth,
toYear,
today
]);
/** The months displayed in the calendar. */

@@ -84,0 +141,0 @@ const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);

@@ -9,3 +9,3 @@ import { createContext, useContext } from "react";

// Create a context with a default value
/** @private */
export const dayPickerContext = createContext<

@@ -12,0 +12,0 @@ DayPickerContext<DayPickerProps> | undefined

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc