@entur/datepicker 3.0.7 → 4.0.0-RC.1

package/dist/styles.css

@@ -2,197 +2,267 @@
   --eds-datepicker: 1;
 }/* 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-timepicker__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
-.eds-datepicker__calender .react-datepicker__day-name {
-  color: #656782;
+.eds-timepicker__wrapper .eds-timepicker {
+  justify-content: center;
+  padding: 0rem 3rem;
 }
-.eds-datepicker__calender .react-datepicker__day-name__day--keyboard-selected {
-  background: none;
+.eds-timepicker__wrapper .eds-timepicker .eds-input-group__label,
+.eds-timepicker__wrapper .eds-timepicker .eds-input-group__label--filled {
+  margin-left: 0rem !important;
 }
-.eds-datepicker__calender .react-datepicker__day-name__day--keyboard-selected:focus {
-  background: #e9e9e9;
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton {
+  color: #181c56;
 }
-.eds-datepicker__calender .react-datepicker__day--outside-month {
-  opacity: 0.4;
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton--left {
+  position: absolute;
+  left: 0.35rem;
+  z-index: 1;
 }
-.eds-datepicker__calender .react-datepicker__day--outside-month.eds-datepicker__calender__day--selected {
-  opacity: 1;
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton--right {
+  position: absolute;
+  right: 0.4rem;
 }
-.eds-datepicker__calender .react-datepicker__day--disabled {
-  opacity: 0.4;
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton--disabled {
+  opacity: 0.5;
   pointer-events: none;
+  visibility: hidden;
 }
-.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 {
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton:hover {
   background-color: #d1d4e3;
 }
-.eds-datepicker__calender .eds-datepicker__calender__header__month-text {
-  color: #181c56;
-  margin: 0 0.25rem;
+.eds-timepicker__wrapper .eds-timepicker .eds-form-control__append--tooltip {
+  margin-top: 0.75rem;
+  margin-right: -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-timepicker__wrapper .eds-icon-button--disabled__wrapper {
+  display: none;
 }
-.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;
+.eds-timepicker__wrapper .eds-feedback-text {
+  position: absolute;
+  top: 3.5rem;
+}/* 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;
-  z-index: 1;
+  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-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-datefield.eds-form-control-wrapper--disabled[focus-within] {
+  border-color: transparent;
+  box-shadow: none;
 }
-.eds-datepicker__calender .eds-datepicker__calender__day:hover {
-  background: #ffffff;
-  border-radius: 0;
-  box-shadow: inset 0 0 0px 1px #181c56;
+.eds-datefield.eds-form-control-wrapper--disabled:focus-within {
+  border-color: transparent;
+  box-shadow: none;
 }
-.eds-datepicker__calender .eds-datepicker__calender__day--today {
-  position: relative;
-  box-shadow: inset 0 -0.25rem 0 #ff5959;
-  border-radius: 0;
+.eds-datefield.eds-form-control-wrapper--disabled .eds-date-and-time-field__segment:focus {
+  background: none;
 }
-.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-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. */
+.eds-datepicker {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
-.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__open-calendar-button {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.45rem;
 }
-.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__open-calendar-button.eds-icon-button {
+  color: #181c56;
 }
-.eds-datepicker__calender .eds-datepicker__calender__day--selected {
-  border-radius: 0;
-  background: #181c56;
+.eds-datepicker__open-calendar-button.eds-icon-button:hover {
+  background-color: #656782;
   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__open-calendar-button.eds-icon-button:focus {
+  border: 0.0625rem solid #181c56;
 }
-.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-datepicker__open-calendar-button.eds-icon-button:active {
+  background-color: #8285a8;
 }
-.eds-contrast .eds-datepicker__input .eds-icon-button:hover {
-  background-color: #babbcf;
+.eds-datepicker__datefield {
+  padding-right: 4rem;
 }
-.eds-contrast .eds-datepicker__input .eds-icon-button:focus {
-  border-color: #181c56;
+.eds-datepicker__datefield--disabled {
+  padding-right: 1rem;
 }
-
-.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 {
+.eds-datepicker__datefield__wrapper {
   position: relative;
-  top: -0.5rem;
+}
+.eds-datepicker__calendar-modal.eds-modal__content {
+  padding: unset;
+  width: inherit;
+  background-color: unset;
+  overflow: visible;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-timepicker__wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
+.eds-datepicker__calendar,
+.eds-contrast .eds-datepicker__calendar {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
+  padding: 1.5rem;
+  padding-top: 0.75rem;
+  background-color: #ffffff;
+  color: #181c56;
+  border-radius: 4px;
+  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
 }
-.eds-timepicker__wrapper .eds-timepicker {
+.eds-datepicker__calendar__header,
+.eds-contrast .eds-datepicker__calendar__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.eds-datepicker__calendar__header h2,
+.eds-contrast .eds-datepicker__calendar__header h2 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+.eds-datepicker__calendar__header .eds-icon-button:hover,
+.eds-contrast .eds-datepicker__calendar__header .eds-icon-button:hover {
+  background-color: #656782;
+  color: #ffffff;
+}
+.eds-datepicker__calendar__header .eds-icon-button:focus,
+.eds-contrast .eds-datepicker__calendar__header .eds-icon-button:focus {
+  border: 0.0625rem solid #181c56;
+}
+.eds-datepicker__calendar__header .eds-icon-button:active,
+.eds-contrast .eds-datepicker__calendar__header .eds-icon-button:active {
+  background-color: #8285a8;
+}
+.eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper,
+.eds-contrast .eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper {
+  visibility: hidden;
+}
+.eds-datepicker__calendar__grid,
+.eds-contrast .eds-datepicker__calendar__grid {
+  position: relative;
+  border-spacing: 0px;
+  border-collapse: collapse;
+}
+.eds-datepicker__calendar__grid thead tr th,
+.eds-contrast .eds-datepicker__calendar__grid thead tr th {
+  color: #54568c;
+  font-size: 0.75rem;
+}
+.eds-datepicker__calendar__grid__cell,
+.eds-contrast .eds-datepicker__calendar__grid__cell {
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
   justify-content: center;
-  padding: 0rem 3rem;
+  font-size: 0.875rem;
+  cursor: default;
 }
-.eds-timepicker__wrapper .eds-timepicker .eds-input-group__label,
-.eds-timepicker__wrapper .eds-timepicker .eds-input-group__label--filled {
-  margin-left: 0rem !important;
+.eds-datepicker__calendar__grid__cell__td,
+.eds-contrast .eds-datepicker__calendar__grid__cell__td {
+  position: relative;
+  padding: 0;
+  border: 1px solid #e9e9e9;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton {
-  color: #181c56;
+.eds-datepicker__calendar__grid__cell__td[focus-within],
+.eds-contrast .eds-datepicker__calendar__grid__cell__td[focus-within] {
+  z-index: 2;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton--left {
-  position: absolute;
-  left: 0.35rem;
-  z-index: 1;
+.eds-datepicker__calendar__grid__cell__td:focus-within,
+.eds-contrast .eds-datepicker__calendar__grid__cell__td:focus-within {
+  z-index: 2;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton--right {
-  position: absolute;
-  right: 0.4rem;
+.eds-datepicker__calendar__grid__cell:hover,
+.eds-contrast .eds-datepicker__calendar__grid__cell:hover {
+  background-color: #656782;
+  color: #ffffff;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton--disabled {
+.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 {
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline: 1px solid #e9e9e9;
+}
+.eds-datepicker__calendar__grid__cell--selected,
+.eds-contrast .eds-datepicker__calendar__grid__cell--selected {
+  background-color: #181c56;
+  color: #ffffff;
+}
+.eds-datepicker__calendar__grid__cell--selected:hover,
+.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;
-  pointer-events: none;
-  visibility: hidden;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton:hover {
-  background-color: #d1d4e3;
+.eds-datepicker__calendar__grid__cell--disabled:hover,
+.eds-contrast .eds-datepicker__calendar__grid__cell--disabled:hover {
+  background-color: transparent;
+  color: #181c56;
+  cursor: not-allowed;
 }
-[dir="ltr"] .eds-timepicker__wrapper .eds-timepicker__segment {
+.eds-datepicker__calendar__grid__cell--outside-month,
+.eds-contrast .eds-datepicker__calendar__grid__cell--outside-month {
+  color: transparent;
+}
+.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 {
+  border-bottom: 2px solid #ff5959;
+}/* 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-timepicker__wrapper .eds-timepicker__segment {
+[dir="rtl"] .eds-date-and-time-field__segment {
   text-align: left;
 }
-.eds-timepicker__wrapper .eds-timepicker__segment {
+.eds-date-and-time-field__segment {
   margin-top: 1rem;
   padding: 0 2px;
   font-feature-settings: "tnum";
   font-variant-numeric: tabular-nums;
 }
-.eds-timepicker__wrapper .eds-timepicker__segment--placeholder {
-  color: grey;
+.eds-date-and-time-field__segment--placeholder {
+  color: #646464;
 }
-.eds-timepicker__wrapper .eds-timepicker__segment:focus {
-  background: rgba(68, 192, 255, 0.5);
+.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;
-}
-.eds-timepicker__wrapper .eds-timepicker .eds-form-control__append--tooltip {
-  margin-top: 0.75rem;
-  margin-right: -0.25rem;
-}
-.eds-timepicker__wrapper .eds-icon-button--disabled__wrapper {
-  display: none;
-}
-.eds-timepicker__wrapper .eds-feedback-text {
-  position: absolute;
-  top: 3.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/datepicker",
-  "version": "3.0.7",
+  "version": "4.0.0-RC.1",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/datepicker.esm.js",
@@ -27,23 +27,31 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/form": "^5.4.10",
-    "@entur/icons": "^5.2.2",
+    "@entur/a11y": "0.2.49",
+    "@entur/button": "^2.10.5-RC.1",
+    "@entur/form": "^5.4.6-RC.1",
+    "@entur/icons": "^5.0.1-RC.1",
+    "@entur/modal": "1.6.12",
     "@entur/tokens": "^3.4.1",
-    "@entur/typography": "^1.7.1",
-    "@entur/utils": "^0.4.6",
+    "@entur/typography": "^1.7.1-RC.1",
+    "@entur/utils": "^0.5.0-RC.1",
+    "@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",
     "classnames": "^2.3.1",
-    "react-datepicker": "^4.7.0"
+    "react-datepicker": "^4.7.0",
+    "react-focus-lock": "^2.9.1"
   },
   "volta": {
     "node": "14.17.0",
     "yarn": "1.18.0"
   },
-  "gitHead": "11fde5ffbfd805773572c3a7d999d63f2733e0c7"
+  "gitHead": "f961e0f1cc0c331a09e7e561c14c0870871bf875"
 }

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/TimePicker/utils.d.ts

@@ -1,18 +0,0 @@
-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;