@cimpress-ui/react 0.3.0 → 0.4.0

package/dist/esm/components/date-picker/views/multi-year/use-multi-year-view-state.js

@@ -0,0 +1,127 @@
+import { endOfYear, isSameDay, isSameYear, startOfYear, today } from '@internationalized/date';
+import { useContext, useMemo, useState } from 'react';
+import { useDateFormatter } from 'react-aria';
+import { CalendarStateContext as RACCalendarStateContext } from 'react-aria-components';
+import { useLocalizedMessages } from '../../../../i18n/index.js';
+import { constrainValue, getEraFormat, isDateInvalid } from '../../utils.js';
+import { useDatePickerView } from '../view-provider.js';
+const ITEMS_PER_ROW = 4;
+const YEARS_PER_SECTION = 20;
+const YEARS_SKIP_AMOUNT = 100;
+/** @internal */
+export function useMultiYearViewState() {
+    const calendarState = useContext(RACCalendarStateContext);
+    const { switchToView, focusedDate, setFocusedDate } = useDatePickerView();
+    const messages = useLocalizedMessages('datePicker');
+    const [isFocused, setIsFocused] = useState(true);
+    const currentDate = useMemo(() => today(calendarState.timeZone), [calendarState.timeZone]);
+    const yearFormatter = useDateFormatter({
+        year: 'numeric',
+        era: getEraFormat(focusedDate),
+        calendar: focusedDate.calendar.identifier,
+        timeZone: calendarState.timeZone,
+    });
+    let startYear = (Math.ceil(focusedDate.year / YEARS_PER_SECTION) - 1) * YEARS_PER_SECTION + 1;
+    let endYear = startYear + YEARS_PER_SECTION - 1;
+    // Years are always represented by positive numbers.
+    // If era implies negative years, flip start and end.
+    const isNegativeEra = focusedDate.era === 'BC';
+    if (isNegativeEra) {
+        const temp = startYear;
+        startYear = endYear;
+        endYear = temp;
+    }
+    const data = useMemo(() => {
+        const rowCount = Math.ceil(YEARS_PER_SECTION / ITEMS_PER_ROW);
+        const result = new Array(rowCount);
+        for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
+            result[rowIdx] = new Array(ITEMS_PER_ROW).fill(null);
+        }
+        for (let yearIdx = 0; yearIdx < YEARS_PER_SECTION; yearIdx++) {
+            const rowIdx = Math.floor(yearIdx / ITEMS_PER_ROW);
+            const colIdx = yearIdx % ITEMS_PER_ROW;
+            const yearToSet = startYear + (isNegativeEra ? -yearIdx : yearIdx);
+            const date = focusedDate.set({ year: yearToSet });
+            if (date.year !== yearToSet) {
+                // Reached minimum/maximum date
+                continue;
+            }
+            const content = yearFormatter.format(date.toDate(calendarState.timeZone));
+            result[rowIdx][colIdx] = {
+                date,
+                content,
+                ariaLabel: content,
+                isCurrent: isSameYear(date, currentDate),
+            };
+        }
+        return result;
+    }, [startYear, calendarState.timeZone, focusedDate, yearFormatter, isNegativeEra, currentDate]);
+    const focusCell = (date) => {
+        setFocusedDate(constrainValue(date, calendarState.minValue, calendarState.maxValue));
+    };
+    return {
+        header: yearFormatter.formatRange(focusedDate.set({ year: startYear }).toDate(calendarState.timeZone), focusedDate.set({ year: endYear }).toDate(calendarState.timeZone)),
+        previousLabel: messages.format('previousMultiYearSection', { yearCount: 20 }),
+        nextLabel: messages.format('nextMultiYearSection', { yearCount: 20 }),
+        data,
+        isReadOnly: calendarState.isReadOnly,
+        isDisabled: calendarState.isDisabled,
+        isFocused,
+        setIsFocused,
+        focusedDate,
+        setFocusedDate,
+        timeZone: calendarState.timeZone,
+        focusPreviousItem() {
+            focusCell(focusedDate.subtract({ years: 1 }));
+        },
+        focusNextItem() {
+            focusCell(focusedDate.add({ years: 1 }));
+        },
+        focusPreviousRow() {
+            focusCell(focusedDate.subtract({ years: ITEMS_PER_ROW }));
+        },
+        focusNextRow() {
+            focusCell(focusedDate.add({ years: ITEMS_PER_ROW }));
+        },
+        focusSectionStart() {
+            focusCell(focusedDate.set({ year: startYear }));
+        },
+        focusSectionEnd() {
+            focusCell(focusedDate.set({ year: endYear }));
+        },
+        focusPreviousSection(shouldSkip) {
+            focusCell(focusedDate.subtract({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));
+        },
+        focusNextSection(shouldSkip) {
+            focusCell(focusedDate.add({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));
+        },
+        isPreviousSectionInvalid() {
+            const current = startOfYear(focusedDate.set({ year: startYear }));
+            const prev = current.subtract({ days: 1 });
+            return (isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||
+                isDateInvalid(prev, calendarState.minValue, calendarState.maxValue) ||
+                isSameDay(prev, current));
+        },
+        isNextSectionInvalid() {
+            const current = endOfYear(focusedDate.set({ year: endYear }));
+            const next = current.add({ days: 1 });
+            return (isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||
+                isDateInvalid(next, calendarState.minValue, calendarState.maxValue) ||
+                isSameDay(next, current));
+        },
+        selectFocusedDate() {
+            switchToView('year');
+        },
+        isCellDisabled(date) {
+            return (isDateInvalid(endOfYear(date), calendarState.minValue, null) ||
+                isDateInvalid(startOfYear(date), null, calendarState.maxValue));
+        },
+        isCellSelected(date) {
+            return calendarState.value !== null && isSameYear(date, calendarState.value);
+        },
+        isCellTabbable(date) {
+            return isSameYear(date, focusedDate);
+        },
+    };
+}
+//# sourceMappingURL=use-multi-year-view-state.js.map

package/dist/esm/components/date-picker/views/multi-year/use-multi-year-view-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multi-year-view-state.js","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/multi-year/use-multi-year-view-state.ts"],"names":[],"mappings":"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","sourcesContent":["import { endOfYear, isSameDay, isSameYear, startOfYear, today, type CalendarDate } from '@internationalized/date';\nimport { useContext, useMemo, useState } from 'react';\nimport { useDateFormatter } from 'react-aria';\nimport { CalendarStateContext as RACCalendarStateContext } from 'react-aria-components';\nimport { useLocalizedMessages } from '../../../../i18n/index.js';\nimport { constrainValue, getEraFormat, isDateInvalid } from '../../utils.js';\nimport type { ViewGridCellData, ViewGridState } from '../types.js';\nimport { useDatePickerView } from '../view-provider.js';\n\nconst ITEMS_PER_ROW = 4;\nconst YEARS_PER_SECTION = 20;\nconst YEARS_SKIP_AMOUNT = 100;\n\n/** @internal */\nexport function useMultiYearViewState(): ViewGridState {\n  const calendarState = useContext(RACCalendarStateContext)!;\n  const { switchToView, focusedDate, setFocusedDate } = useDatePickerView();\n  const messages = useLocalizedMessages('datePicker');\n  const [isFocused, setIsFocused] = useState(true);\n\n  const currentDate = useMemo(() => today(calendarState.timeZone), [calendarState.timeZone]);\n\n  const yearFormatter = useDateFormatter({\n    year: 'numeric',\n    era: getEraFormat(focusedDate),\n    calendar: focusedDate.calendar.identifier,\n    timeZone: calendarState.timeZone,\n  });\n\n  let startYear = (Math.ceil(focusedDate.year / YEARS_PER_SECTION) - 1) * YEARS_PER_SECTION + 1;\n  let endYear = startYear + YEARS_PER_SECTION - 1;\n\n  // Years are always represented by positive numbers.\n  // If era implies negative years, flip start and end.\n  const isNegativeEra = focusedDate.era === 'BC';\n  if (isNegativeEra) {\n    const temp = startYear;\n    startYear = endYear;\n    endYear = temp;\n  }\n\n  const data: (ViewGridCellData | null)[][] = useMemo(() => {\n    const rowCount = Math.ceil(YEARS_PER_SECTION / ITEMS_PER_ROW);\n    const result: (ViewGridCellData | null)[][] = new Array(rowCount);\n\n    for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {\n      result[rowIdx] = new Array(ITEMS_PER_ROW).fill(null);\n    }\n\n    for (let yearIdx = 0; yearIdx < YEARS_PER_SECTION; yearIdx++) {\n      const rowIdx = Math.floor(yearIdx / ITEMS_PER_ROW);\n      const colIdx = yearIdx % ITEMS_PER_ROW;\n\n      const yearToSet = startYear + (isNegativeEra ? -yearIdx : yearIdx);\n      const date = focusedDate.set({ year: yearToSet });\n\n      if (date.year !== yearToSet) {\n        // Reached minimum/maximum date\n        continue;\n      }\n\n      const content = yearFormatter.format(date.toDate(calendarState.timeZone));\n\n      result[rowIdx]![colIdx] = {\n        date,\n        content,\n        ariaLabel: content,\n        isCurrent: isSameYear(date, currentDate),\n      };\n    }\n\n    return result;\n  }, [startYear, calendarState.timeZone, focusedDate, yearFormatter, isNegativeEra, currentDate]);\n\n  const focusCell = (date: CalendarDate) => {\n    setFocusedDate(constrainValue(date, calendarState.minValue, calendarState.maxValue));\n  };\n\n  return {\n    header: yearFormatter.formatRange(\n      focusedDate.set({ year: startYear }).toDate(calendarState.timeZone),\n      focusedDate.set({ year: endYear }).toDate(calendarState.timeZone),\n    ),\n    previousLabel: messages.format('previousMultiYearSection', { yearCount: 20 }),\n    nextLabel: messages.format('nextMultiYearSection', { yearCount: 20 }),\n    data,\n    isReadOnly: calendarState.isReadOnly,\n    isDisabled: calendarState.isDisabled,\n    isFocused,\n    setIsFocused,\n    focusedDate,\n    setFocusedDate,\n    timeZone: calendarState.timeZone,\n    focusPreviousItem() {\n      focusCell(focusedDate.subtract({ years: 1 }));\n    },\n    focusNextItem() {\n      focusCell(focusedDate.add({ years: 1 }));\n    },\n    focusPreviousRow() {\n      focusCell(focusedDate.subtract({ years: ITEMS_PER_ROW }));\n    },\n    focusNextRow() {\n      focusCell(focusedDate.add({ years: ITEMS_PER_ROW }));\n    },\n    focusSectionStart() {\n      focusCell(focusedDate.set({ year: startYear }));\n    },\n    focusSectionEnd() {\n      focusCell(focusedDate.set({ year: endYear }));\n    },\n    focusPreviousSection(shouldSkip) {\n      focusCell(focusedDate.subtract({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));\n    },\n    focusNextSection(shouldSkip) {\n      focusCell(focusedDate.add({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));\n    },\n    isPreviousSectionInvalid() {\n      const current = startOfYear(focusedDate.set({ year: startYear }));\n      const prev = current.subtract({ days: 1 });\n\n      return (\n        isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||\n        isDateInvalid(prev, calendarState.minValue, calendarState.maxValue) ||\n        isSameDay(prev, current)\n      );\n    },\n    isNextSectionInvalid() {\n      const current = endOfYear(focusedDate.set({ year: endYear }));\n      const next = current.add({ days: 1 });\n\n      return (\n        isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||\n        isDateInvalid(next, calendarState.minValue, calendarState.maxValue) ||\n        isSameDay(next, current)\n      );\n    },\n    selectFocusedDate() {\n      switchToView('year');\n    },\n    isCellDisabled(date) {\n      return (\n        isDateInvalid(endOfYear(date), calendarState.minValue, null) ||\n        isDateInvalid(startOfYear(date), null, calendarState.maxValue)\n      );\n    },\n    isCellSelected(date) {\n      return calendarState.value !== null && isSameYear(date, calendarState.value);\n    },\n    isCellTabbable(date) {\n      return isSameYear(date, focusedDate);\n    },\n  };\n}\n"]}

package/dist/esm/components/date-picker/views/types.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/date-picker/views/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/types.ts"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/date-picker/views/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CalendarDate } from '@internationalized/date';\n\n/** @internal */\nexport interface ViewGridCellData {\n  date: CalendarDate;\n  content: string;\n  ariaLabel: string;\n  isCurrent: boolean;\n}\n\n/** @internal */\nexport interface ViewGridState {\n  header: string;\n  previousLabel: string;\n  nextLabel: string;\n  data: (ViewGridCellData | null)[][];\n  isReadOnly: boolean;\n  isDisabled: boolean;\n  isFocused: boolean;\n  setIsFocused(value: boolean): void;\n  focusedDate: CalendarDate;\n  setFocusedDate(date: CalendarDate): void;\n  timeZone: string;\n  focusPreviousItem(): void;\n  focusNextItem(): void;\n  focusPreviousRow(): void;\n  focusNextRow(): void;\n  focusSectionStart(): void;\n  focusSectionEnd(): void;\n  focusPreviousSection(shouldSkip?: boolean): void;\n  focusNextSection(shouldSkip?: boolean): void;\n  isPreviousSectionInvalid(): boolean;\n  isNextSectionInvalid(): boolean;\n  selectFocusedDate(): void;\n  isCellDisabled(date: CalendarDate): boolean;\n  isCellSelected(date: CalendarDate): boolean;\n  isCellTabbable(date: CalendarDate): boolean;\n}\n"]}

package/dist/esm/components/date-picker/views/use-view-header.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-view-header.d.ts.map

package/dist/esm/components/date-picker/views/use-view-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-view-header.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/use-view-header.tsx"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/use-view-header.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { announce } from '@react-aria/live-announcer';
+import { useUpdateEffect } from '@react-aria/utils';
+import { useState } from 'react';
+import { IconChevronLeft, IconChevronRight } from '../../../icons/index.js';
+/** @internal */
+export function useViewHeader(state) {
+    const { isFocused, header } = state;
+    // Announce when the section changes
+    useUpdateEffect(() => {
+        // only when pressing the Previous or Next button
+        if (!isFocused) {
+            announce(header);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [header]);
+    // If the next or previous buttons become disabled while they are focused, move focus to the grid.
+    const [previousFocused, setPreviousFocused] = useState(false);
+    const previousDisabled = state.isDisabled || state.isPreviousSectionInvalid();
+    if (previousDisabled && previousFocused) {
+        setPreviousFocused(false);
+        state.setIsFocused(true);
+    }
+    const [nextFocused, setNextFocused] = useState(false);
+    const nextDisabled = state.isDisabled || state.isNextSectionInvalid();
+    if (nextDisabled && nextFocused) {
+        setNextFocused(false);
+        state.setIsFocused(true);
+    }
+    return {
+        prevButtonProps: {
+            onPress: () => state.focusPreviousSection(),
+            'aria-label': state.previousLabel,
+            icon: _jsx(IconChevronLeft, {}),
+            variant: 'tertiary',
+            size: 'small',
+            isDisabled: previousDisabled,
+            // @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway
+            onFocusChange: setPreviousFocused,
+        },
+        nextButtonProps: {
+            onPress: () => state.focusNextSection(),
+            'aria-label': state.nextLabel,
+            icon: _jsx(IconChevronRight, {}),
+            variant: 'tertiary',
+            size: 'small',
+            isDisabled: nextDisabled,
+            // @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway
+            onFocusChange: setNextFocused,
+        },
+    };
+}
+//# sourceMappingURL=use-view-header.js.map

package/dist/esm/components/date-picker/views/use-view-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-view-header.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/use-view-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAS5E,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,KAAoB;IAChD,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEpC,oCAAoC;IACpC,eAAe,CAAC,GAAG,EAAE;QACnB,iDAAiD;QACjD,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,kGAAkG;IAClG,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,wBAAwB,EAAE,CAAC;IAC9E,IAAI,gBAAgB,IAAI,eAAe,EAAE,CAAC;QACxC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1B,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACtE,IAAI,YAAY,IAAI,WAAW,EAAE,CAAC;QAChC,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,OAAO;QACL,eAAe,EAAE;YACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,oBAAoB,EAAE;YAC3C,YAAY,EAAE,KAAK,CAAC,aAAa;YACjC,IAAI,EAAE,KAAC,eAAe,KAAG;YACzB,OAAO,EAAE,UAAU;YACnB,IAAI,EAAE,OAAO;YACb,UAAU,EAAE,gBAAgB;YAC5B,qGAAqG;YACrG,aAAa,EAAE,kBAAkB;SAClC;QACD,eAAe,EAAE;YACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,EAAE;YACvC,YAAY,EAAE,KAAK,CAAC,SAAS;YAC7B,IAAI,EAAE,KAAC,gBAAgB,KAAG;YAC1B,OAAO,EAAE,UAAU;YACnB,IAAI,EAAE,OAAO;YACb,UAAU,EAAE,YAAY;YACxB,qGAAqG;YACrG,aAAa,EAAE,cAAc;SAC9B;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { announce } from '@react-aria/live-announcer';\nimport { useUpdateEffect } from '@react-aria/utils';\nimport { useState } from 'react';\nimport { IconChevronLeft, IconChevronRight } from '../../../icons/index.js';\nimport type { IconButtonProps } from '../../button/icon-button.js';\nimport type { ViewGridState } from './types.js';\n\ninterface UseViewHeader {\n  prevButtonProps: IconButtonProps;\n  nextButtonProps: IconButtonProps;\n}\n\n/** @internal */\nexport function useViewHeader(state: ViewGridState): UseViewHeader {\n  const { isFocused, header } = state;\n\n  // Announce when the section changes\n  useUpdateEffect(() => {\n    // only when pressing the Previous or Next button\n    if (!isFocused) {\n      announce(header);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [header]);\n\n  // If the next or previous buttons become disabled while they are focused, move focus to the grid.\n  const [previousFocused, setPreviousFocused] = useState(false);\n  const previousDisabled = state.isDisabled || state.isPreviousSectionInvalid();\n  if (previousDisabled && previousFocused) {\n    setPreviousFocused(false);\n    state.setIsFocused(true);\n  }\n\n  const [nextFocused, setNextFocused] = useState(false);\n  const nextDisabled = state.isDisabled || state.isNextSectionInvalid();\n  if (nextDisabled && nextFocused) {\n    setNextFocused(false);\n    state.setIsFocused(true);\n  }\n\n  return {\n    prevButtonProps: {\n      onPress: () => state.focusPreviousSection(),\n      'aria-label': state.previousLabel,\n      icon: <IconChevronLeft />,\n      variant: 'tertiary',\n      size: 'small',\n      isDisabled: previousDisabled,\n      // @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway\n      onFocusChange: setPreviousFocused,\n    },\n    nextButtonProps: {\n      onPress: () => state.focusNextSection(),\n      'aria-label': state.nextLabel,\n      icon: <IconChevronRight />,\n      variant: 'tertiary',\n      size: 'small',\n      isDisabled: nextDisabled,\n      // @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway\n      onFocusChange: setNextFocused,\n    },\n  };\n}\n"]}

package/dist/esm/components/date-picker/views/view-grid-cell.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=view-grid-cell.d.ts.map

package/dist/esm/components/date-picker/views/view-grid-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-grid-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-grid-cell.tsx"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/view-grid-cell.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFocusRing } from '@react-aria/focus';
+import { getInteractionModality, useHover, usePress } from '@react-aria/interactions';
+import { focusWithoutScrolling, getScrollParent, mergeProps, scrollIntoViewport } from '@react-aria/utils';
+import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
+import { textStyle } from '../../typography/utils.js';
+/** @internal */
+export function ViewGridCell({ cellData, state }) {
+    const ref = useRef(null);
+    const isDisabled = cellData ? state.isDisabled || state.isCellDisabled(cellData.date) : true;
+    const isSelected = cellData ? !isDisabled && state.isCellSelected(cellData.date) : false;
+    const isTabbable = cellData ? state.isCellTabbable(cellData.date) : false;
+    const isFocused = state.isFocused && isTabbable;
+    const { pressProps, isPressed } = usePress({
+        preventFocusOnPress: true,
+        isDisabled: isDisabled || state.isReadOnly,
+        onPress: () => {
+            if (!state.isReadOnly && cellData) {
+                state.setFocusedDate(cellData.date);
+                state.selectFocusedDate();
+            }
+        },
+    });
+    let tabIndex = undefined;
+    if (!isDisabled) {
+        tabIndex = isTabbable ? 0 : -1;
+    }
+    // Focus the button in the DOM when the state updates.
+    useEffect(() => {
+        if (isFocused && ref.current) {
+            focusWithoutScrolling(ref.current);
+            // Scroll into view if navigating with a keyboard
+            if (getInteractionModality() !== 'pointer' && document.activeElement === ref.current) {
+                scrollIntoViewport(ref.current, { containingElement: getScrollParent(ref.current) });
+            }
+        }
+    }, [isFocused]);
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const cellProps = {
+        role: 'gridcell',
+        'aria-disabled': isDisabled || undefined,
+        'aria-selected': isSelected || undefined,
+    };
+    if (!cellData) {
+        return _jsx("td", { ...cellProps });
+    }
+    const { date, content, ariaLabel, isCurrent } = cellData;
+    const buttonProps = mergeProps(pressProps, hoverProps, focusProps, {
+        onFocus() {
+            if (!isDisabled) {
+                state.setFocusedDate(date);
+            }
+        },
+        tabIndex,
+        role: 'button',
+        'aria-disabled': isDisabled || undefined,
+        'aria-label': ariaLabel,
+        onContextMenu(e) {
+            e.preventDefault();
+        },
+    });
+    return (_jsx("td", { ...cellProps, children: _jsx("div", { ...buttonProps, ref: ref, className: clsx('cim-date-picker-calendar-cell', textStyle({ variant: isCurrent ? 'medium-semibold' : 'medium' })), "data-disabled": isDisabled || undefined, "data-hovered": isHovered || undefined, "data-pressed": isPressed || undefined, "data-selected": isSelected || undefined, "data-focus-visible": (isFocusVisible && isFocused) || undefined, "data-current": isCurrent || undefined, children: content }) }));
+}
+//# sourceMappingURL=view-grid-cell.js.map

package/dist/esm/components/date-picker/views/view-grid-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-grid-cell.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-grid-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFocusRing } from '@react-aria/focus';\nimport { getInteractionModality, useHover, usePress } from '@react-aria/interactions';\nimport { focusWithoutScrolling, getScrollParent, mergeProps, scrollIntoViewport } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { type DOMAttributes, useEffect, useRef } from 'react';\nimport type { NativeElementProps } from '../../types.js';\nimport { textStyle } from '../../typography/utils.js';\nimport type { ViewGridCellData, ViewGridState } from './types.js';\n\n/** @internal */\nexport function ViewGridCell({ cellData, state }: { cellData: ViewGridCellData | null; state: ViewGridState }) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const isDisabled = cellData ? state.isDisabled || state.isCellDisabled(cellData.date) : true;\n  const isSelected = cellData ? !isDisabled && state.isCellSelected(cellData.date) : false;\n  const isTabbable = cellData ? state.isCellTabbable(cellData.date) : false;\n  const isFocused = state.isFocused && isTabbable;\n\n  const { pressProps, isPressed } = usePress({\n    preventFocusOnPress: true,\n    isDisabled: isDisabled || state.isReadOnly,\n    onPress: () => {\n      if (!state.isReadOnly && cellData) {\n        state.setFocusedDate(cellData.date);\n        state.selectFocusedDate();\n      }\n    },\n  });\n\n  let tabIndex: number | undefined = undefined;\n  if (!isDisabled) {\n    tabIndex = isTabbable ? 0 : -1;\n  }\n\n  // Focus the button in the DOM when the state updates.\n  useEffect(() => {\n    if (isFocused && ref.current) {\n      focusWithoutScrolling(ref.current);\n\n      // Scroll into view if navigating with a keyboard\n      if (getInteractionModality() !== 'pointer' && document.activeElement === ref.current) {\n        scrollIntoViewport(ref.current, { containingElement: getScrollParent(ref.current) });\n      }\n    }\n  }, [isFocused]);\n\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const cellProps: NativeElementProps<HTMLTableCellElement> = {\n    role: 'gridcell',\n    'aria-disabled': isDisabled || undefined,\n    'aria-selected': isSelected || undefined,\n  };\n\n  if (!cellData) {\n    return <td {...cellProps} />;\n  }\n\n  const { date, content, ariaLabel, isCurrent } = cellData;\n\n  const buttonProps = mergeProps(pressProps, hoverProps, focusProps, {\n    onFocus() {\n      if (!isDisabled) {\n        state.setFocusedDate(date);\n      }\n    },\n    tabIndex,\n    role: 'button',\n    'aria-disabled': isDisabled || undefined,\n    'aria-label': ariaLabel,\n    onContextMenu(e) {\n      e.preventDefault();\n    },\n  } as DOMAttributes<HTMLDivElement>);\n\n  return (\n    <td {...cellProps}>\n      <div\n        {...buttonProps}\n        ref={ref}\n        className={clsx(\n          'cim-date-picker-calendar-cell',\n          textStyle({ variant: isCurrent ? 'medium-semibold' : 'medium' }),\n        )}\n        data-disabled={isDisabled || undefined}\n        data-hovered={isHovered || undefined}\n        data-pressed={isPressed || undefined}\n        data-selected={isSelected || undefined}\n        data-focus-visible={(isFocusVisible && isFocused) || undefined}\n        data-current={isCurrent || undefined}\n      >\n        {content}\n      </div>\n    </td>\n  );\n}\n"]}

package/dist/esm/components/date-picker/views/view-grid.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=view-grid.d.ts.map

package/dist/esm/components/date-picker/views/view-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-grid.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-grid.tsx"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/view-grid.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useLocaleInfo } from '../../../i18n/index.js';
+import { ViewGridCell } from './view-grid-cell.js';
+/** @internal */
+export function ViewGrid({ state, className }) {
+    const { direction } = useLocaleInfo();
+    const onKeyDown = (e) => {
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                state.selectFocusedDate();
+                break;
+            case 'PageUp':
+                e.preventDefault();
+                e.stopPropagation();
+                state.focusPreviousSection(e.shiftKey);
+                break;
+            case 'PageDown':
+                e.preventDefault();
+                e.stopPropagation();
+                state.focusNextSection(e.shiftKey);
+                break;
+            case 'End':
+                e.preventDefault();
+                e.stopPropagation();
+                state.focusSectionEnd();
+                break;
+            case 'Home':
+                e.preventDefault();
+                e.stopPropagation();
+                state.focusSectionStart();
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                e.stopPropagation();
+                if (direction === 'rtl') {
+                    state.focusNextItem();
+                }
+                else {
+                    state.focusPreviousItem();
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                e.stopPropagation();
+                state.focusPreviousRow();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                e.stopPropagation();
+                if (direction === 'rtl') {
+                    state.focusPreviousItem();
+                }
+                else {
+                    state.focusNextItem();
+                }
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                e.stopPropagation();
+                state.focusNextRow();
+                break;
+        }
+    };
+    return (_jsx("table", { role: "grid", className: clsx('cim-date-picker-view-grid', className), "aria-label": state.header, "aria-readonly": state.isReadOnly || undefined, "aria-disabled": state.isDisabled || undefined, onKeyDown: onKeyDown, onFocus: () => state.setIsFocused(true), onBlur: () => state.setIsFocused(false), children: _jsx("tbody", { children: state.data.map((row, idx) => (_jsx("tr", { children: row.map((cellData, idx) => (_jsx(ViewGridCell, { cellData: cellData, state: state }, cellData?.ariaLabel ?? idx))) }, idx))) }) }));
+}
+//# sourceMappingURL=view-grid.js.map

package/dist/esm/components/date-picker/views/view-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-grid.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport type { KeyboardEvent } from 'react';\nimport { useLocaleInfo } from '../../../i18n/index.js';\nimport type { ViewGridState } from './types.js';\nimport { ViewGridCell } from './view-grid-cell.js';\n\n/** @internal */\nexport function ViewGrid({ state, className }: { state: ViewGridState; className?: string }) {\n  const { direction } = useLocaleInfo();\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        state.selectFocusedDate();\n        break;\n      case 'PageUp':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusPreviousSection(e.shiftKey);\n        break;\n      case 'PageDown':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusNextSection(e.shiftKey);\n        break;\n      case 'End':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusSectionEnd();\n        break;\n      case 'Home':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusSectionStart();\n        break;\n      case 'ArrowLeft':\n        e.preventDefault();\n        e.stopPropagation();\n        if (direction === 'rtl') {\n          state.focusNextItem();\n        } else {\n          state.focusPreviousItem();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusPreviousRow();\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        e.stopPropagation();\n        if (direction === 'rtl') {\n          state.focusPreviousItem();\n        } else {\n          state.focusNextItem();\n        }\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusNextRow();\n        break;\n    }\n  };\n  return (\n    <table\n      role=\"grid\"\n      className={clsx('cim-date-picker-view-grid', className)}\n      aria-label={state.header}\n      aria-readonly={state.isReadOnly || undefined}\n      aria-disabled={state.isDisabled || undefined}\n      onKeyDown={onKeyDown}\n      onFocus={() => state.setIsFocused(true)}\n      onBlur={() => state.setIsFocused(false)}\n    >\n      <tbody>\n        {state.data.map((row, idx) => (\n          <tr key={idx}>\n            {row.map((cellData, idx) => (\n              <ViewGridCell cellData={cellData} key={cellData?.ariaLabel ?? idx} state={state} />\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"]}

package/dist/esm/components/date-picker/views/view-provider.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=view-provider.d.ts.map

package/dist/esm/components/date-picker/views/view-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-provider.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-provider.tsx"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/view-provider.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const DatePickerViewContext = createContext(null);
+/** @internal */
+export function DatePickerViewProvider({ children, currentView, switchToView, focusedDate, setFocusedDate, }) {
+    return (_jsx(DatePickerViewContext.Provider, { value: { currentView, switchToView, focusedDate, setFocusedDate }, children: children }));
+}
+/** @internal */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useDatePickerView() {
+    const state = useContext(DatePickerViewContext);
+    if (!state) {
+        throw new Error('Cannot use date picker view state outside of a date picker');
+    }
+    return state;
+}
+//# sourceMappingURL=view-provider.js.map

package/dist/esm/components/date-picker/views/view-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-provider.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-provider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAYlE,MAAM,qBAAqB,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAM9E,gBAAgB;AAChB,MAAM,UAAU,sBAAsB,CAAC,EACrC,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,WAAW,EACX,cAAc,GACc;IAC5B,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,YAC9F,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,gEAAgE;AAChE,MAAM,UAAU,iBAAiB;IAC/B,MAAM,KAAK,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAChD,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,4DAA4D,CAAC,CAAC;IAChF,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport { createContext, useContext, type ReactNode } from 'react';\n\n/** @internal */\nexport type DatePickerView = 'month' | 'year' | 'multi-year';\n\ninterface DatePickerViewState {\n  currentView: DatePickerView;\n  switchToView: (value: DatePickerView) => void;\n  focusedDate: CalendarDate;\n  setFocusedDate: (value: CalendarDate) => void;\n}\n\nconst DatePickerViewContext = createContext<DatePickerViewState | null>(null);\n\ninterface DatePickerViewProviderProps extends DatePickerViewState {\n  children: ReactNode;\n}\n\n/** @internal */\nexport function DatePickerViewProvider({\n  children,\n  currentView,\n  switchToView,\n  focusedDate,\n  setFocusedDate,\n}: DatePickerViewProviderProps) {\n  return (\n    <DatePickerViewContext.Provider value={{ currentView, switchToView, focusedDate, setFocusedDate }}>\n      {children}\n    </DatePickerViewContext.Provider>\n  );\n}\n\n/** @internal */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useDatePickerView(): DatePickerViewState {\n  const state = useContext(DatePickerViewContext);\n  if (!state) {\n    throw new Error('Cannot use date picker view state outside of a date picker');\n  }\n\n  return state;\n}\n"]}

package/dist/esm/components/date-picker/views/year/use-year-view-state.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-year-view-state.d.ts.map

package/dist/esm/components/date-picker/views/year/use-year-view-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-year-view-state.d.ts","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/year/use-year-view-state.ts"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/year/use-year-view-state.js

@@ -0,0 +1,155 @@
+import { endOfMonth, endOfYear, isSameDay, isSameMonth, isSameYear, startOfMonth, startOfYear, today, } from '@internationalized/date';
+import { useContext, useMemo, useState } from 'react';
+import { useDateFormatter } from 'react-aria';
+import { CalendarStateContext as RACCalendarStateContext } from 'react-aria-components';
+import { useLocalizedMessages } from '../../../../i18n/index.js';
+import { constrainValue, getEraFormat, isDateInvalid } from '../../utils.js';
+import { useDatePickerView } from './../view-provider.js';
+const ITEMS_PER_ROW = 3;
+const YEARS_SKIP_AMOUNT = 10;
+/** @internal */
+export function useYearViewState() {
+    const calendarState = useContext(RACCalendarStateContext);
+    const { switchToView, focusedDate, setFocusedDate } = useDatePickerView();
+    const messages = useLocalizedMessages('datePicker');
+    const [isFocused, setIsFocused] = useState(true);
+    const currentDate = useMemo(() => today(calendarState.timeZone), [calendarState.timeZone]);
+    const monthFormatter = useDateFormatter({
+        month: 'short',
+        calendar: focusedDate.calendar.identifier,
+        timeZone: calendarState.timeZone,
+    });
+    const monthAriaLabelFormatter = useDateFormatter({
+        month: 'long',
+        year: 'numeric',
+        calendar: focusedDate.calendar.identifier,
+        timeZone: calendarState.timeZone,
+    });
+    const yearFormatter = useDateFormatter({
+        year: 'numeric',
+        era: getEraFormat(focusedDate),
+        calendar: focusedDate.calendar.identifier,
+        timeZone: calendarState.timeZone,
+    });
+    // Some calendars have more than 12 months, and in some calendars the number of months varies per year.
+    // This can result in partially filled grid rows.
+    // Detect this to keep keyboard navigation between rows consistent.
+    const monthCount = focusedDate.calendar.getMonthsInYear(focusedDate);
+    const previousYearMonthCount = focusedDate.calendar.getMonthsInYear(focusedDate.subtract({ years: 1 }));
+    const partialRowMonthCount = monthCount % ITEMS_PER_ROW;
+    const previousYearPartialRowMonthCount = previousYearMonthCount % ITEMS_PER_ROW;
+    const data = useMemo(() => {
+        const rowCount = Math.ceil(monthCount / ITEMS_PER_ROW);
+        const result = new Array(rowCount);
+        for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
+            result[rowIdx] = new Array(ITEMS_PER_ROW).fill(null);
+        }
+        for (let monthIdx = 0; monthIdx < monthCount; monthIdx++) {
+            const rowIdx = Math.floor(monthIdx / ITEMS_PER_ROW);
+            const colIdx = monthIdx % ITEMS_PER_ROW;
+            const date = focusedDate.set({ month: monthIdx + 1 });
+            const nativeDate = date.toDate(calendarState.timeZone);
+            result[rowIdx][colIdx] = {
+                date,
+                content: monthFormatter.format(nativeDate),
+                ariaLabel: monthAriaLabelFormatter.format(nativeDate),
+                isCurrent: isSameYear(date, currentDate) && isSameMonth(date, currentDate),
+            };
+        }
+        return result;
+    }, [monthCount, calendarState.timeZone, focusedDate, monthFormatter, monthAriaLabelFormatter, currentDate]);
+    const focusCell = (date) => {
+        setFocusedDate(constrainValue(date, calendarState.minValue, calendarState.maxValue));
+    };
+    return {
+        header: yearFormatter.format(focusedDate.toDate(calendarState.timeZone)),
+        previousLabel: messages.format('previousYear'),
+        nextLabel: messages.format('nextYear'),
+        data,
+        isReadOnly: calendarState.isReadOnly,
+        isDisabled: calendarState.isDisabled,
+        isFocused,
+        setIsFocused,
+        focusedDate,
+        setFocusedDate,
+        timeZone: calendarState.timeZone,
+        focusPreviousItem() {
+            focusCell(focusedDate.subtract({ months: 1 }));
+        },
+        focusNextItem() {
+            focusCell(focusedDate.add({ months: 1 }));
+        },
+        focusPreviousRow() {
+            const currentMonth = focusedDate.month;
+            let monthsToSubtract;
+            if (currentMonth <= previousYearPartialRowMonthCount) {
+                monthsToSubtract = previousYearPartialRowMonthCount;
+            }
+            else if (currentMonth <= ITEMS_PER_ROW) {
+                monthsToSubtract = ITEMS_PER_ROW + previousYearPartialRowMonthCount;
+            }
+            else {
+                monthsToSubtract = ITEMS_PER_ROW;
+            }
+            focusCell(focusedDate.subtract({
+                months: monthsToSubtract,
+            }));
+        },
+        focusNextRow() {
+            const currentMonth = focusedDate.month;
+            let monthsToAdd;
+            if (currentMonth > monthCount - partialRowMonthCount) {
+                monthsToAdd = partialRowMonthCount;
+            }
+            else if (currentMonth + ITEMS_PER_ROW > monthCount) {
+                monthsToAdd = ITEMS_PER_ROW + partialRowMonthCount;
+            }
+            else {
+                monthsToAdd = ITEMS_PER_ROW;
+            }
+            focusCell(focusedDate.add({
+                months: monthsToAdd,
+            }));
+        },
+        focusSectionStart() {
+            focusCell(startOfYear(focusedDate).set({ day: focusedDate.day }));
+        },
+        focusSectionEnd() {
+            focusCell(endOfYear(focusedDate).set({ day: focusedDate.day }));
+        },
+        focusPreviousSection(shouldSkip) {
+            focusCell(focusedDate.subtract({ years: shouldSkip ? YEARS_SKIP_AMOUNT : 1 }));
+        },
+        focusNextSection(shouldSkip) {
+            focusCell(focusedDate.add({ years: shouldSkip ? YEARS_SKIP_AMOUNT : 1 }));
+        },
+        isPreviousSectionInvalid() {
+            const current = startOfYear(focusedDate);
+            const prev = current.subtract({ days: 1 });
+            return (isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||
+                isDateInvalid(prev, calendarState.minValue, calendarState.maxValue) ||
+                isSameDay(prev, current));
+        },
+        isNextSectionInvalid() {
+            const current = endOfYear(focusedDate);
+            const next = current.add({ days: 1 });
+            return (isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||
+                isDateInvalid(next, calendarState.minValue, calendarState.maxValue) ||
+                isSameDay(next, current));
+        },
+        selectFocusedDate() {
+            switchToView('month');
+        },
+        isCellDisabled(date) {
+            return (isDateInvalid(endOfMonth(date), calendarState.minValue, null) ||
+                isDateInvalid(startOfMonth(date), null, calendarState.maxValue));
+        },
+        isCellSelected(date) {
+            return (calendarState.value !== null && isSameYear(date, calendarState.value) && isSameMonth(date, calendarState.value));
+        },
+        isCellTabbable(date) {
+            return isSameYear(date, focusedDate) && isSameMonth(date, focusedDate);
+        },
+    };
+}
+//# sourceMappingURL=use-year-view-state.js.map