Latest repo

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

@@ -0,0 +1,49 @@
+import { screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render/customRender';
+
+import { WeekNumber, WeekNumberProps } from './WeekNumber';
+
+function setup(props: WeekNumberProps, dayPickerProps?: DayPickerProps) {
+  return customRender(<WeekNumber {...props} />, dayPickerProps);
+}
+
+const props: WeekNumberProps = {
+  number: 10,
+  dates: [new Date(), new Date()]
+};
+
+describe('without "onWeekNumberClick" prop', () => {
+  const dayPickerProps: DayPickerProps = { onWeekNumberClick: undefined };
+  test('it should return a span element', () => {
+    const { container } = setup(props, dayPickerProps);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+describe('with "onWeekNumberClick" prop', () => {
+  const dayPickerProps: DayPickerProps = { onWeekNumberClick: jest.fn() };
+  let container: HTMLElement;
+  beforeEach(() => {
+    container = setup(props, dayPickerProps).container;
+  });
+  test('it should return a button element', () => {
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(container.firstChild).toHaveAttribute('name', 'week-number');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  describe('when the button element is clicked', () => {
+    beforeEach(async () => {
+      await userEvent.click(screen.getByRole('button'));
+    });
+    test('should call onWeekNumberClick', () => {
+      expect(dayPickerProps.onWeekNumberClick).toHaveBeenCalledWith(
+        props.number,
+        props.dates,
+        expect.anything()
+      );
+    });
+  });
+});

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

@@ -0,0 +1,59 @@
+import { MouseEventHandler } from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+import { Button } from '../Button';
+
+/**
+ * The props for the {@link WeekNumber} component.
+ */
+export interface WeekNumberProps {
+  /** The number of the week. */
+  number: number;
+  /** The dates in the week. */
+  dates: Date[];
+}
+
+/**
+ * Render the week number element. If `onWeekNumberClick` is passed to DayPicker, it
+ * renders a button, otherwise a span element.
+ */
+export function WeekNumber(props: WeekNumberProps): JSX.Element {
+  const { number: weekNumber, dates } = props;
+  const {
+    onWeekNumberClick,
+    styles,
+    classNames,
+    locale,
+    labels: { labelWeekNumber },
+    formatters: { formatWeekNumber }
+  } = useDayPicker();
+
+  const content = formatWeekNumber(Number(weekNumber), { locale });
+
+  if (!onWeekNumberClick) {
+    return (
+      <span className={classNames.weeknumber} style={styles.weeknumber}>
+        {content}
+      </span>
+    );
+  }
+
+  const label = labelWeekNumber(Number(weekNumber), { locale });
+
+  const handleClick: MouseEventHandler = function (e) {
+    onWeekNumberClick(weekNumber, dates, e);
+  };
+
+  return (
+    <Button
+      name="week-number"
+      aria-label={label}
+      className={classNames.weeknumber}
+      style={styles.weeknumber}
+      onClick={handleClick}
+    >
+      {content}
+    </Button>
+  );
+}

node_modules/react-day-picker/src/components/WeekNumber/__snapshots__/WeekNumber.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`with "onWeekNumberClick" prop it should return a button element 1`] = `
+<button
+  aria-label="Week n. 10"
+  class="rdp-button_reset rdp-button rdp-weeknumber"
+  name="week-number"
+  type="button"
+>
+  10
+</button>
+`;
+
+exports[`without "onWeekNumberClick" prop it should return a span element 1`] = `
+<span
+  class="rdp-weeknumber"
+>
+  10
+</span>
+`;

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

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