@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/CalendarRange.tsx

@@ -1,628 +0,0 @@
-import clsx from "clsx";
-import {
-  typography,
-  componentPadding,
-  layoutPaddding,
-  layoutGap,
-} from "../classNames";
-import { Icon } from "./Icon";
-import React, { useEffect, useRef, useState } from "react";
-import { Temporal } from "@js-temporal/polyfill";
-import { Menu, MenuOption } from ".";
-
-export interface CalendarRangeProps {
-  from?: string | number;
-  to?: string | number;
-  onChange?: (from: string, to: string) => void;
-  onPendingFromChange?: (from: string) => void;
-  isDateAvailable?: (date: Temporal.PlainDate) => boolean;
-  /**
-   * Display mode: 'single' for one month, 'double' for two months side by side (default)
-   */
-  mode?: "single" | "double";
-  cardStyle?: boolean;
-  /**
-   * Disable range selection in single mode. When true, single mode will only allow single date selection.
-   * Only applies when mode is "single".
-   */
-  disableRange?: boolean;
-  id?: string;
-  testid?: string;
-}
-
-/**
- * Returns true if the given date is a weekend (Saturday or Sunday).
- * @param date Temporal.PlainDate
- */
-export function isWeekend(date: Temporal.PlainDate): boolean {
-  // 6 = Saturday, 7 = Sunday (Temporal: 1=Monday, 7=Sunday)
-  return date.dayOfWeek === 6 || date.dayOfWeek === 7;
-}
-
-// DateCell component for rendering a single day
-interface DateCellProps {
-  date: Temporal.PlainDate;
-  isInMonth: boolean;
-  isToday: boolean;
-  isSelected: boolean;
-  inRange: boolean;
-  isDisabled: boolean;
-  onClick: () => void;
-  onMouseEnter: () => void;
-  onMouseLeave: () => void;
-  /** True if this cell is the start of the selected range */
-  isRangeStart?: boolean;
-  /** True if this cell is the end of the selected range */
-  isRangeEnd?: boolean;
-  /** True if range selection is disabled in single mode */
-  isRangeDisabled?: boolean;
-  id?: string;
-  testid?: string;
-}
-
-function DateCell({
-  date,
-  isInMonth,
-  isToday,
-  isSelected,
-  inRange,
-  isDisabled,
-  isRangeStart,
-  isRangeEnd,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  cellPadding = "",
-  isRangeDisabled = false,
-  id,
-  testid,
-  ...props
-}: DateCellProps & { cellPadding?: string }) {
-  return (
-    <span
-      {...props}
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
-        typography.caption,
-        cellPadding,
-        !isToday &&
-          !isSelected &&
-          !inRange &&
-          !isDisabled &&
-          !isRangeStart &&
-          !isRangeEnd &&
-          "border-transparent",
-        !isInMonth && "border-transparent",
-        // Today: subtle border ring
-        isToday &&
-          !isSelected &&
-          !inRange &&
-          "rounded-full border-border-primary-normal ",
-        // Selected: Figma blue, white text, strong shadow
-        isSelected && "bg-action-400 text-white border-action-400 z-10",
-        !isSelected && !inRange && "rounded-base",
-        // When range is disabled OR when only 'from' is selected (no range yet), apply rounded corners
-        (isRangeDisabled || (!inRange && isSelected)) && "rounded-base",
-        inRange && isSelected && "hover:border-action-500",
-        // In range: Figma light blue background
-        inRange &&
-          !isSelected &&
-          "bg-action-100 text-text-primary-normal border-y-action-400 border-x-0  ",
-        // Disabled: Figma gray, no pointer, no hover
-        isDisabled && !inRange
-          ? "text-text-primary-disabled bg-transparent pointer-events-none opacity-40 border-transparent"
-          : [
-              "text-text-primary-normal cursor-pointer",
-              // Figma hover: blue bg, blue text (or red text if selected)
-              isSelected
-                ? "hover:bg-background-action-primary-hover hover:text-white"
-                : "hover:bg-action-100 hover:text-text-action-primary-hover",
-              // Figma active: darker blue bg, white text
-              "active:bg-action-300 active:text-white",
-              // Figma focus: ring
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-400",
-            ],
-        isRangeStart && "rounded-l",
-        isRangeEnd && "rounded-r",
-      )}
-      tabIndex={isDisabled ? -1 : 0}
-      aria-disabled={isDisabled}
-      onClick={() => !isDisabled && isInMonth && onClick()}
-      onMouseEnter={() => isInMonth && onMouseEnter()}
-      onMouseLeave={() => isInMonth && onMouseLeave()}
-    >
-      {isInMonth ? date.day : ""}
-    </span>
-  );
-}
-
-export function CalendarRange({
-  from,
-  to,
-  onChange,
-  onPendingFromChange,
-  isDateAvailable,
-  mode = "double",
-  cardStyle = false,
-  disableRange = false,
-  id,
-  testid,
-}: CalendarRangeProps) {
-  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-  // Parse from/to props
-  const parseDate = (d?: string | number) => {
-    if (!d) {
-      return undefined;
-    }
-
-    try {
-      if (typeof d === "number") {
-        return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
-      }
-
-      if (typeof d === "string") {
-        return Temporal.PlainDate.from(d);
-      }
-
-      return undefined;
-    } catch (error) {
-      // If parsing fails, return current date instead of throwing
-      console.error("Invalid date format:", d, error);
-      return Temporal.Now.plainDateISO();
-    }
-  };
-  const fromDate = parseDate(from);
-  const toDate = parseDate(to);
-
-  // Internal state for visible months and selection
-  const today = Temporal.Now.plainDateISO();
-  const [baseMonth, setBaseMonth] = useState(
-    fromDate ?? today.with({ day: 1 }),
-  );
-  const [selecting, setSelecting] = useState<"from" | "to">("from");
-  const [pendingFrom, setPendingFrom] = useState<
-    Temporal.PlainDate | undefined
-  >(undefined);
-  const [hoveredDate, setHoveredDate] = useState<
-    Temporal.PlainDate | undefined
-  >(undefined);
-
-  // Update base month when from/to props change
-  useEffect(() => {
-    if (fromDate) {
-      setBaseMonth(fromDate.with({ day: 1 }));
-    } else if (toDate) {
-      setBaseMonth(toDate.with({ day: 1 }));
-    }
-  }, [from, to]);
-
-  // Reset selection state when from/to props change externally
-  useEffect(() => {
-    if (fromDate && toDate) {
-      setSelecting("from");
-      setPendingFrom(undefined);
-      setHoveredDate(undefined);
-    }
-  }, [from, to]);
-
-  // Helper to get month data
-  function getMonthData(monthOffset: number) {
-    const monthDate = baseMonth.add({ months: 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,
-    };
-  }
-
-  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;
-
-    // Single mode with range disabled: just select the date directly
-    if (mode === "single" && disableRange) {
-      if (onChange) {
-        onChange(date.toString(), date.toString());
-      }
-      return;
-    }
-
-    // Range mode (or single mode with range enabled): handle two-step selection
-    if (selecting === "from") {
-      setPendingFrom(date);
-      setSelecting("to");
-      setHoveredDate(undefined);
-      onPendingFromChange?.(date.toString());
-      // Hide current from/to selection when starting a new selection
-    } else if (pendingFrom) {
-      if (onChange) {
-        const [start, end] =
-          Temporal.PlainDate.compare(date, pendingFrom) < 0
-            ? [date, pendingFrom]
-            : [pendingFrom, date];
-        onChange(start.toString(), end.toString());
-      }
-      setPendingFrom(undefined);
-      setSelecting("from");
-      setHoveredDate(undefined);
-    }
-  }
-
-  // Range highlighting
-  function isInRange(date: Temporal.PlainDate) {
-    // No range highlighting in single mode when range is disabled
-    if (mode === "single" && disableRange) {
-      return false;
-    }
-
-    if (pendingFrom && selecting === "to" && hoveredDate) {
-      const [start, end] =
-        Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0
-          ? [hoveredDate, pendingFrom]
-          : [pendingFrom, hoveredDate];
-      return (
-        Temporal.PlainDate.compare(date, start) >= 0 &&
-        Temporal.PlainDate.compare(date, end) <= 0
-      );
-    }
-    if (!pendingFrom && fromDate && toDate) {
-      return (
-        Temporal.PlainDate.compare(date, fromDate) >= 0 &&
-        Temporal.PlainDate.compare(date, toDate) <= 0
-      );
-    }
-    return false;
-  }
-
-  // Render
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "relative bg-background-grouped-primary-normal rounded-base w-fit",
-        layoutPaddding,
-        layoutGap,
-        cardStyle && "shadow-4",
-        // baseTransition,
-        "overflow-hidden",
-      )}
-    >
-      <div
-        className={clsx(
-          "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
-          layoutGap,
-        )}
-      >
-        {(mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
-          return (
-            <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 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 hoverDateIsBeforePendingFrom =
-              hoveredDate &&
-              pendingFrom &&
-              Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
-
-            const hoverDateIsAfterPendingFrom =
-              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 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",
-
-            // 1px width, full height, matches Figma divider
-            "w-px",
-          )}
-        />
-      )}
-    </React.Fragment>
-  );
-}
-
-export default CalendarRange;