react-day-picker 8.0.2 → 8.0.5

package/src/components/DayContent/DayContent.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import es from 'date-fns/locale/es';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { DayContent, DayContentProps } from 'components/DayContent';
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+
+const today = new Date(2021, 8);
+
+freezeBeforeAll(today);
+let container: HTMLElement;
+function setup(props: DayContentProps, dayPickerProps?: DayPickerProps) {
+  const view = customRender(<DayContent {...props} />, dayPickerProps);
+  container = view.container;
+}
+
+const date = today;
+const displayMonth = today;
+const props: DayContentProps = {
+  date: date,
+  displayMonth,
+  activeModifiers: {}
+};
+
+const dayPickerProps: DayPickerProps = {
+  locale: es
+};
+
+describe('when rendered', () => {
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('the first element is an aria-hidden element with the formatted day', () => {
+    expect(container.firstChild).toHaveAttribute('aria-hidden', 'true');
+  });
+  test('the first element contains the formatted day', () => {
+    expect(container.firstChild).toHaveTextContent('1');
+  });
+  test('the second element is visually hidden', () => {
+    expect(container.childNodes[1]).toHaveClass(defaultClassNames.vhidden);
+  });
+  test('the second element contains the formatted day', () => {
+    expect(container.childNodes[1]).toHaveTextContent(
+      '1º septiembre (miércoles)'
+    );
+  });
+});

package/src/components/DayContent/DayContent.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+import { ActiveModifiers } from 'types/Modifiers';
+
+/** Represent the props for the [[DayContent]] component. */
+export interface DayContentProps {
+  /** The date representing the day. */
+  date: Date;
+  /** The month where the day is displayed. */
+  displayMonth: Date;
+  /** The active modifiers for the given date. */
+  activeModifiers: ActiveModifiers;
+}
+
+/**
+ * Render the content of the day cell.
+ */
+export function DayContent(props: DayContentProps): JSX.Element {
+  const {
+    locale,
+    classNames,
+    styles,
+    labels: { labelDay },
+    formatters: { formatDay }
+  } = useDayPicker();
+
+  return (
+    <>
+      <span aria-hidden="true">{formatDay(props.date, { locale })}</span>
+      <span className={classNames.vhidden} style={styles.vhidden}>
+        {labelDay(props.date, props.activeModifiers, { locale })}
+      </span>
+    </>
+  );
+}

package/src/components/DayContent/index.ts

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

package/src/components/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { fireEvent, screen } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { Dropdown, DropdownProps } from 'components/Dropdown';
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+import { CustomComponents } from 'types/DayPickerBase';
+
+const today = new Date(2021, 8);
+
+freezeBeforeAll(today);
+
+function setup(props: DropdownProps, dayPickerProps?: DayPickerProps) {
+  customRender(<Dropdown {...props} />, dayPickerProps);
+}
+
+const props: Required<DropdownProps> = {
+  'aria-label': 'foo',
+  onChange: jest.fn(),
+  caption: 'Some caption',
+  className: 'test',
+  value: 'bar',
+  children: <option value={'bar'} />,
+  style: {}
+};
+
+describe('when rendered', () => {
+  let combobox: HTMLElement;
+  let label: HTMLElement;
+
+  beforeEach(() => {
+    setup(props);
+    combobox = screen.getByRole('combobox');
+    label = screen.getByText(props['aria-label']);
+  });
+
+  test('should render the vhidden aria label', () => {
+    expect(label).toHaveClass(defaultClassNames.vhidden);
+  });
+
+  test('should render the combobox', () => {
+    expect(combobox).toBeInTheDocument();
+  });
+
+  describe('when the combobox changes', () => {
+    beforeEach(() => {
+      fireEvent.change(combobox);
+    });
+    test('should call the "onChange" eve, nt handler', () => {
+      expect(props.onChange).toHaveBeenCalled();
+    });
+  });
+
+  test('should render the combobox with the given value', () => {
+    expect(combobox).toHaveValue(props.value);
+  });
+});
+
+describe('when using a custom IconDropdown component', () => {
+  const components: CustomComponents = {
+    IconDropdown: () => <div>Custom IconDropdown</div>
+  };
+  beforeEach(() => {
+    setup(props, { components });
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('Custom IconDropdown')).toBeInTheDocument();
+  });
+});

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { IconDropdown } from 'components/IconDropdown';
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** The props for the [[Dropdown]] component. */
+export interface DropdownProps {
+  caption?: React.ReactNode;
+  children?: React.SelectHTMLAttributes<HTMLSelectElement>['children'];
+  className?: string;
+  ['aria-label']?: string;
+  style?: React.CSSProperties;
+  value?: string | number;
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+/**
+ * Render a styled select component – displaying a caption and a custom
+ * drop-down icon.
+ */
+export function Dropdown(props: DropdownProps): JSX.Element {
+  const { onChange, value, children, caption, className, style } = props;
+  const dayPicker = useDayPicker();
+
+  const IconDropdownComponent =
+    dayPicker.components?.IconDropdown ?? IconDropdown;
+  return (
+    <div className={className} style={style}>
+      <span className={dayPicker.classNames.vhidden}>
+        {props['aria-label']}
+      </span>
+      <select
+        aria-label={props['aria-label']}
+        className={dayPicker.classNames.dropdown}
+        style={dayPicker.styles.dropdown}
+        value={value}
+        onChange={onChange}
+      >
+        {children}
+      </select>
+      <div
+        className={dayPicker.classNames.caption_label}
+        style={dayPicker.styles.caption_label}
+        aria-hidden="true"
+      >
+        {caption}
+        {
+          <IconDropdownComponent
+            className={dayPicker.classNames.dropdown_icon}
+            style={dayPicker.styles.dropdown_icon}
+          />
+        }
+      </div>
+    </div>
+  );
+}

package/src/components/Dropdown/index.ts

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

package/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { getTableFooter, queryTableFooter } from 'test/po';
+import { customRender } from 'test/render';
+
+import { Footer } from './Footer';
+
+customRender(
+  <table role="grid">
+    <Footer />
+  </table>
+);
+test('should not render anything as default', () => {
+  expect(queryTableFooter()).toBeNull();
+});
+
+describe('when using the `footer` prop', () => {
+  beforeEach(() => {
+    customRender(
+      <table role="grid">
+        <Footer />
+      </table>,
+      { footer: 'footer_foo' }
+    );
+  });
+  test('should render the table footer', () => {
+    expect(getTableFooter()).toHaveTextContent('footer_foo');
+  });
+});

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** Render the Footer component (empty as default).*/
+export function Footer(): JSX.Element {
+  const {
+    footer,
+    styles,
+    classNames: { tfoot }
+  } = useDayPicker();
+  if (!footer) return <></>;
+  return (
+    <tfoot className={tfoot} style={styles.tfoot}>
+      <tr>
+        <td colSpan={8}>{footer}</td>
+      </tr>
+    </tfoot>
+  );
+}

package/src/components/Footer/index.ts

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

package/src/components/Head/Head.test.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { RenderResult, screen } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+import { formatWeekdayName } from 'contexts/DayPicker/formatters';
+import { labelWeekday } from 'contexts/DayPicker/labels';
+
+import { Head } from './Head';
+import { getWeekdays } from './utils/getWeekdays';
+
+let container: HTMLElement;
+let view: RenderResult;
+
+let thElements: HTMLTableCellElement[];
+
+function setup(dayPickerProps: DayPickerProps = {}) {
+  view = customRender(
+    <table>
+      <Head />
+    </table>,
+    dayPickerProps
+  );
+  container = view.container.firstChild as HTMLTableCellElement;
+  thElements = Array.from(container.getElementsByTagName('th'));
+}
+
+const dayPickerProps = {
+  styles: {
+    head: { color: 'red' },
+    head_row: { color: 'blue' },
+    head_cell: { color: 'green' }
+  },
+  classNames: {
+    head: 'foo',
+    head_row: 'foo_row',
+    head_cell: 'foo_head-cell'
+  }
+};
+
+describe('when rendered', () => {
+  beforeEach(() => {
+    setup(dayPickerProps);
+  });
+
+  test('thead should have the `head` style', () => {
+    expect(container.firstChild).toHaveStyle(dayPickerProps.styles.head);
+  });
+
+  test('thead should have the `head` class', () => {
+    expect(container.firstChild).toHaveClass(dayPickerProps.classNames.head);
+  });
+
+  test('tr element should have the `head_row` style', () => {
+    expect(container.firstChild?.firstChild).toHaveStyle(
+      dayPickerProps.styles.head_row
+    );
+  });
+
+  test('tr element should have the `head_row` class', () => {
+    expect(container.firstChild?.firstChild).toHaveClass(
+      dayPickerProps.classNames.head_row
+    );
+  });
+  test('should render 7 head elements', () => {
+    expect(thElements).toHaveLength(7);
+  });
+  test('should render the head elements with the "head_cell" class name', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveClass(dayPickerProps.classNames.head_cell);
+    });
+  });
+  test('the formatted weekday name should be ARIA-hidden', () => {
+    const weekdays = getWeekdays();
+    weekdays.forEach((weekday) => {
+      const text = formatWeekdayName(weekday);
+      expect(screen.getByText(text)).toHaveAttribute('aria-hidden', 'true');
+    });
+  });
+  test('the label should not be visible', () => {
+    const weekdays = getWeekdays();
+    weekdays.forEach((weekday) => {
+      const text = labelWeekday(weekday);
+      expect(screen.getByText(text)).toHaveClass(defaultClassNames.vhidden);
+    });
+  });
+});
+
+describe('when showing the week numbers', () => {
+  beforeEach(() => {
+    setup({ ...dayPickerProps, showWeekNumber: true });
+  });
+  test('should render 8 head elements', () => {
+    expect(thElements).toHaveLength(8);
+  });
+  test('the first head element should be empty', () => {
+    expect(thElements[0]).toHaveTextContent('');
+  });
+  test('should render the head elements with the "head_cell" class name', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveClass(dayPickerProps.classNames.head_cell);
+    });
+  });
+  test('should render the head elements with the "head_cell" style', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveStyle(dayPickerProps.styles.head_cell);
+    });
+  });
+  test('should render the head elements with the "col" scope', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveAttribute('scope', 'col');
+    });
+  });
+});

package/src/components/Head/Head.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+import { getWeekdays } from './utils';
+
+/**
+ * Render the Head component - i.e. the table head with the weekday names.
+ */
+export function Head(): JSX.Element {
+  const {
+    classNames,
+    styles,
+    showWeekNumber,
+    locale,
+    weekStartsOn,
+    formatters: { formatWeekdayName },
+    labels: { labelWeekday }
+  } = useDayPicker();
+
+  const weekdays = getWeekdays(locale, weekStartsOn);
+
+  return (
+    <thead style={styles.head} className={classNames.head}>
+      <tr style={styles.head_row} className={classNames.head_row}>
+        {showWeekNumber && (
+          <th
+            scope="col"
+            style={styles.head_cell}
+            className={classNames.head_cell}
+          ></th>
+        )}
+        {weekdays.map((weekday, i) => (
+          <th
+            key={i}
+            scope="col"
+            className={classNames.head_cell}
+            style={styles.head_cell}
+          >
+            <span aria-hidden={true}>
+              {formatWeekdayName(weekday, { locale })}
+            </span>
+            <span className={classNames.vhidden}>
+              {labelWeekday(weekday, { locale })}
+            </span>
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+}

package/src/components/Head/index.ts

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

package/src/components/Head/utils/getWeekdays.test.ts

@@ -0,0 +1,36 @@
+import es from 'date-fns/locale/es';
+
+import { freezeBeforeAll } from 'test/utils';
+
+import { getWeekdays } from './getWeekdays';
+
+const today = new Date(2022, 1, 12);
+const prevSunday = new Date(2022, 1, 6);
+
+freezeBeforeAll(today);
+
+let result: Date[];
+
+describe('when rendered without a locale', () => {
+  beforeEach(() => {
+    result = getWeekdays();
+  });
+  test('should return 7 days', () => {
+    expect(result).toHaveLength(7);
+  });
+  test('should return Sunday as first day', () => {
+    expect(result[0]).toEqual(prevSunday);
+  });
+});
+
+describe.each<0 | 1 | 2 | 3 | 4 | 5 | 6>([0, 1, 2, 3, 4, 5, 6])(
+  'when week start on %s',
+  (weekStartsOn) => {
+    beforeEach(() => {
+      result = getWeekdays(es, weekStartsOn);
+    });
+    test('the first date should be weekStartsOn', () => {
+      expect(result[0].getDay()).toBe(weekStartsOn);
+    });
+  }
+);

package/src/components/Head/utils/getWeekdays.ts

@@ -0,0 +1,22 @@
+import addDays from 'date-fns/addDays';
+import startOfWeek from 'date-fns/startOfWeek';
+
+import type { Locale } from 'date-fns';
+
+/**
+ * Generate a series of 7 days, starting from the week, to use for formatting
+ * the weekday names (Monday, Tuesday, etc.).
+ */
+export function getWeekdays(
+  locale?: Locale,
+  /** The index of the first day of the week (0 - Sunday) */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+): Date[] {
+  const start = startOfWeek(new Date(), { locale, weekStartsOn });
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const day = addDays(start, i);
+    days.push(day);
+  }
+  return days;
+}

package/src/components/Head/utils/index.ts

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

package/src/components/IconDropdown/IconDropdown.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { customRender } from 'test/render';
+
+import { IconDropdown } from './IconDropdown';
+
+let root: HTMLElement;
+
+beforeEach(() => {
+  const view = customRender(
+    <IconDropdown className="foo" style={{ color: 'red' }} />
+  );
+  root = view.container.firstChild as HTMLElement;
+});
+test('should add the class name', () => {
+  expect(root).toHaveClass('foo');
+});
+test('should apply the style', () => {
+  expect(root).toHaveStyle({ color: 'red' });
+});

package/src/components/IconDropdown/IconDropdown.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { StyledComponent } from 'types/Styles';
+
+/**
+ * Render the icon in the styled drop-down.
+ */
+export function IconDropdown(props: StyledComponent): JSX.Element {
+  return (
+    <svg
+      width="8px"
+      height="8px"
+      viewBox="0 0 120 120"
+      data-testid="iconDropdown"
+      {...props}
+    >
+      <path
+        d="M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z"
+        fill="currentColor"
+        fillRule="nonzero"
+      ></path>
+    </svg>
+  );
+}

package/src/components/IconDropdown/index.ts

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

package/src/components/IconLeft/IconLeft.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { customRender } from 'test/render';
+
+import { IconLeft } from './IconLeft';
+
+let root: HTMLElement;
+
+beforeEach(() => {
+  const view = customRender(
+    <IconLeft className="foo" style={{ color: 'red' }} />
+  );
+  root = view.container.firstChild as HTMLElement;
+});
+test('should add the class name', () => {
+  expect(root).toHaveClass('foo');
+});
+test('should apply the style', () => {
+  expect(root).toHaveStyle({ color: 'red' });
+});

package/src/components/IconLeft/IconLeft.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { StyledComponent } from 'types/Styles';
+
+/**
+ * Render the "previous month" button in the navigation.
+ */
+export function IconLeft(props: StyledComponent): JSX.Element {
+  return (
+    <svg width="16px" height="16px" viewBox="0 0 120 120" {...props}>
+      <path
+        d="M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z"
+        fill="currentColor"
+        fillRule="nonzero"
+      ></path>
+    </svg>
+  );
+}

package/src/components/IconLeft/index.ts

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

package/src/components/IconRight/IconRight.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { customRender } from 'test/render';
+
+import { IconRight } from './IconRight';
+
+let root: HTMLElement;
+
+beforeEach(() => {
+  const view = customRender(
+    <IconRight className="foo" style={{ color: 'red' }} />
+  );
+  root = view.container.firstChild as HTMLElement;
+});
+test('should add the class name', () => {
+  expect(root).toHaveClass('foo');
+});
+test('should apply the style', () => {
+  expect(root).toHaveStyle({ color: 'red' });
+});

package/src/components/IconRight/IconRight.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { StyledComponent } from 'types/Styles';
+
+/**
+ * Render the "next month" button in the navigation.
+ */
+export function IconRight(props: StyledComponent): JSX.Element {
+  return (
+    <svg width="16px" height="16px" viewBox="0 0 120 120" {...props}>
+      <path
+        d="M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}

package/src/components/IconRight/index.ts

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