@entur/datepicker 4.0.0-beta.5 → 4.0.1

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0...@entur/datepicker@4.0.1) (2023-02-02)
+
+**Note:** Version bump only for package @entur/datepicker
+
+
+
+
+
+## [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

package/LICENSE.md

@@ -208,74 +208,3 @@ The European Commission may update this Appendix to later versions of the above
 a new version of the EUPL, as long as they provide the rights granted in Article 2 of this Licence and protect the
 covered Source Code from exclusive appropriation.
 All other changes or additions to this Appendix require the production of a new EUPL version.
-
-# Standard Nucleo License
-
-- Last updated: July 2, 2018
-- [Github repo](https://github.com/NucleoApp/license-standard)
-
-By purchasing the Nucleo icons, you have the right to:
-
-- Use the Nucleo icons in unlimited personal and commercial projects, for yourself or a client, with no limitation to the number of impressions for your end product.
-- Use the Nucleo icons in applications, software, UI/UX design, print, and logo design.
-- Modify the Nucleo icons to create your icon variations.
-
-You don't have the right to:
-
-- Sublicense, resell, share, transfer, or otherwise redistribute the Nucleo icons (even for free or within a more complex downloadable file).
-- Use the Nucleo icons in a product that is directly competitive with Nucleo.
-
-## Limitations & Extended license
-
-- **For each project, you can use a maximum of 250 Nucleo icons** (intended per unique style: for example, if you're using the same icon in both the outline and glyph styles, or in 2 different sizes, you're using 2 icons). You can lift this limit by purchasing an Extended License.
-- If you're using Nucleo icons in templates, themes or plugins offered for sale, you can use a maximum of 100 Nucleo icons. You can lift this limit by purchasing an Extended License.
-- If you're using the Nucleo icons in open source projects, you can use a maximum of 100 Nucleo icons.
-- If you're interested in using the Nucleo icons in items offered for sale (or for free) where the Nucleo icons contribute to the core value of the product being sold/shared, you will need an Extended License (e.g., a CMS where users can browse the Nucleo icons and pick the ones to include in their design).
-
-[Learn more about the Extended License](https://nucleoapp.com/extended-license)
-
-## Freelance Projects & Contracted work
-
-If you're working on a project for a client, you can share with your client a maximum of 250 Nucleo icons per project. You can't share the Nucleo source files unless the client purchases a license.
-
-If the Nucleo icons contribute to the core value of the product being sold/shared, or if you (or your client) wish to include more than 250 icons in the project, the [Extended License](https://nucleoapp.com/extended-license) is required.
-
-## Templates, Themes, UI Kits & Plugins
-
-If you're using Nucleo icons in templates, themes or plugins offered for sale (e.g., UI kits, Wordpress Themes, HTML/CSS Templates), **you can include up to 100 icons in the downloadable source files**. This limitation applies to the icon fonts as well.
-
-The downloadable source file has to include the [Nucleo Copyright Notice](https://nucleoapp.com/copyright-notice).
-
-If the Nucleo icons contribute to the core value of the template, theme or plugin sold (e.g., a theme builder where users can browse Nucleo icons and pick the ones to include in their design), or if you wish to use more than 100 Nucleo icons, you will need an [Extended License](https://nucleoapp.com/extended-license).
-
-It's not possible to purchase an Extended License if the template, theme or plugin is distributed for free.
-
-If you're offering a free and pro version of your product, the free version cannot include more than 100 icons even if you purchased an Extended License to lift the limit. The Extended License applies only to the pro version of your product.
-
-## Open source projects
-
-If you're using the Nucleo icons in open source projects, **you can include up to 100 icons in the downloadable source files**. This limitation applies to the icon fonts as well.
-
-The downloadable source file has to include the [Nucleo Copyright Notice](https://nucleoapp.com/copyright-notice).
-
-It's not possible to purchase an Extended License for open source projects.
-
-## Sharing Nucleo icons with team members
-
-If you're the sole owner of a Nucleo license, you can share with your team members only the icons used in your work, with a maximum of 250 icons (e.g., if you're a designer, you can share with the developers of your team only the Nucleo icons used in your design files).
-
-Your team members cannot reuse the Nucleo icons in other projects unless they purchase a license.
-
-If more than one team member needs access to the Nucleo icons, you can consider purchasing a [team license](https://nucleoapp.com/pricing).
-
-## Design systems
-
-If you wish to include the Nucleo icons in a design system available on a public server, you can use a maximum of 250 Nucleo icons, even if your team purchased a Nucleo team license.
-
-If the design system is accessible only by the members of your organization (e.g., is hosted on a password protected server), but you're the sole owner of a Nucleo license, you can share with your colleagues a maximum of 250 Nucleo icons.
-
-If the design system is on a public server, you can lift the 250 icons limit by buying an [Extended License](https://nucleoapp.com/extended-license). However, please keep in mind you can't provide a link/button to download all the icons.
-
-If your team purchased a Nucleo team license that covers all the users with access to the design system, and the design system is not public (e.g., is hosted on a password protected server), then there's no limitation to the number of icons that can be included.
-
-If you're still unclear about what is or isn't allowed under this license, please contact us at info@nucleoapp.com.

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>>;