@ceed/ads 1.31.1 → 1.32.1-next.1

package/dist/index.js

@@ -878,8 +878,12 @@ var useCalendarProps = (inProps) => {
 // src/components/Calendar/hooks/use-calendar.ts
 import { useCallback as useCallback4, useState as useState3 } from "react";
 var useCalendar = (ownerState) => {
-  const [hoverDay, setHoverDay] = useState3(null);
-  const [hoverMonth, setHoverMonth] = useState3(null);
+  const [localHoverDay, setLocalHoverDay] = useState3(null);
+  const [localHoverMonth, setLocalHoverMonth] = useState3(null);
+  const hoverDay = ownerState.hoverDay !== void 0 ? ownerState.hoverDay : localHoverDay;
+  const setHoverDay = ownerState.onHoverDayChange ?? setLocalHoverDay;
+  const hoverMonth = ownerState.hoverMonth !== void 0 ? ownerState.hoverMonth : localHoverMonth;
+  const setHoverMonth = ownerState.onHoverMonthChange ?? setLocalHoverMonth;
   return {
     calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
     onPrev: useCallback4(() => {
@@ -1078,11 +1082,18 @@ var MONTH_NAV_CLICK_THRESHOLD = 3;
 var MONTH_VIEW_HINT_DURATION_MS = 5e3;
 var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
 var lastMonthViewAssistHintShownAt = 0;
+var CALENDAR_PANEL_WIDTH = 264;
+var CALENDAR_PANEL_GAP = 16;
 var CalendarRoot = styled5("div", {
   name: "Calendar",
   slot: "root"
+})({});
+var CalendarMultiContainer = styled5("div", {
+  name: "Calendar",
+  slot: "multiContainer"
 })({
-  maxWidth: "264px"
+  display: "flex",
+  gap: `${CALENDAR_PANEL_GAP}px`
 });
 var CalendarHeader = styled5("div", {
   name: "Calendar",
@@ -1117,6 +1128,16 @@ var CalendarViewTable = styled5(motion13.table, {
     paddingBottom: theme.spacing(2)
   }
 }));
+var StaticCalendarViewTable = styled5("table")(({ theme }) => ({
+  borderSpacing: 0,
+  "& td, & th": {
+    padding: 0
+  },
+  "& th": {
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2)
+  }
+}));
 var CalendarWeekHeaderContainer = styled5("thead", {
   name: "Calendar",
   slot: "weekHeaderContainer"
@@ -1365,6 +1386,133 @@ var PickerMonths = (props) => {
     /* @__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 } })))))
   )));
 };
+var PlainPickerDays = ({ ownerState }) => {
+  const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
+  const calendarDates = useMemo4(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+  const weekdayNames = useMemo4(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
+  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(
+    (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" }))
+  )), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 13, style: { height: 4 } }))))));
+};
+var MultiMonthPickerDays = ({
+  panels,
+  direction,
+  numberOfMonths
+}) => {
+  const slideDistance = CALENDAR_PANEL_WIDTH * numberOfMonths + CALENDAR_PANEL_GAP * (numberOfMonths - 1) + CALENDAR_PANEL_WIDTH;
+  const multiVariants = {
+    enter: (dir) => ({ x: dir > 0 ? slideDistance : -slideDistance, opacity: 0 }),
+    center: { position: "relative", zIndex: 1, x: 0, opacity: 1 },
+    exit: (dir) => ({
+      position: "absolute",
+      zIndex: 0,
+      x: dir < 0 ? slideDistance : -slideDistance,
+      opacity: 0
+    })
+  };
+  const key = `${panels[0].viewMonth.toISOString()}_${direction}`;
+  return /* @__PURE__ */ React12.createElement("div", { style: { position: "relative", overflow: "hidden", minHeight: "250px" } }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: direction }, /* @__PURE__ */ React12.createElement(
+    motion13.div,
+    {
+      key,
+      custom: direction,
+      variants: multiVariants,
+      initial: "enter",
+      animate: "center",
+      exit: "exit",
+      transition: {
+        x: { type: "spring", stiffness: 300, damping: 30 },
+        opacity: { duration: 0.2 }
+      },
+      drag: "x",
+      dragConstraints: { left: 0, right: 0 },
+      dragElastic: 1,
+      onDragEnd: (e, { offset, velocity }) => {
+        const swipe = swipePower(offset.x, velocity.x);
+        if (swipe < -swipeConfidenceThreshold) {
+          const date = new Date(panels[0].viewMonth);
+          date.setMonth(date.getMonth() + 1);
+          panels[0].onMonthChange?.(date);
+        } else if (swipe > swipeConfidenceThreshold) {
+          const date = new Date(panels[0].viewMonth);
+          date.setMonth(date.getMonth() - 1);
+          panels[0].onMonthChange?.(date);
+        }
+      },
+      style: { display: "flex", gap: `${CALENDAR_PANEL_GAP}px`, top: 0, left: 0, width: "100%" }
+    },
+    panels.map((panelOwnerState) => /* @__PURE__ */ React12.createElement(
+      "div",
+      {
+        key: panelOwnerState.viewMonth.toISOString(),
+        style: {
+          flex: "0 0 auto",
+          width: `${CALENDAR_PANEL_WIDTH}px`,
+          paddingLeft: "16px",
+          paddingRight: "16px",
+          boxSizing: "border-box"
+        }
+      },
+      /* @__PURE__ */ React12.createElement(PlainPickerDays, { ownerState: panelOwnerState })
+    ))
+  )));
+};
+var CalendarPanel = ({
+  ownerState,
+  panelIndex,
+  totalPanels,
+  onPrev,
+  onNext,
+  onSwitchView,
+  isMonthViewAssistHintOpen,
+  monthViewHintMessage
+}) => {
+  const showPrev = panelIndex === 0;
+  const showNext = panelIndex === totalPanels - 1;
+  const title = ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default");
+  return /* @__PURE__ */ React12.createElement("div", { style: { flex: 1, maxWidth: `${CALENDAR_PANEL_WIDTH}px` } }, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(
+    IconButton_default,
+    {
+      size: "sm",
+      onClick: onPrev,
+      "aria-label": `Previous ${ownerState.view === "day" ? "Month" : "Year"}`,
+      style: { visibility: showPrev ? "visible" : "hidden" }
+    },
+    /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)
+  ), /* @__PURE__ */ React12.createElement(
+    Tooltip_default,
+    {
+      title: monthViewHintMessage,
+      arrow: true,
+      open: panelIndex === 0 && isMonthViewAssistHintOpen,
+      placement: "bottom",
+      disableFocusListener: true,
+      disableHoverListener: true,
+      disableTouchListener: true,
+      variant: "solid"
+    },
+    /* @__PURE__ */ React12.createElement(
+      CalendarSwitchViewButton,
+      {
+        ownerState,
+        variant: "plain",
+        color: "neutral",
+        onClick: onSwitchView,
+        "aria-label": "Switch Calendar View"
+      },
+      title
+    )
+  ), /* @__PURE__ */ React12.createElement(
+    IconButton_default,
+    {
+      size: "sm",
+      onClick: onNext,
+      "aria-label": `Next ${ownerState.view === "day" ? "Month" : "Year"}`,
+      style: { visibility: showNext ? "visible" : "hidden" }
+    },
+    /* @__PURE__ */ React12.createElement(ChevronRightIcon, null)
+  )));
+};
 var Calendar = forwardRef4((inProps, ref) => {
   const [props, ownerState] = useCalendarProps(inProps);
   const {
@@ -1381,6 +1529,7 @@ var Calendar = forwardRef4((inProps, ref) => {
     maxDate,
     disableFuture,
     disablePast,
+    numberOfMonths,
     ...others
   } = props;
   const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
@@ -1388,6 +1537,9 @@ var Calendar = forwardRef4((inProps, ref) => {
   const monthNavClickTimestampsRef = useRef3([]);
   const monthViewAssistHintShownInSessionRef = useRef3(false);
   const monthViewAssistHintTimeoutRef = useRef3(null);
+  const [hoverDay, setHoverDay] = useState4(null);
+  const [hoverMonth, setHoverMonth] = useState4(null);
+  const resolvedNumberOfMonths = numberOfMonths ?? 1;
   const hasEndDate = Boolean(value?.[1]);
   const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
   const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
@@ -1450,7 +1602,71 @@ var Calendar = forwardRef4((inProps, ref) => {
     closeMonthViewAssistHint();
     onViewChange?.();
   }, [closeMonthViewAssistHint, onViewChange]);
-  return /* @__PURE__ */ React12.createElement(CalendarRoot, { ref, ...others }, /* @__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(
+  const maxWidth = CALENDAR_PANEL_WIDTH * resolvedNumberOfMonths + CALENDAR_PANEL_GAP * (resolvedNumberOfMonths - 1);
+  if (resolvedNumberOfMonths > 1) {
+    const panels = Array.from({ length: resolvedNumberOfMonths }, (_, i) => {
+      const panelViewMonth = new Date(ownerState.viewMonth);
+      panelViewMonth.setMonth(panelViewMonth.getMonth() + i);
+      panelViewMonth.setDate(1);
+      panelViewMonth.setHours(0, 0, 0, 0);
+      return {
+        ...ownerState,
+        viewMonth: panelViewMonth,
+        hoverDay,
+        onHoverDayChange: setHoverDay,
+        hoverMonth,
+        onHoverMonthChange: setHoverMonth
+      };
+    });
+    return /* @__PURE__ */ React12.createElement(CalendarRoot, { ref, ...others, style: { maxWidth: `${maxWidth}px` } }, view === "month" ? (
+      // Month view: single header + single month grid (consistent with single-month path)
+      /* @__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(
+        Tooltip_default,
+        {
+          title: monthViewHintMessage,
+          arrow: true,
+          open: false,
+          placement: "bottom",
+          disableFocusListener: true,
+          disableHoverListener: true,
+          disableTouchListener: true,
+          variant: "solid"
+        },
+        /* @__PURE__ */ React12.createElement(
+          CalendarSwitchViewButton,
+          {
+            ownerState,
+            variant: "plain",
+            color: "neutral",
+            onClick: handleSwitchViewClick,
+            "aria-label": "Switch Calendar View"
+          },
+          calendarTitle
+        )
+      ), /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handleNextClick, "aria-label": "Next Year" }, /* @__PURE__ */ React12.createElement(ChevronRightIcon, null))), /* @__PURE__ */ React12.createElement(PickerMonths, { ownerState }))
+    ) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(CalendarMultiContainer, null, panels.map((panelOwnerState, i) => /* @__PURE__ */ React12.createElement(
+      CalendarPanel,
+      {
+        key: panelOwnerState.viewMonth.toISOString(),
+        ownerState: panelOwnerState,
+        panelIndex: i,
+        totalPanels: resolvedNumberOfMonths,
+        onPrev: handlePrevClick,
+        onNext: handleNextClick,
+        onSwitchView: handleSwitchViewClick,
+        isMonthViewAssistHintOpen,
+        monthViewHintMessage
+      }
+    ))), /* @__PURE__ */ React12.createElement(
+      MultiMonthPickerDays,
+      {
+        panels,
+        direction: ownerState.direction,
+        numberOfMonths: resolvedNumberOfMonths
+      }
+    )));
+  }
+  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(
     Tooltip_default,
     {
       title: monthViewHintMessage,
@@ -3452,8 +3668,9 @@ var StyledTableRow2 = styled12("tr", {
 var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
   return prevProps.striped === nextProps.striped && prevProps.style?.height === nextProps.style?.height && prevProps.style?.transform === nextProps.style?.transform && // @ts-ignore
   prevProps["data-row-id"] === nextProps["data-row-id"] && // @ts-ignore
-  prevProps["data-index"] === nextProps["data-index"] && prevProps.tabIndex === nextProps.tabIndex && prevProps["aria-checked"] === nextProps["aria-checked"] && // Include children check to handle isCellEditable changes
-  prevProps.children === nextProps.children;
+  prevProps["data-index"] === nextProps["data-index"] && prevProps.tabIndex === nextProps.tabIndex && prevProps["aria-checked"] === nextProps["aria-checked"] && // Track column structure changes (e.g. isCellEditable toggled, columns added/removed)
+  // @ts-ignore
+  prevProps["data-columns-key"] === nextProps["data-columns-key"];
 });
 
 // src/components/DataTable/hooks.ts
@@ -4160,6 +4377,15 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/DataTable/DataTable.tsx
+var _columnsVersionCache = /* @__PURE__ */ new WeakMap();
+var _columnsVersionCounter = 0;
+function getColumnsVersion(columns) {
+  if (!_columnsVersionCache.has(columns)) {
+    _columnsVersionCache.set(columns, ++_columnsVersionCounter);
+  }
+  return _columnsVersionCache.get(columns);
+}
+var EMPTY_CHECKBOX_PROPS = {};
 function Component(props, apiRef) {
   const {
     rows,
@@ -4207,7 +4433,7 @@ function Component(props, apiRef) {
       noRowsOverlay: NoRowsOverlay = DefaultNoRowsOverlay
     } = {},
     slotProps: {
-      checkbox: checkboxProps = {},
+      checkbox: checkboxProps = EMPTY_CHECKBOX_PROPS,
       toolbar: toolbarProps,
       background: backgroundProps = {},
       noRowsOverlay: noRowsOverlayProps = {}
@@ -4255,6 +4481,28 @@ function Component(props, apiRef) {
     overscan: 10
   });
   const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
+  const columnsKey = getColumnsVersion(columns);
+  const headerCheckboxElement = useMemo10(
+    () => /* @__PURE__ */ React25.createElement(
+      RenderCheckbox,
+      {
+        onChange: onAllCheckboxChange,
+        checked: isAllSelected,
+        indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+        disabled: dataInPage.length > 0 && !selectableRowCount,
+        ...checkboxProps
+      }
+    ),
+    [
+      RenderCheckbox,
+      onAllCheckboxChange,
+      isAllSelected,
+      selectionModel,
+      selectableRowCount,
+      dataInPage.length,
+      checkboxProps
+    ]
+  );
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
   const showNoRowsOverlay = !loading && rowCount === 0;
@@ -4459,16 +4707,7 @@ function Component(props, apiRef) {
             verticalAlign: "middle"
           }
         },
-        /* @__PURE__ */ React25.createElement(
-          RenderCheckbox,
-          {
-            onChange: onAllCheckboxChange,
-            checked: isAllSelected,
-            indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
-            disabled: dataInPage.length > 0 && !selectableRowCount,
-            ...checkboxProps
-          }
-        )
+        headerCheckboxElement
       ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.filter((g) => g.colspan > 0).map((group, groupIndex) => {
         const nextGroup = levelGroups[groupIndex + 1];
         const emptyCells = nextGroup ? nextGroup.startIndex - (group.startIndex + group.colspan) : columns.length - (group.startIndex + group.colspan);
@@ -4495,16 +4734,7 @@ function Component(props, apiRef) {
             textAlign: "center"
           }
         },
-        /* @__PURE__ */ React25.createElement(
-          RenderCheckbox,
-          {
-            onChange: onAllCheckboxChange,
-            checked: isAllSelected,
-            indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
-            disabled: dataInPage.length > 0 && !selectableRowCount,
-            ...checkboxProps
-          }
-        )
+        headerCheckboxElement
       ), columns.map((c, i) => (
         // @ts-ignore
         /* @__PURE__ */ React25.createElement(
@@ -4575,6 +4805,7 @@ function Component(props, apiRef) {
               key: virtualizedRow.key,
               "data-row-id": rowId,
               "data-index": rowIndex,
+              "data-columns-key": columnsKey,
               "aria-rowindex": rowIndex + 1,
               role: checkboxSelection && !disableSelectionOnClick ? "checkbox" : void 0,
               tabIndex: focusedRowId === rowId ? 0 : -1,
@@ -4840,6 +5071,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     hideClearButton,
     readOnly,
     presets,
+    numberOfMonths,
     ...innerProps
   } = props;
   const innerRef = useRef8(null);
@@ -5036,7 +5268,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(CalendarSheetContent2, null, /* @__PURE__ */ React26.createElement(CalendarSection2, null, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(CalendarSheetContent2, null, /* @__PURE__ */ React26.createElement(CalendarSection2, { style: { width: "auto" } }, /* @__PURE__ */ React26.createElement(
       Calendar_default,
       {
         rangeSelection: true,
@@ -5046,7 +5278,8 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
         maxDate: maxDate ? new Date(maxDate) : void 0,
         disableFuture,
         disablePast,
-        locale
+        locale,
+        numberOfMonths
       }
     ), !hideClearButton && /* @__PURE__ */ React26.createElement(
       DialogActions_default,