react-day-picker 8.7.0 → 8.7.1

package/src/components/Root/Root.tsx

@@ -1,13 +1,24 @@
-import React, { AriaAttributes, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+
+import { DayPickerProps } from 'DayPicker';
 
 import { Month } from 'components/Month';
 import { useDayPicker } from 'contexts/DayPicker';
 import { useFocusContext } from 'contexts/Focus';
 import { useNavigation } from 'contexts/Navigation';
-import { DataAttributes } from 'types/DayPickerBase';
+
+function isDataAttributes(attrs: DayPickerProps): attrs is {
+  [key: string]: string | boolean | number | undefined;
+} {
+  return true;
+}
+
+export interface RootProps {
+  initialProps: DayPickerProps;
+}
 
 /** Render the container with the months according to the number of months to display. */
-export function Root(): JSX.Element {
+export function Root({ initialProps }: RootProps): JSX.Element {
   const dayPicker = useDayPicker();
   const focusContext = useFocusContext();
   const navigation = useNavigation();
@@ -44,19 +55,15 @@ export function Root(): JSX.Element {
     ...dayPicker.style
   };
 
-  const dataAttributes = (Object.keys(dayPicker) as Array<keyof DataAttributes>)
+  const dataAttributes = Object.keys(initialProps)
     .filter((key) => key.startsWith('data-'))
-    .reduce(
-      (attrs, key) => ({ ...attrs, [key]: dayPicker[key] }),
-      {} as DataAttributes
-    );
-
-  const ariaAttributes = (Object.keys(dayPicker) as Array<keyof AriaAttributes>)
-    .filter((key) => key.startsWith('aria-'))
-    .reduce(
-      (attrs, key) => ({ ...attrs, [key]: dayPicker[key] }),
-      {} as AriaAttributes
-    );
+    .reduce((attrs, key) => {
+      if (!isDataAttributes(initialProps)) return attrs;
+      return {
+        ...attrs,
+        [key]: initialProps[key]
+      };
+    }, {});
 
   return (
     <div
@@ -65,7 +72,6 @@ export function Root(): JSX.Element {
       dir={dayPicker.dir}
       id={dayPicker.id}
       {...dataAttributes}
-      {...ariaAttributes}
     >
       <div
         className={dayPicker.classNames.months}

package/src/types/DayPickerBase.ts

@@ -1,7 +1,5 @@
 import type { Locale } from 'date-fns';
 
-import { AriaAttributes } from 'react';
-
 import { CaptionLayout, CaptionProps } from 'components/Caption';
 import { CaptionLabelProps } from 'components/CaptionLabel';
 import { DayProps } from 'components/Day';
@@ -31,11 +29,6 @@ import {
 } from './Modifiers';
 import { ClassNames, StyledComponent, Styles } from './Styles';
 
-/** A type with all the attributes starting with data- */
-export type DataAttributes = {
-  [key: `data-${string}`]: string | boolean | number | undefined;
-};
-
 /**
  * Selection modes supported by DayPicker.
  *
@@ -50,7 +43,7 @@ export type DaySelectionMode = 'single' | 'multiple' | 'range' | 'default';
 /**
  * The base props for the {@link DayPicker} component and the {@link DayPickerContext}.
  */
-export interface DayPickerBase extends DataAttributes, AriaAttributes {
+export interface DayPickerBase {
   /**
    * The CSS class to add to the container element. To change the name of the
    * class instead, use `classNames.root`.