{"record":{"id":"11d429afc894a85a","repo":"heroui-inc/heroui","slug":"calendaryearpicker-trigger-components-must-be-used","errorCode":null,"errorMessage":"CalendarYearPicker trigger components must be used within <CalendarYearPicker.Trigger>.","messagePattern":"CalendarYearPicker trigger components must be used within <CalendarYearPicker\\.Trigger>\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react/src/components/calendar-year-picker/calendar-year-picker.tsx","lineNumber":70,"sourceCode":"  E extends keyof React.JSX.IntrinsicElements = \"span\",\n>\n  extends DOMRenderProps<E, undefined>, CalendarYearPickerVariants {\n  children?: ReactNode | ((values: CalendarYearPickerTriggerRenderProps) => ReactNode);\n  className?: string;\n}\n\ninterface CalendarYearPickerTriggerContextValue extends CalendarYearPickerTriggerRenderProps {\n  slots: ReturnType<typeof calendarYearPickerVariants>;\n}\n\nconst CalendarYearPickerTriggerContext =\n  React.createContext<CalendarYearPickerTriggerContextValue | null>(null);\n\nfunction useCalendarYearPickerTriggerContext(): CalendarYearPickerTriggerContextValue {\n  const context = React.use(CalendarYearPickerTriggerContext);\n\n  if (!context) {\n    throw new Error(\n      \"CalendarYearPicker trigger components must be used within <CalendarYearPicker.Trigger>.\",\n    );\n  }\n\n  return context;\n}\n\nconst CalendarYearPickerTrigger = ({\n  children,\n  className,\n  onKeyDown,\n  onPress,\n  ...props\n}: CalendarYearPickerTriggerProps) => {\n  const {isYearPickerOpen, setIsYearPickerOpen} = useYearPicker();\n  const state = useCalendarOrRangeState();\n  const monthYear = useCalendarHeading({}, state);\n","sourceCodeStart":52,"sourceCodeEnd":88,"githubUrl":"https://github.com/heroui-inc/heroui/blob/7546fff8136f538a2f56a52257c621a5cd616a1d/packages/react/src/components/calendar-year-picker/calendar-year-picker.tsx#L52-L88","documentation":"CalendarYearPicker.Trigger provides a context (via CalendarYearPickerTriggerContext) that its descendant trigger sub-components consume. Calling useCalendarYearPickerTriggerContext outside <CalendarYearPicker.Trigger> means there is no month/year display data or slots to render, so the library throws a descriptive error.","triggerScenarios":"Rendering a trigger sub-component (one that calls useCalendarYearPickerTriggerContext) outside a <CalendarYearPicker.Trigger> ancestor, e.g. directly under Calendar or CalendarYearPicker.Grid.","commonSituations":"Composing custom layouts that reorder compound parts incorrectly; copy-pasting a trigger part into a custom header; refactoring that drops the Trigger wrapper.","solutions":["Wrap the offending component in <CalendarYearPicker.Trigger>","Check the intended compound structure in the component docs/stories and mirror it","Use data-slot/part composition instead of pulling internals out of the Trigger subtree"],"exampleFix":"// before\n<CalendarYearPicker>\n  <MyCustomTriggerLabel />\n</CalendarYearPicker>\n\n// after\n<CalendarYearPicker>\n  <CalendarYearPicker.Trigger>\n    <MyCustomTriggerLabel />\n  </CalendarYearPicker.Trigger>\n</CalendarYearPicker>","handlingStrategy":"validation","validationCode":"// Always nest trigger parts under the trigger provider:\n// <CalendarYearPicker.Trigger><YourTriggerPart/></CalendarYearPicker.Trigger>","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Mirror the documented compound structure when composing custom layouts","Don't extract sub-parts out of their provider parent","Check stories for the correct nesting before customizing"],"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"}