@grampro/kit 0.0.0-stage → 2.4.1

package/source/components/date-picker/react/MonthYearPanels.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useEffect, useRef, useState, type KeyboardEvent, type RefObject } from "react";
+import { moveInGrid } from "../core/calendar";
+
+const COLUMNS = 3;
+
+/**
+ * Roving focus for the month and year grids: arrows move, Home/End jump. The
+ * container ref belongs to the component, so nothing reads a ref while rendering.
+ */
+function usePanelFocus(
+  containerRef: RefObject<HTMLDivElement | null>,
+  count: number,
+  initialIndex: number,
+) {
+  const [index, setIndex] = useState(initialIndex);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container?.contains(document.activeElement)) return;
+    const button = container.querySelectorAll<HTMLButtonElement>("button")[index];
+    button?.focus({ preventScroll: true });
+  }, [containerRef, index]);
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    const next = moveInGrid(index, event.key, COLUMNS, count, rtl);
+    if (next === null) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setIndex(next);
+  };
+
+  return { index, setIndex, onKeyDown };
+}
+
+interface MonthPanelProps {
+  labels: string[];
+  current: number;
+  label: string;
+  isMonthDisabled(month: number): boolean;
+  onSelect(month: number): void;
+}
+
+export function MonthPanel({
+  labels,
+  current,
+  label,
+  isMonthDisabled,
+  onSelect,
+}: MonthPanelProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { index, setIndex, onKeyDown } = usePanelFocus(containerRef, labels.length, current);
+
+  return (
+    <div
+      ref={containerRef}
+      role="group"
+      aria-label={label}
+      className="dp-panel"
+      onKeyDown={onKeyDown}
+    >
+      {labels.map((monthLabel, month) => (
+        <button
+          key={monthLabel}
+          type="button"
+          className="dp-panel-item"
+          data-selected={month === current || undefined}
+          data-autofocus={month === current || undefined}
+          tabIndex={month === index ? 0 : -1}
+          disabled={isMonthDisabled(month)}
+          aria-pressed={month === current}
+          onClick={() => onSelect(month)}
+          onFocus={() => setIndex(month)}
+        >
+          {monthLabel}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+interface YearPanelProps {
+  years: number[];
+  current: number;
+  label: string;
+  isYearDisabled(year: number): boolean;
+  onSelect(year: number): void;
+}
+
+export function YearPanel({ years, current, label, isYearDisabled, onSelect }: YearPanelProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const selectedIndex = Math.max(0, years.indexOf(current));
+  const { index, setIndex, onKeyDown } = usePanelFocus(containerRef, years.length, selectedIndex);
+
+  return (
+    <div
+      ref={containerRef}
+      role="group"
+      aria-label={label}
+      className="dp-panel"
+      onKeyDown={onKeyDown}
+    >
+      {years.map((year, position) => (
+        <button
+          key={year}
+          type="button"
+          className="dp-panel-item"
+          data-selected={year === current || undefined}
+          data-autofocus={year === current || undefined}
+          tabIndex={position === index ? 0 : -1}
+          disabled={isYearDisabled(year)}
+          aria-pressed={year === current}
+          onClick={() => onSelect(year)}
+          onFocus={() => setIndex(position)}
+        >
+          {year}
+        </button>
+      ))}
+    </div>
+  );
+}

package/source/components/date-picker/react/Popover.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { AnchoredPopover } from "../../shared/react/Popover";
+import { cx } from "./props";
+
+interface PopoverProps {
+  anchor: HTMLElement;
+  onClose(): void;
+  label: string;
+  id: string;
+  /** Move focus into the calendar when it opens. False while someone is typing. */
+  autoFocus?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * The calendar panel. It repositions as the panel changes height between the
+ * day, month and year views, and it keeps its size rather than scrolling, so it
+ * only moves above the field when the whole panel fits there.
+ */
+export function DatePickerPopover({
+  anchor,
+  onClose,
+  label,
+  id,
+  autoFocus = true,
+  className,
+  children,
+}: PopoverProps) {
+  return (
+    <AnchoredPopover
+      anchor={anchor}
+      onClose={onClose}
+      label={label}
+      id={id}
+      className={cx("dp-popover", className)}
+      autoFocus={autoFocus && "[data-autofocus]"}
+      observeResize="self"
+    >
+      {children}
+    </AnchoredPopover>
+  );
+}

package/source/components/date-picker/react/icons.tsx

@@ -0,0 +1,15 @@
+import { Svg, type IconProps } from "../../shared/react/icons";
+
+export {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  XIcon,
+} from "../../shared/react/icons";
+
+export const CalendarIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <rect x="3" y="5" width="18" height="16" rx="2" />
+    <path d="M3 10h18M8 3v4M16 3v4" />
+  </Svg>
+);

package/source/components/date-picker/react/locale.ts

@@ -0,0 +1,23 @@
+import type { DatePickerLocaleText } from "../core/types";
+
+export const defaultDatePickerText: DatePickerLocaleText = {
+  calendarLabel: "Choose a date",
+  openCalendar: "Open calendar",
+  clear: "Clear",
+  today: "Today",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  previousYears: "Previous years",
+  nextYears: "Next years",
+  chooseMonthYear: "Choose month and year",
+  monthPanelLabel: "Choose a month",
+  yearPanelLabel: "Choose a year",
+  weekNumber: "Week",
+  startDate: "Start date",
+  endDate: "End date",
+  invalidDate: "Enter a valid date",
+  outOfRange: "That date is outside the allowed range",
+  presets: "Shortcuts",
+  selectedDate: (date) => `Selected: ${date}`,
+  selectedRange: (start, end) => `Selected: ${start} to ${end}`,
+};

package/source/components/date-picker/react/props.ts

@@ -0,0 +1,76 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { DateInput, DatePickerLocaleText, DatePickerSize } from "../core/types";
+
+export type DatePickerSlot =
+  | "root"
+  | "label"
+  | "control"
+  | "input"
+  | "popover"
+  | "calendar"
+  | "day"
+  | "footer"
+  | "presets";
+
+export interface DatePickerHandle<TValue> {
+  open(): void;
+  close(): void;
+  toggle(): void;
+  focus(): void;
+  clear(): void;
+  getValue(): TValue;
+}
+
+/** How a chosen date is written in the field: `Intl` options or your own function. */
+export type DateFormat =
+  | Intl.DateTimeFormatOptions
+  | ((date: Date, locale: string | undefined) => string);
+
+export interface DatePickerSharedProps {
+  /** Earliest and latest selectable day. */
+  min?: DateInput | null;
+  max?: DateInput | null;
+  /** Called for every rendered day; return true to block it (weekends, holidays). */
+  isDateDisabled?(date: Date): boolean;
+  /**
+   * BCP-47 tag deciding month names, field order and the first day of the week.
+   * Defaults to the runtime's locale — pass it explicitly when you render on a
+   * server, so the markup matches what the browser produces.
+   */
+  locale?: string;
+  /** 0 = Sunday. Defaults to the locale's first day of the week. */
+  weekStartsOn?: number;
+  format?: DateFormat;
+  /** Months shown side by side. Default 1, or 2 for the range picker. */
+  numberOfMonths?: number;
+  showWeekNumbers?: boolean;
+  /** Show the "Today" shortcut in the footer. Default true. */
+  showToday?: boolean;
+  /** Let people type a date instead of picking one. Default true. */
+  allowInput?: boolean;
+  /** Always six week rows, so the popover never changes height. Default true. */
+  fixedWeeks?: boolean;
+  label?: ReactNode;
+  description?: ReactNode;
+  /** Message shown below the control; also marks the control invalid. */
+  error?: ReactNode;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  /** Shows the value but blocks typing and picking. */
+  readOnly?: boolean;
+  /** Show the clear button. Default true. */
+  clearable?: boolean;
+  size?: DatePickerSize;
+  /** Posts the value as `yyyy-mm-dd` in a hidden input. */
+  name?: string;
+  id?: string;
+  className?: string;
+  classNames?: Partial<Record<DatePickerSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<DatePickerLocaleText>;
+  onOpenChange?(open: boolean): void;
+}
+
+// Shared with every other component, so class handling cannot drift.
+export { cx } from "../../shared/core/cx";