react-day-picker 8.0.3 → 8.0.6

package/dist/style.css

@@ -55,22 +55,23 @@
   border: 2px solid transparent;
 }
 
-.rdp-button[disabled] {
+.rdp-button[aria-disabled='true'] {
   opacity: 0.25;
+  pointer-events: none;
 }
 
-.rdp-button:not([disabled]) {
+.rdp-button:not([aria-disabled='true']) {
   cursor: pointer;
 }
 
-.rdp-button:focus:not([disabled]),
-.rdp-button:active:not([disabled]) {
+.rdp-button:focus,
+.rdp-button:active {
   color: inherit;
   border: var(--rdp-outline);
   background-color: var(--rdp-background-color);
 }
 
-.rdp-button:hover:not([disabled]) {
+.rdp-button:hover:not([aria-disabled='true']) {
   background-color: var(--rdp-background-color);
 }
 
@@ -269,15 +270,15 @@
   font-weight: bold;
 }
 
-.rdp-day_selected:not([disabled]),
-.rdp-day_selected:focus:not([disabled]),
-.rdp-day_selected:active:not([disabled]),
-.rdp-day_selected:hover:not([disabled]) {
+.rdp-day_selected:not([aria-disabled='true']),
+.rdp-day_selected:focus:not([aria-disabled='true']),
+.rdp-day_selected:active:not([aria-disabled='true']),
+.rdp-day_selected:hover:not([aria-disabled='true']) {
   color: white;
   background-color: var(--rdp-accent-color);
 }
 
-.rdp-day_selected:focus:not([disabled]) {
+.rdp-day_selected:focus:not([aria-disabled='true']) {
   border: var(--rdp-outline-selected);
 }
 

package/dist/style.module.css

@@ -55,22 +55,23 @@
   border: 2px solid transparent;
 }
 
-.button[disabled] {
+.button[aria-disabled='true'] {
   opacity: 0.25;
+  pointer-events: none;
 }
 
-.button:not([disabled]) {
+.button:not([aria-disabled='true']) {
   cursor: pointer;
 }
 
-.button:focus:not([disabled]),
-.button:active:not([disabled]) {
+.button:focus,
+.button:active {
   color: inherit;
   border: var(--rdp-outline);
   background-color: var(--rdp-background-color);
 }
 
-.button:hover:not([disabled]) {
+.button:hover:not([aria-disabled='true']) {
   background-color: var(--rdp-background-color);
 }
 
@@ -269,15 +270,15 @@
   font-weight: bold;
 }
 
-.day_selected:not([disabled]),
-.day_selected:focus:not([disabled]),
-.day_selected:active:not([disabled]),
-.day_selected:hover:not([disabled]) {
+.day_selected:not([aria-disabled='true']),
+.day_selected:focus:not([aria-disabled='true']),
+.day_selected:active:not([aria-disabled='true']),
+.day_selected:hover:not([aria-disabled='true']) {
   color: white;
   background-color: var(--rdp-accent-color);
 }
 
-.day_selected:focus:not([disabled]) {
+.day_selected:focus:not([aria-disabled='true']) {
   border: var(--rdp-outline-selected);
 }
 

package/dist/types/Styles.d.ts

@@ -84,10 +84,16 @@ export declare type StyledElement<T = string | React.CSSProperties> = {
     /** The day when today. */
     readonly day_today: T;
 };
+/** These elements must not be in the `styles` or `classNames` records as they are styled via the `modifiersStyles` or `modifiersClassNames` pop */
+export declare type InternalModifiersElement = 'day_outside' | 'day_selected' | 'day_disabled' | 'day_hidden' | 'day_range_start' | 'day_range_end' | 'day_range_middle' | 'day_today';
 /** The class names of each element. */
 export declare type ClassNames = Partial<StyledElement<string>>;
-/** The inline-styles of each element. */
-export declare type Styles = Partial<StyledElement<React.CSSProperties>>;
+/**
+ * The inline-styles of each styled element, to use with the `styles` prop. Day
+ * modifiers, such as `today` or `hidden`, should be styled using the
+ * `modifiersStyles` prop.
+ */
+export declare type Styles = Partial<Omit<StyledElement<React.CSSProperties>, InternalModifiersElement>>;
 /** Props of a component that can be styled via classNames or inline-styles. */
 export declare type StyledComponent = {
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.0.3",
+  "version": "8.0.6",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "http://react-day-picker.js.org",
@@ -28,31 +28,33 @@
     "typecheck-watch": "tsc --project ./tsconfig.json --noEmit --skipLibCheck --watch"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "tsconfig.json"
   ],
   "dependencies": {
-    "@reach/auto-id": "^0.16.0"
+    "@reach/auto-id": "0.16.0"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-commonjs": "^21.1.0",
     "@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();
+  });
+});