@entur/datepicker 2.1.2 → 3.0.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-alpha.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@2.1.3...@entur/datepicker@3.0.0-alpha.1) (2022-09-06)
+
+### Bug Fixes
+
+- **timepicker:** fix bugs with disabled state in new TimePicker ([b82a9ca](https://bitbucket.org/enturas/design-system/commits/b82a9ca2bfb9611b07c8f244035a5309438555e2))
+
+### Features
+
+- **native time picker:** update native timepicker with small tweaks ([9d72bf7](https://bitbucket.org/enturas/design-system/commits/9d72bf79951aed9b236fb55a007fc96d019b9c46))
+- **timepicker:** add new timepicker component using react-aria ([cd90a09](https://bitbucket.org/enturas/design-system/commits/cd90a092de72ebf1cf1cef61147ada5f42fb67b4))
+- **timepicker utils:** add utility functions for converting between TimeValue and JS Date ([f5ee77e](https://bitbucket.org/enturas/design-system/commits/f5ee77e9b3666816bda82b7e0deceaf27672f536))
+
+### BREAKING CHANGES
+
+- **native time picker:** disableLabelAnimation prop has been removed (is always true now)
+- **timepicker:** This is a complete rewrite. Changes in the API will need to be accounted for when using this new
+  version
+
+# [3.0.0-alpha.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@2.1.3...@entur/datepicker@3.0.0-alpha.0) (2022-09-02)
+
+### Features
+
+- **native time picker:** update native timepicker with small tweaks ([9d72bf7](https://bitbucket.org/enturas/design-system/commits/9d72bf79951aed9b236fb55a007fc96d019b9c46))
+- **timepicker:** add new timepicker component using react-aria ([cd90a09](https://bitbucket.org/enturas/design-system/commits/cd90a092de72ebf1cf1cef61147ada5f42fb67b4))
+- **timepicker utils:** add utility functions for converting between TimeValue and JS Date ([f5ee77e](https://bitbucket.org/enturas/design-system/commits/f5ee77e9b3666816bda82b7e0deceaf27672f536))
+
+### BREAKING CHANGES
+
+- **native time picker:** disableLabelAnimation prop has been removed (is always true now)
+- **timepicker:** This is a complete rewrite. Changes in the API will need to be accounted for when using this new
+  version
+
+## [2.1.3](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@2.1.2...@entur/datepicker@2.1.3) (2022-08-31)
+
+**Note:** Version bump only for package @entur/datepicker
+
 ## [2.1.2](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@2.1.1...@entur/datepicker@2.1.2) (2022-08-24)
 
 **Note:** Version bump only for package @entur/datepicker

package/dist/{NativeTimePicker.d.ts → TimePicker/NativeTimePicker.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
 import { VariantType } from '@entur/form';
+import './NativeTimePicker.scss';
 export declare type NativeTimePickerProps = {
     /** Ekstra klassenavn */
     className?: string;
@@ -9,13 +10,7 @@ export declare type NativeTimePickerProps = {
     feedback?: string;
     /** Valideringsvariant */
     variant?: VariantType;
-    /** Plasserer labelen statisk på toppen av inputfeltet
-     * @default false
-     */
-    disableLabelAnimation?: boolean;
-    /** Tekst eller ikon som kommer før inputfelter
-     * @default <ClockIcon />
-     */
+    /** Tekst eller ikon som kommer før inputfelter */
     prepend?: React.ReactNode;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 export declare const NativeTimePicker: React.ForwardRefExoticComponent<{
@@ -27,12 +22,6 @@ export declare const NativeTimePicker: React.ForwardRefExoticComponent<{
     feedback?: string | undefined;
     /** Valideringsvariant */
     variant?: VariantType | undefined;
-    /** Plasserer labelen statisk på toppen av inputfeltet
-     * @default false
-     */
-    disableLabelAnimation?: boolean | undefined;
-    /** Tekst eller ikon som kommer før inputfelter
-     * @default <ClockIcon />
-     */
+    /** Tekst eller ikon som kommer før inputfelter */
     prepend?: React.ReactNode;
 } & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/TimePicker/TimePicker.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import type { TimePickerProps as ReactAriaTimePickerProps, TimeValue } from '@react-types/datepicker';
+import { VariantType } from '@entur/form';
+import './TimePicker.scss';
+export declare type TimePickerProps = {
+    /** Den valgte tiden. Tid i '@internationalized/date'-pakkens format */
+    selectedTime?: TimeValue;
+    /** Kalles når tiden endres. Tid i '@internationalized/date'-pakkens format */
+    onChange: (value: TimeValue) => void;
+    /** Label til TimePicker */
+    label: string;
+    /** Minutter som legges til eller trekkes fra ved klikk på pilene i TimePicker
+     * @default 30
+     */
+    minuteIncrementForArrowButtons?: number;
+    /** 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;
+    /** Aria-label for venstrepil-knappen som trekker fra tid
+     * @default `Trekk fra ${minuteIncrementForArrowButtons} minutter`
+     */
+    leftArrowButtonAriaLabel?: string;
+    /** Aria-label for høyrepil-knappen som legger til tid
+     * @default `Legg til ${minuteIncrementForArrowButtons} minutter`
+     */
+    rightArrowButtonAriaLabel?: string;
+    /** Varselmelding, som vil komme under TimePicker */
+    feedback?: string;
+    /** Valideringsvariant */
+    variant?: VariantType;
+    labelTooltip?: React.ReactNode;
+    disabled?: boolean;
+    /** Ekstra klassenavn */
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<ReactAriaTimePickerProps<TimeValue>, 'onChange' | 'label' | 'hideTimeZone' | 'placeholder'>;
+export declare const TimePicker: React.ForwardRefExoticComponent<{
+    /** Den valgte tiden. Tid i '@internationalized/date'-pakkens format */
+    selectedTime?: TimeValue | undefined;
+    /** Kalles når tiden endres. Tid i '@internationalized/date'-pakkens format */
+    onChange: (value: TimeValue) => void;
+    /** Label til TimePicker */
+    label: string;
+    /** Minutter som legges til eller trekkes fra ved klikk på pilene i TimePicker
+     * @default 30
+     */
+    minuteIncrementForArrowButtons?: number | undefined;
+    /** BCP47-språkkoden til locale-en du ønsker å bruke.
+     * @default Brukerenhetens selvvalgte locale
+     */
+    locale?: string | undefined;
+    /** Viser den gjeldende tidssonen hvis en er valgt
+     * @default false
+     */
+    showTimeZone?: boolean | undefined;
+    /** Aria-label for venstrepil-knappen som trekker fra tid
+     * @default `Trekk fra ${minuteIncrementForArrowButtons} minutter`
+     */
+    leftArrowButtonAriaLabel?: string | undefined;
+    /** Aria-label for høyrepil-knappen som legger til tid
+     * @default `Legg til ${minuteIncrementForArrowButtons} minutter`
+     */
+    rightArrowButtonAriaLabel?: string | undefined;
+    /** Varselmelding, som vil komme under TimePicker */
+    feedback?: string | undefined;
+    /** Valideringsvariant */
+    variant?: VariantType | undefined;
+    labelTooltip?: React.ReactNode;
+    disabled?: boolean | undefined;
+    /** Ekstra klassenavn */
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+} & Omit<ReactAriaTimePickerProps<TimeValue>, "onChange" | "label" | "hideTimeZone" | "placeholder"> & React.RefAttributes<HTMLDivElement>>;

package/dist/TimePicker/TimePickerArrowButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type TimePickerArrowButtonProps = {
+    direction: 'left' | 'right';
+} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export declare const TimePickerArrowButton: React.FC<TimePickerArrowButtonProps>;
+export {};

package/dist/TimePicker/TimeSegment.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DateSegment, DateFieldState } from '@react-stately/datepicker';
+declare type TimeSegmentProps = {
+    segment: DateSegment;
+    state: DateFieldState;
+    isAmPm: boolean;
+    index: number;
+};
+export declare const TimeSegment: ({ segment, state, isAmPm, index, }: TimeSegmentProps) => JSX.Element;
+export {};

package/dist/TimePicker/index.d.ts

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

package/dist/TimePicker/utils.d.ts

@@ -0,0 +1,18 @@
+import { ZonedDateTime, CalendarDateTime, Time } from '@internationalized/date';
+import { TimeValue } from '@react-types/datepicker';
+/**
+ * Tar inn et JS Date-objekt og returnerer et av TimeValue-objektene fra @internationalized/date-pakken
+ * @param {Date} date JS Date-objekt som ønskes konvertert til et TimeValue-objekt
+ * @param {boolean} noDateOnlyTime Hvis datoen er irrelevant kan denne settes til true, da får man et Time-objekt uten dato tilbake
+ * @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
+ * @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
+ * @returns {Time | CalendarDateTime | ZonedDateTime} et av TimeValue-objektene med verdier fra date
+ */
+export declare const nativeDateToTimeValue: (date: Date, noDateOnlyTime?: boolean, timeZone?: string | undefined, offset?: number | undefined) => Time | CalendarDateTime | ZonedDateTime;
+/**
+ * Tar inn et av TimeValue-objektene fra @internationalized/date-pakken og returnerer et JS Date-objekt
+ * @param {TimeValue} time Et tidspunkt på TimeValue-formatet som ønsket konvertert til et JS Date-objekt
+ * @param {string} timeZoneForCalendarDateTime Tidssonen time er i. Fungerer kun med typen er CalendarDateTime
+ * @returns {Date} et Date-objekt med verdier fra time
+ */
+export declare const timeValueToNativeDate: (time: TimeValue, timeZoneForCalendarDateTime?: string | undefined) => Date;