{"record":{"id":"1adaf21b87727cd1","repo":"heroui-inc/heroui","slug":"calendaryearpicker-components-must-be-used-within","errorCode":null,"errorMessage":"CalendarYearPicker components must be used within <CalendarYearPicker.Grid>.","messagePattern":"CalendarYearPicker components must be used within <CalendarYearPicker\\.Grid>\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react/src/components/calendar-year-picker/calendar-year-picker.tsx","lineNumber":261,"sourceCode":"interface CalendarYearPickerGridContextValue {\n  slots: ReturnType<typeof calendarYearPickerVariants>;\n  isYearPickerOpen: boolean;\n  activeYear: number;\n  focusedYear: number;\n  years: number[];\n  getFormattedYear: (year: number) => string;\n  selectYear: (year: number) => void;\n  setActiveYear: (year: number) => void;\n}\n\nconst CalendarYearPickerGridContext =\n  React.createContext<CalendarYearPickerGridContextValue | null>(null);\n\nfunction useCalendarYearPickerGridContext(): CalendarYearPickerGridContextValue {\n  const context = React.use(CalendarYearPickerGridContext);\n\n  if (!context) {\n    throw new Error(\"CalendarYearPicker components must be used within <CalendarYearPicker.Grid>.\");\n  }\n\n  return context;\n}\n\nconst CalendarYearPickerGrid = <E extends keyof React.JSX.IntrinsicElements = \"div\">({\n  children,\n  className,\n  format,\n  onKeyDown,\n  visibleYears: visibleYearsProp,\n  ...props\n}: CalendarYearPickerGridProps<E> &\n  Omit<React.JSX.IntrinsicElements[E], keyof CalendarYearPickerGridProps<E>>) => {\n  const {calendarGridSlot, calendarRef, isYearPickerOpen, setIsYearPickerOpen} = useYearPicker();\n  const state = useCalendarOrRangeState();\n  const gridRef = React.useRef<HTMLDivElement>(null);\n","sourceCodeStart":243,"sourceCodeEnd":279,"githubUrl":"https://github.com/heroui-inc/heroui/blob/7546fff8136f538a2f56a52257c621a5cd616a1d/packages/react/src/components/calendar-year-picker/calendar-year-picker.tsx#L243-L279","documentation":"CalendarYearPicker.Grid supplies a grid context containing the years list, selection/focus state, and slot styles. Any CalendarYearPicker sub-part that consumes this context (via useCalendarYearPickerGridContext) throws when rendered outside a <CalendarYearPicker.Grid>, because the year data it renders comes from that provider.","triggerScenarios":"Rendering a grid child (a year cell or anything calling useCalendarYearPickerGridContext) outside <CalendarYearPicker.Grid>, e.g. directly under CalendarYearPicker or Calendar.","commonSituations":"Custom grid layouts that replace Grid but keep its children; stories/tests rendering a year cell in isolation; incorrect nesting after refactoring compound parts.","solutions":["Place the component inside <CalendarYearPicker.Grid>","If building a fully custom grid, re-implement the year rendering with your own data instead of consuming the grid context","Verify nesting against the official stories for CalendarYearPicker"],"exampleFix":"// before\n<CalendarYearPicker>\n  <CalendarYearPicker.YearCell year={2026} />\n</CalendarYearPicker>\n\n// after\n<CalendarYearPicker>\n  <CalendarYearPicker.Grid>\n    <CalendarYearPicker.YearCell year={2026} />\n  </CalendarYearPicker.Grid>\n</CalendarYearPicker>","handlingStrategy":"validation","validationCode":"// Always nest grid children under:\n// <CalendarYearPicker.Grid><YourGridChild/></CalendarYearPicker.Grid>","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep year cells inside CalendarYearPicker.Grid","For custom grids, supply your own year data instead of consuming grid context","Validate nesting in stories/tests that render parts in isolation"],"tags":["react","context","compound-components","calendar"],"backgroundTag":"react-context-provider-missing","analyzedSha":"7546fff8136f538a2f56a52257c621a5cd616a1d","analyzedAt":"2026-08-28T13:15:49.959Z","schemaVersion":2},"datasetVersion":"2026-08-28T16:17:29.566Z"}