rsuite 6.0.0-canary-20250827 → 6.0.0-canary-20250904

package/esm/Calendar/CalendarBody.js

@@ -33,7 +33,10 @@ const CalendarBody = forwardRef((props, ref) => {
     ref: ref,
     className: classes
   }), /*#__PURE__*/React.createElement(Grid, {
-    rows: getWeekStartDates(thisMonthDate, {
+    rows: getWeekStartDates({
+      year: date.getFullYear(),
+      month: date.getMonth() + 1
+    }, {
       weekStart,
       locale: locale === null || locale === void 0 ? void 0 : locale.dateLocale
     }),

package/esm/Calendar/CalendarContainer.js

@@ -9,7 +9,7 @@ import CalendarBody from "./CalendarBody.js";
 import CalendarHeader from "./CalendarHeader.js";
 import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { startOfToday, disableTime, isSameMonth, calendarOnlyProps, omitHideDisabledProps, DateMode, useDateMode, isValid } from "../internals/utils/date/index.js";
+import { startOfToday, disableTime, calendarOnlyProps, omitHideDisabledProps, DateMode, useDateMode, isValid } from "../internals/utils/date/index.js";
 import { CalendarProvider } from "./CalendarProvider.js";
 import { useCalendarState, CalendarState } from "./hooks/index.js";
 const CalendarContainer = forwardRef((props, ref) => {
@@ -82,7 +82,6 @@ const CalendarContainer = forwardRef((props, ref) => {
   } = useDateMode(format);
   const timeMode = calendarState === CalendarState.TIME || mode === DateMode.Time;
   const monthMode = calendarState === CalendarState.MONTH || mode === DateMode.Month;
-  const inSameThisMonthDate = date => isSameMonth(calendarDate, date);
   const calendarClasses = merge(className, withPrefix({
     'time-view': timeMode,
     'month-view': monthMode,
@@ -108,7 +107,6 @@ const CalendarContainer = forwardRef((props, ref) => {
     monthDropdownProps,
     cellClassName,
     disabledDate: isDateDisabled,
-    inSameMonth: inSameThisMonthDate,
     onChangeMonth: handleChangeMonth,
     onChangeTime,
     onMouseMove,

package/esm/Calendar/CalendarProvider.d.ts

@@ -55,12 +55,6 @@ export interface CalendarInnerContextValue {
      * @returns True if the date is disabled, false otherwise.
      */
     disabledDate?: (date: Date, selectRangeValue?: Date[], type?: string) => boolean;
-    /**
-     * A function that determines if a date is in the same month as the current date in the calendar.
-     * @param date - The date to check.
-     * @returns True if the date is in the same month, false otherwise.
-     */
-    inSameMonth?: (date: Date) => boolean;
     /**
      * A callback function that is called when the month is changed in the calendar.
      * @param nextPageDate - The next page date.

package/esm/Calendar/Grid/Grid.d.ts

@@ -1,6 +1,7 @@
 import { WithAsProps } from '../../internals/types';
+import type { PlainDate } from '../../internals/utils/date';
 export interface GridProps extends WithAsProps {
-    rows: any[];
+    rows: readonly PlainDate[];
 }
 declare const Grid: import("../../internals/types").InternalRefForwardingComponent<"div", GridProps, never> & Record<string, never>;
 export default Grid;

package/esm/Calendar/Grid/Grid.js

@@ -29,9 +29,9 @@ const Grid = forwardRef((props, ref) => {
   }, rest, {
     ref: ref,
     className: classes
-  }), /*#__PURE__*/React.createElement(GridHeaderRow, null), rows.map((week, index) => /*#__PURE__*/React.createElement(GridRow, {
+  }), /*#__PURE__*/React.createElement(GridHeaderRow, null), rows.map((rowStartingDate, index) => /*#__PURE__*/React.createElement(GridRow, {
     key: index,
-    weekendDate: week,
+    startingDate: rowStartingDate,
     rowIndex: index + 1
   })));
 });

package/esm/Calendar/Grid/GridRow.d.ts

@@ -1,7 +1,13 @@
+import { type PlainDate } from '../../internals/utils/date';
 import { WithAsProps } from '../../internals/types';
+/**
+ * A row in the calendar month view grid, i.e. a week of days.
+ */
 export interface GridRowProps extends WithAsProps {
-    /** The weekend: Sunday */
-    weekendDate?: Date;
+    /**
+     * The starting day of the row of dates.
+     */
+    startingDate: PlainDate;
     /** The index of the row */
     rowIndex?: number;
 }

package/esm/Calendar/Grid/GridRow.js

@@ -3,17 +3,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback } from 'react';
 import GridCell from "./GridCell.js";
 import { forwardRef } from "../../internals/utils/index.js";
-import { isSameDay, addDays, isBefore, isAfter, format } from "../../internals/utils/date/index.js";
+import { format } from "../../internals/utils/date/index.js";
 import { DATERANGE_DISABLED_TARGET } from "../../internals/constants/index.js";
 import { useStyles } from "../../internals/hooks/index.js";
 import { useCalendar } from "../hooks/index.js";
+import { addDays, compare, isSameDay } from "../../internals/utils/date/plainDate.js";
+
+/**
+ * A row in the calendar month view grid, i.e. a week of days.
+ */
+
 const GridRow = forwardRef((props, ref) => {
   var _locale$dateLocale$op, _locale$dateLocale;
   const {
     as: Component = 'div',
     className,
     classPrefix = 'calendar-table',
-    weekendDate = new Date(),
+    startingDate,
     rowIndex,
     ...rest
   } = props;
@@ -25,7 +31,6 @@ const GridRow = forwardRef((props, ref) => {
     weekStart,
     showWeekNumbers,
     locale,
-    inSameMonth,
     disabledDate,
     onSelect
   } = useCalendar();
@@ -41,53 +46,84 @@ const GridRow = forwardRef((props, ref) => {
   }, [onSelect]);
   const renderDays = () => {
     const days = [];
-    const [selectedStartDate, selectedEndDate] = dateRange || [];
-    const [hoverStartDate, hoverEndDate] = hoverRangeValue !== null && hoverRangeValue !== void 0 ? hoverRangeValue : [];
+    // The start and end dates of the range selection
+    // Note that they can be
+    // - Invalid date - when the user is inputting the date with text input
+    // - undefined - when the range selection isn't completed
+    const [selectedStartDateJS, selectedEndDateJS] = dateRange || [];
+    const [hoverStartDateJS, hoverEndDateJS] = hoverRangeValue !== null && hoverRangeValue !== void 0 ? hoverRangeValue : [];
     const isRangeSelectionMode = typeof dateRange !== 'undefined';
     for (let i = 0; i < 7; i += 1) {
-      const thisDate = addDays(weekendDate, i);
-      const disabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(thisDate, dateRange, DATERANGE_DISABLED_TARGET.CALENDAR);
-      const unSameMonth = !(inSameMonth !== null && inSameMonth !== void 0 && inSameMonth(thisDate));
-      const rangeStart = !unSameMonth && selectedStartDate && isSameDay(thisDate, selectedStartDate);
-      const rangeEnd = !unSameMonth && selectedEndDate && isSameDay(thisDate, selectedEndDate);
-      const isSelected = isRangeSelectionMode ? rangeStart || rangeEnd : isSameDay(thisDate, selected);
+      const thisDate = addDays(startingDate, i);
+      const thisDateJS = new Date(thisDate.year, thisDate.month - 1, thisDate.day);
+      const disabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(thisDateJS, dateRange, DATERANGE_DISABLED_TARGET.CALENDAR);
+
+      // Whether this date is in a different month from the selected date
+      const isSameMonth = selected.getFullYear() === thisDate.year && selected.getMonth() + 1 === thisDate.month;
+
+      // Whether this date is the range start date and is in the same month with the selected date
+      const isRangeStart = isSameMonth && selectedStartDateJS && isSameDay(thisDate, selectedStartDateJS);
+
+      // Whether this date is the range end date and is in the same month with the selected date
+      const isRangeEnd = isSameMonth && selectedEndDateJS && isSameDay(thisDate, selectedEndDateJS);
+
+      // Whether this date should be displayed in the "selected" state
+      // Either
+      // - In range selection mode, it's either the range start or end date
+      // - Otherwise, it's the selected date itself
+      const isSelected = isRangeSelectionMode ? isRangeStart || isRangeEnd : isSameDay(thisDate, selected);
 
       // TODO-Doma Move those logic that's for DatePicker/DateRangePicker to a separate component
       //           Calendar is not supposed to be reused this way
       let inRange = false;
       // for Selected
-      if (selectedStartDate && selectedEndDate) {
-        if (isBefore(thisDate, selectedEndDate) && isAfter(thisDate, selectedStartDate)) {
+      if (selectedStartDateJS && selectedEndDateJS) {
+        const selectedStartDate = {
+          year: selectedStartDateJS.getFullYear(),
+          month: selectedStartDateJS.getMonth() + 1,
+          day: selectedStartDateJS.getDate()
+        };
+        const selectedEndDate = {
+          year: selectedEndDateJS.getFullYear(),
+          month: selectedEndDateJS.getMonth() + 1,
+          day: selectedEndDateJS.getDate()
+        };
+        if (compare(thisDate, selectedEndDate) < 0 && compare(thisDate, selectedStartDate) > 0) {
           inRange = true;
         }
-        if (isBefore(thisDate, selectedStartDate) && isAfter(thisDate, selectedEndDate)) {
+        if (compare(thisDate, selectedStartDate) < 0 && compare(thisDate, selectedEndDate) > 0) {
           inRange = true;
         }
       }
 
       // for Hovering
-      if (!isSelected && hoverStartDate && hoverEndDate) {
-        if (!isAfter(thisDate, hoverEndDate) && !isBefore(thisDate, hoverStartDate)) {
+      if (!isSelected && hoverStartDateJS && hoverEndDateJS) {
+        const hoverStartDate = {
+          year: hoverStartDateJS.getFullYear(),
+          month: hoverStartDateJS.getMonth() + 1,
+          day: hoverStartDateJS.getDate()
+        };
+        const hoverEndDate = {
+          year: hoverEndDateJS.getFullYear(),
+          month: hoverEndDateJS.getMonth() + 1,
+          day: hoverEndDateJS.getDate()
+        };
+        if (compare(thisDate, hoverEndDate) <= 0 && compare(thisDate, hoverStartDate) >= 0) {
           inRange = true;
         }
-        if (!isAfter(thisDate, hoverStartDate) && !isBefore(thisDate, hoverEndDate)) {
+        if (compare(thisDate, hoverStartDate) <= 0 && compare(thisDate, hoverEndDate) >= 0) {
           inRange = true;
         }
       }
-      const thisDatePlain = {
-        year: thisDate.getFullYear(),
-        month: thisDate.getMonth() + 1,
-        day: thisDate.getDate()
-      };
       days.push(/*#__PURE__*/React.createElement(GridCell, {
-        key: format(thisDate, 'yyyy-MM-dd'),
-        date: thisDatePlain,
+        key: format(thisDateJS, 'yyyy-MM-dd'),
+        date: thisDate,
         disabled: disabled,
         selected: isSelected,
         onSelect: handleSelect,
-        unSameMonth: unSameMonth,
-        rangeStart: rangeStart,
-        rangeEnd: rangeEnd,
+        unSameMonth: !isSameMonth,
+        rangeStart: isRangeStart,
+        rangeEnd: isRangeEnd,
         inRange: inRange
       }));
     }
@@ -98,8 +134,8 @@ const GridRow = forwardRef((props, ref) => {
     firstWeekContainsDate
   } = (_locale$dateLocale$op = locale === null || locale === void 0 || (_locale$dateLocale = locale.dateLocale) === null || _locale$dateLocale === void 0 ? void 0 : _locale$dateLocale.options) !== null && _locale$dateLocale$op !== void 0 ? _locale$dateLocale$op : {};
   // ISO week starts on Monday
-  const date = isoWeek ? addDays(weekendDate, 1) : weekendDate;
-  const week = format(date, isoWeek ? 'I' : 'w', {
+  const date = isoWeek ? addDays(startingDate, 1) : startingDate;
+  const week = format(new Date(date.year, date.month - 1, date.day), isoWeek ? 'I' : 'w', {
     locale: locale === null || locale === void 0 ? void 0 : locale.dateLocale,
     firstWeekContainsDate,
     weekStartsOn: weekStart

package/esm/Calendar/hooks/useCalendar.d.ts

@@ -9,7 +9,6 @@ export declare const useCalendar: () => {
     targetId?: string | undefined;
     monthDropdownProps?: import("../types").MonthDropdownProps | undefined;
     disabledDate?: ((date: Date, selectRangeValue?: Date[] | undefined, type?: string | undefined) => boolean) | undefined;
-    inSameMonth?: ((date: Date) => boolean) | undefined;
     onChangeMonth?: ((nextPageDate: Date, event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
     onChangeTime?: ((nextPageTime: Date, event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
     onMouseMove?: ((date: Date) => void) | undefined;

package/esm/Navbar/Navbar.d.ts

@@ -5,6 +5,10 @@ export interface NavbarProps extends BoxProps {
      * The appearance style of the Navbar component.
      */
     appearance?: 'default' | 'inverse' | 'subtle';
+    /**
+     * The open state of the drawer.
+     */
+    drawerOpen?: boolean;
     /**
      * Callback when the drawer is opened or closed.
      */
@@ -16,7 +20,7 @@ export interface NavbarProps extends BoxProps {
  */
 declare const Navbar: import("../internals/types").InternalRefForwardingComponent<"div", NavbarProps, never> & {
     Brand: import("../internals/types").InternalRefForwardingComponent<"a", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
-    Content: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>, Partial<import("./NavbarContent").NavbarContentProps>, never> & Record<string, never>;
+    Content: React.ForwardRefExoticComponent<import("./NavbarContent").NavbarContentProps & React.RefAttributes<any>>;
     Toggle: React.ForwardRefExoticComponent<import("./NavbarToggle").NavbarToggleProps & React.RefAttributes<any>>;
     Drawer: React.ForwardRefExoticComponent<import("..").DrawerProps & React.RefAttributes<any>>;
 };

package/esm/Navbar/Navbar.js

@@ -1,13 +1,13 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import NavbarBrand from "./NavbarBrand.js";
 import NavbarContent from "./NavbarContent.js";
 import NavbarToggle from "./NavbarToggle.js";
 import NavbarDrawer from "./NavbarDrawer.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles, useCustom, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useEventCallback, useUniqueId, useControlled } from "../internals/hooks/index.js";
 import { NavbarContext } from "./NavbarContext.js";
 const Subcomponents = {
   Brand: NavbarBrand,
@@ -29,6 +29,7 @@ const Navbar = forwardRef((props, ref) => {
     as = 'nav',
     classPrefix = 'navbar',
     appearance = 'default',
+    drawerOpen,
     onDrawerOpenChange,
     ...rest
   } = propsWithDefaults;
@@ -37,7 +38,7 @@ const Navbar = forwardRef((props, ref) => {
     merge
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useControlled(drawerOpen, false);
   const handleToggle = useEventCallback(nextOpen => {
     setOpen(nextOpen);
     onDrawerOpenChange === null || onDrawerOpenChange === void 0 || onDrawerOpenChange(nextOpen);

package/esm/Navbar/NavbarContent.d.ts

@@ -1,5 +1,10 @@
-import { ComponentProps } from '../internals/utils';
+import React from 'react';
 import { BoxProps } from '../internals/Box';
-export type NavbarContentProps = ComponentProps & BoxProps;
-declare const NavbarContent: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>, Partial<NavbarContentProps>, never> & Record<string, never>;
+interface ChildProps {
+    onClose: () => void;
+}
+export interface NavbarContentProps extends Omit<BoxProps, 'children'> {
+    children?: React.ReactNode | (({ onClose }: ChildProps) => React.ReactNode);
+}
+declare const NavbarContent: React.ForwardRefExoticComponent<NavbarContentProps & React.RefAttributes<any>>;
 export default NavbarContent;

package/esm/Navbar/NavbarContent.js

@@ -1,9 +1,33 @@
 'use client';
-import { createComponent } from "../internals/utils/index.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useContext } from 'react';
 import Box from "../internals/Box/index.js";
-const NavbarContent = createComponent({
-  name: 'NavbarContent',
-  componentAs: Box,
-  componentClassPrefix: 'navbar-content'
+import { useStyles } from "../internals/hooks/index.js";
+import { NavbarContext } from "./NavbarContext.js";
+const NavbarContent = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    className,
+    classPrefix = 'navbar-content',
+    children,
+    ...rest
+  } = props;
+  const {
+    onToggle
+  } = useContext(NavbarContext) || {};
+  const {
+    withPrefix,
+    merge
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const onClose = useCallback(() => {
+    onToggle === null || onToggle === void 0 || onToggle(false);
+  }, [onToggle]);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    className: classes
+  }, rest), typeof children === 'function' ? children({
+    onClose
+  }) : children);
 });
+NavbarContent.displayName = 'NavbarContent';
 export default NavbarContent;

package/esm/internals/utils/date/getWeekStartDates.d.ts

@@ -1,13 +1,14 @@
 import type { Locale } from 'date-fns';
+import type { PlainDate, PlainYearMonth } from './types';
 /**
  * Get the first days of weeks in a month。
- * @param firstDayOfMonth The first day of the month
+ * @param month The month
  * @param options.weekStart the index of the first day of the week (0 - Sunday)
  * @param options.isoWeek Whether to use ISO week
  * @returns A list of first days of weeks in a month
  */
-export declare function getWeekStartDates(firstDayOfMonth: Date, options: {
+export declare function getWeekStartDates(month: PlainYearMonth, options: {
     weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     locale?: Locale;
-}): Date[];
+}): PlainDate[];
 export default getWeekStartDates;

package/esm/internals/utils/date/getWeekStartDates.js

@@ -1,22 +1,27 @@
 'use client';
-import { addDays } from 'date-fns/addDays';
 import { startOfWeek } from 'date-fns/startOfWeek';
+import { addDays } from "./plainDate.js";
 /**
  * Get the first days of weeks in a month。
- * @param firstDayOfMonth The first day of the month
+ * @param month The month
  * @param options.weekStart the index of the first day of the week (0 - Sunday)
  * @param options.isoWeek Whether to use ISO week
  * @returns A list of first days of weeks in a month
  */
-export function getWeekStartDates(firstDayOfMonth, options) {
+export function getWeekStartDates(month, options) {
   const {
     weekStart,
     locale
   } = options;
-  const firstDay = startOfWeek(firstDayOfMonth, {
+  const firstDayJs = startOfWeek(new Date(month.year, month.month - 1, 1), {
     weekStartsOn: weekStart,
     locale
   });
+  const firstDay = {
+    year: firstDayJs.getFullYear(),
+    month: firstDayJs.getMonth() + 1,
+    day: firstDayJs.getDate()
+  };
   const days = [firstDay];
   for (let i = 1; i < 6; i++) {
     days.push(addDays(firstDay, i * 7));

package/esm/internals/utils/date/plainDate.d.ts

@@ -1,2 +1,9 @@
 import type { PlainDate } from './types';
+/**
+ * Resembles the behavior of `Temporal.PlainDate.compare`.
+ *
+ * @see https://tc39.es/proposal-temporal/docs/plaindatetime.html#compare
+ */
+export declare function compare(date1: PlainDate, date2: PlainDate): -1 | 0 | 1;
 export declare function isSameDay(date: PlainDate, jsDate: Date): boolean;
+export declare function addDays(date: PlainDate, days: number): PlainDate;

package/esm/internals/utils/date/plainDate.js

@@ -6,7 +6,13 @@ function toPlainDate(date) {
     day: date.getDate()
   };
 }
-function comparePlainDates(date1, date2) {
+
+/**
+ * Resembles the behavior of `Temporal.PlainDate.compare`.
+ *
+ * @see https://tc39.es/proposal-temporal/docs/plaindatetime.html#compare
+ */
+export function compare(date1, date2) {
   if (date1.year < date2.year) return -1;
   if (date1.year > date2.year) return 1;
   if (date1.month < date2.month) return -1;
@@ -15,6 +21,22 @@ function comparePlainDates(date1, date2) {
   if (date1.day > date2.day) return 1;
   return 0;
 }
+
+/**
+ * Resembles the behavior of `Temporal.PlainDate.prototype.equals`.
+ *
+ * @see https://tc39.es/proposal-temporal/docs/plaindatetime.html#equals
+ */
+function equals(date1, date2) {
+  return compare(date1, date2) === 0;
+}
 export function isSameDay(date, jsDate) {
-  return comparePlainDates(date, toPlainDate(jsDate)) === 0;
+  // If jsDate is an invalid date, always return false
+  if (Number.isNaN(jsDate.valueOf())) return false;
+  return equals(date, toPlainDate(jsDate));
+}
+export function addDays(date, days) {
+  const jsDate = new Date(date.year, date.month - 1, date.day);
+  jsDate.setDate(jsDate.getDate() + days);
+  return toPlainDate(jsDate);
 }

package/esm/internals/utils/date/types.d.ts

@@ -75,3 +75,12 @@ export type PlainDate = {
     readonly month: number;
     readonly day: number;
 };
+/**
+ * Resembles Temporal.PlainYearMonth
+ *
+ * @see https://tc39.es/proposal-temporal/docs/plainyearmonth.html
+ */
+export type PlainYearMonth = {
+    readonly year: number;
+    readonly month: number;
+};

package/esm/internals/utils/date/types.js

@@ -18,4 +18,10 @@ export const calendarOnlyProps = [TimeProp.DisabledHours, TimeProp.DisabledMinut
  *
  * Resembles Temporal.PlainDate
  * @see https://tc39.es/proposal-temporal/docs/plaindate.html
+ */
+
+/**
+ * Resembles Temporal.PlainYearMonth
+ *
+ * @see https://tc39.es/proposal-temporal/docs/plainyearmonth.html
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-20250827",
+  "version": "6.0.0-canary-20250904",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",