diff --git a/src/calendar-base/calendar-base.tsx b/src/calendar-base/calendar-base.tsx index 9aced04..bab997b 100644 --- a/src/calendar-base/calendar-base.tsx +++ b/src/calendar-base/calendar-base.tsx @@ -21,6 +21,8 @@ interface CalendarBaseProps { onFocus: (e: CustomEvent) => void; onHover?: (e: CustomEvent) => void; months: number; + hasSlotted: boolean; + onSlotChange: (e: Event) => void; } function range(max: number, fn: (n: number) => T) { @@ -83,10 +85,12 @@ export function CalendarBase( onfocusday={props.onFocus} onhoverday={props.onHover} > - - {range(props.months, (offset) => ( - - ))} + + {props.hasSlotted + ? null + : range(props.months, (offset) => ( + + ))} diff --git a/src/calendar-base/useCalendarBase.ts b/src/calendar-base/useCalendarBase.ts index 2ee57c2..945c83d 100644 --- a/src/calendar-base/useCalendarBase.ts +++ b/src/calendar-base/useCalendarBase.ts @@ -145,6 +145,14 @@ export function useCalendarBase({ months.forEach((m) => m.focus()); } + const [hasSlotted, setHasSlotted] = useState(false); + const onSlotChange = (e: Event) => { + return setHasSlotted( + (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > + 0 + ); + }; + return { format: useDateFormatter(formatOptions, locale), formatVerbose: useDateFormatter(formatVerboseOptions, locale), @@ -161,5 +169,7 @@ export function useCalendarBase({ next, previous, focus, + hasSlotted, + onSlotChange, }; } diff --git a/src/calendar-date/calendar-date.test.tsx b/src/calendar-date/calendar-date.test.tsx index a7455c9..1d402d0 100644 --- a/src/calendar-date/calendar-date.test.tsx +++ b/src/calendar-date/calendar-date.test.tsx @@ -803,14 +803,23 @@ describe("CalendarDate", () => { }); }); - it("renders its own months if none supplied", async () => { - const calendar = await mount( - - ); - const months = getMonths(calendar); - - expect(months).to.have.lengthOf(2); - expect(getMonthHeading(months[0]!)).to.have.text("November"); - expect(getMonthHeading(months[1]!)).to.have.text("December"); + describe("simple usage", () => { + it("renders its own months if none supplied", async () => { + const calendar = await mount( + + ); + const months = getMonths(calendar); + + expect(months).to.have.lengthOf(2); + expect(getMonthHeading(months[0]!)).to.have.text("November"); + expect(getMonthHeading(months[1]!)).to.have.text("December"); + }); + + it("does not render its own month if some are slotted", async () => { + const calendar = await mount(); + expect( + calendar.shadowRoot!.querySelector("slot:not([name])")!.children + ).to.have.lengthOf(0); + }); }); });