react-day-picker 8.0.3 → 8.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.0.3",
+  "version": "8.0.4",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "http://react-day-picker.js.org",
@@ -28,7 +28,9 @@
     "typecheck-watch": "tsc --project ./tsconfig.json --noEmit --skipLibCheck --watch"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "tsconfig.json"
   ],
   "dependencies": {
     "@reach/auto-id": "^0.16.0"
@@ -37,22 +39,22 @@
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-typescript": "^8.3.1",
-    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.23",
-    "@types/react": "^17.0.43",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@types/react": "^17.0.44",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "date-fns": "^2.28.0",
-    "eslint": "^8.12.0",
+    "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-rdp": "workspace:^",
-    "eslint-import-resolver-typescript": "^2.7.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.3",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.4",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react-hooks": "^4.4.0",
     "jest": "^27.5.1",
@@ -69,7 +71,7 @@
     "timekeeper": "^2.2.0",
     "ts-jest": "^27.1.4",
     "ts-node": "^10.7.0",
-    "tsc-alias": "^1.6.5",
+    "tsc-alias": "^1.6.6",
     "tslib": "^2.3.1",
     "typed-css-modules": "^0.7.0",
     "typescript": "~4.5.5"

package/src/DayPicker.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { DaySelectionMode } from 'types/DayPickerBase';
+import { DayPickerDefaultProps } from 'types/DayPickerDefault';
+import { DayPickerMultipleProps } from 'types/DayPickerMultiple';
+import { DayPickerRangeProps } from 'types/DayPickerRange';
+import { DayPickerSingleProps } from 'types/DayPickerSingle';
+
+import { Root } from './components/Root';
+import { RootProvider } from './contexts/RootProvider';
+
+/**
+ * DayPicker render a date picker component to let users pick dates from a
+ * calendar. See http://react-day-picker.js.org for updated documentation and
+ * examples.
+ *
+ * ### Customization
+ *
+ * DayPicker offers different customization props. For example,
+ *
+ * - show multiple months using `numberOfMonths`
+ * - display a dropdown to navigate the months via `captionLayout`
+ * - display the week numbers with `showWeekNumbers`
+ * - disable or hide days with `disabled` or `hidden`
+ *
+ * ### Controlling the months
+ *
+ * Change the initially displayed month using the `defaultMonth` prop. The
+ * displayed months are controlled by DayPicker and stored in its internal
+ * state. To control the months yourself, use `month` instead of `defaultMonth`
+ * and use the `onMonthChange` event to set it.
+ *
+ * To limit the months the user can navigate to, use
+ * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.
+ *
+ * ### Selection modes
+ *
+ * DayPicker supports different selection mode that can be toggled using the
+ * `mode` prop:
+ *
+ * - `mode="single"`: only one day can be selected. Use `required` to make the
+ *   selection required. Use the `onSelect` event handler to get the selected
+ *   days.
+ * - `mode="multiple"`: users can select one or more days. Limit the amount of
+ *   days that can be selected with the `min` or the `max` props.
+ * - `mode="range"`: users can select a range of days. Limit the amount of days
+ *   in the range with the `min` or the `max` props.
+ * - `mode="default"` (default): the built-in selections are disabled. Implement
+ *   your own selection mode with `onDayClick`.
+ *
+ * The selection modes should cover the most common use cases. In case you
+ * need a more refined way of selecting days, use `mode="default"`. Use the
+ * `selected` props and add the day event handlers to add/remove days from the
+ * selection.
+ *
+ * ### Modifiers
+ *
+ * A _modifier_ represents different styles or states for the days displayed in
+ * the calendar (like "selected" or "disabled"). Define custom modifiers using
+ * the `modifiers` prop.
+ *
+ * ### Formatters and custom component
+ *
+ * You can customize how the content is displayed in the date picker by using
+ * either the formatters or replacing the internal components.
+ *
+ * For the most common cases you want to use the `formatters` prop to change how
+ * the content is formatted in the calendar. Use the `components` prop to
+ * replace the internal components, like the navigation icons.
+ *
+ * ### Styling
+ *
+ * DayPicker comes with a default, basic style in `react-day-picker/style` – use
+ * it as template for your own style.
+ *
+ * If you are using CSS modules, pass the imported styles object the
+ * `classNames` props.
+ *
+ * You can also style the elements via inline-styles using the `styles` prop.
+ *
+ * ### Form fields
+ *
+ * If you need to bind the date picker to a form field, you can use the
+ * `useInput` hooks for a basic behavior. See the `useInput` source as an
+ * example to bind the date picker with form fields.
+ *
+ * ### Localization
+ *
+ * To localize DayPicker, import the locale from `date-fns` package and use the
+ * `locale` prop.
+ *
+ * For example, to use Spanish locale:
+ *
+ * ```
+ * import es from 'date-fns/locale/es';
+ * <DayPicker locale={es} />
+ * ```
+ */
+
+export type DayPickerProps = { mode?: DaySelectionMode } & (
+  | DayPickerDefaultProps
+  | DayPickerSingleProps
+  | DayPickerMultipleProps
+  | DayPickerRangeProps
+);
+
+export function DayPicker(props: DayPickerProps): JSX.Element {
+  return (
+    <RootProvider {...props}>
+      <Root />
+    </RootProvider>
+  );
+}

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import { customRender } from 'test/render';
+
+import { Button } from './Button';
+
+let button: HTMLButtonElement;
+
+describe('when rendered without props', () => {
+  beforeEach(() => {
+    customRender(<Button className="foo" style={{ color: 'blue' }} />);
+    button = screen.getByRole('button');
+  });
+  test('should render a button with type "button"', () => {
+    expect(button).toHaveAttribute('type', 'button');
+  });
+  test('should render a button with the button class name', () => {
+    expect(button).toHaveClass('rdp-button');
+  });
+  test('should render a button with the reset class name', () => {
+    expect(button).toHaveClass('rdp-button_reset');
+  });
+  test('should add the class name', () => {
+    expect(button).toHaveClass('foo');
+  });
+  test('should apply the style', () => {
+    expect(button).toHaveStyle({ color: 'blue' });
+  });
+});
+
+describe('when using class names and styles from context', () => {
+  beforeEach(() => {
+    customRender(<Button />, {
+      classNames: { button: 'foo' },
+      styles: { button: { color: 'red' } }
+    });
+    button = screen.getByRole('button');
+  });
+  test('should apply the style', () => {
+    expect(button).toHaveStyle({ color: 'red' });
+  });
+  test('should apply the class name', () => {
+    expect(button).toHaveClass('foo');
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** The props for the [[Button]] component. */
+export type ButtonProps = React.HTMLProps<HTMLButtonElement>;
+
+/**
+ * Render a button HTML element applying the reset class name.
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { classNames, styles } = useDayPicker();
+
+    const classNamesArr = [classNames.button_reset, classNames.button];
+    if (props.className) {
+      classNamesArr.push(props.className);
+    }
+    const className = classNamesArr.join(' ');
+
+    const style = { ...styles.button_reset, ...styles.button };
+    if (props.style) {
+      Object.assign(style, props.style);
+    }
+
+    return (
+      <button
+        {...props}
+        ref={ref}
+        type="button"
+        className={className}
+        style={style}
+      />
+    );
+  }
+);

package/src/components/Button/index.ts

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

package/src/components/Caption/Caption.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+
+import {
+  getMonthCaption,
+  getMonthDropdown,
+  getNextButton,
+  getPrevButton,
+  getYearDropdown,
+  queryNextButton,
+  queryPrevButton
+} from 'test/po';
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { CustomComponents } from 'types/DayPickerBase';
+
+import { Caption, CaptionProps } from './Caption';
+
+const today = new Date(2021, 8);
+
+freezeBeforeAll(today);
+
+function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
+  customRender(<Caption {...props} />, dayPickerProps);
+}
+
+describe('when navigation is disabled', () => {
+  const props = { displayMonth: today };
+  const dayPickerProps = { disableNavigation: true };
+  beforeEach(() => setup(props, dayPickerProps));
+  test('should display the caption label', () => {
+    expect(getMonthCaption()).toHaveTextContent('September 2021');
+  });
+  test('should not render the navigation', () => {
+    expect(queryPrevButton()).toBeNull();
+    expect(queryNextButton()).toBeNull();
+  });
+});
+
+describe('when using a custom CaptionLabel component', () => {
+  const components: CustomComponents = {
+    CaptionLabel: () => <>custom label foo</>
+  };
+  const props = { displayMonth: today };
+  beforeEach(() => {
+    setup(props, { components });
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('custom label foo')).toBeInTheDocument();
+  });
+});
+
+describe('when the caption layout is "dropdown"', () => {
+  const dayPickerProps: DayPickerProps = {
+    captionLayout: 'dropdown',
+    fromYear: 2020,
+    toYear: 2025
+  };
+  const props = { displayMonth: today };
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('should render the month drop-down', () => {
+    expect(getMonthDropdown()).toBeInTheDocument();
+  });
+  test('should render the year drop-down', () => {
+    expect(getYearDropdown()).toBeInTheDocument();
+  });
+});
+
+describe('when the caption layout is "buttons"', () => {
+  const dayPickerProps: DayPickerProps = {
+    captionLayout: 'buttons'
+  };
+  test('should render the next month button', () => {
+    customRender(<Caption displayMonth={today} />, dayPickerProps);
+    expect(getNextButton()).toBeInTheDocument();
+  });
+  test('should render the previous month button', () => {
+    customRender(<Caption displayMonth={today} />, dayPickerProps);
+    expect(getPrevButton()).toBeInTheDocument();
+  });
+});

package/src/components/Caption/Caption.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { CaptionDropdowns } from 'components/CaptionDropdowns';
+import { CaptionLabel } from 'components/CaptionLabel';
+import { CaptionNavigation } from 'components/CaptionNavigation';
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** Represent the props of the [[Caption]] component. */
+export interface CaptionProps {
+  /** The ID for the heading element. Must be the same as the labelled-by in Table. */
+  id?: string;
+  /** The month where the caption is displayed. */
+  displayMonth: Date;
+}
+
+/**
+ * The layout of the caption:
+ *
+ * - `dropdown`: display dropdowns for choosing the month and the year.
+ * - `buttons`: display previous month / next month buttons.
+ */
+export type CaptionLayout = 'dropdown' | 'buttons';
+
+/**
+ * Render the caption of a month. The caption has a different layout when
+ * setting the [[DayPickerProps.captionLayout]] prop.
+ */
+export function Caption(props: CaptionProps): JSX.Element {
+  const { classNames, disableNavigation, styles, captionLayout, components } =
+    useDayPicker();
+
+  const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
+
+  let caption: JSX.Element;
+  if (disableNavigation) {
+    caption = (
+      <CaptionLabelComponent id={props.id} displayMonth={props.displayMonth} />
+    );
+  } else if (captionLayout === 'dropdown') {
+    caption = (
+      <CaptionDropdowns displayMonth={props.displayMonth} id={props.id} />
+    );
+  } else {
+    caption = (
+      <CaptionNavigation displayMonth={props.displayMonth} id={props.id} />
+    );
+  }
+
+  return (
+    <div className={classNames.caption} style={styles.caption}>
+      {caption}
+    </div>
+  );
+}

package/src/components/Caption/index.ts

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

package/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { setMonth, setYear } from 'date-fns';
+import { DayPickerProps } from 'DayPicker';
+
+import {
+  getMonthDropdown,
+  getYearDropdown,
+  queryMonthDropdown,
+  queryYearDropdown
+} from 'test/po';
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { CaptionProps } from 'components/Caption';
+import { CustomComponents } from 'types/DayPickerBase';
+
+import { CaptionDropdowns } from './CaptionDropdowns';
+
+const today = new Date(2021, 8);
+const fromYear = 2020;
+const toYear = 2025;
+
+freezeBeforeAll(today);
+
+function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
+  customRender(<CaptionDropdowns {...props} />, dayPickerProps);
+}
+
+describe('when using a custom CaptionLabel component', () => {
+  const components: CustomComponents = {
+    CaptionLabel: () => <>custom label foo</>
+  };
+  const props = { displayMonth: today };
+  beforeEach(() => {
+    setup(props, { components });
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('custom label foo')).toBeInTheDocument();
+  });
+});
+
+describe('when rendered with custom styles or classnames', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    const dayPickerProps: DayPickerProps = {
+      captionLayout: 'dropdown',
+      fromYear,
+      toYear,
+      classNames: { caption_dropdowns: 'foo_dropdowns' },
+      styles: { caption_dropdowns: { color: 'red' } }
+    };
+    const view = customRender(
+      <CaptionDropdowns displayMonth={today} />,
+      dayPickerProps
+    );
+    container = view.container;
+  });
+  test('should use the `caption_dropdowns` class name', () => {
+    expect(container.firstChild).toHaveClass('foo_dropdowns');
+  });
+  test('should use the `caption_dropdowns` style', () => {
+    expect(container.firstChild).toHaveStyle({ color: 'red' });
+  });
+  test('should render the month drop-down', () => {
+    expect(getMonthDropdown()).toBeInTheDocument();
+  });
+  test('should render the year drop-down', () => {
+    expect(getYearDropdown()).toBeInTheDocument();
+  });
+});
+
+describe('when a month is selected', () => {
+  const dayPickerProps: DayPickerProps = {
+    captionLayout: 'dropdown',
+    fromYear,
+    toYear,
+    onMonthChange: jest.fn()
+  };
+  beforeEach(() => {
+    customRender(<CaptionDropdowns displayMonth={today} />, dayPickerProps);
+  });
+  describe('from the months drop-down', () => {
+    const newMonth = setMonth(today, 0);
+    beforeEach(() => {
+      userEvent.selectOptions(
+        getMonthDropdown(),
+        newMonth.getMonth().toString()
+      );
+    });
+    test('should call the `onMonthChange` callback', () => {
+      expect(dayPickerProps.onMonthChange).toHaveBeenCalledWith(newMonth);
+    });
+  });
+  describe('from the years drop-down', () => {
+    const newYear = setYear(today, 2022);
+    beforeEach(() => {
+      userEvent.selectOptions(
+        getYearDropdown(),
+        newYear.getFullYear().toString()
+      );
+    });
+    test('should call the `onMonthChange` callback', () => {
+      expect(dayPickerProps.onMonthChange).toHaveBeenCalledWith(newYear);
+    });
+  });
+});
+
+describe('when no date limits are set', () => {
+  const dayPickerProps: DayPickerProps = {
+    captionLayout: 'dropdown'
+  };
+  beforeEach(() => {
+    customRender(<CaptionDropdowns displayMonth={today} />, dayPickerProps);
+  });
+  test('should not render the drop-downs', () => {
+    expect(queryMonthDropdown()).toBeNull();
+    expect(queryYearDropdown()).toBeNull();
+  });
+});

package/src/components/CaptionDropdowns/CaptionDropdowns.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { CaptionProps } from 'components/Caption/Caption';
+import { CaptionLabel } from 'components/CaptionLabel';
+import { MonthsDropdown } from 'components/MonthsDropdown';
+import { YearsDropdown } from 'components/YearsDropdown';
+import { useDayPicker } from 'contexts/DayPicker';
+import { useNavigation } from 'contexts/Navigation';
+import { MonthChangeEventHandler } from 'types/EventHandlers';
+
+/**
+ * Render a caption with the dropdowns to navigate between months and years.
+ */
+export function CaptionDropdowns(props: CaptionProps): JSX.Element {
+  const { classNames, styles, onMonthChange, components } = useDayPicker();
+  const { goToMonth } = useNavigation();
+
+  const handleMonthChange: MonthChangeEventHandler = (newMonth) => {
+    goToMonth(newMonth);
+    onMonthChange?.(newMonth);
+  };
+  const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
+  const captionLabel = (
+    <CaptionLabelComponent id={props.id} displayMonth={props.displayMonth} />
+  );
+  return (
+    <div
+      className={classNames.caption_dropdowns}
+      style={styles.caption_dropdowns}
+    >
+      {/* Caption label is visually hidden but for a11y. */}
+      <div className={classNames.vhidden}>{captionLabel}</div>
+      <MonthsDropdown
+        onChange={handleMonthChange}
+        displayMonth={props.displayMonth}
+      />
+      <YearsDropdown
+        onChange={handleMonthChange}
+        displayMonth={props.displayMonth}
+      />
+    </div>
+  );
+}

package/src/components/CaptionDropdowns/index.ts

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

package/src/components/CaptionLabel/CaptionLabel.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { getMonthCaption } from 'test/po';
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { CaptionLabel } from './CaptionLabel';
+
+const today = new Date(1979, 8);
+freezeBeforeAll(today);
+
+test('should render the formatted display month', () => {
+  customRender(<CaptionLabel displayMonth={today} />);
+  expect(getMonthCaption()).toHaveTextContent('September 1979');
+});
+
+test('should apply the `caption_label` class name', () => {
+  customRender(<CaptionLabel displayMonth={today} />, {
+    classNames: { caption_label: 'foo' }
+  });
+  expect(getMonthCaption()).toHaveClass('foo');
+});
+
+test('should apply the `caption_label` style', () => {
+  customRender(<CaptionLabel displayMonth={today} />, {
+    styles: { caption_label: { color: 'red' } }
+  });
+  expect(getMonthCaption()).toHaveStyle({ color: 'red' });
+});

package/src/components/CaptionLabel/CaptionLabel.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** The props for the [[CaptionLabel]] component. */
+export interface CaptionLabelProps {
+  /** The ID for the heading element. Must be the same as the labelled-by in Table. */
+  id?: string;
+  /** The month where the caption is displayed. */
+  displayMonth: Date;
+}
+
+/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
+export function CaptionLabel(props: CaptionLabelProps): JSX.Element {
+  const {
+    locale,
+    classNames,
+    styles,
+    formatters: { formatCaption }
+  } = useDayPicker();
+  return (
+    <h2
+      className={classNames.caption_label}
+      style={styles.caption_label}
+      aria-live="polite"
+      aria-atomic="true"
+      id={props.id}
+    >
+      {formatCaption(props.displayMonth, { locale })}
+    </h2>
+  );
+}

package/src/components/CaptionLabel/index.ts

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