react-day-picker 8.0.0-beta.36 → 8.0.0-beta.37

package/dist/hooks/useDayEventHandlers/useDayEventHandlers.d.ts

@@ -0,0 +1,28 @@
+import { HTMLProps } from 'react';
+import { ActiveModifiers } from '../../types/Modifiers';
+export declare type EventName = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onMouseEnter' | 'onMouseLeave' | 'onTouchCancel' | 'onTouchEnd' | 'onTouchMove' | 'onTouchStart';
+export declare type DayEventName = 'onDayClick' | 'onDayFocus' | 'onDayBlur' | 'onDayKeyDown' | 'onDayKeyUp' | 'onDayMouseEnter' | 'onDayMouseLeave' | 'onDayTouchCancel' | 'onDayTouchEnd' | 'onDayTouchMove' | 'onDayTouchStart';
+export declare type DayEventHandlers = Pick<HTMLProps<HTMLButtonElement>, EventName>;
+/**
+ * This hook returns details about the content to render in the day cell.
+ *
+ *
+ * When a day cell is rendered in the table, DayPicker can either:
+ *
+ * - render nothing: when the day is outside the month or has matched the
+ *   "hidden" modifier.
+ * - render a button. When a selection mode is set, DayPicker renders a button
+ *   to allow the focus and the selection. In case of `custom` selection
+ *   mode, DayPicker expects a `onDayClick` prop to render a button.
+ * - render a non-interactive element: when no selection mode is set, the day
+ *   cell shouldn’t respond to any interaction. DayPicker should render a `div`
+ *   or a `span`.
+ *
+ * ### Usage
+ *
+ * Use this hook to customize the behavior of the [[Day]] component. Create a
+ * new `Day` component using this hook and pass it to the `components` prop.
+ * The source of [[Day]] can be a good starting point.
+ *
+ */
+export declare function useDayEventHandlers(date: Date, activeModifiers: ActiveModifiers): DayEventHandlers;

package/dist/hooks/useDayRender/index.d.ts

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

package/dist/hooks/useDayRender/useDayRender.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ButtonProps } from '../../components/Button';
+import { DayEventHandlers } from '../../hooks/useDayEventHandlers';
+import { SelectedDays } from '../../hooks/useSelectedDays';
+import { ActiveModifiers } from '../../types/Modifiers';
+import { StyledComponent } from '../../types/Styles';
+export declare type DayRender = {
+    /** Whether the day should be rendered a `button` instead of a `div` */
+    isButton: boolean;
+    /** Whether the day should be hidden. */
+    isHidden: boolean;
+    /** The modifiers active for the given day. */
+    activeModifiers: ActiveModifiers;
+    /** The props to apply to the button element (when `isButton` is true). */
+    buttonProps: StyledComponent & Pick<ButtonProps, 'disabled' | 'aria-pressed' | 'tabIndex'> & DayEventHandlers;
+    /** The props to apply to the div element (when `isButton` is false). */
+    divProps: StyledComponent;
+    selectedDays: SelectedDays;
+};
+/**
+ * Return props and data used to render the [[Day]] component.
+ *
+ * Use this hook when creating a component to replace the built-in `Day`
+ * component.
+ *
+ * Each Day in DayPicker should render one of the following, according to the return
+ * value:
+ *
+ * - an empty `React.Fragment`, to render if `isHidden` is true
+ * - a `button` element, when the day is interactive, e.g. is selectable
+ * - a `div` element, whe the day is not interactive
+ *
+ * @param day The date to render
+ * @param displayMonth The month where the date is displayed (if not the same as
+ * `date`, it means it is an "outside" day)
+ * @param buttonRef A ref to the button element that will be target of focus
+ * when rendered (if required).
+ */
+export declare function useDayRender(day: Date, displayMonth: Date, buttonRef: React.RefObject<HTMLButtonElement>): DayRender;

package/dist/hooks/useDayRender/utils/getDayClassNames.d.ts

@@ -0,0 +1,4 @@
+import { DayPickerContextValue } from '../../../contexts/DayPicker';
+import { ActiveModifiers } from '../../../types/Modifiers';
+/** Return the class names for the Day element, according to the given active modifiers. */
+export declare function getDayClassNames(dayPicker: Pick<DayPickerContextValue, 'modifiersClassNames' | 'classNames' | 'modifierPrefix'>, activeModifiers: ActiveModifiers): string[];

package/dist/hooks/useDayRender/utils/getDayStyle.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DayPickerContextValue } from '../../../contexts/DayPicker';
+import { ActiveModifiers } from '../../../types/Modifiers';
+/** Return the style for the Day element, according to the given active modifiers. */
+export declare function getDayStyle(dayPicker: Pick<DayPickerContextValue, 'modifiersStyles' | 'styles'>, activeModifiers: ActiveModifiers): React.CSSProperties;

package/dist/hooks/useSelectedDays/index.d.ts

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

package/dist/hooks/useSelectedDays/useSelectedDays.d.ts

@@ -0,0 +1,8 @@
+import { DateRange } from '../../types/Matchers';
+export declare type SelectedDays = Date | Date[] | DateRange | undefined;
+/**
+ * Return the current selected days when DayPicker is in selection mode.
+ *
+ * Days selected by the custom selection mode are not returned.
+ */
+export declare function useSelectedDays(): SelectedDays;

package/{build → dist}/index.d.ts

@@ -13,6 +13,8 @@ export * from './components/IconLeft';
 export * from './components/Row';
 export * from './components/WeekNumber';
 export * from './hooks/useInput';
+export * from './hooks/useDayRender';
+export * from './hooks/useActiveModifiers';
 export * from './contexts/DayPicker';
 export * from './contexts/Focus';
 export * from './contexts/Navigation';