@entur/datepicker 0.11.6 → 1.0.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@0.11.6...@entur/datepicker@1.0.0) (2022-04-13)
+
+### Features
+
+- **datepicker:** add custom header to datepicker ([6c9c863](https://bitbucket.org/enturas/design-system/commits/6c9c8636a4eec59b86db928aceb9e4e01c1fa07e))
+- **datepicker:** rewrite custom input in datepicker to use TextField component ([3cc2e51](https://bitbucket.org/enturas/design-system/commits/3cc2e51948080f21b0ec343c06e886b8d285ffbc))
+- **datepicker:** rewrite styling for datepicker calendar popover ([3f10c85](https://bitbucket.org/enturas/design-system/commits/3f10c85aceb02f46d93035ee6b7a9f9e8b26d024))
+- **datepicker:** rewrite validation logic for datepicker ([db25f30](https://bitbucket.org/enturas/design-system/commits/db25f30f009c32018d3707ac53cca2c6f30e9f0a))
+
+### BREAKING CHANGES
+
+- **datepicker:** - selectedDate is now a required prop
+
+* Complete rewrite of component may have introduced unnoticed bugs
+
+- **datepicker:** - Calendar button design has changed
+
+* Complete rewrite of component may have introduced unnoticed bugs
+
+- **datepicker:** Complete rewrite of component may have introduced unnoticed bugs
+- **datepicker:** Complete rewrite of component may have introduced unnoticed bugs
+
 ## [0.11.6](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@0.11.5...@entur/datepicker@0.11.6) (2022-03-24)
 
 ### Bug Fixes

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

@@ -2,15 +2,24 @@ import React from 'react';
 import { ReactDatePickerProps } from 'react-datepicker';
 import { 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;
+    selectedDate: Date | null;
     /** Kalles når datoen/tiden endres */
     onChange: (date: Date | null, event: React.SyntheticEvent<any, Event> | undefined) => void;
     /**
-     * Kalles når innholdet i inputfeltet endres
+     * Kalles når en tast trykkes i inputfeltet
      */
-    onChangeInput?: (value: string) => void;
+    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[];
     /** Placeholder om ingen dato er valgt
      * @default "dd.mm.yyyy"
      */
@@ -43,6 +52,10 @@ export declare type DatePickerProps = {
      * @default <DateIcon />
      */
     prepend?: React.ReactNode;
+    /**
+     * Tekst som vises ved hover på «Åpne kalender»-knappen
+     */
+    calendarButtonTooltip?: string;
     /** Skjuler knapp for åpning av kalender
      * @default false
      */
@@ -50,22 +63,34 @@ export declare type DatePickerProps = {
     /** Skjuler tilbakemeldingsteksten ved feil dato-input
      * @default false
      */
-    hideValidationFeedback?: boolean;
+    hideValidation?: boolean;
     /** Skjuler kalender-GUI-et
      * @default false
      */
     hideCalendar?: boolean;
+    /** Viser kun kalender-popover-en
+     * @default false
+     */
+    inline?: boolean;
     'data-cy'?: any;
-} & Omit<ReactDatePickerProps, 'selected' | 'customInput' | 'onChangeRaw' | 'onChange'>;
+} & Omit<ReactDatePickerProps, 'selected' | 'customInput' | 'onChangeRaw' | 'dateFormat'>;
 export declare const DatePicker: React.ForwardRefExoticComponent<{
     /** Hva som er den valgte datoen */
-    selectedDate?: Date | undefined;
+    selectedDate: Date | null;
     /** Kalles når datoen/tiden endres */
     onChange: (date: Date | null, event: React.SyntheticEvent<any, Event> | undefined) => void;
     /**
-     * Kalles når innholdet i inputfeltet endres
+     * Kalles når en tast trykkes i inputfeltet
      */
-    onChangeInput?: ((value: string) => void) | undefined;
+    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']"
+     */
+    dateFormats?: string[] | undefined;
     /** Placeholder om ingen dato er valgt
      * @default "dd.mm.yyyy"
      */
@@ -98,6 +123,10 @@ export declare const DatePicker: React.ForwardRefExoticComponent<{
      * @default <DateIcon />
      */
     prepend?: React.ReactNode;
+    /**
+     * Tekst som vises ved hover på «Åpne kalender»-knappen
+     */
+    calendarButtonTooltip?: string | undefined;
     /** Skjuler knapp for åpning av kalender
      * @default false
      */
@@ -105,10 +134,14 @@ export declare const DatePicker: React.ForwardRefExoticComponent<{
     /** Skjuler tilbakemeldingsteksten ved feil dato-input
      * @default false
      */
-    hideValidationFeedback?: boolean | undefined;
+    hideValidation?: boolean | undefined;
     /** Skjuler kalender-GUI-et
      * @default false
      */
     hideCalendar?: boolean | undefined;
+    /** Viser kun kalender-popover-en
+     * @default false
+     */
+    inline?: boolean | undefined;
     'data-cy'?: any;
-} & Omit<ReactDatePickerProps<never>, "selected" | "customInput" | "onChangeRaw" | "onChange"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<ReactDatePickerProps<never, undefined>, "selected" | "customInput" | "onChangeRaw" | "dateFormat"> & React.RefAttributes<HTMLInputElement>>;

package/dist/DatePicker/DatePickerHeader.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
+export declare const DatePickerHeader: ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }: Partial<ReactDatePickerCustomHeaderProps>) => JSX.Element;

package/dist/DatePicker/DatePickerInput.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { VariantType } from '@entur/form';
+declare type DatePickerInputProps = {
+    style?: React.CSSProperties;
+    label: string;
+    inputPlaceholder: string;
+    prepend?: React.ReactNode;
+    feedback?: string;
+    variant?: VariantType;
+    disabled?: boolean;
+    disableLabelAnimation?: boolean;
+    calendarButtonTooltip: string;
+    hideCalendarButton?: boolean;
+    inputRef: React.RefObject<HTMLInputElement>;
+    forwardRef: React.ForwardedRef<HTMLInputElement>;
+    toggleCalendarGUI: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLInputElement>;
+    onKeyDownInput: (event: KeyboardEvent) => any;
+    onBlurInput: (event: FocusEvent) => any;
+    onFocus: undefined;
+    selectedDate: Date | null;
+    placeholder?: null;
+};
+export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/DatePicker/index.d.ts

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

package/dist/TimePicker.d.ts

@@ -65,4 +65,4 @@ export declare const TimePicker: React.ForwardRefExoticComponent<{
      * @default Legger til 30 minutter av den valgte tiden
      */
     onRightArrowClick?: ((selectedTime?: Date | null | undefined, e?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
-} & ReactDatePickerProps<never> & React.RefAttributes<HTMLDivElement>>;
+} & ReactDatePickerProps<never, undefined> & React.RefAttributes<HTMLDivElement>>;