Merge pull request #5 from knightburton/fix/v3-root

fix: v3 - make the container more like other slot prop
knightburton · Oct 9, 2023 · 8d28867 · 8d28867
2 parents 07aab5a + 6d547e1
commit 8d28867
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -90,9 +90,7 @@ For more detailed example check the [example](./example) directory.
 #### Slots
 ```ts
 type Slots = {
-  container?: {
-    root?: React.ElementType;
-  };
+  root?: React.ElementType;
   header?: {
     root?: React.ElementType;
     cell?: React.ElementType;
@@ -104,9 +102,7 @@ type Slots = {
 #### Slot Props
 ```ts
 type SlotProps = {
-  container?: {
-    root?: Partial<React.ComponentPropsWithRef<'div'>>;
-  };
+  root?: Partial<React.ComponentPropsWithRef<'div'>>;
   header?: {
     root?: Partial<React.ComponentPropsWithRef<'ul'>> & { disabled?: boolean };
     cell?: Partial<React.ComponentPropsWithRef<'li'>>;

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -24,11 +24,11 @@ const App = () => (
       onCellClick={cell => console.log(cell)}
       bodyCellContentComponent={({ data }) => <span className={`${data.isMonthEven ? 'evenMonth' : ''} ${data.isToday ? 'today' : ''}`}>{getLabel(data)}</span>}
       slots={{
-        container: { root: Container },
+        root: Container,
         header: { cellContent: HeaderCellContent },
       }}
       slotProps={{
-        container: { root: { className: 'example-container', style: { height: 700 } } },
+        root: { className: 'example-container', style: { height: 700 } },
       }}
     />
   </div>

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
@@ -10,7 +10,7 @@ export type ContainerPrivateProps = {
     root?: React.ElementType;
   };
   slotProps?: {
-    root: ContainerProps;
+    root?: ContainerProps;
   };
   children?: React.ReactNode;
 };

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { getCalendarBaseAttributes } from './helpers';
 import { CalendarTuple, VisibilityMatrix, WeekdayIndex, BodyCellType } from './types';
-import Container, { ContainerProps, ContainerPrivateProps } from './components/Container';
+import Container, { ContainerProps } from './components/Container';
 import Header, { HeaderProps, HeaderPrivateProps, HeaderCellContentProps, HeaderCellProps } from './components/Header';
 import Body from './components/Body';
 import { BodyContainerProps } from './components/BodyContainer';
@@ -25,12 +25,12 @@ type ClassNames = {
 };
 
 type Slots = {
-  container?: ContainerPrivateProps['slots'];
+  root?: React.ElementType;
   header?: HeaderPrivateProps['slots'];
 };
 
 type SlotProps = {
-  container?: ContainerPrivateProps['slotProps'];
+  root?: ContainerProps;
   header?: HeaderPrivateProps['slotProps'];
 };
 
@@ -88,7 +88,7 @@ const IntervalCalendar = ({
   );
 
   return (
-    <Container slots={slots?.container} slotProps={slotProps?.container}>
+    <Container slots={{ root: slots?.root }} slotProps={{ root: slotProps?.root }}>
       <Header weekStartsOn={weekStartsOn} locale={locale} slots={slots?.header} slotProps={slotProps?.header} />
       {!!numberOfWeeks && !!startDate ? (
         <Body