@entur/datepicker 4.0.0-alpha.1 → 4.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.0...@entur/datepicker@4.0.0-beta.1) (2022-10-28)
+
+### Bug Fixes
+
+- **datepicker:** hide next and previous month button when disabled ([1ae7037](https://bitbucket.org/enturas/design-system/commits/1ae70371fb5622b1fbfc593c9c0becd83f665531))
+
+# [4.0.0-beta.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-alpha.1...@entur/datepicker@4.0.0-beta.0) (2022-10-27)
+
+### Bug Fixes
+
+- **datepicker:** final touches to datepicker and supcomponents ([8c21915](https://bitbucket.org/enturas/design-system/commits/8c21915cea21346444bfdf2b66bfe10de1c9fcba))
+
 # [4.0.0-alpha.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-alpha.0...@entur/datepicker@4.0.0-alpha.1) (2022-10-26)
 
 ### Bug Fixes

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

@@ -1,5 +1,6 @@
 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 = {
@@ -18,15 +19,28 @@ export declare type DateFieldProps = {
      */
     showTimeZone?: boolean;
     showTime?: boolean;
+    /** Tidligste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone */
+    minValue?: CalendarDate;
+    /** Seneste gyldige datovalg. (se minValue) */
+    maxValue?: CalendarDate;
     /** Varselmelding, som vil komme under TimePicker */
     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;
     labelTooltip?: React.ReactNode;
     disabled?: boolean;
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
     [key: string]: any;
-} & Omit<SpectrumDateFieldProps<DateValue>, 'onChange' | 'label' | 'hideTimeZone' | 'placeholder'>;
+} & Omit<SpectrumDateFieldProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
 export declare const DateField: React.ForwardRefExoticComponent<Pick<DateFieldProps, string | number> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { DateValue } from '@react-types/datepicker';
-import { VariantType } from '@entur/form';
+import type { CalendarDate } from '@internationalized/date';
+import type { DateValue, SpectrumDatePickerProps } from '@react-types/datepicker';
+import type { VariantType } from '@entur/form';
 import './DatePicker.scss';
 declare type DatePickerProps = {
     /** Den valgte datoen. Dato i '@internationalized/date'-pakkens format */
@@ -17,25 +18,46 @@ declare type DatePickerProps = {
      * @default false
      */
     showTimeZone?: boolean;
-    /** Viser tidspunkt i tillegg til dato hvis det er tilgjengelig */
+    /** 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. */
+    minValue?: 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 */
+    maxValue?: 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;
-    /** Ekstra klassenavn */
-    className?: string;
-    style?: React.CSSProperties;
+    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;
-    [key: string]: any;
-};
-export declare const DatePickerBeta: ({ selectedDate: value, onChange, locale, disabled: isDisabled, className, style, variant, feedback, disableModal, navigationDescription, ...rest }: DatePickerProps) => JSX.Element;
+    /** 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, ...rest }: DatePickerProps) => JSX.Element;
 export {};

package/dist/datepicker.cjs.development.js

@@ -599,7 +599,7 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
   return norwegianAriaLabel;
 };
 
-var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "labelTooltip", "style", "className", "labelProps", "append"];
+var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "style", "className", "labelProps", "append"];
 var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var value = _ref.selectedDate,
       label = _ref.label,
@@ -611,6 +611,10 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
       disabled = _ref.disabled,
       variant = _ref.variant,
       feedback = _ref.feedback,
+      _ref$validationVarian = _ref.validationVariant,
+      validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
+      _ref$validationFeedba = _ref.validationFeedback,
+      validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
       labelTooltip = _ref.labelTooltip,
       style = _ref.style,
       className = _ref.className,
@@ -656,9 +660,10 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
     labelTooltip: labelTooltip,
     labelProps: parentLabelProps != null ? parentLabelProps : labelProps
   }, fieldProps, {
-    variant: variant,
-    feedback: feedback,
-    append: append
+    variant: (variant != null ? variant : state.validationState === 'invalid') ? validationVariant : undefined,
+    feedback: (feedback != null ? feedback : state.validationState === 'invalid') ? validationFeedback : undefined,
+    append: append,
+    ariaAlertOnFeedback: true
   }), state.segments.map(function (segment, i) {
     return React__default["default"].createElement(FieldSegment, {
       segment: segment,
@@ -715,8 +720,8 @@ var CalendarCell = function CalendarCell(_ref) {
     hidden: isOutsideVisibleRange,
     className: classNames__default["default"]('eds-datepicker__calendar__grid__cell', {
       'eds-datepicker__calendar__grid__cell--selected': isSelected,
-      'eds-datepicker__calendar__grid__cell--disabled': isDisabled,
-      'eds-datepicker__calendar__grid__cell--unavailable': isUnavailable,
+      'eds-datepicker__calendar__grid__cell--disabled': isDisabled || isUnavailable,
+      'eds-datepicker__calendar__grid__cell--outside-month': isOutsideVisibleRange,
       'eds-datepicker__calendar__grid__cell--today': date.isEqualDay(date$1, date.now((_state$timeZone = state.timeZone) != null ? _state$timeZone : date.getLocalTimeZone()))
     })
   }, rest), formattedDate));
@@ -830,17 +835,23 @@ var Calendar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   })));
 });
 
-var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "className", "style", "variant", "feedback", "disableModal", "navigationDescription"];
+var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription"];
 var DatePickerBeta = function DatePickerBeta(_ref) {
   var value = _ref.selectedDate,
       _onChange = _ref.onChange,
       locale = _ref.locale,
       isDisabled = _ref.disabled,
+      showTime = _ref.showTime,
+      _ref$showTimeZone = _ref.showTimeZone,
+      showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
       className = _ref.className,
       variant = _ref.variant,
       feedback = _ref.feedback,
+      validationVariant = _ref.validationVariant,
+      validationFeedback = _ref.validationFeedback,
       _ref$disableModal = _ref.disableModal,
       disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
+      labelTooltip = _ref.labelTooltip,
       navigationDescription = _ref.navigationDescription,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
@@ -978,12 +989,17 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     selectedDate: state.value,
     label: rest.label,
     labelProps: labelProps,
+    showTime: showTime,
+    showTimeZone: showTimeZone,
     ref: dateFieldRef,
+    variant: variant,
+    feedback: feedback,
+    validationVariant: validationVariant,
+    validationFeedback: validationFeedback,
+    labelTooltip: labelTooltip,
     className: classNames__default["default"]('eds-datepicker__datefield', {
       'eds-datepicker__datefield--disabled': fieldProps.isDisabled
-    }),
-    variant: variant,
-    feedback: feedback
+    })
   })), !fieldProps.isDisabled && React__default["default"].createElement(CalendarButton, _extends({}, buttonProps, {
     onPress: function onPress() {
       return handleCalendarButtonOnClick(state.isOpen);