@entur/datepicker 4.0.0-beta.5 → 4.0.0

package/dist/styles.css

@@ -50,177 +50,11 @@
   top: 3.5rem;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-datepicker__calender {
-  font-family: var(--eds-font-family);
-  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
-  border: none;
-}
-.eds-datepicker__calender .react-datepicker__header {
-  background-color: #ffffff;
-  border-bottom: none;
-}
-.eds-datepicker__calender .react-datepicker__day-name {
-  color: #656782;
-}
-.eds-datepicker__calender .react-datepicker__day-name__day--keyboard-selected {
-  background: none;
-}
-.eds-datepicker__calender .react-datepicker__day-name__day--keyboard-selected:focus {
-  background: #e9e9e9;
-}
-.eds-datepicker__calender .react-datepicker__day--outside-month {
-  opacity: 0.4;
-}
-.eds-datepicker__calender .react-datepicker__day--outside-month.eds-datepicker__calender__day--selected {
-  opacity: 1;
-}
-.eds-datepicker__calender .react-datepicker__day--disabled {
-  opacity: 0.4;
-  pointer-events: none;
-}
-.eds-datepicker__calender .react-datepicker__week-number {
-  color: #656782;
-  margin-right: 0.75rem;
-}
-.eds-datepicker__calender .react-datepicker__month-container {
-  margin: 0.75rem;
-}
-.eds-datepicker__calender .eds-datepicker__calender__header {
-  display: flex;
-  align-items: center;
-  margin: 0 0.4rem;
-  background-color: #ffffff;
-}
-.eds-datepicker__calender .eds-datepicker__calender__header__month-button--left {
-  margin-right: auto;
-}
-.eds-datepicker__calender .eds-datepicker__calender__header__month-button--right {
-  margin-left: auto;
-}
-.eds-datepicker__calender .eds-datepicker__calender__header__month-button--left.eds-icon-button:hover, .eds-datepicker__calender .eds-datepicker__calender__header__month-button--right.eds-icon-button:hover {
-  background-color: #d1d4e3;
-}
-.eds-datepicker__calender .eds-datepicker__calender__header__month-text {
-  color: #181c56;
-  margin: 0 0.25rem;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day {
-  border: 0.0625rem solid #e9e9e9;
-  color: #181c56;
-  background-color: transparent;
-  font-size: 0.875rem;
-  font-weight: 500;
-  width: 2.5rem;
-  line-height: 2.5rem;
-  margin: -0.5px;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day:focus {
-  outline: none;
-  border-radius: 0;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  position: relative;
-  z-index: 1;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day:focus:hover {
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  background-color: #f3f3f3;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day:hover {
-  background: #ffffff;
-  border-radius: 0;
-  box-shadow: inset 0 0 0px 1px #181c56;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day--today {
-  position: relative;
-  box-shadow: inset 0 -0.25rem 0 #ff5959;
-  border-radius: 0;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day--today:focus {
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56, inset 0 -0.25rem 0 #ff5959;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day--today:focus:hover {
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56, inset 0 -0.25rem 0 #ff5959;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day--today:hover {
-  box-shadow: inset 0 0 0px 1px #181c56, inset 0 -0.25rem 0 #ff5959;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day--selected {
-  border-radius: 0;
-  background: #181c56;
-  color: #ffffff;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day--selected:hover, .eds-datepicker__calender .eds-datepicker__calender__day--selected:focus:hover {
-  background: #292b6a;
-}
-.eds-datepicker__calender .eds-datepicker__calender__day-name {
-  width: 2.5rem;
-  line-height: 2.5rem;
-  margin: -0.5px;
-}
-.eds-datepicker__input .eds-icon-button {
-  position: relative;
-  left: 0.5rem;
-}
-.eds-contrast .eds-datepicker__input .eds-icon-button:hover {
-  background-color: #babbcf;
-}
-.eds-contrast .eds-datepicker__input .eds-icon-button:focus {
-  border-color: #181c56;
-}
-
-.eds-native-date-picker {
-  height: 2.75rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-native-timepicker input[type=time]::-webkit-calendar-picker-indicator {
   position: relative;
   top: -0.5rem;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-datefield div:first-of-type.eds-date-and-time-field__segment {
-  margin-left: 1rem;
-}
-.eds-datefield.eds-form-control-wrapper--disabled[focus-within] {
-  border-color: transparent;
-  box-shadow: none;
-}
-.eds-datefield.eds-form-control-wrapper--disabled:focus-within {
-  border-color: transparent;
-  box-shadow: none;
-}
-.eds-datefield.eds-form-control-wrapper--disabled .eds-date-and-time-field__segment:focus {
-  background: none;
-}
-.eds-datefield .eds-form-control__append--tooltip {
-  margin-top: 0.75rem;
-  margin-right: -0.25rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-[dir="ltr"] .eds-date-and-time-field__segment {
-  text-align: right;
-}
-[dir="rtl"] .eds-date-and-time-field__segment {
-  text-align: left;
-}
-.eds-date-and-time-field__segment {
-  margin-top: 1rem;
-  padding: 0 2px;
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
-}
-.eds-date-and-time-field__segment--placeholder {
-  color: #646464;
-}
-.eds-date-and-time-field__segment--dot-separator {
-  margin-left: -0.1rem;
-  margin-right: -0.2rem;
-}
-.eds-date-and-time-field__segment:focus {
-  background: rgba(68, 192, 255, 0.5);
-  outline: none;
-  border-radius: 0.0625rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-datepicker__calendar,
 .eds-contrast .eds-datepicker__calendar {
   width: -webkit-fit-content;
@@ -246,7 +80,8 @@
 }
 .eds-datepicker__calendar__header .eds-icon-button:hover,
 .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:hover {
-  background-color: #d1d4e3;
+  background-color: #656782;
+  color: #ffffff;
 }
 .eds-datepicker__calendar__header .eds-icon-button:focus,
 .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:focus {
@@ -254,7 +89,7 @@
 }
 .eds-datepicker__calendar__header .eds-icon-button:active,
 .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:active {
-  background-color: #babbcf;
+  background-color: #8285a8;
 }
 .eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper,
 .eds-contrast .eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper {
@@ -297,7 +132,12 @@
 }
 .eds-datepicker__calendar__grid__cell:hover,
 .eds-contrast .eds-datepicker__calendar__grid__cell:hover {
-  background-color: #babbcf;
+  background-color: #656782;
+  color: #ffffff;
+}
+.eds-datepicker__calendar__grid__cell:active,
+.eds-contrast .eds-datepicker__calendar__grid__cell:active {
+  background-color: #8285a8;
 }
 .eds-datepicker__calendar__grid__cell:focus,
 .eds-contrast .eds-datepicker__calendar__grid__cell:focus {
@@ -313,6 +153,10 @@
 .eds-contrast .eds-datepicker__calendar__grid__cell--selected:hover {
   background-color: #393d79;
 }
+.eds-datepicker__calendar__grid__cell--selected:active,
+.eds-contrast .eds-datepicker__calendar__grid__cell--selected:active {
+  background-color: #292b6a;
+}
 .eds-datepicker__calendar__grid__cell--disabled,
 .eds-contrast .eds-datepicker__calendar__grid__cell--disabled {
   opacity: 0.5;
@@ -320,6 +164,8 @@
 .eds-datepicker__calendar__grid__cell--disabled:hover,
 .eds-contrast .eds-datepicker__calendar__grid__cell--disabled:hover {
   background-color: transparent;
+  color: #181c56;
+  cursor: not-allowed;
 }
 .eds-datepicker__calendar__grid__cell--outside-month,
 .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month {
@@ -328,6 +174,8 @@
 .eds-datepicker__calendar__grid__cell--outside-month:hover,
 .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month:hover {
   background-color: transparent;
+  color: transparent;
+  cursor: default;
 }
 .eds-datepicker__calendar__grid__cell--today,
 .eds-contrast .eds-datepicker__calendar__grid__cell--today {
@@ -349,13 +197,14 @@
   color: #181c56;
 }
 .eds-datepicker__open-calendar-button.eds-icon-button:hover {
-  background-color: #d1d4e3;
+  background-color: #656782;
+  color: #ffffff;
 }
 .eds-datepicker__open-calendar-button.eds-icon-button:focus {
   border: 0.0625rem solid #181c56;
 }
 .eds-datepicker__open-calendar-button.eds-icon-button:active {
-  background-color: #babbcf;
+  background-color: #8285a8;
 }
 .eds-datepicker__datefield {
   padding-right: 4rem;
@@ -370,5 +219,50 @@
   padding: unset;
   width: inherit;
   background-color: unset;
-  overflow: visible;
+  overflow: scroll;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-datefield div:first-of-type.eds-date-and-time-field__segment {
+  margin-left: 1rem;
+}
+.eds-datefield.eds-form-control-wrapper--disabled[focus-within] {
+  border-color: transparent;
+  box-shadow: none;
+}
+.eds-datefield.eds-form-control-wrapper--disabled:focus-within {
+  border-color: transparent;
+  box-shadow: none;
+}
+.eds-datefield.eds-form-control-wrapper--disabled .eds-date-and-time-field__segment:focus {
+  background: none;
+}
+.eds-datefield .eds-form-control__append--tooltip {
+  margin-top: 0.75rem;
+  margin-right: -0.25rem;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+[dir="ltr"] .eds-date-and-time-field__segment {
+  text-align: right;
+}
+[dir="rtl"] .eds-date-and-time-field__segment {
+  text-align: left;
+}
+.eds-date-and-time-field__segment {
+  margin-top: 1rem;
+  padding: 0 2px;
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+}
+.eds-date-and-time-field__segment--placeholder {
+  color: #646464;
+}
+.eds-date-and-time-field__segment--dot-separator {
+  margin-left: -0.1rem;
+  margin-right: -0.2rem;
+}
+.eds-date-and-time-field__segment:focus {
+  background-color: #656782;
+  color: #ffffff;
+  outline: none;
+  border-radius: 0.0625rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/datepicker",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.0",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/datepicker.esm.js",
@@ -19,7 +19,7 @@
   "scripts": {
     "start": "dts watch --noClean",
     "build": "dts build",
-    "test": "dts test --env=jsdom",
+    "test": "dts test",
     "lint": "dts lint"
   },
   "peerDependencies": {
@@ -27,31 +27,30 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/a11y": "0.2.49",
-    "@entur/button": "^2.10.5-alpha.1",
-    "@entur/form": "^5.4.6-alpha.1",
-    "@entur/icons": "^5.0.1-alpha.1",
-    "@entur/modal": "1.6.12",
-    "@entur/tokens": "^3.4.1",
-    "@entur/typography": "^1.7.1-alpha.1",
-    "@entur/utils": "^0.5.0-alpha.0",
+    "@entur/a11y": "^0.2.54",
+    "@entur/button": "^2.10.9",
+    "@entur/form": "^5.4.14",
+    "@entur/icons": "^5.4.2",
+    "@entur/modal": "^1.6.19",
+    "@entur/tokens": "^3.4.4",
+    "@entur/tooltip": "^2.6.1",
+    "@entur/typography": "^1.7.5",
+    "@entur/utils": "^0.5.0",
     "@floating-ui/react-dom": "^1.0.0",
-    "@internationalized/date": "^3.0.1",
-    "@react-aria/button": "3.6.2",
-    "@react-aria/calendar": "3.0.3",
-    "@react-aria/datepicker": "^3.1.1",
-    "@react-aria/i18n": "^3.6.0",
-    "@react-stately/calendar": "3.0.3",
-    "@react-stately/datepicker": "^3.0.2",
-    "@react-types/datepicker": "^3.1.1",
-    "@types/react-datepicker": "^4.3.4",
+    "@internationalized/date": "^3.0.2",
+    "@react-aria/button": "^3.6.4",
+    "@react-aria/calendar": "^3.0.5",
+    "@react-aria/datepicker": "^3.2.1",
+    "@react-aria/i18n": "^3.6.3",
+    "@react-stately/calendar": "^3.0.5",
+    "@react-stately/datepicker": "^3.2.1",
+    "@react-types/datepicker": "^3.1.4",
     "classnames": "^2.3.1",
-    "react-datepicker": "^4.7.0",
     "react-focus-lock": "^2.9.1"
   },
   "volta": {
     "node": "14.17.0",
     "yarn": "1.18.0"
   },
-  "gitHead": "7aa7d7abd13d00838bf371adbd56a73273c680ea"
+  "gitHead": "36772ae4f2d8375622acff19736c07d15435cb95"
 }

package/dist/DatePicker/DatePickerHeader.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
-declare type DatePickerHeaderProps = {
-    nextMonthAriaLabel: string;
-    previousMonthAriaLabel: string;
-    locale: globalThis.Locale;
-} & Partial<ReactDatePickerCustomHeaderProps>;
-export declare const DatePickerHeader: ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, nextMonthAriaLabel, previousMonthAriaLabel, locale, }: DatePickerHeaderProps) => JSX.Element;
-export {};

package/dist/DatePicker/DatePickerInput.d.ts

@@ -1,31 +0,0 @@
-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;
-    calendarButtonTooltipOpen: string;
-    calendarButtonTooltipClose: string;
-    hideCalendarButton?: boolean;
-    inputRef: React.RefObject<HTMLInputElement>;
-    calendarButtonId: string;
-    forwardRef: React.ForwardedRef<HTMLInputElement>;
-    toggleCalendarGUI: () => void;
-    setFocusToCalendarGUI: () => void;
-    setShouldFocusOnCalendarButtonAfterSelect: React.Dispatch<React.SetStateAction<boolean>>;
-    onKeyDownInput: (event: KeyboardEvent) => any;
-    onBlurInput: (event: FocusEvent) => any;
-    calendarGUIIsOpen: () => boolean | undefined;
-    onClick?: React.MouseEventHandler<HTMLInputElement>;
-    onFocus: undefined;
-    selectedDate: Date | null;
-    placeholder?: null;
-    'aria-labelledby'?: string;
-};
-export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;
-export {};

package/dist/DatePicker/beta/DatePicker.d.ts

@@ -1,62 +0,0 @@
-import React from 'react';
-import type { CalendarDate } from '@internationalized/date';
-import type { DateValue, SpectrumDatePickerProps } from '@react-types/datepicker';
-import type { VariantType } from '@entur/form';
-import './DatePicker.scss';
-export declare type DatePickerBetaProps = {
-    /** 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;
-    /** BCP47-språkkoden til locale-en du ønsker å bruke.
-     * @default Brukerenhetens selvvalgte locale
-     */
-    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 som forteller om ugyldig dato
-     * @default "Ugyldig dato"
-     */
-    validationFeedback?: string;
-    /** Valideringsvariant for melding om ugyldig dato
-     * @default "error"
-     */
-    validationVariant?: VariantType;
-    disabled?: boolean;
-    /** Hvis true vil kalenderen alltid vises i en popover når den åpnes
-     *  @default false
-     */
-    disableModal?: boolean;
-    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'
-     */
-    navigationDescription?: string;
-    /** Ekstra klassenavn */
-    className?: string;
-    style?: React.CSSProperties;
-} & Omit<SpectrumDatePickerProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
-export declare const DatePickerBeta: ({ selectedDate: value, onChange, locale, disabled: isDisabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate: minValue, maxDate: maxValue, ...rest }: DatePickerBetaProps) => JSX.Element;

package/dist/DatePicker/beta/index.d.ts

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