chore: reorganize contexts files (#1564)

packages/react-day-picker/src/contexts/DayPicker/DayPickerContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 
 import { DayPickerProps } from 'DayPicker';
 
@@ -139,3 +139,17 @@ export function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {
     </DayPickerContext.Provider>
   );
 }
+
+/**
+ * Hook to access the {@link DayPickerContextValue}.
+ *
+ * Use the DayPicker context to access to the props passed to DayPicker inside
+ * internal or custom components.
+ */
+export function useDayPicker(): DayPickerContextValue {
+  const context = useContext(DayPickerContext);
+  if (!context) {
+    throw new Error(`useDayPicker must be used within a DayPickerProvider.`);
+  }
+  return context;
+}

packages/react-day-picker/src/contexts/DayPicker/index.ts

@@ -1,2 +1 @@
-export * from './useDayPicker';
 export * from './DayPickerContext';

packages/react-day-picker/src/contexts/Focus/FocusContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useState } from 'react';
+import React, { createContext, ReactNode, useContext, useState } from 'react';
 
 import isSameDay from 'date-fns/isSameDay';
 
@@ -119,3 +119,17 @@ export function FocusProvider(props: { children: ReactNode }): JSX.Element {
     </FocusContext.Provider>
   );
 }
+
+/**
+ * Hook to access the {@link FocusContextValue}. Use this hook to handle the
+ * focus state of the elements.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+export function useFocusContext(): FocusContextValue {
+  const context = useContext(FocusContext);
+  if (!context) {
+    throw new Error('useFocusContext must be used within a FocusProvider');
+  }
+  return context;
+}

packages/react-day-picker/src/contexts/Focus/index.ts

@@ -1,2 +1 @@
 export * from './FocusContext';
-export * from './useFocusContext';

packages/react-day-picker/src/contexts/Modifiers/ModifiersContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 import { useSelectMultiple } from 'contexts/SelectMultiple';
@@ -42,3 +42,18 @@ export function ModifiersProvider(props: ModifiersProviderProps): JSX.Element {
     </ModifiersContext.Provider>
   );
 }
+
+/**
+ * Return the modifiers used by DayPicker.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ * Requires to be wrapped into {@link ModifiersProvider}.
+ *
+ */
+export function useModifiers(): Modifiers {
+  const context = useContext(ModifiersContext);
+  if (!context) {
+    throw new Error('useModifiers must be used within a ModifiersProvider');
+  }
+  return context;
+}

packages/react-day-picker/src/contexts/Modifiers/index.ts

@@ -1,2 +1,2 @@
-export * from './useModifiers';
+export * from './ModifiersContext';
 export * from './utils/getActiveModifiers';

packages/react-day-picker/src/contexts/Navigation/useNavigation.test.ts → packages/react-day-picker/src/contexts/Navigation/NavigationContext.test.ts

@@ -6,8 +6,7 @@ import { freezeBeforeAll } from 'test/utils';
 
 import { DayPickerBase } from 'types/DayPickerBase';
 
-import { NavigationContextValue } from './NavigationContext';
-import { useNavigation } from './useNavigation';
+import { NavigationContextValue, useNavigation } from './NavigationContext';
 
 const today = new Date(2021, 11, 8);
 const todaysMonth = startOfMonth(today);

packages/react-day-picker/src/contexts/Navigation/NavigationContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 
 import addMonths from 'date-fns/addMonths';
 import isBefore from 'date-fns/isBefore';
@@ -81,3 +81,17 @@ export function NavigationProvider(props: {
     </NavigationContext.Provider>
   );
 }
+
+/**
+ * Hook to access the {@link NavigationContextValue}. Use this hook to navigate
+ * between months or years in DayPicker.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+export function useNavigation(): NavigationContextValue {
+  const context = useContext(NavigationContext);
+  if (!context) {
+    throw new Error('useNavigation must be used within a NavigationProvider');
+  }
+  return context;
+}

packages/react-day-picker/src/contexts/Navigation/index.ts

@@ -1,2 +1 @@
 export * from './NavigationContext';
-export * from './useNavigation';

packages/react-day-picker/src/contexts/SelectMultiple/useSelectMultiple.test.ts → packages/react-day-picker/src/contexts/SelectMultiple/SelectMultipleContext.test.ts

@@ -8,8 +8,10 @@ import { isMatch } from 'contexts/Modifiers/utils/isMatch';
 import { DayPickerMultipleProps } from 'types/DayPickerMultiple';
 import { ActiveModifiers } from 'types/Modifiers';
 
-import { SelectMultipleContextValue } from './SelectMultipleContext';
-import { useSelectMultiple } from './useSelectMultiple';
+import {
+  SelectMultipleContextValue,
+  useSelectMultiple
+} from './SelectMultipleContext';
 
 const today = new Date(2021, 11, 8);
 freezeBeforeAll(today);

packages/react-day-picker/src/contexts/SelectMultiple/SelectMultipleContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 
 import isSameDay from 'date-fns/isSameDay';
 
@@ -133,3 +133,18 @@ export function SelectMultipleProviderInternal({
     </SelectMultipleContext.Provider>
   );
 }
+
+/**
+ * Hook to access the {@link SelectMultipleContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+export function useSelectMultiple(): SelectMultipleContextValue {
+  const context = useContext(SelectMultipleContext);
+  if (!context) {
+    throw new Error(
+      'useSelectMultiple must be used within a SelectMultipleProvider'
+    );
+  }
+  return context;
+}

packages/react-day-picker/src/contexts/SelectMultiple/index.ts

@@ -1,2 +1 @@
 export * from './SelectMultipleContext';
-export * from './useSelectMultiple';

packages/react-day-picker/src/contexts/SelectRange/useSelectRange.test.ts → packages/react-day-picker/src/contexts/SelectRange/SelectRangeContext.test.ts

@@ -14,8 +14,7 @@ import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerRangeProps } from 'types/DayPickerRange';
 import { ActiveModifiers } from 'types/Modifiers';
 
-import { SelectRangeContextValue } from './SelectRangeContext';
-import { useSelectRange } from './useSelectRange';
+import { SelectRangeContextValue, useSelectRange } from './SelectRangeContext';
 
 const today = new Date(2021, 11, 8);
 freezeBeforeAll(today);

packages/react-day-picker/src/contexts/SelectRange/SelectRangeContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 import isAfter from 'date-fns/isAfter';
@@ -156,3 +156,16 @@ export function SelectRangeProviderInternal({
     </SelectRangeContext.Provider>
   );
 }
+
+/**
+ * Hook to access the {@link SelectRangeContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+export function useSelectRange(): SelectRangeContextValue {
+  const context = useContext(SelectRangeContext);
+  if (!context) {
+    throw new Error('useSelectRange must be used within a SelectRangeProvider');
+  }
+  return context;
+}

packages/react-day-picker/src/contexts/SelectRange/index.ts

@@ -1,2 +1 @@
 export * from './SelectRangeContext';
-export * from './useSelectRange';

packages/react-day-picker/src/contexts/SelectSingle/useSelectSingle.test.ts → packages/react-day-picker/src/contexts/SelectSingle/SelectSingleContext.test.ts

@@ -7,7 +7,7 @@ import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerSingleProps } from 'types/DayPickerSingle';
 import { ActiveModifiers } from 'types/Modifiers';
 
-import { useSelectSingle } from './useSelectSingle';
+import { useSelectSingle } from './SelectSingleContext';
 
 const today = new Date(2021, 11, 8);
 freezeBeforeAll(today);

packages/react-day-picker/src/contexts/SelectSingle/SelectSingleContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react';
+import React, { createContext, useContext } from 'react';
 
 import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerSingleProps, isDayPickerSingle } from 'types/DayPickerSingle';
@@ -78,3 +78,18 @@ export function SelectSingleProviderInternal({
     </SelectSingleContext.Provider>
   );
 }
+
+/**
+ * Hook to access the {@link SelectSingleContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+export function useSelectSingle(): SelectSingleContextValue {
+  const context = useContext(SelectSingleContext);
+  if (!context) {
+    throw new Error(
+      'useSelectSingle must be used within a SelectSingleProvider'
+    );
+  }
+  return context;
+}

packages/react-day-picker/src/contexts/SelectSingle/index.ts

@@ -1,2 +1 @@
 export * from './SelectSingleContext';
-export * from './useSelectSingle';

website/examples/focus-recursive.tsx

@@ -5,7 +5,7 @@ import { DayPicker } from 'react-day-picker';
 /** Test for the next focus day to not cause an infinite recursion. */
 export default function App() {
   const disabledDays = [
-    // new Date(2022, 5, 4),
+    new Date(2022, 5, 4),
     {
       after: new Date(2022, 5, 26)
     }