@cube-dev/ui-kit 0.161.0 → 0.162.0

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarGrid.js","names":[],"sources":["../../../../src/components/other/Calendar/CalendarGrid.tsx"],"sourcesContent":["import { getWeeksInMonth } from '@internationalized/date';\nimport { tasty } from '@tenphi/tasty';\nimport { useState } from 'react';\nimport { useCalendarGrid, useLocale } from 'react-aria';\n\nimport { getWeekNumber } from '../../fields/DatePicker/period';\n\nimport { CalendarCell } from './CalendarCell';\n\nconst TableElement = tasty({\n  as: 'table',\n  styles: {\n    borderCollapse: 'collapse',\n\n    HeadRow: {\n      color: '#dark-04',\n    },\n\n    WeekNumber: {\n      preset: 't3m',\n      color: '#dark-04',\n      textAlign: 'center',\n      padding: '0 1x',\n    },\n  },\n});\n\nexport function CalendarGrid({ state, pickerMode = 'day', ...props }) {\n  let { locale } = useLocale();\n  let { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);\n\n  // Get the number of weeks in the month, so we can render the proper number of rows.\n  let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);\n  let showWeekNumbers = pickerMode === 'week';\n\n  // In week mode, hovering any day highlights the whole week row.\n  let [hoveredWeek, setHoveredWeek] = useState<number | null>(null);\n\n  return (\n    <TableElement {...gridProps}>\n      <thead data-element=\"Head\" {...headerProps}>\n        <tr data-element=\"HeadRow\">\n          {showWeekNumbers && <th aria-hidden=\"true\" />}\n          {weekDays.map((day, index) => (\n            <th key={index}>{day}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody data-element=\"Body\">\n        {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n          let datesInWeek = state.getDatesInWeek(weekIndex);\n          let firstDate = datesInWeek.find(Boolean);\n          let isRowHovered = showWeekNumbers && hoveredWeek === weekIndex;\n\n          return (\n            <tr\n              key={weekIndex}\n              data-element=\"Row\"\n              onMouseEnter={\n                showWeekNumbers ? () => setHoveredWeek(weekIndex) : undefined\n              }\n              onMouseLeave={\n                showWeekNumbers ? () => setHoveredWeek(null) : undefined\n              }\n            >\n              {showWeekNumbers && (\n                <td data-element=\"WeekNumber\" aria-hidden=\"true\">\n                  {firstDate ? getWeekNumber(firstDate, locale) : ''}\n                </td>\n              )}\n              {datesInWeek.map((date, i) =>\n                date ? (\n                  <CalendarCell\n                    key={i}\n                    state={state}\n                    date={date}\n                    selectedRange={props.selectedRange}\n                    rangeHover={isRowHovered}\n                  />\n                ) : (\n                  <td key={i} />\n                ),\n              )}\n            </tr>\n          );\n        })}\n      </tbody>\n    </TableElement>\n  );\n}\n"],"mappings":";;;;;;;;;;AASA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,gBAAgB;EAEhB,SAAS,EACP,OAAO,YACR;EAED,YAAY;GACV,QAAQ;GACR,OAAO;GACP,WAAW;GACX,SAAS;GACV;EACF;CACF,CAAC;AAEF,SAAgB,aAAa,EAAE,OAAO,aAAa,OAAO,GAAG,SAAS;CACpE,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,EAAE,WAAW,aAAa,aAAa,gBAAgB,OAAO,MAAM;CAGxE,IAAI,eAAe,gBAAgB,MAAM,aAAa,OAAO,OAAO;CACpE,IAAI,kBAAkB,eAAe;CAGrC,IAAI,CAAC,aAAa,kBAAkB,SAAwB,KAAK;AAEjE,QACE,qBAAC;EAAa,GAAI;aAChB,oBAAC;GAAM,gBAAa;GAAO,GAAI;aAC7B,qBAAC;IAAG,gBAAa;eACd,mBAAmB,oBAAC,QAAG,eAAY,SAAS,EAC5C,SAAS,KAAK,KAAK,UAClB,oBAAC,kBAAgB,OAAR,MAAiB,CAC1B;KACC;IACC,EACR,oBAAC;GAAM,gBAAa;aACjB,CAAC,GAAG,IAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,cAAc;IACtD,IAAI,cAAc,MAAM,eAAe,UAAU;IACjD,IAAI,YAAY,YAAY,KAAK,QAAQ;IACzC,IAAI,eAAe,mBAAmB,gBAAgB;AAEtD,WACE,qBAAC;KAEC,gBAAa;KACb,cACE,wBAAwB,eAAe,UAAU,GAAG;KAEtD,cACE,wBAAwB,eAAe,KAAK,GAAG;gBAGhD,mBACC,oBAAC;MAAG,gBAAa;MAAa,eAAY;gBACvC,YAAY,cAAc,WAAW,OAAO,GAAG;OAC7C,EAEN,YAAY,KAAK,MAAM,MACtB,OACE,oBAAC;MAEQ;MACD;MACN,eAAe,MAAM;MACrB,YAAY;QAJP,EAKL,GAEF,oBAAC,UAAQ,EAAK,CAEjB;OA1BI,UA2BF;KAEP;IACI;GACK"}
+{"version":3,"file":"CalendarGrid.js","names":["today","getToday"],"sources":["../../../../src/components/other/Calendar/CalendarGrid.tsx"],"sourcesContent":["import {\n  today as getToday,\n  getWeeksInMonth,\n  toCalendar,\n} from '@internationalized/date';\nimport { tasty } from '@tenphi/tasty';\nimport { useMemo, useState } from 'react';\nimport { DateValue, useCalendarGrid, useLocale } from 'react-aria';\nimport { CalendarState, RangeCalendarState } from 'react-stately';\n\nimport { getWeekNumber } from '../../fields/DatePicker/period';\n\nimport { CalendarCell } from './CalendarCell';\n\nconst TableElement = tasty({\n  as: 'table',\n  styles: {\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n\n    HeadRow: {\n      color: '#dark-04',\n    },\n\n    WeekNumber: {\n      preset: 't3m',\n      color: '#dark-04',\n      textAlign: 'center',\n      padding: '0 1x',\n    },\n  },\n});\n\nexport interface CubeCalendarGridProps {\n  state: CalendarState | RangeCalendarState;\n  /** Explicit range highlight, used when the range lives outside the state. */\n  selectedRange?: { start: DateValue; end: DateValue };\n  /**\n   * When set to `week`, the grid shows a leading week-number column and\n   * highlights the whole week under the pointer.\n   */\n  pickerMode?: 'day' | 'week';\n}\n\nexport function CalendarGrid(props: CubeCalendarGridProps) {\n  let { state, selectedRange, pickerMode = 'day' } = props;\n  let { locale } = useLocale();\n  let { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);\n\n  // Get the number of weeks in the month, so we can render the proper number of rows.\n  let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);\n  let showWeekNumbers = pickerMode === 'week';\n\n  let today = useMemo(\n    () =>\n      toCalendar(getToday(state.timeZone), state.visibleRange.start.calendar),\n    [state.timeZone, state.visibleRange.start.calendar],\n  );\n\n  // In week mode, hovering any day highlights the whole week row.\n  let [hoveredWeek, setHoveredWeek] = useState<number | null>(null);\n\n  return (\n    <TableElement {...gridProps}>\n      <thead data-element=\"Head\" {...headerProps}>\n        <tr data-element=\"HeadRow\">\n          {showWeekNumbers && <th aria-hidden=\"true\" />}\n          {weekDays.map((day, index) => (\n            <th key={index}>{day}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody data-element=\"Body\">\n        {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n          let datesInWeek = state.getDatesInWeek(weekIndex);\n          let firstDate = datesInWeek.find(Boolean);\n          let isRowHovered = showWeekNumbers && hoveredWeek === weekIndex;\n\n          return (\n            <tr\n              key={weekIndex}\n              data-element=\"Row\"\n              onMouseEnter={\n                showWeekNumbers ? () => setHoveredWeek(weekIndex) : undefined\n              }\n              onMouseLeave={\n                showWeekNumbers ? () => setHoveredWeek(null) : undefined\n              }\n            >\n              {showWeekNumbers && (\n                <td data-element=\"WeekNumber\" aria-hidden=\"true\">\n                  {firstDate ? getWeekNumber(firstDate, locale) : ''}\n                </td>\n              )}\n              {datesInWeek.map((date, i) =>\n                date ? (\n                  <CalendarCell\n                    key={i}\n                    state={state}\n                    date={date}\n                    today={today}\n                    selectedRange={selectedRange}\n                    rangeHover={isRowHovered}\n                  />\n                ) : (\n                  <td key={i} />\n                ),\n              )}\n            </tr>\n          );\n        })}\n      </tbody>\n    </TableElement>\n  );\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,gBAAgB;EAChB,eAAe;EAEf,SAAS,EACP,OAAO,YACR;EAED,YAAY;GACV,QAAQ;GACR,OAAO;GACP,WAAW;GACX,SAAS;GACV;EACF;CACF,CAAC;AAaF,SAAgB,aAAa,OAA8B;CACzD,IAAI,EAAE,OAAO,eAAe,aAAa,UAAU;CACnD,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,EAAE,WAAW,aAAa,aAAa,gBAAgB,OAAO,MAAM;CAGxE,IAAI,eAAe,gBAAgB,MAAM,aAAa,OAAO,OAAO;CACpE,IAAI,kBAAkB,eAAe;CAErC,IAAIA,UAAQ,cAER,WAAWC,MAAS,MAAM,SAAS,EAAE,MAAM,aAAa,MAAM,SAAS,EACzE,CAAC,MAAM,UAAU,MAAM,aAAa,MAAM,SAAS,CACpD;CAGD,IAAI,CAAC,aAAa,kBAAkB,SAAwB,KAAK;AAEjE,QACE,qBAAC;EAAa,GAAI;aAChB,oBAAC;GAAM,gBAAa;GAAO,GAAI;aAC7B,qBAAC;IAAG,gBAAa;eACd,mBAAmB,oBAAC,QAAG,eAAY,SAAS,EAC5C,SAAS,KAAK,KAAK,UAClB,oBAAC,kBAAgB,OAAR,MAAiB,CAC1B;KACC;IACC,EACR,oBAAC;GAAM,gBAAa;aACjB,CAAC,GAAG,IAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,cAAc;IACtD,IAAI,cAAc,MAAM,eAAe,UAAU;IACjD,IAAI,YAAY,YAAY,KAAK,QAAQ;IACzC,IAAI,eAAe,mBAAmB,gBAAgB;AAEtD,WACE,qBAAC;KAEC,gBAAa;KACb,cACE,wBAAwB,eAAe,UAAU,GAAG;KAEtD,cACE,wBAAwB,eAAe,KAAK,GAAG;gBAGhD,mBACC,oBAAC;MAAG,gBAAa;MAAa,eAAY;gBACvC,YAAY,cAAc,WAAW,OAAO,GAAG;OAC7C,EAEN,YAAY,KAAK,MAAM,MACtB,OACE,oBAAC;MAEQ;MACD;MACN,OAAOD;MACQ;MACf,YAAY;QALP,EAML,GAEF,oBAAC,UAAQ,EAAK,CAEjB;OA3BI,UA4BF;KAEP;IACI;GACK"}

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

@@ -0,0 +1,62 @@
+/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+import { _Title } from "../../content/Title.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 { CalendarHeaderElement } from "./styled.js";
+import { tasty } from "@tenphi/tasty";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/other/Calendar/CalendarHeader.tsx
+/**
+* A heading that holds the view switcher. Its own preset matches the type scale
+* of an `xsmall` button so the plain-title fallback (a decade range, or a
+* calendar with navigation turned off) doesn't outweigh the interactive one.
+*/
+const CalendarTitleElement = tasty(_Title, {
+	level: 6,
+	preset: "t4",
+	styles: {
+		display: "flex",
+		placeItems: "center",
+		gap: ".25x",
+		padding: {
+			"": "0 (1x - 1bw)",
+			interactive: 0
+		}
+	}
+});
+const CalendarTitleButton = tasty(Button, {
+	"data-popover-keep": true,
+	type: "clear",
+	size: "xsmall"
+});
+function CalendarHeader(props) {
+	let { segments, title, prevButtonProps, nextButtonProps } = props;
+	return /* @__PURE__ */ jsxs(CalendarHeaderElement, { children: [/* @__PURE__ */ jsx(CalendarTitleElement, {
+		mods: { interactive: !!segments?.length },
+		children: segments?.length ? segments.map(({ key, label, onPress, isDisabled }) => /* @__PURE__ */ jsx(CalendarTitleButton, {
+			isDisabled,
+			onPress,
+			children: label
+		}, key)) : title
+	}), /* @__PURE__ */ jsxs(Space, {
+		gap: ".5x",
+		children: [/* @__PURE__ */ jsx(Button, {
+			"data-popover-keep": true,
+			size: "xsmall",
+			...prevButtonProps,
+			icon: /* @__PURE__ */ jsx(LeftIcon, {})
+		}), /* @__PURE__ */ jsx(Button, {
+			"data-popover-keep": true,
+			size: "xsmall",
+			...nextButtonProps,
+			icon: /* @__PURE__ */ jsx(RightIcon, {})
+		})]
+	})] });
+}
+
+//#endregion
+export { CalendarHeader };
+//# sourceMappingURL=CalendarHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.js","names":["Title"],"sources":["../../../../src/components/other/Calendar/CalendarHeader.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { LeftIcon, RightIcon } from '../../../icons';\nimport { Button } from '../../actions';\nimport { Title } from '../../content/Title';\nimport { Space } from '../../layout/Space';\n\nimport { CalendarHeaderElement } from './styled';\n\nimport type { Props } from '../../../props';\n\n/**\n * A heading that holds the view switcher. Its own preset matches the type scale\n * of an `xsmall` button so the plain-title fallback (a decade range, or a\n * calendar with navigation turned off) doesn't outweigh the interactive one.\n */\nconst CalendarTitleElement = tasty(Title, {\n  level: 6,\n  preset: 't4',\n  styles: {\n    display: 'flex',\n    placeItems: 'center',\n    gap: '.25x',\n    // Line the plain title up with the label inside a button.\n    padding: {\n      '': '0 (1x - 1bw)',\n      interactive: 0,\n    },\n  },\n});\n\nconst CalendarTitleButton = tasty(Button, {\n  'data-popover-keep': true,\n  type: 'clear',\n  size: 'xsmall',\n});\n\nexport interface CubeCalendarHeaderSegment {\n  key: string;\n  label: string;\n  onPress: () => void;\n  isDisabled?: boolean;\n}\n\nexport interface CubeCalendarHeaderProps {\n  /**\n   * Interactive title segments (month / year). When omitted the header falls\n   * back to a plain `title` — e.g. for a multi-month range.\n   */\n  segments?: CubeCalendarHeaderSegment[];\n  title?: ReactNode;\n  prevButtonProps?: Props;\n  nextButtonProps?: Props;\n}\n\nexport function CalendarHeader(props: CubeCalendarHeaderProps) {\n  let { segments, title, prevButtonProps, nextButtonProps } = props;\n\n  return (\n    <CalendarHeaderElement>\n      <CalendarTitleElement mods={{ interactive: !!segments?.length }}>\n        {segments?.length\n          ? segments.map(({ key, label, onPress, isDisabled }) => (\n              <CalendarTitleButton\n                key={key}\n                isDisabled={isDisabled}\n                onPress={onPress}\n              >\n                {label}\n              </CalendarTitleButton>\n            ))\n          : title}\n      </CalendarTitleElement>\n      <Space gap=\".5x\">\n        <Button\n          data-popover-keep\n          size=\"xsmall\"\n          {...prevButtonProps}\n          icon={<LeftIcon />}\n        />\n        <Button\n          data-popover-keep\n          size=\"xsmall\"\n          {...nextButtonProps}\n          icon={<RightIcon />}\n        />\n      </Space>\n    </CalendarHeaderElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,uBAAuB,MAAMA,QAAO;CACxC,OAAO;CACP,QAAQ;CACR,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,KAAK;EAEL,SAAS;GACP,IAAI;GACJ,aAAa;GACd;EACF;CACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,QAAQ;CACxC,qBAAqB;CACrB,MAAM;CACN,MAAM;CACP,CAAC;AAoBF,SAAgB,eAAe,OAAgC;CAC7D,IAAI,EAAE,UAAU,OAAO,iBAAiB,oBAAoB;AAE5D,QACE,qBAAC,oCACC,oBAAC;EAAqB,MAAM,EAAE,aAAa,CAAC,CAAC,UAAU,QAAQ;YAC5D,UAAU,SACP,SAAS,KAAK,EAAE,KAAK,OAAO,SAAS,iBACnC,oBAAC;GAEa;GACH;aAER;KAJI,IAKe,CACtB,GACF;GACiB,EACvB,qBAAC;EAAM,KAAI;aACT,oBAAC;GACC;GACA,MAAK;GACL,GAAI;GACJ,MAAM,oBAAC,aAAW;IAClB,EACF,oBAAC;GACC;GACA,MAAK;GACL,GAAI;GACJ,MAAM,oBAAC,cAAY;IACnB;GACI,IACc"}

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

@@ -0,0 +1,196 @@
+/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { CalendarElement } from "./styled.js";
+import { CalendarGrid } from "./CalendarGrid.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 } from "react-aria";
+import { endOfMonth, endOfYear, isSameMonth, startOfMonth, startOfYear, toCalendar, today } from "@internationalized/date";
+
+//#region src/components/other/Calendar/CalendarPanel.tsx
+/** The year grid shows a decade plus one adjacent year on either side. */
+const YEAR_CELLS = 12;
+const MONTH_COLUMNS = 3;
+const YEAR_COLUMNS = 3;
+/**
+* Exactly as wide as seven day cells (`3x` cell + a `2bw` gutter), so switching
+* between the day, month and year panels keeps the popover roughly in place.
+*/
+const PERIOD_GRID_STYLES = { width: "(7 * (3x + 2bw))" };
+/**
+* The body shared by `Calendar` and `RangeCalendar`: a header plus one of three
+* panels. The month and year panels only *navigate* — they move the focused
+* date and never select a value, so a range selection in progress survives a
+* jump to another month.
+*/
+function CalendarPanel(props) {
+	const { t } = useI18n();
+	let { state, title, calendarProps, prevButtonProps, nextButtonProps, hasMonthYearNavigation = true, selectedRange, pickerMode, elementRef } = props;
+	let [view, setView] = useState("day");
+	let [anchor, setAnchor] = useState(state.focusedDate);
+	let visibleStart = state.visibleRange.start;
+	let calendar = visibleStart.calendar;
+	let timeZone = state.timeZone;
+	let calendarId = calendar.identifier;
+	let monthFormatter = useDateFormatter({
+		month: "long",
+		timeZone,
+		calendar: calendarId
+	});
+	let shortMonthFormatter = useDateFormatter({
+		month: "short",
+		timeZone,
+		calendar: calendarId
+	});
+	let yearFormatter = useDateFormatter({
+		year: "numeric",
+		timeZone,
+		calendar: calendarId
+	});
+	let todayDate = useMemo(() => toCalendar(today(timeZone), calendar), [timeZone, calendar]);
+	let format = (formatter, date) => formatter.format(date.toDate(timeZone));
+	/** Whether a whole period lies outside the calendar's allowed range. */
+	let isPeriodDisabled = (start, end) => state.isDisabled || state.minValue != null && end.compare(state.minValue) < 0 || state.maxValue != null && start.compare(state.maxValue) > 0;
+	let hasNavigation = hasMonthYearNavigation && isSameMonth(visibleStart, state.visibleRange.end);
+	let openView = (next) => {
+		setAnchor(state.focusedDate);
+		setView(next);
+	};
+	let onKeyDown = (e) => {
+		if (view !== "day" && e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			setView("day");
+			state.setFocused(true);
+		}
+	};
+	let header;
+	let body;
+	if (view === "month") {
+		let monthDate = (month) => startOfMonth(anchor.set({ month }));
+		let monthCount = calendar.getMonthsInYear(anchor);
+		let cells = Array.from({ length: monthCount }, (_, index) => {
+			let date = monthDate(index + 1);
+			return {
+				key: `month-${index + 1}`,
+				label: format(shortMonthFormatter, date),
+				isSelected: isSameMonth(date, visibleStart),
+				isCurrent: isSameMonth(date, todayDate),
+				isDisabled: isPeriodDisabled(date, endOfMonth(date))
+			};
+		});
+		let prevYear = anchor.subtract({ years: 1 });
+		let nextYear = anchor.add({ years: 1 });
+		header = /* @__PURE__ */ jsx(CalendarHeader, {
+			segments: [{
+				key: "year",
+				label: format(yearFormatter, anchor),
+				isDisabled: state.isDisabled,
+				onPress: () => setView("year")
+			}],
+			prevButtonProps: {
+				"aria-label": t("calendar.previousYear", "Previous year"),
+				isDisabled: isPeriodDisabled(startOfYear(prevYear), endOfYear(prevYear)),
+				onPress: () => setAnchor(prevYear)
+			},
+			nextButtonProps: {
+				"aria-label": t("calendar.nextYear", "Next year"),
+				isDisabled: isPeriodDisabled(startOfYear(nextYear), endOfYear(nextYear)),
+				onPress: () => setAnchor(nextYear)
+			}
+		});
+		body = /* @__PURE__ */ jsx(PeriodGrid, {
+			autoFocus: true,
+			"aria-label": t("calendar.months", "Months"),
+			cells,
+			styles: PERIOD_GRID_STYLES,
+			columns: MONTH_COLUMNS,
+			focusedIndex: anchor.month - 1,
+			onCellPress: (index) => {
+				state.setFocusedDate(anchor.set({ month: index + 1 }));
+				setView("day");
+			},
+			onCellFocus: (index) => setAnchor(anchor.set({ month: index + 1 })),
+			onMoveFocus: (delta) => setAnchor(anchor.add({ months: delta })),
+			onMovePage: (delta) => setAnchor(anchor.add({ years: delta }))
+		}, "month");
+	} else if (view === "year") {
+		let yearDate = (year) => startOfYear(anchor.set({ year }));
+		let decadeStart = Math.floor(anchor.year / 10) * 10;
+		let firstYear = decadeStart - 1;
+		let cells = Array.from({ length: YEAR_CELLS }, (_, index) => {
+			let year = firstYear + index;
+			let date = yearDate(year);
+			return {
+				key: `year-${year}`,
+				label: format(yearFormatter, date),
+				isSelected: year === visibleStart.year,
+				isCurrent: year === todayDate.year,
+				isOutside: year < decadeStart || year > decadeStart + 9,
+				isDisabled: isPeriodDisabled(date, endOfYear(date))
+			};
+		});
+		header = /* @__PURE__ */ jsx(CalendarHeader, {
+			title: `${format(yearFormatter, yearDate(decadeStart))} – ${format(yearFormatter, yearDate(decadeStart + 9))}`,
+			prevButtonProps: {
+				"aria-label": t("calendar.previousYears", "Previous years"),
+				isDisabled: isPeriodDisabled(yearDate(decadeStart - 10), endOfYear(yearDate(decadeStart - 1))),
+				onPress: () => setAnchor(anchor.subtract({ years: 10 }))
+			},
+			nextButtonProps: {
+				"aria-label": t("calendar.nextYears", "Next years"),
+				isDisabled: isPeriodDisabled(yearDate(decadeStart + 10), endOfYear(yearDate(decadeStart + 19))),
+				onPress: () => setAnchor(anchor.add({ years: 10 }))
+			}
+		});
+		body = /* @__PURE__ */ jsx(PeriodGrid, {
+			autoFocus: true,
+			"aria-label": t("calendar.years", "Years"),
+			cells,
+			styles: PERIOD_GRID_STYLES,
+			columns: YEAR_COLUMNS,
+			focusedIndex: anchor.year - firstYear,
+			onCellPress: (index) => {
+				setAnchor(anchor.set({ year: firstYear + index }));
+				setView("month");
+			},
+			onCellFocus: (index) => setAnchor(anchor.set({ year: firstYear + index })),
+			onMoveFocus: (delta) => setAnchor(anchor.add({ years: delta })),
+			onMovePage: (delta) => setAnchor(anchor.add({ years: delta * 10 }))
+		}, "year");
+	} else {
+		header = /* @__PURE__ */ jsx(CalendarHeader, {
+			title,
+			segments: hasNavigation ? [{
+				key: "month",
+				label: format(monthFormatter, visibleStart),
+				isDisabled: state.isDisabled,
+				onPress: () => openView("month")
+			}, {
+				key: "year",
+				label: format(yearFormatter, visibleStart),
+				isDisabled: state.isDisabled,
+				onPress: () => openView("year")
+			}] : void 0,
+			prevButtonProps,
+			nextButtonProps
+		});
+		body = /* @__PURE__ */ jsx(CalendarGrid, {
+			state,
+			selectedRange,
+			pickerMode
+		});
+	}
+	return /* @__PURE__ */ jsxs(CalendarElement, {
+		ref: elementRef,
+		...mergeProps$1(calendarProps, { onKeyDown }),
+		children: [header, body]
+	});
+}
+
+//#endregion
+export { CalendarPanel };
+//# sourceMappingURL=CalendarPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPanel.js","names":["mergeProps"],"sources":["../../../../src/components/other/Calendar/CalendarPanel.tsx"],"sourcesContent":["import {\n  CalendarDate,\n  endOfMonth,\n  endOfYear,\n  isSameMonth,\n  startOfMonth,\n  startOfYear,\n  toCalendar,\n  today,\n} from '@internationalized/date';\nimport { KeyboardEvent, ReactElement, Ref, useMemo, useState } from 'react';\nimport { DateValue, useDateFormatter } from 'react-aria';\nimport { CalendarState, RangeCalendarState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\n\nimport { CalendarGrid } from './CalendarGrid';\nimport { CalendarHeader } from './CalendarHeader';\nimport { CubePeriodGridCell, PeriodGrid } from './PeriodGrid';\nimport { CalendarElement } from './styled';\n\nimport type { Props } from '../../../props';\n\n/** Which panel the calendar currently shows. */\nexport type CubeCalendarView = 'day' | 'month' | 'year';\n\n/** The year grid shows a decade plus one adjacent year on either side. */\nconst YEAR_CELLS = 12;\nconst MONTH_COLUMNS = 3;\nconst YEAR_COLUMNS = 3;\n\n/**\n * Exactly as wide as seven day cells (`3x` cell + a `2bw` gutter), so switching\n * between the day, month and year panels keeps the popover roughly in place.\n */\nconst PERIOD_GRID_STYLES = { width: '(7 * (3x + 2bw))' } as const;\n\ninterface Formatter {\n  format(date: Date): string;\n}\n\nexport interface CubeCalendarPanelProps {\n  state: CalendarState | RangeCalendarState;\n  /** The visible range title provided by React Aria. */\n  title: string;\n  calendarProps: Props;\n  prevButtonProps: Props;\n  nextButtonProps: Props;\n  /**\n   * Whether the header lets the user jump straight to a month or a year.\n   * @default true\n   */\n  hasMonthYearNavigation?: boolean;\n  selectedRange?: { start: DateValue; end: DateValue };\n  pickerMode?: 'day' | 'week';\n  elementRef?: Ref<HTMLElement>;\n}\n\n/**\n * The body shared by `Calendar` and `RangeCalendar`: a header plus one of three\n * panels. The month and year panels only *navigate* — they move the focused\n * date and never select a value, so a range selection in progress survives a\n * jump to another month.\n */\nexport function CalendarPanel(props: CubeCalendarPanelProps) {\n  const { t } = useI18n();\n\n  let {\n    state,\n    title,\n    calendarProps,\n    prevButtonProps,\n    nextButtonProps,\n    hasMonthYearNavigation = true,\n    selectedRange,\n    pickerMode,\n    elementRef,\n  } = props;\n\n  let [view, setView] = useState<CubeCalendarView>('day');\n  // The period the month / year panels navigate around. Seeded from the\n  // focused date every time the user leaves the day panel.\n  let [anchor, setAnchor] = useState<CalendarDate>(state.focusedDate);\n\n  let visibleStart = state.visibleRange.start;\n  let calendar = visibleStart.calendar;\n  let timeZone = state.timeZone;\n  let calendarId = calendar.identifier;\n\n  let monthFormatter = useDateFormatter({\n    month: 'long',\n    timeZone,\n    calendar: calendarId,\n  });\n  let shortMonthFormatter = useDateFormatter({\n    month: 'short',\n    timeZone,\n    calendar: calendarId,\n  });\n  let yearFormatter = useDateFormatter({\n    year: 'numeric',\n    timeZone,\n    calendar: calendarId,\n  });\n\n  let todayDate = useMemo(\n    () => toCalendar(today(timeZone), calendar),\n    [timeZone, calendar],\n  );\n\n  let format = (formatter: Formatter, date: CalendarDate) =>\n    formatter.format(date.toDate(timeZone));\n\n  /** Whether a whole period lies outside the calendar's allowed range. */\n  let isPeriodDisabled = (start: CalendarDate, end: CalendarDate) =>\n    state.isDisabled ||\n    (state.minValue != null && end.compare(state.minValue) < 0) ||\n    (state.maxValue != null && start.compare(state.maxValue) > 0);\n\n  // A multi-month view has no single month or year to drill into.\n  let hasNavigation =\n    hasMonthYearNavigation && isSameMonth(visibleStart, state.visibleRange.end);\n\n  let openView = (next: CubeCalendarView) => {\n    setAnchor(state.focusedDate);\n    setView(next);\n  };\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    // Step back to the day panel rather than closing the surrounding popover.\n    if (view !== 'day' && e.key === 'Escape') {\n      e.preventDefault();\n      e.stopPropagation();\n      setView('day');\n      // The grid the user was in is about to unmount. Claim focus for the day\n      // cell, or it falls out of the popover and the next `Escape` is lost.\n      state.setFocused(true);\n    }\n  };\n\n  let header: ReactElement;\n  let body: ReactElement;\n\n  if (view === 'month') {\n    let monthDate = (month: number) => startOfMonth(anchor.set({ month }));\n    let monthCount = calendar.getMonthsInYear(anchor);\n\n    let cells: CubePeriodGridCell[] = Array.from(\n      { length: monthCount },\n      (_, index) => {\n        let date = monthDate(index + 1);\n\n        return {\n          key: `month-${index + 1}`,\n          label: format(shortMonthFormatter, date),\n          isSelected: isSameMonth(date, visibleStart),\n          isCurrent: isSameMonth(date, todayDate),\n          isDisabled: isPeriodDisabled(date, endOfMonth(date)),\n        };\n      },\n    );\n\n    let prevYear = anchor.subtract({ years: 1 });\n    let nextYear = anchor.add({ years: 1 });\n\n    header = (\n      <CalendarHeader\n        segments={[\n          {\n            key: 'year',\n            label: format(yearFormatter, anchor),\n            isDisabled: state.isDisabled,\n            onPress: () => setView('year'),\n          },\n        ]}\n        prevButtonProps={{\n          'aria-label': t('calendar.previousYear', 'Previous year'),\n          isDisabled: isPeriodDisabled(\n            startOfYear(prevYear),\n            endOfYear(prevYear),\n          ),\n          onPress: () => setAnchor(prevYear),\n        }}\n        nextButtonProps={{\n          'aria-label': t('calendar.nextYear', 'Next year'),\n          isDisabled: isPeriodDisabled(\n            startOfYear(nextYear),\n            endOfYear(nextYear),\n          ),\n          onPress: () => setAnchor(nextYear),\n        }}\n      />\n    );\n\n    body = (\n      <PeriodGrid\n        // Remount per view so focus follows the user into the new grid.\n        key=\"month\"\n        autoFocus\n        aria-label={t('calendar.months', 'Months')}\n        cells={cells}\n        styles={PERIOD_GRID_STYLES}\n        columns={MONTH_COLUMNS}\n        focusedIndex={anchor.month - 1}\n        onCellPress={(index) => {\n          state.setFocusedDate(anchor.set({ month: index + 1 }));\n          setView('day');\n        }}\n        onCellFocus={(index) => setAnchor(anchor.set({ month: index + 1 }))}\n        onMoveFocus={(delta) => setAnchor(anchor.add({ months: delta }))}\n        onMovePage={(delta) => setAnchor(anchor.add({ years: delta }))}\n      />\n    );\n  } else if (view === 'year') {\n    let yearDate = (year: number) => startOfYear(anchor.set({ year }));\n    let decadeStart = Math.floor(anchor.year / 10) * 10;\n    let firstYear = decadeStart - 1;\n\n    let cells: CubePeriodGridCell[] = Array.from(\n      { length: YEAR_CELLS },\n      (_, index) => {\n        let year = firstYear + index;\n        let date = yearDate(year);\n\n        return {\n          key: `year-${year}`,\n          label: format(yearFormatter, date),\n          isSelected: year === visibleStart.year,\n          isCurrent: year === todayDate.year,\n          isOutside: year < decadeStart || year > decadeStart + 9,\n          isDisabled: isPeriodDisabled(date, endOfYear(date)),\n        };\n      },\n    );\n\n    header = (\n      <CalendarHeader\n        title={`${format(yearFormatter, yearDate(decadeStart))} – ${format(\n          yearFormatter,\n          yearDate(decadeStart + 9),\n        )}`}\n        prevButtonProps={{\n          'aria-label': t('calendar.previousYears', 'Previous years'),\n          isDisabled: isPeriodDisabled(\n            yearDate(decadeStart - 10),\n            endOfYear(yearDate(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            yearDate(decadeStart + 10),\n            endOfYear(yearDate(decadeStart + 19)),\n          ),\n          onPress: () => setAnchor(anchor.add({ years: 10 })),\n        }}\n      />\n    );\n\n    body = (\n      <PeriodGrid\n        key=\"year\"\n        autoFocus\n        aria-label={t('calendar.years', 'Years')}\n        cells={cells}\n        styles={PERIOD_GRID_STYLES}\n        columns={YEAR_COLUMNS}\n        focusedIndex={anchor.year - firstYear}\n        onCellPress={(index) => {\n          setAnchor(anchor.set({ year: firstYear + index }));\n          setView('month');\n        }}\n        onCellFocus={(index) =>\n          setAnchor(anchor.set({ year: firstYear + index }))\n        }\n        onMoveFocus={(delta) => setAnchor(anchor.add({ years: delta }))}\n        onMovePage={(delta) => setAnchor(anchor.add({ years: delta * 10 }))}\n      />\n    );\n  } else {\n    header = (\n      <CalendarHeader\n        title={title}\n        segments={\n          hasNavigation\n            ? [\n                {\n                  key: 'month',\n                  label: format(monthFormatter, visibleStart),\n                  isDisabled: state.isDisabled,\n                  onPress: () => openView('month'),\n                },\n                {\n                  key: 'year',\n                  label: format(yearFormatter, visibleStart),\n                  isDisabled: state.isDisabled,\n                  onPress: () => openView('year'),\n                },\n              ]\n            : undefined\n        }\n        prevButtonProps={prevButtonProps}\n        nextButtonProps={nextButtonProps}\n      />\n    );\n\n    body = (\n      <CalendarGrid\n        state={state}\n        selectedRange={selectedRange}\n        pickerMode={pickerMode}\n      />\n    );\n  }\n\n  return (\n    <CalendarElement\n      ref={elementRef}\n      {...mergeProps(calendarProps, { onKeyDown })}\n    >\n      {header}\n      {body}\n    </CalendarElement>\n  );\n}\n"],"mappings":"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"}