@dmsi/wedgekit-react 0.0.231 → 0.0.232

package/dist/index.css

@@ -1881,6 +1881,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-\[2px\] {
+    padding-block: 2px;
+  }
   .py-\[15px\] {
     padding-block: 15px;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.231",
+  "version": "0.0.232",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/CalendarRange.tsx

@@ -6,8 +6,9 @@ import {
   layoutGap,
 } from "../classNames";
 import { Icon } from "./Icon";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Temporal } from "@js-temporal/polyfill";
+import { Menu, MenuOption } from ".";
 
 export interface CalendarRangeProps {
   from?: string | number;
@@ -218,6 +219,19 @@ export function CalendarRange({
     };
   }
 
+  function getMonthDataWith(monthOffset: number) {
+    const monthDate = baseMonth.with({ month: monthOffset }).with({ day: 1 });
+    const days = monthDate.daysInMonth;
+    const firstDayOffset = monthDate.dayOfWeek % 7;
+    return {
+      name: monthDate.toLocaleString("en-US", { month: "long" }),
+      year: monthDate.year,
+      days,
+      firstDayOffset,
+      date: monthDate,
+    };
+  }
+
   // Click handlers
   function handleDayClick(date: Temporal.PlainDate) {
     if (isDateAvailable && !isDateAvailable(date)) return;
@@ -297,177 +311,314 @@ export function CalendarRange({
         )}
       >
         {(mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
-          const month = getMonthData(offset);
-          // Always show 6 weeks (42 days)
-          const totalCells = 42;
-          const emptyCells = month.firstDayOffset;
           return (
-            <React.Fragment key={month.name + month.year}>
-              <div
-                // key={month.name + month.year}
-                className={clsx("flex flex-col")}
-              >
-                <div
-                  className={clsx(
-                    "flex flex-row items-center justify-between",
-                    typography.label,
-                    "text-text-action-primary-normal",
-                  )}
-                >
-                  {idx === 0 ? (
-                    <button
-                      id={id ? `${id}-prev-month-button` : undefined}
-                      data-testid={
-                        testid ? `${testid}-prev-month-button` : undefined
-                      }
-                      type="button"
-                      className={clsx(
-                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
-                        componentPadding,
-                      )}
-                      aria-label="Previous month"
-                      onClick={() =>
-                        setBaseMonth(baseMonth.subtract({ months: 1 }))
-                      }
-                    >
-                      <Icon name="chevron_left" size={24} />
-                    </button>
-                  ) : (
-                    <span className={clsx(componentPadding, "mr-1")} />
-                  )}
-                  <div className="flex gap-desktop-compact-component-padding">
-                    <span className="font-semibold text-text-action-primary-normal text-[14px] leading-[1] truncate">
-                      {month.name}
-                    </span>
-                    <span className="font-semibold text-text-action-primary-normal text-[14px] leading-[1] px-1 truncate">
-                      {month.year}
-                    </span>
-                  </div>
-                  {(mode === "double" ? idx === 1 : true) ? (
-                    <button
-                      id={id ? `${id}-next-month-button` : undefined}
-                      data-testid={
-                        testid ? `${testid}-next-month-button` : undefined
-                      }
-                      type="button"
-                      className={clsx(
-                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
-                        componentPadding,
-                      )}
-                      aria-label="Next month"
-                      onClick={() => setBaseMonth(baseMonth.add({ months: 1 }))}
-                    >
-                      <Icon name="chevron_right" size={24} />
-                    </button>
-                  ) : (
-                    <span className={clsx(componentPadding, "ml-1")} />
-                  )}
-                </div>
-                <div className={clsx("grid grid-cols-7")}>
-                  {weekDays.map((d) => (
-                    <span
-                      key={d}
-                      className={clsx(
-                        typography.caption,
-                        "text-text-secondary-normal text-center",
-                        "w-10",
-                      )}
-                    >
-                      {d}
-                    </span>
-                  ))}
-                </div>
-                <div className={clsx("grid grid-cols-7")}>
-                  {Array.from({ length: totalCells }).map((_, i) => {
-                    const day = i - emptyCells + 1;
-                    const date = month.date.with({ day: 1 }).add({
-                      days: i - emptyCells,
-                    });
-                    const isInMonth = day > 0 && day <= month.days;
-                    const isToday = isInMonth && date.equals(today);
-                    const isSelected =
-                      isInMonth &&
-                      ((!pendingFrom && fromDate && date.equals(fromDate)) ||
-                        (!pendingFrom && toDate && date.equals(toDate)) ||
-                        (pendingFrom && date.equals(pendingFrom)));
-                    const inRange = isInMonth && isInRange(date);
-                    const isDisabled =
-                      !isInMonth ||
-                      (isDateAvailable ? !isDateAvailable(date) : false);
-                    // New: determine if this is the start or end of the range
+            <CalendarPane
+              key={idx}
+              getMonthData={getMonthData}
+              getMonthDataWith={getMonthDataWith}
+              offset={offset}
+              idx={idx}
+              id={id}
+              testid={testid}
+              baseMonth={baseMonth}
+              setBaseMonth={setBaseMonth}
+              mode={mode}
+              pendingFrom={pendingFrom}
+              weekDays={weekDays}
+              fromDate={fromDate}
+              toDate={toDate}
+              isDateAvailable={isDateAvailable}
+              disableRange={disableRange}
+              hoveredDate={hoveredDate}
+              isInRange={isInRange}
+              today={today}
+              setHoveredDate={setHoveredDate}
+              handleDayClick={handleDayClick}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+function CalendarPane({
+  getMonthData,
+  getMonthDataWith,
+  offset,
+  idx,
+  id,
+  testid,
+  baseMonth,
+  setBaseMonth,
+  mode,
+  pendingFrom,
+  weekDays,
+  fromDate,
+  toDate,
+  isDateAvailable,
+  disableRange,
+  hoveredDate,
+  isInRange,
+  today,
+  setHoveredDate,
+  handleDayClick,
+}: {
+  getMonthData: (offset: number) => {
+    name: string;
+    year: number;
+    days: number;
+    firstDayOffset: number;
+    date: Temporal.PlainDate;
+  };
+  getMonthDataWith: (offset: number) => {
+    name: string;
+    year: number;
+    days: number;
+    firstDayOffset: number;
+    date: Temporal.PlainDate;
+  };
+  offset: number;
+  idx: number;
+  id: string | undefined;
+  testid: string | undefined;
+  baseMonth: Temporal.PlainDate;
+  setBaseMonth: (date: Temporal.PlainDate) => void;
+  mode: "single" | "range" | "double";
+  pendingFrom: Temporal.PlainDate | undefined;
+  weekDays: string[];
+  fromDate: Temporal.PlainDate | undefined;
+  toDate: Temporal.PlainDate | undefined;
+  isDateAvailable?: (date: Temporal.PlainDate) => boolean;
+  disableRange: boolean;
+  hoveredDate: Temporal.PlainDate | undefined;
+  isInRange: (date: Temporal.PlainDate) => boolean;
+  today: Temporal.PlainDate;
+  setHoveredDate: (date: Temporal.PlainDate | undefined) => void;
+  handleDayClick: (date: Temporal.PlainDate) => void;
+}) {
+  const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  const years = Array.from({ length: 100 }).map(
+    (_, i) => baseMonth.year - 50 + i,
+  );
+  const [monthMenuOpen, setMonthMenuOpen] = useState(false);
+  const [yearMenuOpen, setYearMenuOpen] = useState(false);
 
-                    const hoverDateIsBeforePendingFrom =
-                      hoveredDate &&
-                      pendingFrom &&
-                      Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
+  const monthMenuRef = useRef<HTMLButtonElement | null>(null);
+  const yearMenuRef = useRef<HTMLButtonElement | null>(null);
+  const month = getMonthData(offset);
+  // Always show 6 weeks (42 days)
+  const totalCells = 42;
+  const emptyCells = month.firstDayOffset;
+  return (
+    <React.Fragment key={month.name + month.year}>
+      <div
+        // key={month.name + month.year}
+        className={clsx("flex flex-col")}
+      >
+        <div
+          className={clsx(
+            "flex flex-row items-center justify-between",
+            typography.label,
+            "text-text-action-primary-normal",
+          )}
+        >
+          {idx === 0 ? (
+            <button
+              id={id ? `${id}-prev-month-button` : undefined}
+              data-testid={testid ? `${testid}-prev-month-button` : undefined}
+              type="button"
+              className={clsx(
+                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                componentPadding,
+              )}
+              aria-label="Previous month"
+              onClick={() => setBaseMonth(baseMonth.subtract({ months: 1 }))}
+            >
+              <Icon name="chevron_left" size={24} />
+            </button>
+          ) : (
+            <span className={clsx(componentPadding, "mr-1")} />
+          )}
+          <div className="flex gap-desktop-compact-component-padding">
+            <button
+              ref={(el) => {
+                monthMenuRef.current = el;
+              }}
+              type="button"
+              onClick={() => {
+                setMonthMenuOpen(true);
+                setYearMenuOpen(false);
+              }}
+              className="font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate"
+            >
+              {month.name}
+            </button>
+            <Menu
+              show={monthMenuOpen}
+              positionTo={monthMenuRef}
+              setShow={() => setMonthMenuOpen(false)}
+            >
+              {months
+                .map((x) => [x, getMonthDataWith(x + 1)] as const)
+                .map(([x, m]) => (
+                  <MenuOption
+                    key={m.name}
+                    selected={baseMonth.month === x + 1}
+                    onClick={() => {
+                      setBaseMonth(baseMonth.with({ month: x + 1 }));
+                      setMonthMenuOpen(false);
+                    }}
+                  >
+                    {m.name}
+                  </MenuOption>
+                ))}
+            </Menu>
+            <button
+              ref={(el) => {
+                yearMenuRef.current = el;
+              }}
+              type="button"
+              onClick={() => {
+                setYearMenuOpen(true);
+                setMonthMenuOpen(false);
+              }}
+              className="font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate"
+            >
+              {month.year}
+            </button>
+            <Menu
+              show={yearMenuOpen}
+              positionTo={yearMenuRef}
+              setShow={() => setYearMenuOpen(false)}
+            >
+              {years.map((y) => (
+                <MenuOption
+                  key={y}
+                  selected={baseMonth.year === y}
+                  onClick={() => {
+                    setBaseMonth(baseMonth.with({ year: y }));
+                    setYearMenuOpen(false);
+                  }}
+                >
+                  {y}
+                </MenuOption>
+              ))}
+            </Menu>
+          </div>
+          {(mode === "double" ? idx === 1 : true) ? (
+            <button
+              id={id ? `${id}-next-month-button` : undefined}
+              data-testid={testid ? `${testid}-next-month-button` : undefined}
+              type="button"
+              className={clsx(
+                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                componentPadding,
+              )}
+              aria-label="Next month"
+              onClick={() => setBaseMonth(baseMonth.add({ months: 1 }))}
+            >
+              <Icon name="chevron_right" size={24} />
+            </button>
+          ) : (
+            <span className={clsx(componentPadding, "ml-1")} />
+          )}
+        </div>
+        <div className={clsx("grid grid-cols-7")}>
+          {weekDays.map((d) => (
+            <span
+              key={d}
+              className={clsx(
+                typography.caption,
+                "text-text-secondary-normal text-center",
+                "w-10",
+              )}
+            >
+              {d}
+            </span>
+          ))}
+        </div>
+        <div className={clsx("grid grid-cols-7")}>
+          {Array.from({ length: totalCells }).map((_, i) => {
+            const day = i - emptyCells + 1;
+            const date = month.date.with({ day: 1 }).add({
+              days: i - emptyCells,
+            });
+            const isInMonth = day > 0 && day <= month.days;
+            const isToday = isInMonth && date.equals(today);
+            const isSelected =
+              isInMonth &&
+              ((!pendingFrom && fromDate && date.equals(fromDate)) ||
+                (!pendingFrom && toDate && date.equals(toDate)) ||
+                (pendingFrom && date.equals(pendingFrom)));
+            const inRange = isInMonth && isInRange(date);
+            const isDisabled =
+              !isInMonth || (isDateAvailable ? !isDateAvailable(date) : false);
+            // New: determine if this is the start or end of the range
 
-                    const hoverDateIsAfterPendingFrom =
-                      hoveredDate &&
-                      pendingFrom &&
-                      Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
+            const hoverDateIsBeforePendingFrom =
+              hoveredDate &&
+              pendingFrom &&
+              Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
 
-                    const isRangeStart =
-                      mode === "single" && disableRange
-                        ? false
-                        : (!pendingFrom &&
-                            isInMonth &&
-                            fromDate &&
-                            date.equals(fromDate)) ||
-                          (hoverDateIsAfterPendingFrom &&
-                            date.equals(pendingFrom));
+            const hoverDateIsAfterPendingFrom =
+              hoveredDate &&
+              pendingFrom &&
+              Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
 
-                    const isRangeEnd =
-                      mode === "single" && disableRange
-                        ? false
-                        : (!pendingFrom &&
-                            isInMonth &&
-                            toDate &&
-                            date.equals(toDate)) ||
-                          (hoverDateIsBeforePendingFrom &&
-                            date.equals(pendingFrom));
-                    return (
-                      <DateCell
-                        key={i}
-                        id={id ? `${id}-date-${date.toString()}` : undefined}
-                        testid={
-                          testid
-                            ? `${testid}-date-${date.toString()}`
-                            : undefined
-                        }
-                        date={date}
-                        isInMonth={!!isInMonth}
-                        isToday={!!isToday}
-                        isSelected={!!isSelected}
-                        inRange={!!inRange}
-                        isDisabled={!!isDisabled}
-                        onClick={() => handleDayClick(date)}
-                        onMouseEnter={() => setHoveredDate(date)}
-                        onMouseLeave={() => setHoveredDate(undefined)}
-                        isRangeStart={!!isRangeStart}
-                        isRangeEnd={!!isRangeEnd}
-                        isRangeDisabled={mode === "single" && disableRange}
-                        // Add cell padding for spacing
-                        cellPadding={componentPadding}
-                      />
-                    );
-                  })}
-                </div>
-              </div>
-              {mode === "double" && idx === 0 && (
-                <div
-                  className={clsx(
-                    "self-stretch bg-border-primary-normal rounded-base",
+            const isRangeStart =
+              mode === "single" && disableRange
+                ? false
+                : (!pendingFrom &&
+                    isInMonth &&
+                    fromDate &&
+                    date.equals(fromDate)) ||
+                  (hoverDateIsAfterPendingFrom && date.equals(pendingFrom));
 
-                    // 1px width, full height, matches Figma divider
-                    "w-px",
-                  )}
-                />
-              )}
-            </React.Fragment>
-          );
-        })}
+            const isRangeEnd =
+              mode === "single" && disableRange
+                ? false
+                : (!pendingFrom &&
+                    isInMonth &&
+                    toDate &&
+                    date.equals(toDate)) ||
+                  (hoverDateIsBeforePendingFrom && date.equals(pendingFrom));
+            return (
+              <DateCell
+                key={i}
+                id={id ? `${id}-date-${date.toString()}` : undefined}
+                testid={
+                  testid ? `${testid}-date-${date.toString()}` : undefined
+                }
+                date={date}
+                isInMonth={!!isInMonth}
+                isToday={!!isToday}
+                isSelected={!!isSelected}
+                inRange={!!inRange}
+                isDisabled={!!isDisabled}
+                onClick={() => handleDayClick(date)}
+                onMouseEnter={() => setHoveredDate(date)}
+                onMouseLeave={() => setHoveredDate(undefined)}
+                isRangeStart={!!isRangeStart}
+                isRangeEnd={!!isRangeEnd}
+                isRangeDisabled={mode === "single" && disableRange}
+                // Add cell padding for spacing
+                cellPadding={componentPadding}
+              />
+            );
+          })}
+        </div>
       </div>
-    </div>
+      {mode === "double" && idx === 0 && (
+        <div
+          className={clsx(
+            "self-stretch bg-border-primary-normal rounded-base",
+
+            // 1px width, full height, matches Figma divider
+            "w-px",
+          )}
+        />
+      )}
+    </React.Fragment>
   );
 }