Latest repo

node_modules/react-day-picker/src/components/Months/Months.test.tsx

@@ -0,0 +1,27 @@
+import { customRender } from 'test/render';
+
+import { Months } from './Months';
+
+let root: HTMLElement;
+
+test('should use the default class name', () => {
+  const view = customRender(<Months>foo</Months>, {});
+  root = view.container.firstChild as HTMLElement;
+  expect(root).toHaveClass('rdp-months');
+});
+
+test('should use a custom class name', () => {
+  const view = customRender(<Months>foo</Months>, {
+    classNames: { months: 'foo' }
+  });
+  root = view.container.firstChild as HTMLElement;
+  expect(root).toHaveClass('foo');
+});
+
+test('should use a custom style', () => {
+  const view = customRender(<Months>foo</Months>, {
+    styles: { months: { color: 'red' } }
+  });
+  root = view.container.firstChild as HTMLElement;
+  expect(root).toHaveStyle({ color: 'red' });
+});

node_modules/react-day-picker/src/components/Months/Months.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** The props for the {@link Months} component. */
+export type MonthsProps = { children: ReactNode };
+
+/**
+ * Render the wrapper for the month grids.
+ */
+export function Months(props: MonthsProps): JSX.Element {
+  const { classNames, styles } = useDayPicker();
+
+  return (
+    <div className={classNames.months} style={styles.months}>
+      {props.children}
+    </div>
+  );
+}

node_modules/react-day-picker/src/components/Months/index.ts

@@ -0,0 +1 @@
+export * from './Months';