@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/DatePicker/DatePickerGrid.module.scss

@@ -0,0 +1,172 @@
+@use '../../styles/mixins' as *;
+@use './DatePicker.tokens';
+
+.grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--date-picker-grid-gap);
+  padding: var(--date-picker-grid-padding);
+  background: var(--date-picker-grid-bg);
+  border: var(--border-width) solid var(--date-picker-grid-border-color);
+  border-radius: var(--date-picker-grid-radius);
+  box-shadow: var(--date-picker-grid-shadow);
+
+  // Floating popover: fixed width is intentional (escape hatch from Rule 4 —
+  // analogous to DropdownMenu/Popover).
+  width: var(--date-picker-grid-width);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--date-picker-grid-header-padding-x);
+}
+
+.navButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--date-picker-nav-size);
+  height: var(--date-picker-nav-size);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--date-picker-nav-radius);
+  color: var(--date-picker-nav-fg);
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--date-picker-nav-bg-hover);
+    color: var(--date-picker-nav-fg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.monthLabel {
+  font-size: var(--date-picker-month-font-size);
+  font-weight: var(--date-picker-month-font-weight);
+  color: var(--date-picker-month-fg);
+  font-variant-numeric: tabular-nums;
+}
+
+.cells {
+  display: flex;
+  flex-direction: column;
+}
+
+.weekdayRow,
+.weekRow {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--date-picker-weekday-height);
+  font-size: var(--date-picker-weekday-font-size);
+  font-weight: var(--date-picker-weekday-font-weight);
+  color: var(--date-picker-weekday-fg);
+  text-transform: uppercase;
+  letter-spacing: var(--date-picker-weekday-letter-spacing);
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--date-picker-cell-size);
+  height: var(--date-picker-cell-size);
+  padding: 0;
+  background: transparent;
+  border: var(--border-width) solid transparent;
+  border-radius: var(--date-picker-cell-radius);
+  font-family: inherit;
+  font-size: var(--date-picker-cell-font-size);
+  font-variant-numeric: tabular-nums;
+  color: var(--date-picker-cell-fg);
+  cursor: pointer;
+
+  // Hover-bg only on neutral cells. Selected / in-range / range-boundary
+  // cells already carry an accent fill — overriding it with bg-subtle would
+  // turn the text unreadable (white-on-grey).
+  &:hover:not(:disabled, .disabled, .selected, .inRange, .rangeStart, .rangeEnd) {
+    background: var(--date-picker-cell-bg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.outside {
+  color: var(--date-picker-cell-fg-outside);
+}
+
+.today {
+  border-color: var(--date-picker-cell-border-today);
+}
+
+.selected {
+  background: var(--date-picker-cell-bg-selected);
+  color: var(--date-picker-cell-fg-selected);
+  border-color: var(--date-picker-cell-border-selected);
+}
+
+.disabled {
+  color: var(--date-picker-cell-fg-disabled);
+  opacity: var(--date-picker-cell-opacity-disabled);
+  cursor: default;
+}
+
+// Range-mode cell markers — applied when `selectionMode='range'` and the
+// cell falls inside the [rangeStart, rangeEnd|hoverDate] window. Disabled
+// cells inside the range keep their muted color but still get .inRange so
+// the band reads as contiguous.
+.inRange {
+  background: var(--date-picker-cell-bg-in-range);
+  color: var(--date-picker-cell-fg-in-range);
+  border-radius: 0;
+}
+
+// Disabled cells inside the range band keep their muted color so they
+// still read as disabled — only the background tint is inherited from
+// .inRange to keep the band visually contiguous.
+.disabled.inRange {
+  color: var(--date-picker-cell-fg-disabled);
+}
+
+// The two range boundaries get the same fill as a regular `.selected`
+// cell, but with rounded edges only on the OUTSIDE of the range so they
+// visually anchor the band.
+.rangeStart {
+  background: var(--date-picker-cell-bg-range-boundary);
+  color: var(--date-picker-cell-fg-range-boundary);
+  border-radius: var(--date-picker-cell-radius) 0 0 var(--date-picker-cell-radius);
+}
+
+.rangeEnd {
+  background: var(--date-picker-cell-bg-range-boundary);
+  color: var(--date-picker-cell-fg-range-boundary);
+  border-radius: 0 var(--date-picker-cell-radius) var(--date-picker-cell-radius) 0;
+}
+
+// Single-day range — both rangeStart AND rangeEnd are the same cell.
+.rangeStart.rangeEnd {
+  border-radius: var(--date-picker-cell-radius);
+}
+
+// Disabled state — applied to the outer grid container by inline pickers
+// that want to show the calendar but block interaction. Visual mute via
+// opacity. We deliberately do NOT use `pointer-events: none` here —
+// chevrons carry the HTML `disabled` attribute, cells get `tabIndex=-1`
+// + no-op click/keyboard handlers; layering pointer-events on top would
+// also block hover styles which is worse UX.
+.disabledGrid {
+  opacity: var(--date-picker-grid-opacity-disabled);
+}

package/src/components/DatePicker/DatePickerGrid.tsx

@@ -0,0 +1,341 @@
+import { useCallback, useEffect, useMemo, useRef, type KeyboardEvent } from 'react';
+import clsx from 'clsx';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useMonth } from '../../calendar/useMonth';
+import { useLocale } from '../../i18n/useLocale';
+import { useTranslation } from '../../i18n/useTranslation';
+import { isSameDay, isSameMonth, startOfDay, toDateKey } from '../../calendar/dateMath';
+import { isDateOutOfRange } from './utils';
+import styles from './DatePickerGrid.module.scss';
+
+export interface DatePickerGridProps {
+  /** Cursor month — controls which month is rendered. */
+  cursor: Date;
+  /** Currently selected date (highlighted). `null` for no selection. */
+  value: Date | null;
+  /** Fires when the user picks a cell. */
+  onSelect: (date: Date) => void;
+  /** Fires when prev/next chevron or PageUp/PageDown changes the cursor. */
+  onCursorChange: (date: Date) => void;
+  /** Earliest selectable date (inclusive). */
+  min?: Date;
+  /** Latest selectable date (inclusive). */
+  max?: Date;
+  /** Per-date disable predicate. */
+  isDateDisabled?: (date: Date) => boolean;
+  /** Override locale (otherwise reads `useLocale()`). */
+  locale?: string;
+  /** Selection model. Defaults to 'single'. */
+  selectionMode?: 'single' | 'range';
+  /** Range start (when selectionMode='range'). The left boundary of the committed range. */
+  rangeStart?: Date | null;
+  /** Range end (when selectionMode='range'). The right boundary. */
+  rangeEnd?: Date | null;
+  /** In-flight hover preview (when selectionMode='range' and only rangeStart is set). */
+  hoverDate?: Date | null;
+  /** Fires on cell mouseenter (the date) and on grid mouseleave (null). */
+  onHoverDate?: (date: Date | null) => void;
+  /** Show the prev / next month chevrons. Defaults to true; the month label is always shown. */
+  chevrons?: boolean;
+  /**
+   * When true: cells render muted, clicks no-op, chevrons are disabled,
+   * and all cells get `tabIndex={-1}` so the grid isn't a tab stop.
+   * Used by inline pickers to surface a non-interactive grid; the
+   * field-based `<DatePicker>` / `<DateRangePicker>` don't pass this
+   * (their `disabled` lives at the wrapper level — the popover never
+   * opens, so the grid never renders).
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Internal: month-grid surface rendered inside the DatePicker popover.
+ * Built on `useMonth`; renders a header row (prev / month label / next),
+ * a weekday-name row, and a 6x7 grid of focusable day buttons.
+ *
+ * Keyboard contract:
+ * - Arrow keys: move focus by 1 day / 1 week, skipping disabled cells,
+ *   crossing month boundaries (updates `cursor` when needed).
+ * - Home / End: first / last day of the focused week.
+ * - PageUp / PageDown: previous / next month, preserving day-of-month
+ *   where possible.
+ * - Enter / Space: select the focused cell.
+ *
+ * @remarks
+ * **When NOT to use:** Do not render directly — use `<DatePicker>`,
+ * which composes this inside its popover with proper open/close state
+ * and focus management.
+ */
+export function DatePickerGrid({
+  cursor,
+  value,
+  onSelect,
+  onCursorChange,
+  min,
+  max,
+  isDateDisabled,
+  locale: localeOverride,
+  selectionMode = 'single',
+  rangeStart = null,
+  rangeEnd = null,
+  hoverDate = null,
+  onHoverDate,
+  chevrons = true,
+  disabled = false,
+}: DatePickerGridProps) {
+  const contextLocale = useLocale();
+  const locale = localeOverride ?? contextLocale;
+  const t = useTranslation();
+  const grid = useMonth(cursor, { locale });
+  const today = useMemo(() => startOfDay(new Date()), []);
+
+  const cellsRef = useRef<Map<string, HTMLButtonElement>>(new Map());
+  // After the cursor changes from a keyboard event we want focus to land
+  // on the equivalent date in the new month. The effect runs after render.
+  const pendingFocusKey = useRef<string | null>(null);
+
+  const goPrev = useCallback(() => {
+    // Invalidate any pending keyboard focus target — chevron clicks are
+    // pointer-driven and should not steal focus to a stale cell.
+    pendingFocusKey.current = null;
+    onCursorChange(new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1));
+  }, [cursor, onCursorChange]);
+  const goNext = useCallback(() => {
+    pendingFocusKey.current = null;
+    onCursorChange(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1));
+  }, [cursor, onCursorChange]);
+
+  const isDisabled = useCallback(
+    (date: Date) => isDateOutOfRange(date, min, max, isDateDisabled),
+    [min, max, isDateDisabled],
+  );
+
+  // Range-mode helpers — no-op when selectionMode === 'single'.
+  const rangeAnchorStart = selectionMode === 'range' ? rangeStart : null;
+  const rangeAnchorEnd = selectionMode === 'range' ? (rangeEnd ?? hoverDate) : null;
+  const isInRange = useCallback(
+    (date: Date) => {
+      if (!rangeAnchorStart || !rangeAnchorEnd) return false;
+      const a = startOfDay(rangeAnchorStart).getTime();
+      const b = startOfDay(rangeAnchorEnd).getTime();
+      const t = startOfDay(date).getTime();
+      const lo = Math.min(a, b);
+      const hi = Math.max(a, b);
+      return t >= lo && t <= hi;
+    },
+    [rangeAnchorStart, rangeAnchorEnd],
+  );
+  const isRangeStartCell = (date: Date) => {
+    if (selectionMode !== 'range' || rangeStart == null) return false;
+    const other = rangeEnd ?? hoverDate;
+    if (other == null) return isSameDay(date, rangeStart);
+    // Earlier of the two acts as start.
+    const earlier =
+      startOfDay(rangeStart).getTime() <= startOfDay(other).getTime() ? rangeStart : other;
+    return isSameDay(date, earlier);
+  };
+
+  const isRangeEndCell = (date: Date) => {
+    if (selectionMode !== 'range' || rangeStart == null) return false;
+    const other = rangeEnd ?? hoverDate;
+    if (other == null) return false;
+    const later =
+      startOfDay(rangeStart).getTime() >= startOfDay(other).getTime() ? rangeStart : other;
+    return isSameDay(date, later);
+  };
+
+  const tabIndexFor = (date: Date, isTodayCell: boolean): number => {
+    if (disabled) return -1;
+    if (selectionMode === 'range') {
+      if (rangeStart != null && isSameDay(date, rangeStart)) return 0;
+      if (
+        rangeStart != null &&
+        rangeEnd != null &&
+        !isSameMonth(rangeStart, cursor) &&
+        isSameDay(date, rangeEnd)
+      )
+        return 0;
+      if (rangeStart == null && isTodayCell) return 0;
+      return -1;
+    }
+    return value != null && isSameDay(date, value) ? 0 : value == null && isTodayCell ? 0 : -1;
+  };
+
+  useEffect(() => {
+    if (pendingFocusKey.current) {
+      const el = cellsRef.current.get(pendingFocusKey.current);
+      el?.focus();
+      pendingFocusKey.current = null;
+    }
+  }, [cursor]);
+
+  const moveFocus = useCallback(
+    (from: Date, deltaDays: number) => {
+      let target = new Date(from);
+      // Walk by deltaDays in single-day steps, skipping disabled cells.
+      const dir = deltaDays > 0 ? 1 : -1;
+      let steps = Math.abs(deltaDays);
+      while (steps > 0) {
+        target = new Date(target.getFullYear(), target.getMonth(), target.getDate() + dir);
+        // Stop walking once we'd leave the allowed range — never moves
+        // silently into a no-op. (Caller must not pass an all-disabled
+        // predicate with no bounds — that's an unwinnable input.)
+        if ((min && target < startOfDay(min)) || (max && target > startOfDay(max))) return;
+        if (!isDisabled(target)) steps -= 1;
+      }
+      const key = toDateKey(target);
+      const inSameMonth =
+        target.getMonth() === cursor.getMonth() && target.getFullYear() === cursor.getFullYear();
+      if (!inSameMonth) {
+        pendingFocusKey.current = key;
+        onCursorChange(new Date(target.getFullYear(), target.getMonth(), 1));
+        return;
+      }
+      cellsRef.current.get(key)?.focus();
+    },
+    [cursor, isDisabled, max, min, onCursorChange],
+  );
+
+  const handleCellKeyDown = (e: KeyboardEvent<HTMLButtonElement>, date: Date) => {
+    if (disabled) return;
+    switch (e.key) {
+      case 'ArrowRight':
+        e.preventDefault();
+        moveFocus(date, 1);
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        moveFocus(date, -1);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        moveFocus(date, 7);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        moveFocus(date, -7);
+        break;
+      case 'Home': {
+        e.preventDefault();
+        const week = grid.weeks.find((w) => w.some((d) => isSameDay(d.date, date)));
+        if (week) cellsRef.current.get(toDateKey(week[0].date))?.focus();
+        break;
+      }
+      case 'End': {
+        e.preventDefault();
+        const week = grid.weeks.find((w) => w.some((d) => isSameDay(d.date, date)));
+        if (week) cellsRef.current.get(toDateKey(week[6].date))?.focus();
+        break;
+      }
+      case 'PageDown':
+        e.preventDefault();
+        pendingFocusKey.current = toDateKey(
+          new Date(date.getFullYear(), date.getMonth() + 1, date.getDate()),
+        );
+        onCursorChange(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1));
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        pendingFocusKey.current = toDateKey(
+          new Date(date.getFullYear(), date.getMonth() - 1, date.getDate()),
+        );
+        onCursorChange(new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1));
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (!disabled && !isDisabled(date)) onSelect(date);
+        break;
+    }
+  };
+
+  return (
+    <div className={clsx(styles.grid, disabled && styles.disabledGrid)}>
+      <header className={styles.header}>
+        {chevrons && (
+          <button
+            type="button"
+            className={styles.navButton}
+            aria-label={t('datePicker.previousMonth')}
+            onClick={goPrev}
+            disabled={disabled}
+          >
+            <ChevronLeft size={14} />
+          </button>
+        )}
+        <span className={styles.monthLabel} aria-live="polite">
+          {grid.monthLabel}
+        </span>
+        {chevrons && (
+          <button
+            type="button"
+            className={styles.navButton}
+            aria-label={t('datePicker.nextMonth')}
+            onClick={goNext}
+            disabled={disabled}
+          >
+            <ChevronRight size={14} />
+          </button>
+        )}
+      </header>
+      <div role="grid" className={styles.cells} onMouseLeave={() => onHoverDate?.(null)}>
+        <div role="row" className={styles.weekdayRow}>
+          {grid.weekdayLabels.map((label, i) => (
+            <span key={i} role="columnheader" className={styles.weekday}>
+              {label}
+            </span>
+          ))}
+        </div>
+        {grid.weeks.map((week, wIdx) => (
+          <div role="row" key={wIdx} className={styles.weekRow}>
+            {week.map((day) => {
+              const isDisabledCell = isDisabled(day.date);
+              const isSelected = value != null && isSameDay(day.date, value);
+              const isTodayCell = isSameDay(day.date, today);
+              const key = toDateKey(day.date);
+              return (
+                <button
+                  key={key}
+                  ref={(el) => {
+                    if (el) cellsRef.current.set(key, el);
+                    else cellsRef.current.delete(key);
+                  }}
+                  type="button"
+                  role="gridcell"
+                  className={clsx(
+                    styles.cell,
+                    !day.isCurrentMonth && styles.outside,
+                    isSelected && styles.selected,
+                    isTodayCell && styles.today,
+                    isDisabledCell && styles.disabled,
+                    isInRange(day.date) && styles.inRange,
+                    isRangeStartCell(day.date) && styles.rangeStart,
+                    isRangeEndCell(day.date) && styles.rangeEnd,
+                  )}
+                  aria-selected={
+                    isSelected ||
+                    isRangeStartCell(day.date) ||
+                    isRangeEndCell(day.date) ||
+                    undefined
+                  }
+                  aria-disabled={isDisabledCell || disabled || undefined}
+                  tabIndex={tabIndexFor(day.date, isTodayCell)}
+                  onClick={() => {
+                    if (disabled || isDisabledCell) return;
+                    onSelect(day.date);
+                  }}
+                  onKeyDown={(e) => handleCellKeyDown(e, day.date)}
+                  onMouseEnter={() => {
+                    if (!isDisabledCell && onHoverDate) onHoverDate(day.date);
+                  }}
+                >
+                  {day.dayOfMonth}
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/DatePicker/InlineDatePicker.module.scss

@@ -0,0 +1,32 @@
+@use './DatePicker.tokens';
+
+// Inline picker wrapper — the calendar lives in flow (no popover, no
+// portal). The wrapper carries no Rule-4 layout properties of its own;
+// width is intrinsic to the underlying `<DatePickerGrid>` (~15rem) and
+// the consumer's container controls overall placement.
+.inline {
+  display: inline-block;
+}
+
+// Time row — rendered below the grid when granularity='minute'. Mirrors
+// the popover variant: sits in its OWN bordered surface matching the
+// calendar grid's chrome so the time field reads as a distinct,
+// visually-contained section. Same Rule-4 internal-chrome exception.
+.timeRow {
+  display: flex;
+  align-items: center;
+  gap: var(--date-picker-time-row-gap);
+  padding: var(--date-picker-grid-padding);
+  background: var(--date-picker-grid-bg);
+  border: var(--border-width) solid var(--date-picker-grid-border-color);
+  border-radius: var(--date-picker-grid-radius);
+  box-shadow: var(--date-picker-grid-shadow);
+
+  // stylelint-disable-next-line property-disallowed-list -- internal stack spacing below the grid
+  margin-top: var(--date-picker-time-row-gap);
+}
+
+.timeLabel {
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-sm);
+}