@entur/datepicker 4.0.0-beta.4 → 4.0.0

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.10](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.9...@entur/datepicker@3.0.10) (2023-01-19)
+
+**Note:** Version bump only for package @entur/datepicker
+
+## [3.0.9](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.6...@entur/datepicker@3.0.9) (2022-12-09)
+
+**Note:** Version bump only for package @entur/datepicker
+
+## [3.0.8](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.7...@entur/datepicker@3.0.8) (2022-11-24)
+
+**Note:** Version bump only for package @entur/datepicker
+
+## [3.0.7](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.6...@entur/datepicker@3.0.7) (2022-10-31)
+
+**Note:** Version bump only for package @entur/datepicker
+
+## [3.0.6](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.5...@entur/datepicker@3.0.6) (2022-10-31)
+
+**Note:** Version bump only for package @entur/datepicker
+
+## [3.0.5](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.4...@entur/datepicker@3.0.5) (2022-10-31)
+
+**Note:** Version bump only for package @entur/datepicker
+
+## [3.0.4](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.3...@entur/datepicker@3.0.4) (2022-10-20)
+
+**Note:** Version bump only for package @entur/datepicker
+
+## [3.0.3](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.2...@entur/datepicker@3.0.3) (2022-10-20)
+
+# [4.0.0-RC.3](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-RC.2...@entur/datepicker@4.0.0-RC.3) (2022-11-22)
+
+**Note:** Version bump only for package @entur/datepicker
+
+# [4.0.0-RC.2](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-RC.1...@entur/datepicker@4.0.0-RC.2) (2022-11-22)
+
+### Bug Fixes
+
+- **datepicker:** fix modal not being scrollable when larger than screen due to zoom ([0a75d57](https://bitbucket.org/enturas/design-system/commits/0a75d577b95521fd12fadb0f3e0258687aaba1cb))
+
+# [4.0.0-RC.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-RC.0...@entur/datepicker@4.0.0-RC.1) (2022-11-21)
+
+**Note:** Version bump only for package @entur/datepicker
+
+# [4.0.0-RC.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.5...@entur/datepicker@4.0.0-RC.0) (2022-11-21)
+
+**Note:** Version bump only for package @entur/datepicker
+
+# [4.0.0-beta.5](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.3...@entur/datepicker@4.0.0-beta.5) (2022-11-11)
+
+### Bug Fixes
+
+- **DatePicker:** change DatePickerProps to DatePickerBeta to avoid ts-errors when bundeling ([f1efb0a](https://bitbucket.org/enturas/design-system/commits/f1efb0a9b509cfcf6975e9f26034fc5b5a4bba97))
+
 # [4.0.0-beta.4](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.3...@entur/datepicker@4.0.0-beta.4) (2022-11-11)
 
 ### Bug Fixes

package/dist/DatePicker/{beta/Calendar.d.ts → Calendar.d.ts}

@@ -6,6 +6,7 @@ declare type CalendarProps = {
     onChange: (SelectedDate: DateValue) => void;
     navigationDescription?: string;
     style?: React.CSSProperties;
+    onSelectedCellClick?: () => void;
     [key: string]: any;
 };
 export declare const Calendar: React.ForwardRefExoticComponent<Pick<CalendarProps, keyof CalendarProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/DatePicker/{beta/CalendarCell.d.ts → CalendarCell.d.ts}

@@ -4,6 +4,7 @@ import { CalendarDate } from '@internationalized/date';
 declare type CalendarCellProps = {
     state: CalendarState;
     date: CalendarDate;
+    onSelectedCellClick?: () => void;
 };
-export declare const CalendarCell: ({ state, date, ...rest }: CalendarCellProps) => JSX.Element;
+export declare const CalendarCell: ({ state, date, onSelectedCellClick, ...rest }: CalendarCellProps) => JSX.Element;
 export {};

package/dist/DatePicker/{beta/CalendarGrid.d.ts → CalendarGrid.d.ts}

@@ -3,6 +3,7 @@ import { CalendarState } from '@react-stately/calendar';
 declare type CalendarGridProps = {
     state: CalendarState;
     navigationDescription?: string;
+    onSelectedCellClick?: () => void;
 };
-export declare const CalendarGrid: ({ state, navigationDescription, ...rest }: CalendarGridProps) => JSX.Element;
+export declare const CalendarGrid: ({ state, navigationDescription, onSelectedCellClick, ...rest }: CalendarGridProps) => JSX.Element;
 export {};

package/dist/DatePicker/{beta/DateField.d.ts → DateField.d.ts}

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { SpectrumDateFieldProps, DateValue } from '@react-types/datepicker';
-import type { CalendarDate } from '@internationalized/date';
 import { VariantType } from '@entur/form';
 import './DateField.scss';
 export declare type DateFieldProps = {
@@ -21,9 +20,9 @@ export declare type DateFieldProps = {
     showTime?: boolean;
     /** Tidligste gyldige datovalg.
      * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone */
-    minValue?: CalendarDate;
+    minDate?: DateValue;
     /** Seneste gyldige datovalg. (se minValue) */
-    maxValue?: CalendarDate;
+    maxDate?: DateValue;
     /** Varselmelding, som vil komme under TimePicker */
     feedback?: string;
     /** Valideringsvariant */

package/dist/DatePicker/DatePicker.d.ts

@@ -1,192 +1,65 @@
 import React from 'react';
-import { ReactDatePickerProps } from 'react-datepicker';
-import { Locale } from 'date-fns';
-import { VariantType } from '@entur/form';
+import type { DateValue, AriaDatePickerProps } from '@react-types/datepicker';
+import type { VariantType } from '@entur/form';
 import './DatePicker.scss';
-import 'react-datepicker/dist/react-datepicker.css';
 export declare type DatePickerProps = {
-    /** Hva som er den valgte datoen */
-    selectedDate: Date | null;
-    /** Kalles når datoen/tiden endres */
-    onChange: (date: Date | null, event: React.SyntheticEvent<any, Event> | undefined) => void;
-    /**
-     * Kalles når en tast trykkes i inputfeltet
-     */
-    onKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Datoformater som skal støttes. Første i listen er formatet alt input omgjøres til.
-     * Format-valg tilgjengelig her: https://date-fns.org/v2.28.0/docs/format
-     * OBS: Noen kombinasjoner av datoformater kan gi rar og uønsket oppførsel,
-     * test nøye ved endring
-     * @default "['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy']"
-     */
-    dateFormats?: string[];
-    /**
-     * Locale fra date-fns som brukes av Datepicker-en
-     * @default nb
-     */
-    locale?: Locale;
-    /** Placeholder om ingen dato er valgt
-     * @default "dd.mm.yyyy"
-     */
-    placeholder?: string;
-    /** Ekstra klassenavn */
-    className?: string;
-    /** Label over DatePicker */
+    /** Den valgte datoen. Dato i '@internationalized/date'-pakkens format */
+    selectedDate: DateValue;
+    /** Kalles når tiden endres. Dato i '@internationalized/date'-pakkens format */
+    onChange: (date: DateValue) => void;
+    /** Ledetekst for inputfeltet til DatePicker */
     label: string;
-    /**
-     * Varselmelding, som vil komme under DatePicker
+    /** BCP47-språkkoden til locale-en du ønsker å bruke.
+     * @default Brukerenhetens selvvalgte locale
      */
-    feedback?: string;
-    /** Valideringsvariant
+    locale?: string;
+    /** Viser den gjeldende tidssonen hvis en er valgt (krever at tid også vises)
+     * @default false
      */
+    showTimeZone?: boolean;
+    /** Viser tidspunkt i tillegg til dato.
+     * OBS: selectedDate må være av typen CalendarDateTime eller ZonedDateTime
+     */
+    showTime?: boolean;
+    /** Tidligste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone. */
+    minDate?: DateValue;
+    /** Seneste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone
+     *
+     * OBS: Hvis du bruker dato med tid vil det være til, men ikke med denne datoen */
+    maxDate?: DateValue;
+    /** Funksjon som tar inn en dato og sier om den er utilgjengelig.
+     * Eks. (date) => isWeekend(date, 'no-NO') == helgedager er ikke tilgjengelig */
+    isDateUnavailable?: (date: DateValue) => boolean;
+    /** Varselmelding, som vil komme under DatePicker sitt inputfelt */
+    feedback?: string;
+    /** Valideringsvariant */
     variant?: VariantType;
-    /** Varselmelding for når datoen er på feil format
+    /** Varselmelding som forteller om ugyldig dato
      * @default "Ugyldig dato"
      */
     validationFeedback?: string;
-    /** Valideringsvariant for melding om feil datoformat
+    /** Valideringsvariant for melding om ugyldig dato
      * @default "error"
      */
     validationVariant?: VariantType;
-    style?: React.CSSProperties;
-    /** Plasserer labelen statisk på toppen av inputfeltet
-     * @default false
-     */
-    disableLabelAnimation?: boolean;
-    /** Tekst eller ikon som kommer før inputfelter
-     * @default <DateIcon />
-     */
-    prepend?: React.ReactNode;
-    /**
-     * Tekst som vises når kalender ikke er åpen på «Åpne/Lukk kalender»-knappen ved hover
-     */
-    calendarButtonTooltipOpen?: string;
-    /**
-     * Tekst som vises når kalender er åpen på «Åpne/Lukk kalender»-knappen ved hover
-     */
-    calendarButtonTooltipClose?: string;
-    /** Skjuler knapp for åpning av kalender
-     * @default false
-     */
-    hideCalendarButton?: boolean;
-    /** Skjuler tilbakemeldingsteksten ved feil dato-input
-     * @default false
-     */
-    hideValidation?: boolean;
-    /** Skjuler kalender-GUI-et
-     * @default false
-     */
-    hideCalendar?: boolean;
-    /** Viser kun kalender-popover-en
-     * @default false
-     */
-    inline?: boolean;
-    /** Skjermlesertekst for forrige måned-knapen
-     * @default "Forrige måned"
-     */
-    previousMonthAriaLabel?: string;
-    /** Skjermlesertekst for neste måned-knapen
-     * @default "Neste måned"
-     */
-    nextMonthAriaLabel?: string;
-    /**
-     * Skjermlesertekst som leses før dato i kalenderGUI-et
-     * @default "Velg"
-     */
-    chooseDayAriaLabelPrefix?: string;
-    'data-cy'?: any;
-} & Omit<ReactDatePickerProps, 'selected' | 'customInput' | 'onChangeRaw' | 'dateFormat' | 'locale' | 'previousMonthAriaLabel' | 'nextMonthAriaLabel'>;
-export declare const DatePicker: React.ForwardRefExoticComponent<{
-    /** Hva som er den valgte datoen */
-    selectedDate: Date | null;
-    /** Kalles når datoen/tiden endres */
-    onChange: (date: Date | null, event: React.SyntheticEvent<any, Event> | undefined) => void;
-    /**
-     * Kalles når en tast trykkes i inputfeltet
+    disabled?: boolean;
+    /** Hvis true vil kalenderen alltid vises i en popover når den åpnes
+     *  @default false
      */
-    onKeyDown?: ((event: KeyboardEvent) => void) | undefined;
-    /**
-     * Datoformater som skal støttes. Første i listen er formatet alt input omgjøres til.
-     * Format-valg tilgjengelig her: https://date-fns.org/v2.28.0/docs/format
-     * OBS: Noen kombinasjoner av datoformater kan gi rar og uønsket oppførsel,
-     * test nøye ved endring
-     * @default "['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy']"
+    disableModal?: boolean;
+    /** Maxbredden til viewport-en for at modal skal vises
+     *  @default 1000
      */
-    dateFormats?: string[] | undefined;
-    /**
-     * Locale fra date-fns som brukes av Datepicker-en
-     * @default nb
+    modalTreshold?: number;
+    labelTooltip?: React.ReactNode;
+    /** Skjermlesertest som forklarer navigasjon i kalenderen. Oversettes automatisk for engelsk locale, men ikke andre språk.
+     * @default 'Bruk piltastene til å navigere mellom datoer'
      */
-    locale?: globalThis.Locale | undefined;
-    /** Placeholder om ingen dato er valgt
-     * @default "dd.mm.yyyy"
-     */
-    placeholder?: string | undefined;
+    navigationDescription?: string;
     /** Ekstra klassenavn */
-    className?: string | undefined;
-    /** Label over DatePicker */
-    label: string;
-    /**
-     * Varselmelding, som vil komme under DatePicker
-     */
-    feedback?: string | undefined;
-    /** Valideringsvariant
-     */
-    variant?: VariantType | undefined;
-    /** Varselmelding for når datoen er på feil format
-     * @default "Ugyldig dato"
-     */
-    validationFeedback?: string | undefined;
-    /** Valideringsvariant for melding om feil datoformat
-     * @default "error"
-     */
-    validationVariant?: VariantType | undefined;
-    style?: React.CSSProperties | undefined;
-    /** Plasserer labelen statisk på toppen av inputfeltet
-     * @default false
-     */
-    disableLabelAnimation?: boolean | undefined;
-    /** Tekst eller ikon som kommer før inputfelter
-     * @default <DateIcon />
-     */
-    prepend?: React.ReactNode;
-    /**
-     * Tekst som vises når kalender ikke er åpen på «Åpne/Lukk kalender»-knappen ved hover
-     */
-    calendarButtonTooltipOpen?: string | undefined;
-    /**
-     * Tekst som vises når kalender er åpen på «Åpne/Lukk kalender»-knappen ved hover
-     */
-    calendarButtonTooltipClose?: string | undefined;
-    /** Skjuler knapp for åpning av kalender
-     * @default false
-     */
-    hideCalendarButton?: boolean | undefined;
-    /** Skjuler tilbakemeldingsteksten ved feil dato-input
-     * @default false
-     */
-    hideValidation?: boolean | undefined;
-    /** Skjuler kalender-GUI-et
-     * @default false
-     */
-    hideCalendar?: boolean | undefined;
-    /** Viser kun kalender-popover-en
-     * @default false
-     */
-    inline?: boolean | undefined;
-    /** Skjermlesertekst for forrige måned-knapen
-     * @default "Forrige måned"
-     */
-    previousMonthAriaLabel?: string | undefined;
-    /** Skjermlesertekst for neste måned-knapen
-     * @default "Neste måned"
-     */
-    nextMonthAriaLabel?: string | undefined;
-    /**
-     * Skjermlesertekst som leses før dato i kalenderGUI-et
-     * @default "Velg"
-     */
-    chooseDayAriaLabelPrefix?: string | undefined;
-    'data-cy'?: any;
-} & Omit<ReactDatePickerProps<never, undefined>, "selected" | "customInput" | "onChangeRaw" | "dateFormat" | "locale" | "previousMonthAriaLabel" | "nextMonthAriaLabel"> & React.RefAttributes<HTMLInputElement>>;
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<AriaDatePickerProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
+export declare const DatePicker: ({ selectedDate: value, onChange, locale, disabled: isDisabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate: minValue, maxDate: maxValue, modalTreshold, ...rest }: DatePickerProps) => JSX.Element;

package/dist/DatePicker/index.d.ts

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

package/dist/TimePicker/TimePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TimePickerProps as ReactAriaTimePickerProps, TimeValue } from '@react-types/datepicker';
+import type { TimeValue, AriaTimeFieldProps } from '@react-types/datepicker';
 import { VariantType } from '@entur/form';
 import './TimePicker.scss';
 export declare type TimePickerProps = {
@@ -38,7 +38,7 @@ export declare type TimePickerProps = {
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
-} & Omit<ReactAriaTimePickerProps<TimeValue>, 'onChange' | 'label' | 'hideTimeZone' | 'placeholder'>;
+} & Omit<AriaTimeFieldProps<TimeValue>, 'onChange' | 'label' | 'hideTimeZone' | 'placeholder'>;
 export declare const TimePicker: React.ForwardRefExoticComponent<{
     /** Den valgte tiden. Tid i '@internationalized/date'-pakkens format */
     selectedTime: TimeValue | null;
@@ -75,4 +75,4 @@ export declare const TimePicker: React.ForwardRefExoticComponent<{
     /** Ekstra klassenavn */
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
-} & Omit<ReactAriaTimePickerProps<TimeValue>, "onChange" | "label" | "hideTimeZone" | "placeholder"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<AriaTimeFieldProps<TimeValue>, "onChange" | "label" | "hideTimeZone" | "placeholder"> & React.RefAttributes<HTMLDivElement>>;