heroui-inc/heroui · error · Error

CalendarYearPicker trigger components must be used within <C

Error message

CalendarYearPicker trigger components must be used within <CalendarYearPicker.Trigger>.

What it means

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.

Source

Thrown at packages/react/src/components/calendar-year-picker/calendar-year-picker.tsx:70

  E extends keyof React.JSX.IntrinsicElements = "span",
>
  extends DOMRenderProps<E, undefined>, CalendarYearPickerVariants {
  children?: ReactNode | ((values: CalendarYearPickerTriggerRenderProps) => ReactNode);
  className?: string;
}

interface CalendarYearPickerTriggerContextValue extends CalendarYearPickerTriggerRenderProps {
  slots: ReturnType<typeof calendarYearPickerVariants>;
}

const CalendarYearPickerTriggerContext =
  React.createContext<CalendarYearPickerTriggerContextValue | null>(null);

function useCalendarYearPickerTriggerContext(): CalendarYearPickerTriggerContextValue {
  const context = React.use(CalendarYearPickerTriggerContext);

  if (!context) {
    throw new Error(
      "CalendarYearPicker trigger components must be used within <CalendarYearPicker.Trigger>.",
    );
  }

  return context;
}

const CalendarYearPickerTrigger = ({
  children,
  className,
  onKeyDown,
  onPress,
  ...props
}: CalendarYearPickerTriggerProps) => {
  const {isYearPickerOpen, setIsYearPickerOpen} = useYearPicker();
  const state = useCalendarOrRangeState();
  const monthYear = useCalendarHeading({}, state);

View on GitHub (pinned to 7546fff813)

Solutions

1. Wrap the offending component in <CalendarYearPicker.Trigger>
2. Check the intended compound structure in the component docs/stories and mirror it
3. Use data-slot/part composition instead of pulling internals out of the Trigger subtree

Example fix

// before
<CalendarYearPicker>
  <MyCustomTriggerLabel />
</CalendarYearPicker>

// after
<CalendarYearPicker>
  <CalendarYearPicker.Trigger>
    <MyCustomTriggerLabel />
  </CalendarYearPicker.Trigger>
</CalendarYearPicker>

// Always nest trigger parts under the trigger provider:
// <CalendarYearPicker.Trigger><YourTriggerPart/></CalendarYearPicker.Trigger>

When it happens

Trigger: Rendering a trigger sub-component (one that calls useCalendarYearPickerTriggerContext) outside a <CalendarYearPicker.Trigger> ancestor, e.g. directly under Calendar or CalendarYearPicker.Grid.

Common situations: Composing custom layouts that reorder compound parts incorrectly; copy-pasting a trigger part into a custom header; refactoring that drops the Trigger wrapper.

Related errors

• useCalendarOrRangeState must be used within a <Calendar> or
• useYearPicker must be used within a <Calendar> or <RangeCale
• CalendarYearPicker components must be used within <CalendarY
• Ref was not connected to DOM element returned by custom `ren

AI-assisted analysis of heroui-inc/heroui@7546fff813 (2026-08-28). Data as JSON: /api/errors/11d429afc894a85a. Report an issue: GitHub.