@cube-dev/ui-kit 0.161.0 → 0.163.0

package/dist/components/other/Calendar/PeriodCalendar.js

@@ -1,227 +1,191 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
-import { _Title } from "../../content/Title.js";
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
-import { Space } from "../../layout/Space.js";
-import { LeftIcon } from "../../../icons/LeftIcon.js";
-import { RightIcon } from "../../../icons/RightIcon.js";
-import { Button } from "../../actions/index.js";
-import { getQuarter, snapToPeriod } from "../../fields/DatePicker/period.js";
-import { tasty } from "@tenphi/tasty";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { getQuarter } from "../../fields/DatePicker/period.js";
+import { CalendarElement } from "./styled.js";
+import { CalendarHeader } from "./CalendarHeader.js";
+import { PeriodGrid } from "./PeriodGrid.js";
+import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useDateFormatter, useLocale } from "react-aria";
-import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import { useDateFormatter } from "react-aria";
+import { CalendarDate, endOfMonth, endOfYear, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
 
 //#region src/components/other/Calendar/PeriodCalendar.tsx
-const PeriodCalendarElement = tasty({ styles: {
-	padding: "1x",
-	gap: "1x",
-	width: "min 30x"
-} });
-const PeriodHeaderElement = tasty({ styles: {
-	display: "flex",
-	placeContent: "center space-between",
-	placeItems: "center",
-	gap: "1.5x"
-} });
-const PeriodGridElement = tasty({ styles: {
-	display: "grid",
-	gap: "1bw",
-	padding: ".5x top"
-} });
-const PeriodCellElement = tasty({
-	as: "button",
-	"data-popover-keep": true,
-	styles: {
-		preset: "t3m",
-		display: "grid",
-		placeItems: "center",
-		height: "5x",
-		padding: "1x",
-		border: 0,
-		fill: {
-			"": "#primary.0",
-			":hover": "#primary.16",
-			pressed: "#primary.10",
-			selected: "#primary",
-			"selected & :hover": "#primary",
-			disabled: "#primary.0"
-		},
-		color: {
-			"": "#dark",
-			outside: "#dark.30",
-			selected: "#white",
-			disabled: "#dark.30"
-		},
-		outline: {
-			"": "1bw #primary-text.0",
-			focused: "1bw #primary-text"
-		},
-		outlineOffset: .5,
-		radius: true,
-		cursor: {
-			"": "pointer",
-			disabled: "not-allowed"
-		}
-	}
-});
+/** The year grid shows a decade plus one adjacent year on either side. */
+const YEAR_CELLS = 12;
+/** Explicit so the panel keeps one width across all three period views. */
+const PERIOD_GRID_STYLES = { width: "28x" };
+/** picker → grid columns */
 const COLUMNS = {
 	month: 3,
 	quarter: 4,
 	year: 3
 };
+/**
+* The panel behind `MonthPicker`, `QuarterPicker` and `YearPicker`. The month
+* and quarter panels drill up into a year list, so reaching a distant year
+* never means clicking the arrow a dozen times.
+*/
 function PeriodCalendar(props) {
+	const { t } = useI18n();
 	props = useProviderProps(props);
 	let { picker, value, onChange, minValue, maxValue, isDateUnavailable, isDisabled, autoFocus } = props;
-	let { locale } = useLocale();
 	let monthFormatter = useDateFormatter({
 		month: "short",
 		timeZone: "UTC"
 	});
-	let selected = value ?? null;
-	let selectedYear = selected?.year ?? null;
-	let selectedMonth = selected?.month ?? null;
-	let [focusedYear, setFocusedYear] = useState(() => selectedYear ?? today(getLocalTimeZone()).year);
-	let cols = COLUMNS[picker];
-	let step = picker === "year" ? 10 : 1;
-	let decadeStart = Math.floor(focusedYear / 10) * 10;
-	let isPeriodDisabled = (date) => {
+	let selected = value ? toCalendarDate(value) : null;
+	let todayDate = useMemo(() => today(getLocalTimeZone()), []);
+	let [anchor, setAnchor] = useState(() => selected ?? todayDate);
+	let [isYearView, setIsYearView] = useState(false);
+	let [autoFocusGrid, setAutoFocusGrid] = useState(!!autoFocus);
+	let showYearView = (next) => {
+		setAutoFocusGrid(true);
+		setIsYearView(next);
+	};
+	let view = picker === "year" || isYearView ? "year" : picker;
+	let yearStart = (year) => new CalendarDate(year, 1, 1);
+	let isPeriodDisabled = (start, end) => {
 		if (isDisabled) return true;
-		if (minValue && date.compare(snapToPeriod(minValue, picker, locale)) < 0) return true;
-		if (maxValue && date.compare(snapToPeriod(maxValue, picker, locale)) > 0) return true;
-		return isDateUnavailable?.(date) ?? false;
+		if (minValue && end.compare(minValue) < 0) return true;
+		if (maxValue && start.compare(maxValue) > 0) return true;
+		return isDateUnavailable?.(start) ?? false;
+	};
+	/** Header for the month and quarter panels — the year drills up to a list. */
+	let renderYearHeader = () => {
+		let prevYear = anchor.year - 1;
+		let nextYear = anchor.year + 1;
+		return /* @__PURE__ */ jsx(CalendarHeader, {
+			segments: [{
+				key: "year",
+				label: String(anchor.year),
+				isDisabled,
+				onPress: () => showYearView(true)
+			}],
+			prevButtonProps: {
+				"aria-label": t("calendar.previousYear", "Previous year"),
+				isDisabled: isPeriodDisabled(yearStart(prevYear), endOfYear(yearStart(prevYear))),
+				onPress: () => setAnchor(anchor.subtract({ years: 1 }))
+			},
+			nextButtonProps: {
+				"aria-label": t("calendar.nextYear", "Next year"),
+				isDisabled: isPeriodDisabled(yearStart(nextYear), endOfYear(yearStart(nextYear))),
+				onPress: () => setAnchor(anchor.add({ years: 1 }))
+			}
+		});
 	};
-	let cells = useMemo(() => {
-		if (picker === "month") return Array.from({ length: 12 }, (_, m) => {
-			let date = new CalendarDate(focusedYear, m + 1, 1);
+	let onKeyDown = (e) => {
+		if (isYearView && picker !== "year" && e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			showYearView(false);
+		}
+	};
+	let cells;
+	let focusedIndex;
+	let gridLabel;
+	let header;
+	let onCellPress;
+	let onCellFocus;
+	let onMoveFocus;
+	let onMovePage;
+	if (view === "year") {
+		let decadeStart = Math.floor(anchor.year / 10) * 10;
+		let firstYear = decadeStart - 1;
+		cells = Array.from({ length: YEAR_CELLS }, (_, index) => {
+			let year = firstYear + index;
+			let date = yearStart(year);
 			return {
-				key: `m-${m}`,
-				label: monthFormatter.format(new Date(Date.UTC(2021, m, 15))),
-				date,
-				isSelected: selectedYear === focusedYear && selectedMonth === m + 1,
-				isDisabled: isPeriodDisabled(date),
-				isOutside: false
+				key: `year-${year}`,
+				label: String(year),
+				isSelected: selected?.year === year,
+				isCurrent: todayDate.year === year,
+				isOutside: year < decadeStart || year > decadeStart + 9,
+				isDisabled: isPeriodDisabled(date, endOfYear(date))
 			};
 		});
-		if (picker === "quarter") return Array.from({ length: 4 }, (_, q) => {
-			let date = new CalendarDate(focusedYear, q * 3 + 1, 1);
+		focusedIndex = anchor.year - firstYear;
+		gridLabel = t("calendar.years", "Years");
+		header = /* @__PURE__ */ jsx(CalendarHeader, {
+			title: `${decadeStart} – ${decadeStart + 9}`,
+			prevButtonProps: {
+				"aria-label": t("calendar.previousYears", "Previous years"),
+				isDisabled: isPeriodDisabled(yearStart(decadeStart - 10), endOfYear(yearStart(decadeStart - 1))),
+				onPress: () => setAnchor(anchor.subtract({ years: 10 }))
+			},
+			nextButtonProps: {
+				"aria-label": t("calendar.nextYears", "Next years"),
+				isDisabled: isPeriodDisabled(yearStart(decadeStart + 10), endOfYear(yearStart(decadeStart + 19))),
+				onPress: () => setAnchor(anchor.add({ years: 10 }))
+			}
+		});
+		onCellPress = (index) => {
+			let year = firstYear + index;
+			if (picker === "year") onChange?.(yearStart(year));
+			else {
+				setAnchor(anchor.set({ year }));
+				showYearView(false);
+			}
+		};
+		onCellFocus = (index) => setAnchor(anchor.set({ year: firstYear + index }));
+		onMoveFocus = (delta) => setAnchor(anchor.add({ years: delta }));
+		onMovePage = (delta) => setAnchor(anchor.add({ years: delta * 10 }));
+	} else if (view === "quarter") {
+		let quarterDate = (quarter) => new CalendarDate(anchor.year, (quarter - 1) * 3 + 1, 1);
+		cells = Array.from({ length: 4 }, (_, index) => {
+			let quarter = index + 1;
+			let date = quarterDate(quarter);
 			return {
-				key: `q-${q}`,
-				label: `Q${q + 1}`,
-				date,
-				isSelected: selectedYear === focusedYear && selectedMonth != null && getQuarter(selectedMonth) === q + 1,
-				isDisabled: isPeriodDisabled(date),
-				isOutside: false
+				key: `quarter-${quarter}`,
+				label: `Q${quarter}`,
+				isSelected: selected != null && selected.year === anchor.year && getQuarter(selected.month) === quarter,
+				isCurrent: todayDate.year === anchor.year && getQuarter(todayDate.month) === quarter,
+				isDisabled: isPeriodDisabled(date, endOfMonth(date.add({ months: 2 })))
 			};
 		});
-		return Array.from({ length: 12 }, (_, i) => {
-			let year = decadeStart - 1 + i;
-			let date = new CalendarDate(year, 1, 1);
+		focusedIndex = getQuarter(anchor.month) - 1;
+		gridLabel = t("calendar.quarters", "Quarters");
+		header = renderYearHeader();
+		onCellPress = (index) => onChange?.(quarterDate(index + 1));
+		onCellFocus = (index) => setAnchor(quarterDate(index + 1));
+		onMoveFocus = (delta) => setAnchor(anchor.add({ months: delta * 3 }));
+		onMovePage = (delta) => setAnchor(anchor.add({ years: delta }));
+	} else {
+		let monthDate = (month) => new CalendarDate(anchor.year, month, 1);
+		cells = Array.from({ length: 12 }, (_, index) => {
+			let month = index + 1;
+			let date = monthDate(month);
 			return {
-				key: `y-${year}`,
-				label: String(year),
-				date,
-				isSelected: selectedYear === year,
-				isDisabled: isPeriodDisabled(date),
-				isOutside: year < decadeStart || year > decadeStart + 9
+				key: `month-${month}`,
+				label: monthFormatter.format(date.toDate("UTC")),
+				isSelected: selected != null && selected.year === anchor.year && selected.month === month,
+				isCurrent: todayDate.year === anchor.year && todayDate.month === month,
+				isDisabled: isPeriodDisabled(date, endOfMonth(date))
 			};
 		});
-	}, [
-		picker,
-		focusedYear,
-		decadeStart,
-		selectedYear,
-		selectedMonth,
-		monthFormatter,
-		locale,
-		minValue,
-		maxValue,
-		isDateUnavailable,
-		isDisabled
-	]);
-	let title = picker === "year" ? `${decadeStart}-${decadeStart + 9}` : String(focusedYear);
-	let cellRefs = useRef([]);
-	let [focusedIndex, setFocusedIndex] = useState(() => {
-		let idx = cells.findIndex((cell) => cell.isSelected);
-		return idx >= 0 ? idx : 0;
-	});
-	useEffect(() => {
-		if (autoFocus) cellRefs.current[focusedIndex]?.focus();
-	}, []);
-	let moveFocus = (index) => {
-		let clamped = Math.max(0, Math.min(cells.length - 1, index));
-		setFocusedIndex(clamped);
-		cellRefs.current[clamped]?.focus();
-	};
-	let onKeyDown = (e) => {
-		switch (e.key) {
-			case "ArrowRight":
-				moveFocus(focusedIndex + 1);
-				break;
-			case "ArrowLeft":
-				moveFocus(focusedIndex - 1);
-				break;
-			case "ArrowDown":
-				moveFocus(focusedIndex + cols);
-				break;
-			case "ArrowUp":
-				moveFocus(focusedIndex - cols);
-				break;
-			case "Home":
-				moveFocus(0);
-				break;
-			case "End":
-				moveFocus(cells.length - 1);
-				break;
-			default: return;
-		}
-		e.preventDefault();
-	};
-	return /* @__PURE__ */ jsxs(PeriodCalendarElement, { children: [/* @__PURE__ */ jsxs(PeriodHeaderElement, { children: [/* @__PURE__ */ jsx(_Title, {
-		level: 6,
-		preset: "h6",
-		children: title
-	}), /* @__PURE__ */ jsxs(Space, {
-		gap: ".5x",
-		children: [/* @__PURE__ */ jsx(Button, {
-			"data-popover-keep": true,
-			size: "xsmall",
-			"aria-label": "Previous",
-			icon: /* @__PURE__ */ jsx(LeftIcon, {}),
-			isDisabled,
-			onPress: () => setFocusedYear((year) => year - step)
-		}), /* @__PURE__ */ jsx(Button, {
-			"data-popover-keep": true,
-			size: "xsmall",
-			"aria-label": "Next",
-			icon: /* @__PURE__ */ jsx(RightIcon, {}),
-			isDisabled,
-			onPress: () => setFocusedYear((year) => year + step)
-		})]
-	})] }), /* @__PURE__ */ jsx(PeriodGridElement, {
-		role: "grid",
-		styles: { gridColumns: `repeat(${cols}, 1fr)` },
+		focusedIndex = anchor.month - 1;
+		gridLabel = t("calendar.months", "Months");
+		header = renderYearHeader();
+		onCellPress = (index) => onChange?.(monthDate(index + 1));
+		onCellFocus = (index) => setAnchor(monthDate(index + 1));
+		onMoveFocus = (delta) => setAnchor(anchor.add({ months: delta }));
+		onMovePage = (delta) => setAnchor(anchor.add({ years: delta }));
+	}
+	return /* @__PURE__ */ jsxs(CalendarElement, {
 		onKeyDown,
-		children: cells.map((cell, i) => /* @__PURE__ */ jsx(PeriodCellElement, {
-			ref: (el) => {
-				cellRefs.current[i] = el;
-			},
-			type: "button",
-			tabIndex: i === focusedIndex ? 0 : -1,
-			disabled: cell.isDisabled,
-			"aria-pressed": cell.isSelected,
-			mods: {
-				selected: cell.isSelected,
-				outside: cell.isOutside,
-				disabled: cell.isDisabled
-			},
-			onFocus: () => setFocusedIndex(i),
-			onClick: () => {
-				if (!cell.isDisabled) onChange?.(cell.date);
-			},
-			children: cell.label
-		}, cell.key))
-	})] });
+		children: [header, /* @__PURE__ */ jsx(PeriodGrid, {
+			autoFocus: autoFocusGrid,
+			"aria-label": gridLabel,
+			cells,
+			styles: PERIOD_GRID_STYLES,
+			columns: COLUMNS[view],
+			focusedIndex,
+			onCellPress,
+			onCellFocus,
+			onMoveFocus,
+			onMovePage
+		}, view)]
+	});
 }
 
 //#endregion

package/dist/components/other/Calendar/PeriodCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodCalendar.js","names":["Title"],"sources":["../../../../src/components/other/Calendar/PeriodCalendar.tsx"],"sourcesContent":["import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date';\nimport { tasty } from '@tenphi/tasty';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { DateValue, useDateFormatter, useLocale } from 'react-aria';\n\nimport { LeftIcon, RightIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { Button } from '../../actions';\nimport { Title } from '../../content/Title';\nimport {\n  getQuarter,\n  PickerType,\n  snapToPeriod,\n} from '../../fields/DatePicker/period';\nimport { Space } from '../../layout/Space';\n\nconst PeriodCalendarElement = tasty({\n  styles: {\n    padding: '1x',\n    gap: '1x',\n    width: 'min 30x',\n  },\n});\n\nconst PeriodHeaderElement = tasty({\n  styles: {\n    display: 'flex',\n    placeContent: 'center space-between',\n    placeItems: 'center',\n    gap: '1.5x',\n  },\n});\n\nconst PeriodGridElement = tasty({\n  styles: {\n    display: 'grid',\n    gap: '1bw',\n    padding: '.5x top',\n  },\n});\n\nconst PeriodCellElement = tasty({\n  as: 'button',\n  'data-popover-keep': true,\n  styles: {\n    preset: 't3m',\n    display: 'grid',\n    placeItems: 'center',\n    height: '5x',\n    padding: '1x',\n    border: 0,\n    fill: {\n      '': '#primary.0',\n      ':hover': '#primary.16',\n      pressed: '#primary.10',\n\n      selected: '#primary',\n      'selected & :hover': '#primary',\n\n      disabled: '#primary.0',\n    },\n    color: {\n      '': '#dark',\n      outside: '#dark.30',\n      selected: '#white',\n      disabled: '#dark.30',\n    },\n    outline: {\n      '': '1bw #primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 0.5,\n    radius: true,\n    cursor: {\n      '': 'pointer',\n      disabled: 'not-allowed',\n    },\n  },\n});\n\n// picker → grid columns\nconst COLUMNS: Record<'month' | 'quarter' | 'year', number> = {\n  month: 3,\n  quarter: 4,\n  year: 3,\n};\n\nexport interface CubePeriodCalendarProps {\n  /** Which non-day period this panel selects. */\n  picker: 'month' | 'quarter' | 'year';\n  value?: DateValue | null;\n  onChange?: (date: CalendarDate) => void;\n  minValue?: DateValue | null;\n  maxValue?: DateValue | null;\n  isDateUnavailable?: (date: DateValue) => boolean;\n  isDisabled?: boolean;\n  autoFocus?: boolean;\n}\n\ninterface Cell {\n  key: string;\n  label: string;\n  date: CalendarDate;\n  isSelected: boolean;\n  isDisabled: boolean;\n  isOutside: boolean;\n}\n\nexport function PeriodCalendar(props: CubePeriodCalendarProps) {\n  props = useProviderProps(props);\n\n  let {\n    picker,\n    value,\n    onChange,\n    minValue,\n    maxValue,\n    isDateUnavailable,\n    isDisabled,\n    autoFocus,\n  } = props;\n\n  let { locale } = useLocale();\n  let monthFormatter = useDateFormatter({ month: 'short', timeZone: 'UTC' });\n\n  let selected = value ?? null;\n  let selectedYear = selected?.year ?? null;\n  let selectedMonth = selected?.month ?? null;\n\n  let [focusedYear, setFocusedYear] = useState(\n    () => selectedYear ?? today(getLocalTimeZone()).year,\n  );\n\n  let cols = COLUMNS[picker];\n  let step = picker === 'year' ? 10 : 1;\n  let decadeStart = Math.floor(focusedYear / 10) * 10;\n\n  let isPeriodDisabled = (date: CalendarDate) => {\n    if (isDisabled) return true;\n    if (minValue && date.compare(snapToPeriod(minValue, picker, locale)) < 0) {\n      return true;\n    }\n    if (maxValue && date.compare(snapToPeriod(maxValue, picker, locale)) > 0) {\n      return true;\n    }\n\n    return isDateUnavailable?.(date) ?? false;\n  };\n\n  let cells = useMemo<Cell[]>(() => {\n    if (picker === 'month') {\n      return Array.from({ length: 12 }, (_, m) => {\n        let date = new CalendarDate(focusedYear, m + 1, 1);\n\n        return {\n          key: `m-${m}`,\n          label: monthFormatter.format(new Date(Date.UTC(2021, m, 15))),\n          date,\n          isSelected: selectedYear === focusedYear && selectedMonth === m + 1,\n          isDisabled: isPeriodDisabled(date),\n          isOutside: false,\n        };\n      });\n    }\n\n    if (picker === 'quarter') {\n      return Array.from({ length: 4 }, (_, q) => {\n        let date = new CalendarDate(focusedYear, q * 3 + 1, 1);\n\n        return {\n          key: `q-${q}`,\n          label: `Q${q + 1}`,\n          date,\n          isSelected:\n            selectedYear === focusedYear &&\n            selectedMonth != null &&\n            getQuarter(selectedMonth) === q + 1,\n          isDisabled: isPeriodDisabled(date),\n          isOutside: false,\n        };\n      });\n    }\n\n    // year: render 12 cells — one leading + a decade + one trailing.\n    return Array.from({ length: 12 }, (_, i) => {\n      let year = decadeStart - 1 + i;\n      let date = new CalendarDate(year, 1, 1);\n\n      return {\n        key: `y-${year}`,\n        label: String(year),\n        date,\n        isSelected: selectedYear === year,\n        isDisabled: isPeriodDisabled(date),\n        isOutside: year < decadeStart || year > decadeStart + 9,\n      };\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    picker,\n    focusedYear,\n    decadeStart,\n    selectedYear,\n    selectedMonth,\n    monthFormatter,\n    locale,\n    minValue,\n    maxValue,\n    isDateUnavailable,\n    isDisabled,\n  ]);\n\n  let title =\n    picker === 'year'\n      ? `${decadeStart}-${decadeStart + 9}`\n      : String(focusedYear);\n\n  let cellRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  let [focusedIndex, setFocusedIndex] = useState(() => {\n    let idx = cells.findIndex((cell) => cell.isSelected);\n\n    return idx >= 0 ? idx : 0;\n  });\n\n  useEffect(() => {\n    if (autoFocus) {\n      cellRefs.current[focusedIndex]?.focus();\n    }\n    // Focus only on mount.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let moveFocus = (index: number) => {\n    let clamped = Math.max(0, Math.min(cells.length - 1, index));\n    setFocusedIndex(clamped);\n    cellRefs.current[clamped]?.focus();\n  };\n\n  let onKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowRight':\n        moveFocus(focusedIndex + 1);\n        break;\n      case 'ArrowLeft':\n        moveFocus(focusedIndex - 1);\n        break;\n      case 'ArrowDown':\n        moveFocus(focusedIndex + cols);\n        break;\n      case 'ArrowUp':\n        moveFocus(focusedIndex - cols);\n        break;\n      case 'Home':\n        moveFocus(0);\n        break;\n      case 'End':\n        moveFocus(cells.length - 1);\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n  };\n\n  return (\n    <PeriodCalendarElement>\n      <PeriodHeaderElement>\n        <Title level={6} preset=\"h6\">\n          {title}\n        </Title>\n        <Space gap=\".5x\">\n          <Button\n            data-popover-keep\n            size=\"xsmall\"\n            aria-label=\"Previous\"\n            icon={<LeftIcon />}\n            isDisabled={isDisabled}\n            onPress={() => setFocusedYear((year) => year - step)}\n          />\n          <Button\n            data-popover-keep\n            size=\"xsmall\"\n            aria-label=\"Next\"\n            icon={<RightIcon />}\n            isDisabled={isDisabled}\n            onPress={() => setFocusedYear((year) => year + step)}\n          />\n        </Space>\n      </PeriodHeaderElement>\n      <PeriodGridElement\n        role=\"grid\"\n        styles={{ gridColumns: `repeat(${cols}, 1fr)` }}\n        onKeyDown={onKeyDown}\n      >\n        {cells.map((cell, i) => (\n          <PeriodCellElement\n            key={cell.key}\n            ref={(el: HTMLButtonElement | null) => {\n              cellRefs.current[i] = el;\n            }}\n            type=\"button\"\n            tabIndex={i === focusedIndex ? 0 : -1}\n            disabled={cell.isDisabled}\n            aria-pressed={cell.isSelected}\n            mods={{\n              selected: cell.isSelected,\n              outside: cell.isOutside,\n              disabled: cell.isDisabled,\n            }}\n            onFocus={() => setFocusedIndex(i)}\n            onClick={() => {\n              if (!cell.isDisabled) onChange?.(cell.date);\n            }}\n          >\n            {cell.label}\n          </PeriodCellElement>\n        ))}\n      </PeriodGridElement>\n    </PeriodCalendarElement>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"PeriodCalendar.js","names":[],"sources":["../../../../src/components/other/Calendar/PeriodCalendar.tsx"],"sourcesContent":["import {\n  CalendarDate,\n  endOfMonth,\n  endOfYear,\n  getLocalTimeZone,\n  toCalendarDate,\n  today,\n} from '@internationalized/date';\nimport { KeyboardEvent, ReactElement, useMemo, useState } from 'react';\nimport { DateValue, useDateFormatter } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { useProviderProps } from '../../../provider';\nimport { getQuarter } from '../../fields/DatePicker/period';\n\nimport { CalendarHeader } from './CalendarHeader';\nimport { CubePeriodGridCell, PeriodGrid } from './PeriodGrid';\nimport { CalendarElement } from './styled';\n\n/** The year grid shows a decade plus one adjacent year on either side. */\nconst YEAR_CELLS = 12;\n\n/** Explicit so the panel keeps one width across all three period views. */\nconst PERIOD_GRID_STYLES = { width: '28x' } as const;\n\nexport type CubePeriodCalendarPicker = 'month' | 'quarter' | 'year';\n\n/** picker → grid columns */\nconst COLUMNS: Record<CubePeriodCalendarPicker, number> = {\n  month: 3,\n  quarter: 4,\n  year: 3,\n};\n\nexport interface CubePeriodCalendarProps {\n  /** Which non-day period this panel selects. */\n  picker: CubePeriodCalendarPicker;\n  value?: DateValue | null;\n  onChange?: (date: CalendarDate) => void;\n  minValue?: DateValue | null;\n  maxValue?: DateValue | null;\n  isDateUnavailable?: (date: DateValue) => boolean;\n  isDisabled?: boolean;\n  autoFocus?: boolean;\n}\n\n/**\n * The panel behind `MonthPicker`, `QuarterPicker` and `YearPicker`. The month\n * and quarter panels drill up into a year list, so reaching a distant year\n * never means clicking the arrow a dozen times.\n */\nexport function PeriodCalendar(props: CubePeriodCalendarProps) {\n  const { t } = useI18n();\n\n  props = useProviderProps(props);\n\n  let {\n    picker,\n    value,\n    onChange,\n    minValue,\n    maxValue,\n    isDateUnavailable,\n    isDisabled,\n    autoFocus,\n  } = props;\n\n  let monthFormatter = useDateFormatter({ month: 'short', timeZone: 'UTC' });\n\n  let selected = value ? toCalendarDate(value) : null;\n  let todayDate = useMemo(() => today(getLocalTimeZone()), []);\n\n  // A date inside the period the keyboard currently focuses. Drives both the\n  // roving tab stop and which year / decade the panel shows.\n  let [anchor, setAnchor] = useState<CalendarDate>(() => selected ?? todayDate);\n  let [isYearView, setIsYearView] = useState(false);\n  // Switching panels always moves focus into the new grid — the button the\n  // user just pressed is gone by then.\n  let [autoFocusGrid, setAutoFocusGrid] = useState(!!autoFocus);\n\n  let showYearView = (next: boolean) => {\n    setAutoFocusGrid(true);\n    setIsYearView(next);\n  };\n\n  let view: CubePeriodCalendarPicker =\n    picker === 'year' || isYearView ? 'year' : picker;\n\n  let yearStart = (year: number) => new CalendarDate(year, 1, 1);\n\n  let isPeriodDisabled = (start: CalendarDate, end: CalendarDate) => {\n    if (isDisabled) return true;\n    if (minValue && end.compare(minValue) < 0) return true;\n    if (maxValue && start.compare(maxValue) > 0) return true;\n\n    return isDateUnavailable?.(start) ?? false;\n  };\n\n  /** Header for the month and quarter panels — the year drills up to a list. */\n  let renderYearHeader = () => {\n    let prevYear = anchor.year - 1;\n    let nextYear = anchor.year + 1;\n\n    return (\n      <CalendarHeader\n        segments={[\n          {\n            key: 'year',\n            label: String(anchor.year),\n            isDisabled,\n            onPress: () => showYearView(true),\n          },\n        ]}\n        prevButtonProps={{\n          'aria-label': t('calendar.previousYear', 'Previous year'),\n          isDisabled: isPeriodDisabled(\n            yearStart(prevYear),\n            endOfYear(yearStart(prevYear)),\n          ),\n          onPress: () => setAnchor(anchor.subtract({ years: 1 })),\n        }}\n        nextButtonProps={{\n          'aria-label': t('calendar.nextYear', 'Next year'),\n          isDisabled: isPeriodDisabled(\n            yearStart(nextYear),\n            endOfYear(yearStart(nextYear)),\n          ),\n          onPress: () => setAnchor(anchor.add({ years: 1 })),\n        }}\n      />\n    );\n  };\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    // The year list is a detour, so `Escape` returns to the period list rather\n    // than closing the surrounding popover.\n    if (isYearView && picker !== 'year' && e.key === 'Escape') {\n      e.preventDefault();\n      e.stopPropagation();\n      showYearView(false);\n    }\n  };\n\n  let cells: CubePeriodGridCell[];\n  let focusedIndex: number;\n  let gridLabel: string;\n  let header: ReactElement;\n  let onCellPress: (index: number) => void;\n  let onCellFocus: (index: number) => void;\n  let onMoveFocus: (delta: number) => void;\n  let onMovePage: (delta: -1 | 1) => void;\n\n  if (view === 'year') {\n    let decadeStart = Math.floor(anchor.year / 10) * 10;\n    let firstYear = decadeStart - 1;\n\n    cells = Array.from({ length: YEAR_CELLS }, (_, index) => {\n      let year = firstYear + index;\n      let date = yearStart(year);\n\n      return {\n        key: `year-${year}`,\n        label: String(year),\n        isSelected: selected?.year === year,\n        isCurrent: todayDate.year === year,\n        isOutside: year < decadeStart || year > decadeStart + 9,\n        isDisabled: isPeriodDisabled(date, endOfYear(date)),\n      };\n    });\n\n    focusedIndex = anchor.year - firstYear;\n    gridLabel = t('calendar.years', 'Years');\n\n    header = (\n      <CalendarHeader\n        title={`${decadeStart} – ${decadeStart + 9}`}\n        prevButtonProps={{\n          'aria-label': t('calendar.previousYears', 'Previous years'),\n          isDisabled: isPeriodDisabled(\n            yearStart(decadeStart - 10),\n            endOfYear(yearStart(decadeStart - 1)),\n          ),\n          onPress: () => setAnchor(anchor.subtract({ years: 10 })),\n        }}\n        nextButtonProps={{\n          'aria-label': t('calendar.nextYears', 'Next years'),\n          isDisabled: isPeriodDisabled(\n            yearStart(decadeStart + 10),\n            endOfYear(yearStart(decadeStart + 19)),\n          ),\n          onPress: () => setAnchor(anchor.add({ years: 10 })),\n        }}\n      />\n    );\n\n    onCellPress = (index) => {\n      let year = firstYear + index;\n\n      if (picker === 'year') {\n        onChange?.(yearStart(year));\n      } else {\n        setAnchor(anchor.set({ year }));\n        showYearView(false);\n      }\n    };\n    onCellFocus = (index) => setAnchor(anchor.set({ year: firstYear + index }));\n    onMoveFocus = (delta) => setAnchor(anchor.add({ years: delta }));\n    onMovePage = (delta) => setAnchor(anchor.add({ years: delta * 10 }));\n  } else if (view === 'quarter') {\n    let quarterDate = (quarter: number) =>\n      new CalendarDate(anchor.year, (quarter - 1) * 3 + 1, 1);\n\n    cells = Array.from({ length: 4 }, (_, index) => {\n      let quarter = index + 1;\n      let date = quarterDate(quarter);\n\n      return {\n        key: `quarter-${quarter}`,\n        label: `Q${quarter}`,\n        isSelected:\n          selected != null &&\n          selected.year === anchor.year &&\n          getQuarter(selected.month) === quarter,\n        isCurrent:\n          todayDate.year === anchor.year &&\n          getQuarter(todayDate.month) === quarter,\n        isDisabled: isPeriodDisabled(date, endOfMonth(date.add({ months: 2 }))),\n      };\n    });\n\n    focusedIndex = getQuarter(anchor.month) - 1;\n    gridLabel = t('calendar.quarters', 'Quarters');\n    header = renderYearHeader();\n\n    onCellPress = (index) => onChange?.(quarterDate(index + 1));\n    onCellFocus = (index) => setAnchor(quarterDate(index + 1));\n    onMoveFocus = (delta) => setAnchor(anchor.add({ months: delta * 3 }));\n    onMovePage = (delta) => setAnchor(anchor.add({ years: delta }));\n  } else {\n    let monthDate = (month: number) => new CalendarDate(anchor.year, month, 1);\n\n    cells = Array.from({ length: 12 }, (_, index) => {\n      let month = index + 1;\n      let date = monthDate(month);\n\n      return {\n        key: `month-${month}`,\n        label: monthFormatter.format(date.toDate('UTC')),\n        isSelected:\n          selected != null &&\n          selected.year === anchor.year &&\n          selected.month === month,\n        isCurrent: todayDate.year === anchor.year && todayDate.month === month,\n        isDisabled: isPeriodDisabled(date, endOfMonth(date)),\n      };\n    });\n\n    focusedIndex = anchor.month - 1;\n    gridLabel = t('calendar.months', 'Months');\n    header = renderYearHeader();\n\n    onCellPress = (index) => onChange?.(monthDate(index + 1));\n    onCellFocus = (index) => setAnchor(monthDate(index + 1));\n    onMoveFocus = (delta) => setAnchor(anchor.add({ months: delta }));\n    onMovePage = (delta) => setAnchor(anchor.add({ years: delta }));\n  }\n\n  return (\n    <CalendarElement onKeyDown={onKeyDown}>\n      {header}\n      <PeriodGrid\n        // Remount per view so focus follows the user into the new grid.\n        key={view}\n        autoFocus={autoFocusGrid}\n        aria-label={gridLabel}\n        cells={cells}\n        styles={PERIOD_GRID_STYLES}\n        columns={COLUMNS[view]}\n        focusedIndex={focusedIndex}\n        onCellPress={onCellPress}\n        onCellFocus={onCellFocus}\n        onMoveFocus={onMoveFocus}\n        onMovePage={onMovePage}\n      />\n    </CalendarElement>\n  );\n}\n"],"mappings":"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"}

package/dist/components/other/Calendar/PeriodGrid.js

@@ -0,0 +1,144 @@
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+import { CALENDAR_CELL_STYLES } from "./styled.js";
+import { tasty } from "@tenphi/tasty";
+import { useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/other/Calendar/PeriodGrid.tsx
+const PeriodGridElement = tasty({
+	as: "table",
+	role: "grid",
+	styles: {
+		borderCollapse: "collapse",
+		borderSpacing: 0,
+		tableLayout: "fixed"
+	}
+});
+const PeriodGridCellElement = tasty({
+	as: "td",
+	role: "gridcell",
+	styles: {
+		margin: 0,
+		padding: "2bw right bottom"
+	}
+});
+const PeriodGridButtonElement = tasty({
+	as: "button",
+	"data-popover-keep": true,
+	styles: {
+		...CALENDAR_CELL_STYLES,
+		width: "100%",
+		height: "4x",
+		padding: "0 .5x"
+	}
+});
+/**
+* A keyboard-navigable grid of calendar periods (months, quarters or years).
+*
+* The grid owns rendering, the roving tab stop and DOM focus; the owner owns
+* the periods themselves. Arrow keys that leave the page are reported through
+* `onMoveFocus` so the owner can page and keep focus on the adjacent period.
+*/
+function PeriodGrid(props) {
+	let { cells, columns, focusedIndex, autoFocus, styles, onCellPress, onCellFocus, onMoveFocus, onMovePage } = props;
+	let cellRefs = useRef([]);
+	let shouldFocusRef = useRef(!!autoFocus);
+	let safeIndex = Math.max(0, Math.min(cells.length - 1, focusedIndex));
+	cellRefs.current.length = cells.length;
+	useLayoutEffect(() => {
+		if (shouldFocusRef.current) {
+			shouldFocusRef.current = false;
+			cellRefs.current[safeIndex]?.focus();
+		}
+	});
+	let moveFocus = (delta) => {
+		shouldFocusRef.current = true;
+		let next = safeIndex + delta;
+		while (next >= 0 && next < cells.length && cells[next].isDisabled) next += delta;
+		if (next < 0 || next >= cells.length) onMoveFocus(delta);
+		else onCellFocus(next);
+	};
+	let focusEdge = (edge) => {
+		let step = edge === "start" ? 1 : -1;
+		let index = edge === "start" ? 0 : cells.length - 1;
+		while (index >= 0 && index < cells.length && cells[index].isDisabled) index += step;
+		if (index < 0 || index >= cells.length) return;
+		shouldFocusRef.current = true;
+		onCellFocus(index);
+	};
+	let onKeyDown = (e) => {
+		switch (e.key) {
+			case "ArrowRight":
+				moveFocus(1);
+				break;
+			case "ArrowLeft":
+				moveFocus(-1);
+				break;
+			case "ArrowDown":
+				moveFocus(columns);
+				break;
+			case "ArrowUp":
+				moveFocus(-columns);
+				break;
+			case "Home":
+				focusEdge("start");
+				break;
+			case "End":
+				focusEdge("end");
+				break;
+			case "PageUp":
+				shouldFocusRef.current = true;
+				onMovePage(-1);
+				break;
+			case "PageDown":
+				shouldFocusRef.current = true;
+				onMovePage(1);
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		e.stopPropagation();
+	};
+	let rows = [];
+	for (let i = 0; i < cells.length; i += columns) rows.push(cells.slice(i, i + columns));
+	return /* @__PURE__ */ jsx(PeriodGridElement, {
+		"aria-label": props["aria-label"],
+		styles,
+		onKeyDown,
+		children: /* @__PURE__ */ jsx("tbody", {
+			"data-element": "Body",
+			children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", {
+				role: "row",
+				"data-element": "Row",
+				children: row.map((cell, columnIndex) => {
+					let index = rowIndex * columns + columnIndex;
+					return /* @__PURE__ */ jsx(PeriodGridCellElement, {
+						"aria-selected": !!cell.isSelected,
+						children: /* @__PURE__ */ jsx(PeriodGridButtonElement, {
+							ref: (element) => {
+								cellRefs.current[index] = element;
+							},
+							type: "button",
+							tabIndex: index === safeIndex ? 0 : -1,
+							disabled: cell.isDisabled,
+							"aria-label": cell.ariaLabel,
+							mods: {
+								selected: cell.isSelected,
+								current: cell.isCurrent,
+								outside: cell.isOutside,
+								disabled: cell.isDisabled
+							},
+							onFocus: () => onCellFocus(index),
+							onClick: () => onCellPress(index),
+							children: cell.label
+						})
+					}, cell.key);
+				})
+			}, rowIndex))
+		})
+	});
+}
+
+//#endregion
+export { PeriodGrid };
+//# sourceMappingURL=PeriodGrid.js.map

package/dist/components/other/Calendar/PeriodGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodGrid.js","names":[],"sources":["../../../../src/components/other/Calendar/PeriodGrid.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { KeyboardEvent, useLayoutEffect, useRef } from 'react';\n\nimport { CALENDAR_CELL_STYLES } from './styled';\n\nconst PeriodGridElement = tasty({\n  as: 'table',\n  role: 'grid',\n  styles: {\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n    // Columns share the width evenly. The owner passes that width explicitly —\n    // a percentage here would resolve against the popover's `max-content` box.\n    tableLayout: 'fixed',\n  },\n});\n\nconst PeriodGridCellElement = tasty({\n  as: 'td',\n  role: 'gridcell',\n  styles: {\n    margin: 0,\n    padding: '2bw right bottom',\n  },\n});\n\nconst PeriodGridButtonElement = tasty({\n  as: 'button',\n  'data-popover-keep': true,\n  styles: {\n    ...CALENDAR_CELL_STYLES,\n    width: '100%',\n    height: '4x',\n    padding: '0 .5x',\n  },\n});\n\nexport interface CubePeriodGridCell {\n  /** Stable identity of the cell, also used as the React key. */\n  key: string;\n  label: string;\n  /** Overrides the accessible name when the visible label is ambiguous. */\n  ariaLabel?: string;\n  isSelected?: boolean;\n  /** Whether the cell contains today. */\n  isCurrent?: boolean;\n  isDisabled?: boolean;\n  /** Whether the cell belongs to a neighbouring page (e.g. an adjacent decade). */\n  isOutside?: boolean;\n}\n\nexport interface CubePeriodGridProps {\n  cells: CubePeriodGridCell[];\n  columns: number;\n  /** Index of the cell that holds the roving tab stop. */\n  focusedIndex: number;\n  autoFocus?: boolean;\n  'aria-label'?: string;\n  styles?: Styles;\n  onCellPress: (index: number) => void;\n  /** Focus moved to another cell of the current page. */\n  onCellFocus: (index: number) => void;\n  /**\n   * Focus moved past the edge of the current page by `delta` periods. The owner\n   * moves its anchor, which in turn flips the page and the focused index.\n   */\n  onMoveFocus: (delta: number) => void;\n  /** `PageUp` / `PageDown` — one page back or forward. */\n  onMovePage: (delta: -1 | 1) => void;\n}\n\n/**\n * A keyboard-navigable grid of calendar periods (months, quarters or years).\n *\n * The grid owns rendering, the roving tab stop and DOM focus; the owner owns\n * the periods themselves. Arrow keys that leave the page are reported through\n * `onMoveFocus` so the owner can page and keep focus on the adjacent period.\n */\nexport function PeriodGrid(props: CubePeriodGridProps) {\n  let {\n    cells,\n    columns,\n    focusedIndex,\n    autoFocus,\n    styles,\n    onCellPress,\n    onCellFocus,\n    onMoveFocus,\n    onMovePage,\n  } = props;\n\n  let cellRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  // Set by the grid's own keyboard handling and by `autoFocus`, so paging with\n  // the header buttons never steals focus into the grid.\n  let shouldFocusRef = useRef(!!autoFocus);\n\n  let safeIndex = Math.max(0, Math.min(cells.length - 1, focusedIndex));\n\n  cellRefs.current.length = cells.length;\n\n  useLayoutEffect(() => {\n    if (shouldFocusRef.current) {\n      shouldFocusRef.current = false;\n      cellRefs.current[safeIndex]?.focus();\n    }\n  });\n\n  let moveFocus = (delta: number) => {\n    shouldFocusRef.current = true;\n\n    let next = safeIndex + delta;\n\n    // Disabled cells can't hold DOM focus, so step over them instead of\n    // stranding the caret on an unreachable period.\n    while (next >= 0 && next < cells.length && cells[next].isDisabled) {\n      next += delta;\n    }\n\n    if (next < 0 || next >= cells.length) {\n      onMoveFocus(delta);\n    } else {\n      onCellFocus(next);\n    }\n  };\n\n  let focusEdge = (edge: 'start' | 'end') => {\n    let step = edge === 'start' ? 1 : -1;\n    let index = edge === 'start' ? 0 : cells.length - 1;\n\n    while (index >= 0 && index < cells.length && cells[index].isDisabled) {\n      index += step;\n    }\n\n    if (index < 0 || index >= cells.length) return;\n\n    shouldFocusRef.current = true;\n    onCellFocus(index);\n  };\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowRight':\n        moveFocus(1);\n        break;\n      case 'ArrowLeft':\n        moveFocus(-1);\n        break;\n      case 'ArrowDown':\n        moveFocus(columns);\n        break;\n      case 'ArrowUp':\n        moveFocus(-columns);\n        break;\n      case 'Home':\n        focusEdge('start');\n        break;\n      case 'End':\n        focusEdge('end');\n        break;\n      case 'PageUp':\n        shouldFocusRef.current = true;\n        onMovePage(-1);\n        break;\n      case 'PageDown':\n        shouldFocusRef.current = true;\n        onMovePage(1);\n        break;\n      default:\n        return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  let rows: CubePeriodGridCell[][] = [];\n\n  for (let i = 0; i < cells.length; i += columns) {\n    rows.push(cells.slice(i, i + columns));\n  }\n\n  return (\n    <PeriodGridElement\n      aria-label={props['aria-label']}\n      styles={styles}\n      onKeyDown={onKeyDown}\n    >\n      <tbody data-element=\"Body\">\n        {rows.map((row, rowIndex) => (\n          <tr key={rowIndex} role=\"row\" data-element=\"Row\">\n            {row.map((cell, columnIndex) => {\n              let index = rowIndex * columns + columnIndex;\n\n              return (\n                <PeriodGridCellElement\n                  key={cell.key}\n                  aria-selected={!!cell.isSelected}\n                >\n                  <PeriodGridButtonElement\n                    ref={(element: HTMLButtonElement | null) => {\n                      cellRefs.current[index] = element;\n                    }}\n                    type=\"button\"\n                    tabIndex={index === safeIndex ? 0 : -1}\n                    disabled={cell.isDisabled}\n                    aria-label={cell.ariaLabel}\n                    mods={{\n                      selected: cell.isSelected,\n                      current: cell.isCurrent,\n                      outside: cell.isOutside,\n                      disabled: cell.isDisabled,\n                    }}\n                    onFocus={() => onCellFocus(index)}\n                    onClick={() => onCellPress(index)}\n                  >\n                    {cell.label}\n                  </PeriodGridButtonElement>\n                </PeriodGridCellElement>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </PeriodGridElement>\n  );\n}\n"],"mappings":"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"}