@entur/datepicker 3.0.7 → 4.0.0-RC.1

package/CHANGELOG.md

@@ -3,25 +3,77 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.0.7](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.6...@entur/datepicker@3.0.7) (2022-10-31)
+# [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
 
-## [3.0.6](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.5...@entur/datepicker@3.0.6) (2022-10-31)
+# [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
 
-## [3.0.5](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.4...@entur/datepicker@3.0.5) (2022-10-31)
+# [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)
 
-**Note:** Version bump only for package @entur/datepicker
+### Bug Fixes
 
-## [3.0.4](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.3...@entur/datepicker@3.0.4) (2022-10-20)
+- **DatePicker:** change DatePickerProps to DatePickerBeta to avoid ts-errors when bundeling ([f1efb0a](https://bitbucket.org/enturas/design-system/commits/f1efb0a9b509cfcf6975e9f26034fc5b5a4bba97))
 
-**Note:** Version bump only for package @entur/datepicker
+# [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)
 
-## [3.0.3](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.2...@entur/datepicker@3.0.3) (2022-10-20)
+### Bug Fixes
 
-**Note:** Version bump only for package @entur/datepicker
+- **DatePicker:** change DatePickerProps to DatePickerBeta to avoid ts-errors when bundeling ([f1efb0a](https://bitbucket.org/enturas/design-system/commits/f1efb0a9b509cfcf6975e9f26034fc5b5a4bba97))
+
+# [4.0.0-beta.3](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.2...@entur/datepicker@4.0.0-beta.3) (2022-11-08)
+
+### Bug Fixes
+
+- **datepicker:** change min- and maxValue to min- and maxDate ([f5bfb88](https://bitbucket.org/enturas/design-system/commits/f5bfb885bbbd253f150756f36550b07ed848fdc3))
+- **datepicker:** fix page jumping when opening datepicker popover ([4629f2c](https://bitbucket.org/enturas/design-system/commits/4629f2c6f134f622cab7546b3f6d3980c9ed913a))
+
+# [4.0.0-beta.2](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.1...@entur/datepicker@4.0.0-beta.2) (2022-10-31)
+
+### Features
+
+- **datepicker utils:** update utils to work with CalendarDate values ([d5993f2](https://bitbucket.org/enturas/design-system/commits/d5993f22c2abcc53e932cc58e960accb979182c3))
+
+# [4.0.0-beta.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.0...@entur/datepicker@4.0.0-beta.1) (2022-10-28)
+
+### Bug Fixes
+
+- **datepicker:** hide next and previous month button when disabled ([1ae7037](https://bitbucket.org/enturas/design-system/commits/1ae70371fb5622b1fbfc593c9c0becd83f665531))
+
+# [4.0.0-beta.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-alpha.1...@entur/datepicker@4.0.0-beta.0) (2022-10-27)
+
+### Bug Fixes
+
+- **datepicker:** final touches to datepicker and supcomponents ([8c21915](https://bitbucket.org/enturas/design-system/commits/8c21915cea21346444bfdf2b66bfe10de1c9fcba))
+
+# [4.0.0-alpha.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-alpha.0...@entur/datepicker@4.0.0-alpha.1) (2022-10-26)
+
+### Bug Fixes
+
+- **datepicker:** fix locale issues ([8c325b8](https://bitbucket.org/enturas/design-system/commits/8c325b86088feb9f8a7d4ad538a18ec6d78e202d))
+
+### Features
+
+- **datepicker:** add i18y-wrapper to components for locale ([aed14fb](https://bitbucket.org/enturas/design-system/commits/aed14fb32e789159b4021c8b740a8101b83228fa))
+- **datepicker:** add modal view for calendar when using small screen widths ([05d9325](https://bitbucket.org/enturas/design-system/commits/05d9325a83dbc8d7d2e62050e7d6bbecbe2f665e))
+
+# [4.0.0-alpha.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.2...@entur/datepicker@4.0.0-alpha.0) (2022-10-20)
+
+### Bug Fixes
+
+- **locale:** wip fix for locale not working ([0ff0912](https://bitbucket.org/enturas/design-system/commits/0ff0912405e015abb50c9cb6103c5f9827d8bd7b))
+
+### Features
+
+- **calendar:** add new calendar component ([6cd168c](https://bitbucket.org/enturas/design-system/commits/6cd168caf3d2e634fc2248abe728ab6a91e44ef8))
+- **date field:** add new date field component ([3f1348d](https://bitbucket.org/enturas/design-system/commits/3f1348d53e0d7dc5381f613633791bcd7565689e))
+- **datepicker:** add new datepicker component ([7d53075](https://bitbucket.org/enturas/design-system/commits/7d5307509bfc3f7d6bf00d47be80eef6550404fb))
+
+### BREAKING CHANGES
+
+- **datepicker:** rewrite
 
 ## [3.0.2](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.1...@entur/datepicker@3.0.2) (2022-10-12)
 

package/dist/DatePicker/Calendar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DateValue } from '@internationalized/date';
+import './Calendar.scss';
+declare type CalendarProps = {
+    selectedDate: DateValue;
+    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>>;
+export {};

package/dist/DatePicker/CalendarCell.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CalendarState } from '@react-stately/calendar';
+import { CalendarDate } from '@internationalized/date';
+declare type CalendarCellProps = {
+    state: CalendarState;
+    date: CalendarDate;
+    onSelectedCellClick?: () => void;
+};
+export declare const CalendarCell: ({ state, date, onSelectedCellClick, ...rest }: CalendarCellProps) => JSX.Element;
+export {};

package/dist/DatePicker/CalendarGrid.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CalendarState } from '@react-stately/calendar';
+declare type CalendarGridProps = {
+    state: CalendarState;
+    navigationDescription?: string;
+    onSelectedCellClick?: () => void;
+};
+export declare const CalendarGrid: ({ state, navigationDescription, onSelectedCellClick, ...rest }: CalendarGridProps) => JSX.Element;
+export {};

package/dist/DatePicker/DateField.d.ts

@@ -0,0 +1,46 @@
+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 = {
+    /** Den valgte tiden. Tid i '@internationalized/date'-pakkens format */
+    selectedDate: DateValue | null;
+    /** Kalles når tiden endres. Tid i '@internationalized/date'-pakkens format */
+    onChange: (value: DateValue) => void;
+    /** Label til TimePicker */
+    label: string;
+    /** BCP47-språkkoden til locale-en du ønsker å bruke.
+     * @default Brukerenhetens selvvalgte locale
+     */
+    locale?: string;
+    /** Viser den gjeldende tidssonen hvis en er valgt
+     * @default false
+     */
+    showTimeZone?: boolean;
+    showTime?: boolean;
+    /** Tidligste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone */
+    minValue?: CalendarDate;
+    /** Seneste gyldige datovalg. (se minValue) */
+    maxValue?: CalendarDate;
+    /** Varselmelding, som vil komme under TimePicker */
+    feedback?: string;
+    /** Valideringsvariant */
+    variant?: VariantType;
+    /** Varselmelding som forteller om ugyldig dato
+     * @default "Ugyldig dato"
+     */
+    validationFeedback?: string;
+    /** Valideringsvariant for melding om ugyldig dato
+     * @default "error"
+     */
+    validationVariant?: VariantType;
+    labelTooltip?: React.ReactNode;
+    disabled?: boolean;
+    /** Ekstra klassenavn */
+    className?: string;
+    style?: React.CSSProperties;
+    [key: string]: any;
+} & Omit<SpectrumDateFieldProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
+export declare const DateField: React.ForwardRefExoticComponent<Pick<DateFieldProps, string | number> & React.RefAttributes<HTMLDivElement>>;

package/dist/DatePicker/DatePicker.d.ts

@@ -1,192 +1,66 @@
 import React from 'react';
-import { ReactDatePickerProps } from 'react-datepicker';
-import { Locale } from 'date-fns';
-import { VariantType } from '@entur/form';
+import type { CalendarDate } from '@internationalized/date';
+import type { DateValue, SpectrumDatePickerProps } 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?: CalendarDate;
+    /** 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?: CalendarDate;
+    /** 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<SpectrumDatePickerProps<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 +1,3 @@
+export * from './DateField';
+export * from './Calendar';
 export * from './DatePicker';

package/dist/TimePicker/index.d.ts

@@ -1,3 +1,3 @@
 export * from './TimePicker';
 export * from './NativeTimePicker';
-export * from './utils';
+export * from '../shared/utils';