@entur/datepicker 11.6.2 → 11.8.0

package/dist/DatePicker/Calendar.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { AriaCalendarProps } from '@react-aria/calendar';
-import { CalendarDate, DateValue } from '@internationalized/date';
+import { CalendarDate, DateDuration, DateValue } from '@internationalized/date';
 import { MappedDateValue } from '@react-types/datepicker';
 import { DateFieldProps } from './DateField';
 type ExtendedCalendarProps<DateType extends DateValue> = Omit<AriaCalendarProps<DateType>, keyof BaseCalendarProps<DateType> | 'value' | 'label' | 'hideTimeZone' | 'placeholder' | 'placeholderValue' | 'defaultValue' | 'minValue' | 'maxValue'>;
@@ -59,6 +59,11 @@ type BaseCalendarProps<DateType extends DateValue> = {
     locale?: string;
     calendarRef?: React.MutableRefObject<HTMLDivElement | null>;
     forcedReturnType?: DateFieldProps<DateType>['forcedReturnType'];
+    /** Vis flere måneder samtidig i kalenderen.
+     * @default {months: 1}
+     * @example {months: 2}
+     */
+    visibleDuration?: Pick<DateDuration, 'months'>;
 };
 export type CalendarProps<DateType extends DateValue> = BaseCalendarProps<DateType> & ExtendedCalendarProps<DateType>;
 export declare const Calendar: <DateType extends DateValue>({ locale: localOverride, ...rest }: CalendarProps<DateType>) => React.JSX.Element;

package/dist/DatePicker/CalendarBase.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
+import { CalendarDate } from '@internationalized/date';
+import { AriaButtonProps } from '@react-types/button';
+type CalendarBaseProps = {
+    state: CalendarState | RangeCalendarState;
+    calendarProps: React.HTMLAttributes<HTMLElement>;
+    prevButtonProps: AriaButtonProps;
+    nextButtonProps: AriaButtonProps;
+    title: string;
+    calendarRef?: React.Ref<HTMLDivElement>;
+    style?: React.CSSProperties;
+    className?: string;
+    navigationDescription?: string;
+    showWeekNumbers: boolean;
+    weekNumberHeader: string;
+    renderCell: (date: CalendarDate, currentMonth: CalendarDate, weekNumberString: string, ariaDescribedBy: string) => React.ReactNode;
+};
+export declare const CalendarBase: ({ state, calendarProps, prevButtonProps, nextButtonProps, title, calendarRef, style, className, navigationDescription, showWeekNumbers, weekNumberHeader, renderCell, }: CalendarBaseProps) => React.JSX.Element;
+export {};

package/dist/DatePicker/CalendarCell.d.ts

@@ -4,6 +4,7 @@ import { CalendarDate } from '@internationalized/date';
 type CalendarCellProps = {
     state: CalendarState;
     date: CalendarDate;
+    currentMonth: CalendarDate;
     weekNumberString: string;
     showOutsideMonth?: boolean;
     onSelectedCellClick?: () => void;
@@ -11,5 +12,5 @@ type CalendarCellProps = {
     classNameForDate?: (date: CalendarDate) => string;
     ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const CalendarCell: ({ state, date, showOutsideMonth, onSelectedCellClick, onCellClick, weekNumberString, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
+export declare const CalendarCell: ({ state, date, currentMonth, showOutsideMonth, onSelectedCellClick, onCellClick, weekNumberString, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/CalendarGrid.d.ts

@@ -1,16 +1,13 @@
 import { default as React } from 'react';
-import { CalendarState } from '@react-stately/calendar';
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import { CalendarDate } from '@internationalized/date';
 type CalendarGridProps = {
-    state: CalendarState;
+    state: CalendarState | RangeCalendarState;
+    startDate?: CalendarDate;
     navigationDescription?: string;
     showWeekNumbers: boolean;
     weekNumberHeader: string;
-    showOutsideMonth?: boolean;
-    onSelectedCellClick?: () => void;
-    onCellClick?: () => void;
-    classNameForDate?: (date: CalendarDate) => string;
-    ariaLabelForDate?: (date: CalendarDate) => string;
+    renderCell: (date: CalendarDate, currentMonth: CalendarDate, weekNumberString: string, ariaDescribedBy: string) => React.ReactNode;
 };
-export declare const CalendarGrid: ({ state, navigationDescription, onSelectedCellClick, onCellClick, showWeekNumbers, weekNumberHeader, showOutsideMonth, classNameForDate, ariaLabelForDate, ...rest }: CalendarGridProps) => React.JSX.Element;
+export declare const CalendarGrid: ({ state, startDate, navigationDescription, showWeekNumbers, weekNumberHeader, renderCell, }: CalendarGridProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/RangeCalendar.d.ts

@@ -0,0 +1,69 @@
+import { default as React } from 'react';
+import { AriaRangeCalendarProps } from '@react-aria/calendar';
+import { CalendarDate, DateDuration, DateValue } from '@internationalized/date';
+import { RangeValue } from '@react-types/shared';
+import { MappedDateValue } from '@react-types/datepicker';
+type BaseRangeCalendarProps<DateType extends DateValue> = {
+    /** Det valgte datoperioden. Null hvis ingen periode er valgt. */
+    value: RangeValue<MappedDateValue<DateType>> | null;
+    /** Callback som kalles når valgt periode endres. */
+    onChange?: (value: RangeValue<MappedDateValue<DateType>> | null) => void;
+    navigationDescription?: string;
+    style?: React.CSSProperties;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Tidligste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
+     *
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig fra og med den tiden som legges inn som minDate.
+     * Dato uten tid vil være gyldig hele minDate-dagen */
+    minDate?: DateValue;
+    /** Seneste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()).add({days: 1}) == i morgen i lokal tidssone
+     *
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig til og med den tiden som legges inn som maxDate.
+     * Dato uten tid vil være gyldig hele maxDate-dagen */
+    maxDate?: DateValue;
+    /** Slå på visning av ukenummere i kalenderen. Overskriften for ukenummer-kolonnen
+     * kan endres med prop-en 'weekNumberHeader'
+     * @default false */
+    showWeekNumbers?: boolean;
+    /** Overskrift som vises for ukenummer-kolonnen. Vises kun hvis 'showWeekNumbers' er true.
+     * @default 'uke' */
+    weekNumberHeader?: string;
+    /** Vis datoer som ligger utenfor den viste måneden.
+     * @example Hvis uken starter på onsdag vises de to siste datoene i forrige måned i ruten til mandagen og tirsdagen før.
+     * @default false */
+    showOutsideMonth?: boolean;
+    /** Brukes for å legge til klassenavn på spesifikke datoer i kalenderen.
+     *  Tar inn en dato og skal returnere klassenavnet som skal legges til den datoen.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'weekend' : ''
+     *
+     *  OBS: hvis stylingen er meningsbærende bør du bruke ariaLabelForDate i tillegg for å beskrive
+     *  meningen til skjermlesere o.l.
+     */
+    classNameForDate?: (date: CalendarDate) => string;
+    /** Legger til teksten som returneres på datoen i kalenderen sin aria-label.
+     *  Bør brukes sammen med classNameForDate hvis styling-endringene gjort der er meningsbærende.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'helgedag' : ''
+     */
+    ariaLabelForDate?: (date: CalendarDate) => string;
+    /** Callback-funksjon for når valideringen til datovelgeren endrer seg */
+    onValidate?: (isValid?: boolean) => void;
+    disabled?: boolean;
+    locale?: string;
+    calendarRef?: React.MutableRefObject<HTMLDivElement | null>;
+    /** Vis flere måneder samtidig i kalenderen.
+     * @default {months: 1}
+     * @example {months: 2}
+     */
+    visibleDuration?: Pick<DateDuration, 'months'>;
+};
+type ExtendedRangeCalendarProps<DateType extends DateValue> = Omit<AriaRangeCalendarProps<DateType>, keyof BaseRangeCalendarProps<DateType> | 'value' | 'label' | 'hideTimeZone' | 'placeholder' | 'placeholderValue' | 'defaultValue' | 'minValue' | 'maxValue'>;
+export type RangeCalendarProps<DateType extends DateValue> = BaseRangeCalendarProps<DateType> & ExtendedRangeCalendarProps<DateType>;
+export declare const RangeCalendar: <DateType extends DateValue>({ locale: localOverride, ...rest }: RangeCalendarProps<DateType>) => React.JSX.Element;
+export {};

package/dist/DatePicker/RangeCalendarCell.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { RangeCalendarState } from '@react-stately/calendar';
+import { CalendarDate } from '@internationalized/date';
+type RangeCalendarCellProps = {
+    state: RangeCalendarState;
+    date: CalendarDate;
+    currentMonth: CalendarDate;
+    weekNumberString: string;
+    showOutsideMonth?: boolean;
+    classNameForDate?: (date: CalendarDate) => string;
+    ariaLabelForDate?: (date: CalendarDate) => string;
+};
+export declare const RangeCalendarCell: ({ state, date, currentMonth, showOutsideMonth, weekNumberString, classNameForDate, ariaLabelForDate, ...rest }: RangeCalendarCellProps) => React.JSX.Element;
+export {};

package/dist/DatePicker/index.d.ts

@@ -1,4 +1,5 @@
 export * from './DateField';
 export * from './Calendar';
+export * from './RangeCalendar';
 export * from './DatePicker';
 export * from './NativeDatePicker';