@ceed/ads 1.31.0 → 1.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Calendar/hooks/use-calendar-props.d.ts +2 -0
- package/dist/components/Calendar/types.d.ts +10 -0
- package/dist/components/DateRangePicker/DateRangePicker.d.ts +4 -0
- package/dist/components/inputs/DateRangePicker.md +49 -0
- package/dist/index.browser.js +4 -4
- package/dist/index.browser.js.map +3 -3
- package/dist/index.cjs +229 -8
- package/dist/index.js +229 -8
- package/framer/index.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1026,8 +1026,12 @@ var useCalendarProps = (inProps) => {
|
|
|
1026
1026
|
// src/components/Calendar/hooks/use-calendar.ts
|
|
1027
1027
|
var import_react13 = require("react");
|
|
1028
1028
|
var useCalendar = (ownerState) => {
|
|
1029
|
-
const [
|
|
1030
|
-
const [
|
|
1029
|
+
const [localHoverDay, setLocalHoverDay] = (0, import_react13.useState)(null);
|
|
1030
|
+
const [localHoverMonth, setLocalHoverMonth] = (0, import_react13.useState)(null);
|
|
1031
|
+
const hoverDay = ownerState.hoverDay !== void 0 ? ownerState.hoverDay : localHoverDay;
|
|
1032
|
+
const setHoverDay = ownerState.onHoverDayChange ?? setLocalHoverDay;
|
|
1033
|
+
const hoverMonth = ownerState.hoverMonth !== void 0 ? ownerState.hoverMonth : localHoverMonth;
|
|
1034
|
+
const setHoverMonth = ownerState.onHoverMonthChange ?? setLocalHoverMonth;
|
|
1031
1035
|
return {
|
|
1032
1036
|
calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
|
|
1033
1037
|
onPrev: (0, import_react13.useCallback)(() => {
|
|
@@ -1226,11 +1230,18 @@ var MONTH_NAV_CLICK_THRESHOLD = 3;
|
|
|
1226
1230
|
var MONTH_VIEW_HINT_DURATION_MS = 5e3;
|
|
1227
1231
|
var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
|
|
1228
1232
|
var lastMonthViewAssistHintShownAt = 0;
|
|
1233
|
+
var CALENDAR_PANEL_WIDTH = 264;
|
|
1234
|
+
var CALENDAR_PANEL_GAP = 16;
|
|
1229
1235
|
var CalendarRoot = (0, import_joy19.styled)("div", {
|
|
1230
1236
|
name: "Calendar",
|
|
1231
1237
|
slot: "root"
|
|
1238
|
+
})({});
|
|
1239
|
+
var CalendarMultiContainer = (0, import_joy19.styled)("div", {
|
|
1240
|
+
name: "Calendar",
|
|
1241
|
+
slot: "multiContainer"
|
|
1232
1242
|
})({
|
|
1233
|
-
|
|
1243
|
+
display: "flex",
|
|
1244
|
+
gap: `${CALENDAR_PANEL_GAP}px`
|
|
1234
1245
|
});
|
|
1235
1246
|
var CalendarHeader = (0, import_joy19.styled)("div", {
|
|
1236
1247
|
name: "Calendar",
|
|
@@ -1265,6 +1276,16 @@ var CalendarViewTable = (0, import_joy19.styled)(import_framer_motion13.motion.t
|
|
|
1265
1276
|
paddingBottom: theme.spacing(2)
|
|
1266
1277
|
}
|
|
1267
1278
|
}));
|
|
1279
|
+
var StaticCalendarViewTable = (0, import_joy19.styled)("table")(({ theme }) => ({
|
|
1280
|
+
borderSpacing: 0,
|
|
1281
|
+
"& td, & th": {
|
|
1282
|
+
padding: 0
|
|
1283
|
+
},
|
|
1284
|
+
"& th": {
|
|
1285
|
+
paddingTop: theme.spacing(2),
|
|
1286
|
+
paddingBottom: theme.spacing(2)
|
|
1287
|
+
}
|
|
1288
|
+
}));
|
|
1268
1289
|
var CalendarWeekHeaderContainer = (0, import_joy19.styled)("thead", {
|
|
1269
1290
|
name: "Calendar",
|
|
1270
1291
|
slot: "weekHeaderContainer"
|
|
@@ -1513,6 +1534,133 @@ var PickerMonths = (props) => {
|
|
|
1513
1534
|
/* @__PURE__ */ import_react14.default.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: months.join("_") }, /* @__PURE__ */ import_react14.default.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: monthIndex }, /* @__PURE__ */ import_react14.default.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ import_react14.default.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ import_react14.default.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ import_react14.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react14.default.createElement("td", { colSpan: 7, style: { height: 4 } })))))
|
|
1514
1535
|
)));
|
|
1515
1536
|
};
|
|
1537
|
+
var PlainPickerDays = ({ ownerState }) => {
|
|
1538
|
+
const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
|
|
1539
|
+
const calendarDates = (0, import_react14.useMemo)(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
|
|
1540
|
+
const weekdayNames = (0, import_react14.useMemo)(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
|
|
1541
|
+
return /* @__PURE__ */ import_react14.default.createElement(StaticCalendarViewTable, null, /* @__PURE__ */ import_react14.default.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ import_react14.default.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ import_react14.default.createElement("th", null, /* @__PURE__ */ import_react14.default.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ import_react14.default.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))), /* @__PURE__ */ import_react14.default.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ import_react14.default.createElement("tr", null, weekDates.map(
|
|
1542
|
+
(date, i) => date ? /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ import_react14.default.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ import_react14.default.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ import_react14.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ import_react14.default.createElement("td", null), i < 6 && /* @__PURE__ */ import_react14.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
|
|
1543
|
+
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ import_react14.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react14.default.createElement("td", { colSpan: 13, style: { height: 4 } }))))));
|
|
1544
|
+
};
|
|
1545
|
+
var MultiMonthPickerDays = ({
|
|
1546
|
+
panels,
|
|
1547
|
+
direction,
|
|
1548
|
+
numberOfMonths
|
|
1549
|
+
}) => {
|
|
1550
|
+
const slideDistance = CALENDAR_PANEL_WIDTH * numberOfMonths + CALENDAR_PANEL_GAP * (numberOfMonths - 1) + CALENDAR_PANEL_WIDTH;
|
|
1551
|
+
const multiVariants = {
|
|
1552
|
+
enter: (dir) => ({ x: dir > 0 ? slideDistance : -slideDistance, opacity: 0 }),
|
|
1553
|
+
center: { position: "relative", zIndex: 1, x: 0, opacity: 1 },
|
|
1554
|
+
exit: (dir) => ({
|
|
1555
|
+
position: "absolute",
|
|
1556
|
+
zIndex: 0,
|
|
1557
|
+
x: dir < 0 ? slideDistance : -slideDistance,
|
|
1558
|
+
opacity: 0
|
|
1559
|
+
})
|
|
1560
|
+
};
|
|
1561
|
+
const key = `${panels[0].viewMonth.toISOString()}_${direction}`;
|
|
1562
|
+
return /* @__PURE__ */ import_react14.default.createElement("div", { style: { position: "relative", overflow: "hidden", minHeight: "250px" } }, /* @__PURE__ */ import_react14.default.createElement(import_framer_motion13.AnimatePresence, { initial: false, custom: direction }, /* @__PURE__ */ import_react14.default.createElement(
|
|
1563
|
+
import_framer_motion13.motion.div,
|
|
1564
|
+
{
|
|
1565
|
+
key,
|
|
1566
|
+
custom: direction,
|
|
1567
|
+
variants: multiVariants,
|
|
1568
|
+
initial: "enter",
|
|
1569
|
+
animate: "center",
|
|
1570
|
+
exit: "exit",
|
|
1571
|
+
transition: {
|
|
1572
|
+
x: { type: "spring", stiffness: 300, damping: 30 },
|
|
1573
|
+
opacity: { duration: 0.2 }
|
|
1574
|
+
},
|
|
1575
|
+
drag: "x",
|
|
1576
|
+
dragConstraints: { left: 0, right: 0 },
|
|
1577
|
+
dragElastic: 1,
|
|
1578
|
+
onDragEnd: (e, { offset, velocity }) => {
|
|
1579
|
+
const swipe = swipePower(offset.x, velocity.x);
|
|
1580
|
+
if (swipe < -swipeConfidenceThreshold) {
|
|
1581
|
+
const date = new Date(panels[0].viewMonth);
|
|
1582
|
+
date.setMonth(date.getMonth() + 1);
|
|
1583
|
+
panels[0].onMonthChange?.(date);
|
|
1584
|
+
} else if (swipe > swipeConfidenceThreshold) {
|
|
1585
|
+
const date = new Date(panels[0].viewMonth);
|
|
1586
|
+
date.setMonth(date.getMonth() - 1);
|
|
1587
|
+
panels[0].onMonthChange?.(date);
|
|
1588
|
+
}
|
|
1589
|
+
},
|
|
1590
|
+
style: { display: "flex", gap: `${CALENDAR_PANEL_GAP}px`, top: 0, left: 0, width: "100%" }
|
|
1591
|
+
},
|
|
1592
|
+
panels.map((panelOwnerState) => /* @__PURE__ */ import_react14.default.createElement(
|
|
1593
|
+
"div",
|
|
1594
|
+
{
|
|
1595
|
+
key: panelOwnerState.viewMonth.toISOString(),
|
|
1596
|
+
style: {
|
|
1597
|
+
flex: "0 0 auto",
|
|
1598
|
+
width: `${CALENDAR_PANEL_WIDTH}px`,
|
|
1599
|
+
paddingLeft: "16px",
|
|
1600
|
+
paddingRight: "16px",
|
|
1601
|
+
boxSizing: "border-box"
|
|
1602
|
+
}
|
|
1603
|
+
},
|
|
1604
|
+
/* @__PURE__ */ import_react14.default.createElement(PlainPickerDays, { ownerState: panelOwnerState })
|
|
1605
|
+
))
|
|
1606
|
+
)));
|
|
1607
|
+
};
|
|
1608
|
+
var CalendarPanel = ({
|
|
1609
|
+
ownerState,
|
|
1610
|
+
panelIndex,
|
|
1611
|
+
totalPanels,
|
|
1612
|
+
onPrev,
|
|
1613
|
+
onNext,
|
|
1614
|
+
onSwitchView,
|
|
1615
|
+
isMonthViewAssistHintOpen,
|
|
1616
|
+
monthViewHintMessage
|
|
1617
|
+
}) => {
|
|
1618
|
+
const showPrev = panelIndex === 0;
|
|
1619
|
+
const showNext = panelIndex === totalPanels - 1;
|
|
1620
|
+
const title = ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default");
|
|
1621
|
+
return /* @__PURE__ */ import_react14.default.createElement("div", { style: { flex: 1, maxWidth: `${CALENDAR_PANEL_WIDTH}px` } }, /* @__PURE__ */ import_react14.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react14.default.createElement(
|
|
1622
|
+
IconButton_default,
|
|
1623
|
+
{
|
|
1624
|
+
size: "sm",
|
|
1625
|
+
onClick: onPrev,
|
|
1626
|
+
"aria-label": `Previous ${ownerState.view === "day" ? "Month" : "Year"}`,
|
|
1627
|
+
style: { visibility: showPrev ? "visible" : "hidden" }
|
|
1628
|
+
},
|
|
1629
|
+
/* @__PURE__ */ import_react14.default.createElement(import_ChevronLeft.default, null)
|
|
1630
|
+
), /* @__PURE__ */ import_react14.default.createElement(
|
|
1631
|
+
Tooltip_default,
|
|
1632
|
+
{
|
|
1633
|
+
title: monthViewHintMessage,
|
|
1634
|
+
arrow: true,
|
|
1635
|
+
open: panelIndex === 0 && isMonthViewAssistHintOpen,
|
|
1636
|
+
placement: "bottom",
|
|
1637
|
+
disableFocusListener: true,
|
|
1638
|
+
disableHoverListener: true,
|
|
1639
|
+
disableTouchListener: true,
|
|
1640
|
+
variant: "solid"
|
|
1641
|
+
},
|
|
1642
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
1643
|
+
CalendarSwitchViewButton,
|
|
1644
|
+
{
|
|
1645
|
+
ownerState,
|
|
1646
|
+
variant: "plain",
|
|
1647
|
+
color: "neutral",
|
|
1648
|
+
onClick: onSwitchView,
|
|
1649
|
+
"aria-label": "Switch Calendar View"
|
|
1650
|
+
},
|
|
1651
|
+
title
|
|
1652
|
+
)
|
|
1653
|
+
), /* @__PURE__ */ import_react14.default.createElement(
|
|
1654
|
+
IconButton_default,
|
|
1655
|
+
{
|
|
1656
|
+
size: "sm",
|
|
1657
|
+
onClick: onNext,
|
|
1658
|
+
"aria-label": `Next ${ownerState.view === "day" ? "Month" : "Year"}`,
|
|
1659
|
+
style: { visibility: showNext ? "visible" : "hidden" }
|
|
1660
|
+
},
|
|
1661
|
+
/* @__PURE__ */ import_react14.default.createElement(import_ChevronRight.default, null)
|
|
1662
|
+
)));
|
|
1663
|
+
};
|
|
1516
1664
|
var Calendar = (0, import_react14.forwardRef)((inProps, ref) => {
|
|
1517
1665
|
const [props, ownerState] = useCalendarProps(inProps);
|
|
1518
1666
|
const {
|
|
@@ -1529,6 +1677,7 @@ var Calendar = (0, import_react14.forwardRef)((inProps, ref) => {
|
|
|
1529
1677
|
maxDate,
|
|
1530
1678
|
disableFuture,
|
|
1531
1679
|
disablePast,
|
|
1680
|
+
numberOfMonths,
|
|
1532
1681
|
...others
|
|
1533
1682
|
} = props;
|
|
1534
1683
|
const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
|
|
@@ -1536,6 +1685,9 @@ var Calendar = (0, import_react14.forwardRef)((inProps, ref) => {
|
|
|
1536
1685
|
const monthNavClickTimestampsRef = (0, import_react14.useRef)([]);
|
|
1537
1686
|
const monthViewAssistHintShownInSessionRef = (0, import_react14.useRef)(false);
|
|
1538
1687
|
const monthViewAssistHintTimeoutRef = (0, import_react14.useRef)(null);
|
|
1688
|
+
const [hoverDay, setHoverDay] = (0, import_react14.useState)(null);
|
|
1689
|
+
const [hoverMonth, setHoverMonth] = (0, import_react14.useState)(null);
|
|
1690
|
+
const resolvedNumberOfMonths = numberOfMonths ?? 1;
|
|
1539
1691
|
const hasEndDate = Boolean(value?.[1]);
|
|
1540
1692
|
const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
|
|
1541
1693
|
const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
|
|
@@ -1598,7 +1750,71 @@ var Calendar = (0, import_react14.forwardRef)((inProps, ref) => {
|
|
|
1598
1750
|
closeMonthViewAssistHint();
|
|
1599
1751
|
onViewChange?.();
|
|
1600
1752
|
}, [closeMonthViewAssistHint, onViewChange]);
|
|
1601
|
-
|
|
1753
|
+
const maxWidth = CALENDAR_PANEL_WIDTH * resolvedNumberOfMonths + CALENDAR_PANEL_GAP * (resolvedNumberOfMonths - 1);
|
|
1754
|
+
if (resolvedNumberOfMonths > 1) {
|
|
1755
|
+
const panels = Array.from({ length: resolvedNumberOfMonths }, (_, i) => {
|
|
1756
|
+
const panelViewMonth = new Date(ownerState.viewMonth);
|
|
1757
|
+
panelViewMonth.setMonth(panelViewMonth.getMonth() + i);
|
|
1758
|
+
panelViewMonth.setDate(1);
|
|
1759
|
+
panelViewMonth.setHours(0, 0, 0, 0);
|
|
1760
|
+
return {
|
|
1761
|
+
...ownerState,
|
|
1762
|
+
viewMonth: panelViewMonth,
|
|
1763
|
+
hoverDay,
|
|
1764
|
+
onHoverDayChange: setHoverDay,
|
|
1765
|
+
hoverMonth,
|
|
1766
|
+
onHoverMonthChange: setHoverMonth
|
|
1767
|
+
};
|
|
1768
|
+
});
|
|
1769
|
+
return /* @__PURE__ */ import_react14.default.createElement(CalendarRoot, { ref, ...others, style: { maxWidth: `${maxWidth}px` } }, view === "month" ? (
|
|
1770
|
+
// Month view: single header + single month grid (consistent with single-month path)
|
|
1771
|
+
/* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react14.default.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": "Previous Year" }, /* @__PURE__ */ import_react14.default.createElement(import_ChevronLeft.default, null)), /* @__PURE__ */ import_react14.default.createElement(
|
|
1772
|
+
Tooltip_default,
|
|
1773
|
+
{
|
|
1774
|
+
title: monthViewHintMessage,
|
|
1775
|
+
arrow: true,
|
|
1776
|
+
open: false,
|
|
1777
|
+
placement: "bottom",
|
|
1778
|
+
disableFocusListener: true,
|
|
1779
|
+
disableHoverListener: true,
|
|
1780
|
+
disableTouchListener: true,
|
|
1781
|
+
variant: "solid"
|
|
1782
|
+
},
|
|
1783
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
1784
|
+
CalendarSwitchViewButton,
|
|
1785
|
+
{
|
|
1786
|
+
ownerState,
|
|
1787
|
+
variant: "plain",
|
|
1788
|
+
color: "neutral",
|
|
1789
|
+
onClick: handleSwitchViewClick,
|
|
1790
|
+
"aria-label": "Switch Calendar View"
|
|
1791
|
+
},
|
|
1792
|
+
calendarTitle
|
|
1793
|
+
)
|
|
1794
|
+
), /* @__PURE__ */ import_react14.default.createElement(IconButton_default, { size: "sm", onClick: handleNextClick, "aria-label": "Next Year" }, /* @__PURE__ */ import_react14.default.createElement(import_ChevronRight.default, null))), /* @__PURE__ */ import_react14.default.createElement(PickerMonths, { ownerState }))
|
|
1795
|
+
) : /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(CalendarMultiContainer, null, panels.map((panelOwnerState, i) => /* @__PURE__ */ import_react14.default.createElement(
|
|
1796
|
+
CalendarPanel,
|
|
1797
|
+
{
|
|
1798
|
+
key: panelOwnerState.viewMonth.toISOString(),
|
|
1799
|
+
ownerState: panelOwnerState,
|
|
1800
|
+
panelIndex: i,
|
|
1801
|
+
totalPanels: resolvedNumberOfMonths,
|
|
1802
|
+
onPrev: handlePrevClick,
|
|
1803
|
+
onNext: handleNextClick,
|
|
1804
|
+
onSwitchView: handleSwitchViewClick,
|
|
1805
|
+
isMonthViewAssistHintOpen,
|
|
1806
|
+
monthViewHintMessage
|
|
1807
|
+
}
|
|
1808
|
+
))), /* @__PURE__ */ import_react14.default.createElement(
|
|
1809
|
+
MultiMonthPickerDays,
|
|
1810
|
+
{
|
|
1811
|
+
panels,
|
|
1812
|
+
direction: ownerState.direction,
|
|
1813
|
+
numberOfMonths: resolvedNumberOfMonths
|
|
1814
|
+
}
|
|
1815
|
+
)));
|
|
1816
|
+
}
|
|
1817
|
+
return /* @__PURE__ */ import_react14.default.createElement(CalendarRoot, { ref, ...others, style: { maxWidth: `${maxWidth}px` } }, /* @__PURE__ */ import_react14.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react14.default.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ import_react14.default.createElement(import_ChevronLeft.default, null)), /* @__PURE__ */ import_react14.default.createElement(
|
|
1602
1818
|
Tooltip_default,
|
|
1603
1819
|
{
|
|
1604
1820
|
title: monthViewHintMessage,
|
|
@@ -2916,7 +3132,8 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2916
3132
|
maxDate: maxDate ? new Date(maxDate) : void 0,
|
|
2917
3133
|
disableFuture,
|
|
2918
3134
|
disablePast,
|
|
2919
|
-
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
|
|
3135
|
+
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0,
|
|
3136
|
+
locale
|
|
2920
3137
|
}
|
|
2921
3138
|
), !hideClearButton && /* @__PURE__ */ import_react20.default.createElement(
|
|
2922
3139
|
DialogActions_default,
|
|
@@ -4964,6 +5181,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
|
|
|
4964
5181
|
hideClearButton,
|
|
4965
5182
|
readOnly,
|
|
4966
5183
|
presets,
|
|
5184
|
+
numberOfMonths,
|
|
4967
5185
|
...innerProps
|
|
4968
5186
|
} = props;
|
|
4969
5187
|
const innerRef = (0, import_react29.useRef)(null);
|
|
@@ -5160,7 +5378,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
|
|
|
5160
5378
|
"aria-label": "Calendar Tooltip",
|
|
5161
5379
|
"aria-expanded": open
|
|
5162
5380
|
},
|
|
5163
|
-
/* @__PURE__ */ import_react29.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react29.default.createElement(CalendarSheetContent2, null, /* @__PURE__ */ import_react29.default.createElement(CalendarSection2,
|
|
5381
|
+
/* @__PURE__ */ import_react29.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react29.default.createElement(CalendarSheetContent2, null, /* @__PURE__ */ import_react29.default.createElement(CalendarSection2, { style: { width: "auto" } }, /* @__PURE__ */ import_react29.default.createElement(
|
|
5164
5382
|
Calendar_default,
|
|
5165
5383
|
{
|
|
5166
5384
|
rangeSelection: true,
|
|
@@ -5169,7 +5387,9 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
|
|
|
5169
5387
|
minDate: minDate ? new Date(minDate) : void 0,
|
|
5170
5388
|
maxDate: maxDate ? new Date(maxDate) : void 0,
|
|
5171
5389
|
disableFuture,
|
|
5172
|
-
disablePast
|
|
5390
|
+
disablePast,
|
|
5391
|
+
locale,
|
|
5392
|
+
numberOfMonths
|
|
5173
5393
|
}
|
|
5174
5394
|
), !hideClearButton && /* @__PURE__ */ import_react29.default.createElement(
|
|
5175
5395
|
DialogActions_default,
|
|
@@ -7303,7 +7523,8 @@ var MonthRangePicker = (0, import_react50.forwardRef)((inProps, ref) => {
|
|
|
7303
7523
|
minDate: minDate ? new Date(minDate) : void 0,
|
|
7304
7524
|
maxDate: maxDate ? new Date(maxDate) : void 0,
|
|
7305
7525
|
disableFuture,
|
|
7306
|
-
disablePast
|
|
7526
|
+
disablePast,
|
|
7527
|
+
locale
|
|
7307
7528
|
}
|
|
7308
7529
|
), /* @__PURE__ */ import_react50.default.createElement(
|
|
7309
7530
|
DialogActions_default,
|
package/dist/index.js
CHANGED
|
@@ -878,8 +878,12 @@ var useCalendarProps = (inProps) => {
|
|
|
878
878
|
// src/components/Calendar/hooks/use-calendar.ts
|
|
879
879
|
import { useCallback as useCallback4, useState as useState3 } from "react";
|
|
880
880
|
var useCalendar = (ownerState) => {
|
|
881
|
-
const [
|
|
882
|
-
const [
|
|
881
|
+
const [localHoverDay, setLocalHoverDay] = useState3(null);
|
|
882
|
+
const [localHoverMonth, setLocalHoverMonth] = useState3(null);
|
|
883
|
+
const hoverDay = ownerState.hoverDay !== void 0 ? ownerState.hoverDay : localHoverDay;
|
|
884
|
+
const setHoverDay = ownerState.onHoverDayChange ?? setLocalHoverDay;
|
|
885
|
+
const hoverMonth = ownerState.hoverMonth !== void 0 ? ownerState.hoverMonth : localHoverMonth;
|
|
886
|
+
const setHoverMonth = ownerState.onHoverMonthChange ?? setLocalHoverMonth;
|
|
883
887
|
return {
|
|
884
888
|
calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
|
|
885
889
|
onPrev: useCallback4(() => {
|
|
@@ -1078,11 +1082,18 @@ var MONTH_NAV_CLICK_THRESHOLD = 3;
|
|
|
1078
1082
|
var MONTH_VIEW_HINT_DURATION_MS = 5e3;
|
|
1079
1083
|
var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
|
|
1080
1084
|
var lastMonthViewAssistHintShownAt = 0;
|
|
1085
|
+
var CALENDAR_PANEL_WIDTH = 264;
|
|
1086
|
+
var CALENDAR_PANEL_GAP = 16;
|
|
1081
1087
|
var CalendarRoot = styled5("div", {
|
|
1082
1088
|
name: "Calendar",
|
|
1083
1089
|
slot: "root"
|
|
1090
|
+
})({});
|
|
1091
|
+
var CalendarMultiContainer = styled5("div", {
|
|
1092
|
+
name: "Calendar",
|
|
1093
|
+
slot: "multiContainer"
|
|
1084
1094
|
})({
|
|
1085
|
-
|
|
1095
|
+
display: "flex",
|
|
1096
|
+
gap: `${CALENDAR_PANEL_GAP}px`
|
|
1086
1097
|
});
|
|
1087
1098
|
var CalendarHeader = styled5("div", {
|
|
1088
1099
|
name: "Calendar",
|
|
@@ -1117,6 +1128,16 @@ var CalendarViewTable = styled5(motion13.table, {
|
|
|
1117
1128
|
paddingBottom: theme.spacing(2)
|
|
1118
1129
|
}
|
|
1119
1130
|
}));
|
|
1131
|
+
var StaticCalendarViewTable = styled5("table")(({ theme }) => ({
|
|
1132
|
+
borderSpacing: 0,
|
|
1133
|
+
"& td, & th": {
|
|
1134
|
+
padding: 0
|
|
1135
|
+
},
|
|
1136
|
+
"& th": {
|
|
1137
|
+
paddingTop: theme.spacing(2),
|
|
1138
|
+
paddingBottom: theme.spacing(2)
|
|
1139
|
+
}
|
|
1140
|
+
}));
|
|
1120
1141
|
var CalendarWeekHeaderContainer = styled5("thead", {
|
|
1121
1142
|
name: "Calendar",
|
|
1122
1143
|
slot: "weekHeaderContainer"
|
|
@@ -1365,6 +1386,133 @@ var PickerMonths = (props) => {
|
|
|
1365
1386
|
/* @__PURE__ */ React12.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: months.join("_") }, /* @__PURE__ */ React12.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React12.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React12.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React12.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ React12.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 7, style: { height: 4 } })))))
|
|
1366
1387
|
)));
|
|
1367
1388
|
};
|
|
1389
|
+
var PlainPickerDays = ({ ownerState }) => {
|
|
1390
|
+
const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
|
|
1391
|
+
const calendarDates = useMemo4(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
|
|
1392
|
+
const weekdayNames = useMemo4(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
|
|
1393
|
+
return /* @__PURE__ */ React12.createElement(StaticCalendarViewTable, null, /* @__PURE__ */ React12.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ React12.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ React12.createElement("th", null, /* @__PURE__ */ React12.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ React12.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))), /* @__PURE__ */ React12.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React12.createElement("tr", null, weekDates.map(
|
|
1394
|
+
(date, i) => date ? /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React12.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React12.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React12.createElement("td", null), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
|
|
1395
|
+
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 13, style: { height: 4 } }))))));
|
|
1396
|
+
};
|
|
1397
|
+
var MultiMonthPickerDays = ({
|
|
1398
|
+
panels,
|
|
1399
|
+
direction,
|
|
1400
|
+
numberOfMonths
|
|
1401
|
+
}) => {
|
|
1402
|
+
const slideDistance = CALENDAR_PANEL_WIDTH * numberOfMonths + CALENDAR_PANEL_GAP * (numberOfMonths - 1) + CALENDAR_PANEL_WIDTH;
|
|
1403
|
+
const multiVariants = {
|
|
1404
|
+
enter: (dir) => ({ x: dir > 0 ? slideDistance : -slideDistance, opacity: 0 }),
|
|
1405
|
+
center: { position: "relative", zIndex: 1, x: 0, opacity: 1 },
|
|
1406
|
+
exit: (dir) => ({
|
|
1407
|
+
position: "absolute",
|
|
1408
|
+
zIndex: 0,
|
|
1409
|
+
x: dir < 0 ? slideDistance : -slideDistance,
|
|
1410
|
+
opacity: 0
|
|
1411
|
+
})
|
|
1412
|
+
};
|
|
1413
|
+
const key = `${panels[0].viewMonth.toISOString()}_${direction}`;
|
|
1414
|
+
return /* @__PURE__ */ React12.createElement("div", { style: { position: "relative", overflow: "hidden", minHeight: "250px" } }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: direction }, /* @__PURE__ */ React12.createElement(
|
|
1415
|
+
motion13.div,
|
|
1416
|
+
{
|
|
1417
|
+
key,
|
|
1418
|
+
custom: direction,
|
|
1419
|
+
variants: multiVariants,
|
|
1420
|
+
initial: "enter",
|
|
1421
|
+
animate: "center",
|
|
1422
|
+
exit: "exit",
|
|
1423
|
+
transition: {
|
|
1424
|
+
x: { type: "spring", stiffness: 300, damping: 30 },
|
|
1425
|
+
opacity: { duration: 0.2 }
|
|
1426
|
+
},
|
|
1427
|
+
drag: "x",
|
|
1428
|
+
dragConstraints: { left: 0, right: 0 },
|
|
1429
|
+
dragElastic: 1,
|
|
1430
|
+
onDragEnd: (e, { offset, velocity }) => {
|
|
1431
|
+
const swipe = swipePower(offset.x, velocity.x);
|
|
1432
|
+
if (swipe < -swipeConfidenceThreshold) {
|
|
1433
|
+
const date = new Date(panels[0].viewMonth);
|
|
1434
|
+
date.setMonth(date.getMonth() + 1);
|
|
1435
|
+
panels[0].onMonthChange?.(date);
|
|
1436
|
+
} else if (swipe > swipeConfidenceThreshold) {
|
|
1437
|
+
const date = new Date(panels[0].viewMonth);
|
|
1438
|
+
date.setMonth(date.getMonth() - 1);
|
|
1439
|
+
panels[0].onMonthChange?.(date);
|
|
1440
|
+
}
|
|
1441
|
+
},
|
|
1442
|
+
style: { display: "flex", gap: `${CALENDAR_PANEL_GAP}px`, top: 0, left: 0, width: "100%" }
|
|
1443
|
+
},
|
|
1444
|
+
panels.map((panelOwnerState) => /* @__PURE__ */ React12.createElement(
|
|
1445
|
+
"div",
|
|
1446
|
+
{
|
|
1447
|
+
key: panelOwnerState.viewMonth.toISOString(),
|
|
1448
|
+
style: {
|
|
1449
|
+
flex: "0 0 auto",
|
|
1450
|
+
width: `${CALENDAR_PANEL_WIDTH}px`,
|
|
1451
|
+
paddingLeft: "16px",
|
|
1452
|
+
paddingRight: "16px",
|
|
1453
|
+
boxSizing: "border-box"
|
|
1454
|
+
}
|
|
1455
|
+
},
|
|
1456
|
+
/* @__PURE__ */ React12.createElement(PlainPickerDays, { ownerState: panelOwnerState })
|
|
1457
|
+
))
|
|
1458
|
+
)));
|
|
1459
|
+
};
|
|
1460
|
+
var CalendarPanel = ({
|
|
1461
|
+
ownerState,
|
|
1462
|
+
panelIndex,
|
|
1463
|
+
totalPanels,
|
|
1464
|
+
onPrev,
|
|
1465
|
+
onNext,
|
|
1466
|
+
onSwitchView,
|
|
1467
|
+
isMonthViewAssistHintOpen,
|
|
1468
|
+
monthViewHintMessage
|
|
1469
|
+
}) => {
|
|
1470
|
+
const showPrev = panelIndex === 0;
|
|
1471
|
+
const showNext = panelIndex === totalPanels - 1;
|
|
1472
|
+
const title = ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default");
|
|
1473
|
+
return /* @__PURE__ */ React12.createElement("div", { style: { flex: 1, maxWidth: `${CALENDAR_PANEL_WIDTH}px` } }, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(
|
|
1474
|
+
IconButton_default,
|
|
1475
|
+
{
|
|
1476
|
+
size: "sm",
|
|
1477
|
+
onClick: onPrev,
|
|
1478
|
+
"aria-label": `Previous ${ownerState.view === "day" ? "Month" : "Year"}`,
|
|
1479
|
+
style: { visibility: showPrev ? "visible" : "hidden" }
|
|
1480
|
+
},
|
|
1481
|
+
/* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)
|
|
1482
|
+
), /* @__PURE__ */ React12.createElement(
|
|
1483
|
+
Tooltip_default,
|
|
1484
|
+
{
|
|
1485
|
+
title: monthViewHintMessage,
|
|
1486
|
+
arrow: true,
|
|
1487
|
+
open: panelIndex === 0 && isMonthViewAssistHintOpen,
|
|
1488
|
+
placement: "bottom",
|
|
1489
|
+
disableFocusListener: true,
|
|
1490
|
+
disableHoverListener: true,
|
|
1491
|
+
disableTouchListener: true,
|
|
1492
|
+
variant: "solid"
|
|
1493
|
+
},
|
|
1494
|
+
/* @__PURE__ */ React12.createElement(
|
|
1495
|
+
CalendarSwitchViewButton,
|
|
1496
|
+
{
|
|
1497
|
+
ownerState,
|
|
1498
|
+
variant: "plain",
|
|
1499
|
+
color: "neutral",
|
|
1500
|
+
onClick: onSwitchView,
|
|
1501
|
+
"aria-label": "Switch Calendar View"
|
|
1502
|
+
},
|
|
1503
|
+
title
|
|
1504
|
+
)
|
|
1505
|
+
), /* @__PURE__ */ React12.createElement(
|
|
1506
|
+
IconButton_default,
|
|
1507
|
+
{
|
|
1508
|
+
size: "sm",
|
|
1509
|
+
onClick: onNext,
|
|
1510
|
+
"aria-label": `Next ${ownerState.view === "day" ? "Month" : "Year"}`,
|
|
1511
|
+
style: { visibility: showNext ? "visible" : "hidden" }
|
|
1512
|
+
},
|
|
1513
|
+
/* @__PURE__ */ React12.createElement(ChevronRightIcon, null)
|
|
1514
|
+
)));
|
|
1515
|
+
};
|
|
1368
1516
|
var Calendar = forwardRef4((inProps, ref) => {
|
|
1369
1517
|
const [props, ownerState] = useCalendarProps(inProps);
|
|
1370
1518
|
const {
|
|
@@ -1381,6 +1529,7 @@ var Calendar = forwardRef4((inProps, ref) => {
|
|
|
1381
1529
|
maxDate,
|
|
1382
1530
|
disableFuture,
|
|
1383
1531
|
disablePast,
|
|
1532
|
+
numberOfMonths,
|
|
1384
1533
|
...others
|
|
1385
1534
|
} = props;
|
|
1386
1535
|
const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
|
|
@@ -1388,6 +1537,9 @@ var Calendar = forwardRef4((inProps, ref) => {
|
|
|
1388
1537
|
const monthNavClickTimestampsRef = useRef3([]);
|
|
1389
1538
|
const monthViewAssistHintShownInSessionRef = useRef3(false);
|
|
1390
1539
|
const monthViewAssistHintTimeoutRef = useRef3(null);
|
|
1540
|
+
const [hoverDay, setHoverDay] = useState4(null);
|
|
1541
|
+
const [hoverMonth, setHoverMonth] = useState4(null);
|
|
1542
|
+
const resolvedNumberOfMonths = numberOfMonths ?? 1;
|
|
1391
1543
|
const hasEndDate = Boolean(value?.[1]);
|
|
1392
1544
|
const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
|
|
1393
1545
|
const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
|
|
@@ -1450,7 +1602,71 @@ var Calendar = forwardRef4((inProps, ref) => {
|
|
|
1450
1602
|
closeMonthViewAssistHint();
|
|
1451
1603
|
onViewChange?.();
|
|
1452
1604
|
}, [closeMonthViewAssistHint, onViewChange]);
|
|
1453
|
-
|
|
1605
|
+
const maxWidth = CALENDAR_PANEL_WIDTH * resolvedNumberOfMonths + CALENDAR_PANEL_GAP * (resolvedNumberOfMonths - 1);
|
|
1606
|
+
if (resolvedNumberOfMonths > 1) {
|
|
1607
|
+
const panels = Array.from({ length: resolvedNumberOfMonths }, (_, i) => {
|
|
1608
|
+
const panelViewMonth = new Date(ownerState.viewMonth);
|
|
1609
|
+
panelViewMonth.setMonth(panelViewMonth.getMonth() + i);
|
|
1610
|
+
panelViewMonth.setDate(1);
|
|
1611
|
+
panelViewMonth.setHours(0, 0, 0, 0);
|
|
1612
|
+
return {
|
|
1613
|
+
...ownerState,
|
|
1614
|
+
viewMonth: panelViewMonth,
|
|
1615
|
+
hoverDay,
|
|
1616
|
+
onHoverDayChange: setHoverDay,
|
|
1617
|
+
hoverMonth,
|
|
1618
|
+
onHoverMonthChange: setHoverMonth
|
|
1619
|
+
};
|
|
1620
|
+
});
|
|
1621
|
+
return /* @__PURE__ */ React12.createElement(CalendarRoot, { ref, ...others, style: { maxWidth: `${maxWidth}px` } }, view === "month" ? (
|
|
1622
|
+
// Month view: single header + single month grid (consistent with single-month path)
|
|
1623
|
+
/* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": "Previous Year" }, /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React12.createElement(
|
|
1624
|
+
Tooltip_default,
|
|
1625
|
+
{
|
|
1626
|
+
title: monthViewHintMessage,
|
|
1627
|
+
arrow: true,
|
|
1628
|
+
open: false,
|
|
1629
|
+
placement: "bottom",
|
|
1630
|
+
disableFocusListener: true,
|
|
1631
|
+
disableHoverListener: true,
|
|
1632
|
+
disableTouchListener: true,
|
|
1633
|
+
variant: "solid"
|
|
1634
|
+
},
|
|
1635
|
+
/* @__PURE__ */ React12.createElement(
|
|
1636
|
+
CalendarSwitchViewButton,
|
|
1637
|
+
{
|
|
1638
|
+
ownerState,
|
|
1639
|
+
variant: "plain",
|
|
1640
|
+
color: "neutral",
|
|
1641
|
+
onClick: handleSwitchViewClick,
|
|
1642
|
+
"aria-label": "Switch Calendar View"
|
|
1643
|
+
},
|
|
1644
|
+
calendarTitle
|
|
1645
|
+
)
|
|
1646
|
+
), /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handleNextClick, "aria-label": "Next Year" }, /* @__PURE__ */ React12.createElement(ChevronRightIcon, null))), /* @__PURE__ */ React12.createElement(PickerMonths, { ownerState }))
|
|
1647
|
+
) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(CalendarMultiContainer, null, panels.map((panelOwnerState, i) => /* @__PURE__ */ React12.createElement(
|
|
1648
|
+
CalendarPanel,
|
|
1649
|
+
{
|
|
1650
|
+
key: panelOwnerState.viewMonth.toISOString(),
|
|
1651
|
+
ownerState: panelOwnerState,
|
|
1652
|
+
panelIndex: i,
|
|
1653
|
+
totalPanels: resolvedNumberOfMonths,
|
|
1654
|
+
onPrev: handlePrevClick,
|
|
1655
|
+
onNext: handleNextClick,
|
|
1656
|
+
onSwitchView: handleSwitchViewClick,
|
|
1657
|
+
isMonthViewAssistHintOpen,
|
|
1658
|
+
monthViewHintMessage
|
|
1659
|
+
}
|
|
1660
|
+
))), /* @__PURE__ */ React12.createElement(
|
|
1661
|
+
MultiMonthPickerDays,
|
|
1662
|
+
{
|
|
1663
|
+
panels,
|
|
1664
|
+
direction: ownerState.direction,
|
|
1665
|
+
numberOfMonths: resolvedNumberOfMonths
|
|
1666
|
+
}
|
|
1667
|
+
)));
|
|
1668
|
+
}
|
|
1669
|
+
return /* @__PURE__ */ React12.createElement(CalendarRoot, { ref, ...others, style: { maxWidth: `${maxWidth}px` } }, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React12.createElement(
|
|
1454
1670
|
Tooltip_default,
|
|
1455
1671
|
{
|
|
1456
1672
|
title: monthViewHintMessage,
|
|
@@ -2791,7 +3007,8 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2791
3007
|
maxDate: maxDate ? new Date(maxDate) : void 0,
|
|
2792
3008
|
disableFuture,
|
|
2793
3009
|
disablePast,
|
|
2794
|
-
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
|
|
3010
|
+
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0,
|
|
3011
|
+
locale
|
|
2795
3012
|
}
|
|
2796
3013
|
), !hideClearButton && /* @__PURE__ */ React18.createElement(
|
|
2797
3014
|
DialogActions_default,
|
|
@@ -4839,6 +5056,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4839
5056
|
hideClearButton,
|
|
4840
5057
|
readOnly,
|
|
4841
5058
|
presets,
|
|
5059
|
+
numberOfMonths,
|
|
4842
5060
|
...innerProps
|
|
4843
5061
|
} = props;
|
|
4844
5062
|
const innerRef = useRef8(null);
|
|
@@ -5035,7 +5253,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
5035
5253
|
"aria-label": "Calendar Tooltip",
|
|
5036
5254
|
"aria-expanded": open
|
|
5037
5255
|
},
|
|
5038
|
-
/* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(CalendarSheetContent2, null, /* @__PURE__ */ React26.createElement(CalendarSection2,
|
|
5256
|
+
/* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(CalendarSheetContent2, null, /* @__PURE__ */ React26.createElement(CalendarSection2, { style: { width: "auto" } }, /* @__PURE__ */ React26.createElement(
|
|
5039
5257
|
Calendar_default,
|
|
5040
5258
|
{
|
|
5041
5259
|
rangeSelection: true,
|
|
@@ -5044,7 +5262,9 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
5044
5262
|
minDate: minDate ? new Date(minDate) : void 0,
|
|
5045
5263
|
maxDate: maxDate ? new Date(maxDate) : void 0,
|
|
5046
5264
|
disableFuture,
|
|
5047
|
-
disablePast
|
|
5265
|
+
disablePast,
|
|
5266
|
+
locale,
|
|
5267
|
+
numberOfMonths
|
|
5048
5268
|
}
|
|
5049
5269
|
), !hideClearButton && /* @__PURE__ */ React26.createElement(
|
|
5050
5270
|
DialogActions_default,
|
|
@@ -7184,7 +7404,8 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
7184
7404
|
minDate: minDate ? new Date(minDate) : void 0,
|
|
7185
7405
|
maxDate: maxDate ? new Date(maxDate) : void 0,
|
|
7186
7406
|
disableFuture,
|
|
7187
|
-
disablePast
|
|
7407
|
+
disablePast,
|
|
7408
|
+
locale
|
|
7188
7409
|
}
|
|
7189
7410
|
), /* @__PURE__ */ React47.createElement(
|
|
7190
7411
|
DialogActions_default,
|