@entur/datepicker 4.0.0-RC.0 → 4.0.0-RC.2

package/dist/styles.css

@@ -2,250 +2,27 @@
   --eds-datepicker: 1;
 }/* 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-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-datefield div:first-of-type.eds-date-and-time-field__segment {
+  margin-left: 1rem;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton--right {
-  position: absolute;
-  right: 0.4rem;
+.eds-datefield.eds-form-control-wrapper--disabled[focus-within] {
+  border-color: transparent;
+  box-shadow: none;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  visibility: hidden;
+.eds-datefield.eds-form-control-wrapper--disabled:focus-within {
+  border-color: transparent;
+  box-shadow: none;
 }
-.eds-timepicker__wrapper .eds-timepicker__arrowbutton:hover {
-  background-color: #d1d4e3;
+.eds-datefield.eds-form-control-wrapper--disabled .eds-date-and-time-field__segment:focus {
+  background: none;
 }
-.eds-timepicker__wrapper .eds-timepicker .eds-form-control__append--tooltip {
+.eds-datefield .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);
-  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. */
-[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;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.eds-datepicker__open-calendar-button {
-  position: absolute;
-  right: 0.5rem;
-  top: 0.45rem;
-}
-.eds-datepicker__open-calendar-button.eds-icon-button {
-  color: #181c56;
-}
-.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;
@@ -268,7 +45,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 {
@@ -276,7 +54,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 {
@@ -369,21 +147,121 @@
   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-timepicker__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: -moz-fit-content;
+  width: fit-content;
 }
-.eds-datefield.eds-form-control-wrapper--disabled[focus-within] {
-  border-color: transparent;
-  box-shadow: none;
+.eds-timepicker__wrapper .eds-timepicker {
+  justify-content: center;
+  padding: 0rem 3rem;
 }
-.eds-datefield.eds-form-control-wrapper--disabled:focus-within {
-  border-color: transparent;
-  box-shadow: 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-datefield.eds-form-control-wrapper--disabled .eds-date-and-time-field__segment:focus {
-  background: none;
+.eds-timepicker__wrapper .eds-timepicker__arrowbutton {
+  color: #181c56;
 }
-.eds-datefield .eds-form-control__append--tooltip {
+.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-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-datepicker {
+  position: relative;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.eds-datepicker__open-calendar-button {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.45rem;
+}
+.eds-datepicker__open-calendar-button.eds-icon-button {
+  color: #181c56;
+}
+.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: 0;
+  padding: initial;
+  width: inherit;
+  background-color: transparent;
+  background-color: initial;
+  overflow: scroll;
+}/* 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-RC.0",
+  "version": "4.0.0-RC.2",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/datepicker.esm.js",
@@ -28,13 +28,13 @@
   },
   "dependencies": {
     "@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/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-RC.0",
-    "@entur/utils": "^0.5.0-RC.0",
+    "@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",
@@ -53,5 +53,5 @@
     "node": "14.17.0",
     "yarn": "1.18.0"
   },
-  "gitHead": "eb50f5092d80dcdfe5c35bdcd7970e9af29e620a"
+  "gitHead": "566b3c34e0516c4b448f0115a25ec57ba5af1ce3"
 }

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,66 +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;
-    /** Maxbredden til viewport-en for at modal skal vises
-     *  @default 1000
-     */
-    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'
-     */
-    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, modalTreshold, ...rest }: DatePickerBetaProps) => JSX.Element;

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

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