@entur/datepicker 3.0.6 → 4.0.0-RC.0

package/dist/styles.css

@@ -7,6 +7,54 @@
   top: -0.5rem;
 }/* 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;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.eds-timepicker__wrapper .eds-timepicker {
+  justify-content: center;
+  padding: 0rem 3rem;
+}
+.eds-timepicker__wrapper .eds-timepicker .eds-input-group__label,
+.eds-timepicker__wrapper .eds-timepicker .eds-input-group__label--filled {
+  margin-left: 0rem !important;
+}
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton {
+  color: #181c56;
+}
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton--left {
+  position: absolute;
+  left: 0.35rem;
+  z-index: 1;
+}
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton--right {
+  position: absolute;
+  right: 0.4rem;
+}
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  visibility: hidden;
+}
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton:hover {
+  background-color: #d1d4e3;
+}
+.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;
+}/* 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);
@@ -129,70 +177,213 @@
   height: 2.75rem;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-timepicker__wrapper {
+[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;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-datepicker {
   position: relative;
-  display: flex;
-  align-items: center;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
-.eds-timepicker__wrapper .eds-timepicker {
-  justify-content: center;
-  padding: 0rem 3rem;
+.eds-datepicker__open-calendar-button {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.45rem;
 }
-.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__open-calendar-button.eds-icon-button {
+  color: #181c56;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton {
+.eds-datepicker__open-calendar-button.eds-icon-button:hover {
+  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: #8285a8;
+}
+.eds-datepicker__datefield {
+  padding-right: 4rem;
+}
+.eds-datepicker__datefield--disabled {
+  padding-right: 1rem;
+}
+.eds-datepicker__datefield__wrapper {
+  position: relative;
+}
+.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-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__arrowbutton--left {
-  position: absolute;
-  left: 0.35rem;
-  z-index: 1;
+.eds-datepicker__calendar__header,
+.eds-contrast .eds-datepicker__calendar__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton--right {
-  position: absolute;
-  right: 0.4rem;
+.eds-datepicker__calendar__header h2,
+.eds-contrast .eds-datepicker__calendar__header h2 {
+  font-size: 1rem;
+  font-weight: 600;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton--disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.eds-datepicker__calendar__header .eds-icon-button:hover,
+.eds-contrast .eds-datepicker__calendar__header .eds-icon-button:hover {
+  background-color: #d1d4e3;
+}
+.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: #babbcf;
+}
+.eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper,
+.eds-contrast .eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper {
   visibility: hidden;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton:hover {
-  background-color: #d1d4e3;
+.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;
+  font-size: 0.875rem;
+  cursor: default;
 }
-[dir="ltr"] .eds-timepicker__wrapper .eds-timepicker__segment {
-  text-align: right;
+.eds-datepicker__calendar__grid__cell__td,
+.eds-contrast .eds-datepicker__calendar__grid__cell__td {
+  position: relative;
+  padding: 0;
+  border: 1px solid #e9e9e9;
 }
-[dir="rtl"] .eds-timepicker__wrapper .eds-timepicker__segment {
-  text-align: left;
+.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__segment {
-  margin-top: 1rem;
-  padding: 0 2px;
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
+.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__segment--placeholder {
-  color: grey;
+.eds-datepicker__calendar__grid__cell:hover,
+.eds-contrast .eds-datepicker__calendar__grid__cell:hover {
+  background-color: #656782;
+  color: #ffffff;
 }
-.eds-timepicker__wrapper .eds-timepicker__segment:focus {
-  background: rgba(68, 192, 255, 0.5);
-  outline: none;
-  border-radius: 0.0625rem;
+.eds-datepicker__calendar__grid__cell:active,
+.eds-contrast .eds-datepicker__calendar__grid__cell:active {
+  background-color: #8285a8;
 }
-.eds-timepicker__wrapper .eds-timepicker .eds-form-control__append--tooltip {
-  margin-top: 0.75rem;
-  margin-right: -0.25rem;
+.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-timepicker__wrapper .eds-icon-button--disabled__wrapper {
-  display: none;
+.eds-datepicker__calendar__grid__cell--selected,
+.eds-contrast .eds-datepicker__calendar__grid__cell--selected {
+  background-color: #181c56;
+  color: #ffffff;
 }
-.eds-timepicker__wrapper .eds-feedback-text {
-  position: absolute;
-  top: 3.5rem;
+.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;
+}
+.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 {
+  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. */
+.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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/datepicker",
-  "version": "3.0.6",
+  "version": "4.0.0-RC.0",
   "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.9",
-    "@entur/icons": "^5.2.1",
+    "@entur/a11y": "0.2.49",
+    "@entur/button": "^2.10.5-RC.0",
+    "@entur/form": "^5.4.6-RC.0",
+    "@entur/icons": "^5.0.1-RC.0",
+    "@entur/modal": "1.6.12",
     "@entur/tokens": "^3.4.1",
-    "@entur/typography": "^1.7.0",
-    "@entur/utils": "^0.4.5",
+    "@entur/typography": "^1.7.1-RC.0",
+    "@entur/utils": "^0.5.0-RC.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",
     "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": "09829f0914d2ee5740f584cfd2be4d9d2b5fc18a"
+  "gitHead": "eb50f5092d80dcdfe5c35bdcd7970e9af29e620a"
 }

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;