react-day-picker 8.2.1 → 8.3.0

package/src/components/Navigation/Navigation.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { IconLeft } from 'components/IconLeft';
-import { IconRight } from 'components/IconRight';
 import { useDayPicker } from 'contexts/DayPicker';
 
 import { Button } from '../Button';
@@ -32,7 +30,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
     classNames,
     styles,
     labels: { labelPrevious, labelNext },
-    components
+    components: { IconRight, IconLeft }
   } = useDayPicker();
 
   if (!props.nextMonth && !props.previousMonth) {
@@ -51,8 +49,6 @@ export function Navigation(props: NavigationProps): JSX.Element {
     classNames.nav_button_next
   ].join(' ');
 
-  const IconRightComponent = components?.IconRight ?? IconRight;
-  const IconLeftComponent = components?.IconLeft ?? IconLeft;
   return (
     <div className={classNames.nav} style={styles.nav}>
       {!props.hidePrevious && (
@@ -65,15 +61,12 @@ export function Navigation(props: NavigationProps): JSX.Element {
           onClick={props.onPreviousClick}
         >
           {dir === 'rtl' ? (
-            <IconRightComponent
+            <IconRight
               className={classNames.nav_icon}
               style={styles.nav_icon}
             />
           ) : (
-            <IconLeftComponent
-              className={classNames.nav_icon}
-              style={styles.nav_icon}
-            />
+            <IconLeft className={classNames.nav_icon} style={styles.nav_icon} />
           )}
         </Button>
       )}
@@ -87,12 +80,9 @@ export function Navigation(props: NavigationProps): JSX.Element {
           onClick={props.onNextClick}
         >
           {dir === 'rtl' ? (
-            <IconLeftComponent
-              className={classNames.nav_icon}
-              style={styles.nav_icon}
-            />
+            <IconLeft className={classNames.nav_icon} style={styles.nav_icon} />
           ) : (
-            <IconRightComponent
+            <IconRight
               className={classNames.nav_icon}
               style={styles.nav_icon}
             />

package/src/components/Row/Row.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 
 import getUnixTime from 'date-fns/getUnixTime';
 
-import { Day } from 'components/Day';
-import { WeekNumber } from 'components/WeekNumber';
 import { useDayPicker } from 'contexts/DayPicker';
 
 /**
@@ -20,16 +18,18 @@ export interface RowProps {
 
 /** Render a row in the calendar, with the days and the week number. */
 export function Row(props: RowProps): JSX.Element {
-  const { styles, classNames, showWeekNumber, components } = useDayPicker();
-
-  const DayComponent = components?.Day ?? Day;
-  const WeeknumberComponent = components?.WeekNumber ?? WeekNumber;
+  const {
+    styles,
+    classNames,
+    showWeekNumber,
+    components: { Day, WeekNumber }
+  } = useDayPicker();
 
   let weekNumberCell;
   if (showWeekNumber) {
     weekNumberCell = (
       <td className={classNames.cell} style={styles.cell}>
-        <WeeknumberComponent number={props.weekNumber} dates={props.dates} />
+        <WeekNumber number={props.weekNumber} dates={props.dates} />
       </td>
     );
   }
@@ -43,7 +43,7 @@ export function Row(props: RowProps): JSX.Element {
           style={styles.cell}
           key={getUnixTime(date)}
         >
-          <DayComponent displayMonth={props.displayMonth} date={date} />
+          <Day displayMonth={props.displayMonth} date={date} />
         </td>
       ))}
     </tr>

package/src/components/Table/Table.tsx

@@ -1,8 +1,5 @@
 import React from 'react';
 
-import { Footer } from 'components/Footer';
-import { Head } from 'components/Head';
-import { Row } from 'components/Row';
 import { useDayPicker } from 'contexts/DayPicker';
 
 import { getMonthWeeks } from './utils/getMonthWeeks';
@@ -23,19 +20,20 @@ export function Table(props: TableProps): JSX.Element {
     styles,
     hideHead,
     fixedWeeks,
-    components,
-    weekStartsOn
+    components: { Head, Row, Footer },
+    weekStartsOn,
+    firstWeekContainsDate,
+    ISOWeek
   } = useDayPicker();
 
   const weeks = getMonthWeeks(props.displayMonth, {
     useFixedWeeks: Boolean(fixedWeeks),
+    ISOWeek,
     locale,
-    weekStartsOn
+    weekStartsOn,
+    firstWeekContainsDate
   });
 
-  const HeadComponent = components?.Head ?? Head;
-  const RowComponent = components?.Row ?? Row;
-  const FooterComponent = components?.Footer ?? Footer;
   return (
     <table
       className={classNames.table}
@@ -43,10 +41,10 @@ export function Table(props: TableProps): JSX.Element {
       role="grid"
       aria-labelledby={props['aria-labelledby']}
     >
-      {!hideHead && <HeadComponent />}
+      {!hideHead && <Head />}
       <tbody className={classNames.tbody} style={styles.tbody}>
         {weeks.map((week) => (
-          <RowComponent
+          <Row
             displayMonth={props.displayMonth}
             key={week.weekNumber}
             dates={week.dates}
@@ -54,7 +52,7 @@ export function Table(props: TableProps): JSX.Element {
           />
         ))}
       </tbody>
-      <FooterComponent />
+      <Footer />
     </table>
   );
 }

package/src/components/Table/utils/daysToMonthWeeks.ts

@@ -2,8 +2,11 @@ import type { Locale } from 'date-fns';
 
 import addDays from 'date-fns/addDays';
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import endOfISOWeek from 'date-fns/endOfISOWeek';
 import endOfWeek from 'date-fns/endOfWeek';
+import getISOWeek from 'date-fns/getISOWeek';
 import getWeek from 'date-fns/getWeek';
+import startOfISOWeek from 'date-fns/startOfISOWeek';
 import startOfWeek from 'date-fns/startOfWeek';
 
 import { MonthWeek } from './getMonthWeeks';
@@ -13,13 +16,19 @@ export function daysToMonthWeeks(
   fromDate: Date,
   toDate: Date,
   options?: {
+    ISOWeek?: boolean;
     locale?: Locale;
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
   }
 ): MonthWeek[] {
-  const toWeek = endOfWeek(toDate, options);
-  const fromWeek = startOfWeek(fromDate, options);
+  const toWeek = options?.ISOWeek
+    ? endOfISOWeek(toDate)
+    : endOfWeek(toDate, options);
+  const fromWeek = options?.ISOWeek
+    ? startOfISOWeek(fromDate)
+    : startOfWeek(fromDate, options);
+
   const nOfDays = differenceInCalendarDays(toWeek, fromWeek);
   const days: Date[] = [];
 
@@ -28,7 +37,10 @@ export function daysToMonthWeeks(
   }
 
   const weeksInMonth = days.reduce((result: MonthWeek[], date) => {
-    const weekNumber = getWeek(date, options);
+    const weekNumber = options?.ISOWeek
+      ? getISOWeek(date)
+      : getWeek(date, options);
+
     const existingWeek = result.find(
       (value) => value.weekNumber === weekNumber
     );

package/src/components/Table/utils/getMonthWeeks.test.ts

@@ -60,9 +60,41 @@ describe('when using the "enGB" locale', () => {
         27, 28, 29, 30, 31, 1, 2
       ]);
     });
-    test('the first week should be the last of January', () => {
+    test('the last week should be the last of January', () => {
       const weekNumbers = weeks.map((week) => week.weekNumber);
       expect(weekNumbers[weekNumbers.length - 1]).toEqual(5);
     });
   });
+  describe('when setting a 3 as first day of year', () => {
+    const date = new Date(2022, 0);
+    const weeks = getMonthWeeks(date, { locale, firstWeekContainsDate: 3 });
+    test('the number of week should have number 53', () => {
+      const weekNumbers = weeks.map((week) => week.weekNumber);
+      expect(weekNumbers[0]).toEqual(53);
+    });
+  });
+});
+
+describe('when using the ISOWeek numbers', () => {
+  const locale = enUS;
+  describe('when getting the weeks for September 2022', () => {
+    const date = new Date(2022, 8);
+    const weeks = getMonthWeeks(date, { locale, ISOWeek: true });
+    test('the last week should have number 39', () => {
+      const weekNumbers = weeks.map((week) => week.weekNumber);
+      expect(weekNumbers[weekNumbers.length - 1]).toEqual(39);
+    });
+  });
+});
+
+describe('when not using the ISOWeek numbers', () => {
+  const locale = enUS;
+  describe('when getting the weeks for September 2022', () => {
+    const date = new Date(2022, 8);
+    const weeks = getMonthWeeks(date, { locale, ISOWeek: false });
+    test('the last week should have number 40', () => {
+      const weekNumbers = weeks.map((week) => week.weekNumber);
+      expect(weekNumbers[weekNumbers.length - 1]).toEqual(40);
+    });
+  });
 });

package/src/components/Table/utils/getMonthWeeks.ts

@@ -20,14 +20,13 @@ export type MonthWeek = {
  * the first and last week.
  */
 export function getMonthWeeks(
-  /** The month to get the weeks from */
   month: Date,
   options: {
     locale: Locale;
-    /** Add extra weeks up to 6 weeks */
     useFixedWeeks?: boolean;
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    ISOWeek?: boolean;
   }
 ): MonthWeek[] {
   const weeksInMonth: MonthWeek[] = daysToMonthWeeks(
@@ -36,8 +35,8 @@ export function getMonthWeeks(
     options
   );
 
-  // Add extra weeks to the month, up to 6 weeks
   if (options?.useFixedWeeks) {
+    // Add extra weeks to the month, up to 6 weeks
     const nrOfMonthWeeks = getWeeksInMonth(month, options);
     if (nrOfMonthWeeks < 6) {
       const lastWeek = weeksInMonth[weeksInMonth.length - 1];

package/src/components/YearsDropdown/YearsDropdown.tsx

@@ -4,7 +4,6 @@ import setYear from 'date-fns/setYear';
 import startOfMonth from 'date-fns/startOfMonth';
 import startOfYear from 'date-fns/startOfYear';
 
-import { Dropdown } from 'components/Dropdown';
 import { useDayPicker } from 'contexts/DayPicker';
 import { MonthChangeEventHandler } from 'types/EventHandlers';
 
@@ -30,7 +29,7 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
     locale,
     styles,
     classNames,
-    components,
+    components: { Dropdown },
     formatters: { formatYearCaption },
     labels: { labelYearDropdown }
   } = useDayPicker();
@@ -55,10 +54,8 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
     props.onChange(newMonth);
   };
 
-  const DropdownComponent = components?.Dropdown ?? Dropdown;
-
   return (
-    <DropdownComponent
+    <Dropdown
       name="years"
       aria-label={labelYearDropdown()}
       className={classNames.dropdown_year}
@@ -72,6 +69,6 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
           {formatYearCaption(year, { locale })}
         </option>
       ))}
-    </DropdownComponent>
+    </Dropdown>
   );
 }

package/src/contexts/DayPicker/{useDayPicker.test.ts → DayPickerContext.test.ts}

@@ -7,15 +7,18 @@ import { freezeBeforeAll } from 'test/utils';
 
 import { CaptionLayout } from 'components/Caption';
 import { DayPickerContextValue, useDayPicker } from 'contexts/DayPicker';
-import { getDefaultContextValue } from 'contexts/DayPicker/defaultContextValue';
-import { CustomComponents, DaySelectionMode } from 'types/DayPickerBase';
+import {
+  DefaultContextProps,
+  getDefaultContextValues
+} from 'contexts/DayPicker/defaultContextValues';
+import { DaySelectionMode } from 'types/DayPickerBase';
 import { Formatters } from 'types/Formatters';
 import { Labels } from 'types/Labels';
 import { DayModifiers, ModifiersClassNames } from 'types/Modifiers';
 import { ClassNames, Styles } from 'types/Styles';
 
 const today = new Date(2022, 5, 13);
-const defaults = getDefaultContextValue();
+const defaults = getDefaultContextValues();
 
 freezeBeforeAll(today);
 
@@ -25,20 +28,8 @@ function setup(dayPickerProps?: DayPickerProps) {
   renderResult = result;
 }
 
-describe('when passing rendered without props', () => {
-  type PropName =
-    | 'captionLayout'
-    | 'classNames'
-    | 'formatters'
-    | 'labels'
-    | 'locale'
-    | 'modifiersClassNames'
-    | 'modifiers'
-    | 'numberOfMonths'
-    | 'styles'
-    | 'today';
-
-  const testPropNames: PropName[] = [
+describe('when rendered without props', () => {
+  const testPropNames: DefaultContextProps[] = [
     'captionLayout',
     'classNames',
     'formatters',
@@ -48,7 +39,7 @@ describe('when passing rendered without props', () => {
     'modifiers',
     'numberOfMonths',
     'styles'
-    // 'today' SKIPPED: this test doesn't pass
+    // 'today' // SKIPPED: this test doesn't pass
   ];
   beforeAll(() => {
     setup();
@@ -279,20 +270,13 @@ describe('when passing "labels" from props', () => {
   });
 });
 
-describe('when passing "components" from props', () => {
-  const components: CustomComponents = { Day: jest.fn() };
-  const dayPickerProps: DayPickerProps = { components };
+describe('when passing an "id" from props', () => {
+  const dayPickerProps: DayPickerProps = { id: 'foo' };
   beforeEach(() => {
     setup(dayPickerProps);
   });
-  test('should override the default "components"', () => {
-    expect(renderResult.current.components).not.toBe(defaults.components);
-  });
-  test('should include the custom "components"', () => {
-    expect(renderResult.current.components).toStrictEqual({
-      ...defaults.components,
-      ...components
-    });
+  test('should return the id', () => {
+    expect(renderResult.current.id).toBe('foo');
   });
 });
 

package/src/contexts/DayPicker/DayPickerContext.tsx

@@ -1,9 +1,13 @@
-import React, { createContext, ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 
 import { DayPickerProps } from 'DayPicker';
 
 import { CaptionLayout } from 'components/Caption';
-import { DayPickerBase, DaySelectionMode } from 'types/DayPickerBase';
+import {
+  Components,
+  DayPickerBase,
+  DaySelectionMode
+} from 'types/DayPickerBase';
 import {
   DayPickerMultipleProps,
   isDayPickerMultiple
@@ -16,10 +20,13 @@ import { Matcher } from 'types/Matchers';
 import { DayModifiers, ModifiersClassNames } from 'types/Modifiers';
 import { ClassNames, Styles } from 'types/Styles';
 
-import { getDefaultContextValue } from './defaultContextValue';
+import { getDefaultContextValues } from './defaultContextValues';
 import { parseFromToProps } from './utils';
 
-/** The value of the {@link DayPickerContext}. */
+/**
+ * The value of the {@link DayPickerContext} extends the props from DayPicker
+ * with default and cleaned up values.
+ */
 export interface DayPickerContextValue extends DayPickerBase {
   mode: DaySelectionMode;
   onSelect?:
@@ -32,6 +39,7 @@ export interface DayPickerContextValue extends DayPickerBase {
   selected?: Matcher | Matcher[];
 
   captionLayout: CaptionLayout;
+  components: Components;
   classNames: Required<ClassNames>;
   formatters: Formatters;
   labels: Labels;
@@ -67,12 +75,14 @@ export interface DayPickerProviderProps {
 export function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {
   const { initialProps } = props;
 
-  const defaults = getDefaultContextValue();
+  const defaultContextValues = getDefaultContextValues();
 
   const { fromDate, toDate } = parseFromToProps(initialProps);
 
-  let captionLayout = initialProps.captionLayout ?? defaults.captionLayout;
+  let captionLayout =
+    initialProps.captionLayout ?? defaultContextValues.captionLayout;
   if (captionLayout !== 'buttons' && (!fromDate || !toDate)) {
+    // When no from/to dates are set, the caption is always buttons
     captionLayout = 'buttons';
   }
 
@@ -86,77 +96,41 @@ export function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {
   }
 
   const value: DayPickerContextValue = {
+    ...defaultContextValues,
+    ...initialProps,
     captionLayout,
-    className: initialProps.className,
     classNames: {
-      ...defaults.classNames,
+      ...defaultContextValues.classNames,
       ...initialProps.classNames
     },
     components: {
-      ...defaults.components,
+      ...defaultContextValues.components,
       ...initialProps.components
     },
-    defaultMonth: initialProps.defaultMonth,
-    dir: initialProps.dir,
-    disabled: initialProps.disabled,
-    disableNavigation: initialProps.disableNavigation,
-    fixedWeeks: initialProps.fixedWeeks,
-    footer: initialProps.footer,
     formatters: {
-      ...defaults.formatters,
+      ...defaultContextValues.formatters,
       ...initialProps.formatters
     },
     fromDate,
-    hidden: initialProps.hidden,
-    hideHead: initialProps.hideHead,
-    initialFocus: initialProps.initialFocus,
     labels: {
-      ...defaults.labels,
+      ...defaultContextValues.labels,
       ...initialProps.labels
     },
-    locale: initialProps.locale ?? defaults.locale,
-    mode: initialProps.mode || 'default',
+    mode: initialProps.mode || defaultContextValues.mode,
     modifiers: {
-      ...defaults.modifiers,
+      ...defaultContextValues.modifiers,
       ...initialProps.modifiers
     },
     modifiersClassNames: {
-      ...defaults.modifiersClassNames,
+      ...defaultContextValues.modifiersClassNames,
       ...initialProps.modifiersClassNames
     },
-    modifiersStyles: initialProps.modifiersStyles,
-    month: initialProps.month,
-    numberOfMonths: initialProps.numberOfMonths ?? defaults.numberOfMonths,
-    onDayBlur: initialProps.onDayBlur,
-    onDayClick: initialProps.onDayClick,
-    onDayFocus: initialProps.onDayFocus,
-    onDayKeyDown: initialProps.onDayKeyDown,
-    onDayKeyPress: initialProps.onDayKeyPress,
-    onDayKeyUp: initialProps.onDayKeyUp,
-    onDayMouseEnter: initialProps.onDayMouseEnter,
-    onDayMouseLeave: initialProps.onDayMouseLeave,
-    onDayTouchCancel: initialProps.onDayTouchCancel,
-    onDayTouchEnd: initialProps.onDayTouchEnd,
-    onDayTouchMove: initialProps.onDayTouchMove,
-    onDayTouchStart: initialProps.onDayTouchStart,
-    onMonthChange: initialProps.onMonthChange,
-    onNextClick: initialProps.onNextClick,
-    onPrevClick: initialProps.onPrevClick,
     onSelect,
-    onWeekNumberClick: initialProps.onWeekNumberClick,
-    pagedNavigation: initialProps.pagedNavigation,
-    reverseMonths: initialProps.reverseMonths,
-    selected: initialProps.selected,
-    showOutsideDays: initialProps.showOutsideDays,
-    showWeekNumber: initialProps.showWeekNumber,
-    style: initialProps.style,
     styles: {
-      ...defaults.styles,
+      ...defaultContextValues.styles,
       ...initialProps.styles
     },
-    toDate,
-    today: initialProps.today ?? defaults.today,
-    weekStartsOn: initialProps.weekStartsOn
+    toDate
   };
 
   return (
@@ -165,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;
+}

package/src/contexts/DayPicker/defaultContextValues.ts

@@ -0,0 +1,85 @@
+import enUS from 'date-fns/locale/en-US';
+
+import { Caption, CaptionLayout } from 'components/Caption';
+import { CaptionLabel } from 'components/CaptionLabel';
+import { Day } from 'components/Day';
+import { DayContent } from 'components/DayContent';
+import { Dropdown } from 'components/Dropdown';
+import { Footer } from 'components/Footer';
+import { Head } from 'components/Head';
+import { HeadRow } from 'components/HeadRow';
+import { IconDropdown } from 'components/IconDropdown';
+import { IconLeft } from 'components/IconLeft';
+import { IconRight } from 'components/IconRight';
+import { Row } from 'components/Row';
+import { WeekNumber } from 'components/WeekNumber';
+import { DayPickerContextValue } from 'contexts/DayPicker';
+import { Components } from 'types/DayPickerBase';
+
+import { defaultClassNames } from './defaultClassNames';
+import * as formatters from './formatters';
+import * as labels from './labels';
+
+export type DefaultContextProps =
+  | 'captionLayout'
+  | 'classNames'
+  | 'components'
+  | 'formatters'
+  | 'locale'
+  | 'labels'
+  | 'modifiersClassNames'
+  | 'modifiers'
+  | 'numberOfMonths'
+  | 'styles'
+  | 'today'
+  | 'mode';
+
+export type DefaultContextValues = Pick<
+  DayPickerContextValue,
+  DefaultContextProps
+>;
+/**
+ * Returns the default values to use in the DayPickerContext, in case they are
+ * not passed down with the DayPicker initial props.
+ */
+export function getDefaultContextValues(): DefaultContextValues {
+  const captionLayout: CaptionLayout = 'buttons';
+  const classNames = defaultClassNames;
+  const locale = enUS;
+  const modifiersClassNames = {};
+  const modifiers = {};
+  const numberOfMonths = 1;
+  const styles = {};
+  const today = new Date();
+
+  const components: Components = {
+    Caption,
+    CaptionLabel,
+    Day,
+    DayContent,
+    Dropdown,
+    Footer,
+    Head,
+    HeadRow,
+    IconDropdown,
+    IconRight,
+    IconLeft,
+    Row,
+    WeekNumber
+  };
+
+  return {
+    captionLayout,
+    classNames,
+    components,
+    formatters,
+    labels,
+    locale,
+    modifiersClassNames,
+    modifiers,
+    numberOfMonths,
+    styles,
+    today,
+    mode: 'default'
+  };
+}

package/src/contexts/DayPicker/index.ts

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

package/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';
 
@@ -81,17 +81,16 @@ export function FocusProvider(props: { children: ReactNode }): JSX.Element {
     setFocusedDay(date);
   };
 
-  const dayPicker = useDayPicker();
+  const context = useDayPicker();
 
   const moveFocus = (moveBy: MoveFocusBy, direction: MoveFocusDirection) => {
     if (!focusedDay) return;
-    const nextFocused = getNextFocus(
-      focusedDay,
+    const nextFocused = getNextFocus(focusedDay, {
       moveBy,
       direction,
-      dayPicker,
+      context,
       modifiers
-    );
+    });
     if (isSameDay(focusedDay, nextFocused)) return undefined;
     navigation.goToDate(nextFocused, focusedDay);
     focus(nextFocused);
@@ -120,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;
+}