@entur/datepicker 9.1.6 → 9.2.0

package/dist/DatePicker/Calendar.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-import { DateValue } from '@internationalized/date';
+import { CalendarDate, DateValue } from '@internationalized/date';
 import './Calendar.scss';
-type CalendarProps = {
+export type CalendarProps = {
     selectedDate: DateValue | null;
     onChange: (SelectedDate: DateValue | null) => void;
     navigationDescription?: string;
     style?: React.CSSProperties;
+    /** Ekstra klassenavn */
+    className?: string;
     onSelectedCellClick?: () => void;
     /** Tidligste gyldige datovalg.
      * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
@@ -21,7 +23,21 @@ type CalendarProps = {
      * Gyldig til og med den tiden som legges inn som maxDate.
      * Dato uten tid vil være gyldig hele maxDate-dagen */
     maxDate?: DateValue;
+    /** Brukes for å legge til klassenavn på spesifikke datoer i kalenderen.
+     *  Tar inn en dato og skal returnere klassenavnet som skal legges til den datoen.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'weekend' : ''
+     *
+     *  OBS: hvis stylingen er meningsbærende bør du bruke ariaLabelForDate i tillegg for å beskrive
+     *  meningen til skjermlesere o.l.
+     */
+    classNameForDate?: (date: CalendarDate) => string;
+    /** Legger til teksten som returneres på datoen i kalenderen sin aria-label.
+     *  Bør brukes sammen med classNameForDate hvis styling-endringene gjort der er meningsbærende.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'helgedag' : ''
+     */
+    ariaLabelForDate?: (date: CalendarDate) => string;
     [key: string]: any;
 };
 export declare const Calendar: React.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/DatePicker/CalendarCell.d.ts

@@ -5,6 +5,8 @@ type CalendarCellProps = {
     state: CalendarState;
     date: CalendarDate;
     onSelectedCellClick?: () => void;
+    classNameForDate?: (date: CalendarDate) => string;
+    ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const CalendarCell: ({ state, date, onSelectedCellClick, ...rest }: CalendarCellProps) => React.JSX.Element;
+export declare const CalendarCell: ({ state, date, onSelectedCellClick, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/CalendarGrid.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { CalendarState } from '@react-stately/calendar';
+import { CalendarDate } from '@internationalized/date';
 type CalendarGridProps = {
     state: CalendarState;
     navigationDescription?: string;
     onSelectedCellClick?: () => void;
+    classNameForDate?: (date: CalendarDate) => string;
+    ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const CalendarGrid: ({ state, navigationDescription, onSelectedCellClick, ...rest }: CalendarGridProps) => React.JSX.Element;
+export declare const CalendarGrid: ({ state, navigationDescription, onSelectedCellClick, classNameForDate, ariaLabelForDate, ...rest }: CalendarGridProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/DatePicker.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { DateValue, AriaDatePickerProps, MappedDateValue } from '@react-types/datepicker';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import type { AriaDatePickerProps, MappedDateValue } from '@react-types/datepicker';
 import type { VariantType } from '@entur/form';
 import './DatePicker.scss';
 export type DatePickerProps<DateType extends DateValue> = {
@@ -74,8 +75,23 @@ export type DatePickerProps<DateType extends DateValue> = {
      * @default undefined
      */
     forcedReturnType?: 'CalendarDate' | 'CalendarDateTime' | 'ZonedDateTime';
+    /** Brukes for å legge til klassenavn på spesifikke datoer i kalenderen.
+     *  Tar inn en dato og skal returnere klassenavnet som skal legges til den datoen.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'weekend' : ''
+     *
+     *  OBS: hvis stylingen er meningsbærende bør du bruke ariaLabelForDate i tillegg for å beskrive
+     *  meningen til skjermlesere o.l.
+     */
+    classNameForDate?: (date: CalendarDate) => string;
+    /** Legger til teksten som returneres på datoen i kalenderen sin aria-label.
+     *  Bør brukes sammen med classNameForDate hvis styling-endringene gjort der er meningsbærende.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'helgedag' : ''
+     */
+    ariaLabelForDate?: (date: CalendarDate) => string;
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
 } & Omit<AriaDatePickerProps<DateType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
-export declare const DatePicker: <DateType extends DateValue>({ selectedDate, onChange, locale, disabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
+export declare const DatePicker: <DateType extends DateValue>({ selectedDate, onChange, locale, disabled, showTime, showTimeZone, classNameForDate, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ariaLabelForDate, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;

package/dist/datepicker.cjs.development.js

@@ -293,15 +293,17 @@ var CalendarButton = function CalendarButton(_ref) {
   }), children);
 };
 
-var _excluded$8 = ["state", "date", "onSelectedCellClick"];
+var _excluded$8 = ["state", "date", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate"];
 var CalendarCell = function CalendarCell(_ref) {
-  var _state$timeZone;
+  var _ariaLabelForDate, _classNameForDate, _state$timeZone, _classNames;
   var state = _ref.state,
     date$1 = _ref.date,
     _ref$onSelectedCellCl = _ref.onSelectedCellClick,
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
+    classNameForDate = _ref.classNameForDate,
+    ariaLabelForDate = _ref.ariaLabelForDate,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var cellRef = React.useRef(null);
   var _useCalendarCell = calendar.useCalendarCell({
@@ -314,17 +316,14 @@ var CalendarCell = function CalendarCell(_ref) {
     isDisabled = _useCalendarCell.isDisabled,
     isUnavailable = _useCalendarCell.isUnavailable,
     formattedDate = _useCalendarCell.formattedDate;
+  var ariaLabel = buttonProps['aria-label'] + " " + ((_ariaLabelForDate = ariaLabelForDate == null ? void 0 : ariaLabelForDate(date$1)) != null ? _ariaLabelForDate : '');
   return React.createElement("td", _extends({}, cellProps, {
     className: "eds-datepicker__calendar__grid__cell__td"
   }), React.createElement("div", _extends({}, buttonProps, {
+    "aria-label": ariaLabel,
     ref: cellRef,
     hidden: isOutsideVisibleRange,
-    className: classNames('eds-datepicker__calendar__grid__cell', {
-      'eds-datepicker__calendar__grid__cell--selected': isSelected,
-      '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()))
-    })
+    className: classNames('eds-datepicker__calendar__grid__cell', (_classNames = {}, _classNames[(_classNameForDate = classNameForDate == null ? void 0 : classNameForDate(date$1)) != null ? _classNameForDate : ''] = !isOutsideVisibleRange, _classNames['eds-datepicker__calendar__grid__cell--selected'] = isSelected, _classNames['eds-datepicker__calendar__grid__cell--disabled'] = isDisabled || isUnavailable, _classNames['eds-datepicker__calendar__grid__cell--outside-month'] = isOutsideVisibleRange, _classNames['eds-datepicker__calendar__grid__cell--today'] = date.isEqualDay(date$1, date.now((_state$timeZone = state.timeZone) != null ? _state$timeZone : date.getLocalTimeZone())), _classNames))
   }, rest, {
     onClick: function onClick(e) {
       buttonProps.onClick && buttonProps.onClick(e);
@@ -337,7 +336,7 @@ var CalendarCell = function CalendarCell(_ref) {
   }), formattedDate));
 };
 
-var _excluded$7 = ["state", "navigationDescription", "onSelectedCellClick"];
+var _excluded$7 = ["state", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate"];
 var CalendarGrid = function CalendarGrid(_ref) {
   var state = _ref.state,
     navigationDescription = _ref.navigationDescription,
@@ -345,6 +344,8 @@ var CalendarGrid = function CalendarGrid(_ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
+    classNameForDate = _ref.classNameForDate,
+    ariaLabelForDate = _ref.ariaLabelForDate,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var calendarGridId = utils.useRandomId('eds-calendar');
   var _useLocale = i18n.useLocale(),
@@ -386,7 +387,9 @@ var CalendarGrid = function CalendarGrid(_ref) {
         state: state,
         date: date,
         "aria-describedby": calendarGridId + 'description',
-        onSelectedCellClick: onSelectedCellClick
+        onSelectedCellClick: onSelectedCellClick,
+        classNameForDate: classNameForDate,
+        ariaLabelForDate: ariaLabelForDate
       }) : React.createElement("td", {
         key: i
       });
@@ -396,7 +399,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
   }, getNavigationDescription()));
 };
 
-var _excluded$6 = ["selectedDate", "onChange", "locale", "minDate", "maxDate", "style", "children", "navigationDescription", "onSelectedCellClick"];
+var _excluded$6 = ["selectedDate", "onChange", "locale", "minDate", "maxDate", "style", "className", "children", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate"];
 var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -404,11 +407,14 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
     style = _ref.style,
+    className = _ref.className,
     navigationDescription = _ref.navigationDescription,
     _ref$onSelectedCellCl = _ref.onSelectedCellClick,
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
+    classNameForDate = _ref.classNameForDate,
+    ariaLabelForDate = _ref.ariaLabelForDate,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
@@ -435,7 +441,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, React.createElement("div", _extends({}, calendarProps, {
     ref: ref,
-    className: "eds-datepicker__calendar",
+    className: classNames('eds-datepicker__calendar', className),
     style: style
   }), React.createElement("div", {
     className: "eds-datepicker__calendar__header"
@@ -450,11 +456,13 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }))), React.createElement(CalendarGrid, {
     state: state,
     navigationDescription: navigationDescription,
-    onSelectedCellClick: onSelectedCellClick
+    onSelectedCellClick: onSelectedCellClick,
+    classNameForDate: classNameForDate,
+    ariaLabelForDate: ariaLabelForDate
   })));
 });
 
-var _excluded$5 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType"];
+var _excluded$5 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate"];
 var DatePicker = function DatePicker(_ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -463,6 +471,7 @@ var DatePicker = function DatePicker(_ref) {
     showTime = _ref.showTime,
     _ref$showTimeZone = _ref.showTimeZone,
     showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
+    classNameForDate = _ref.classNameForDate,
     className = _ref.className,
     variant = _ref.variant,
     feedback = _ref.feedback,
@@ -477,6 +486,7 @@ var DatePicker = function DatePicker(_ref) {
     _ref$modalTreshold = _ref.modalTreshold,
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
     forcedReturnType = _ref.forcedReturnType,
+    ariaLabelForDate = _ref.ariaLabelForDate,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = React.useRef(null);
@@ -539,7 +549,9 @@ var DatePicker = function DatePicker(_ref) {
     onChange: handleOnChange,
     minDate: minDate,
     maxDate: maxDate,
-    ref: calendarRef
+    ref: calendarRef,
+    classNameForDate: classNameForDate,
+    ariaLabelForDate: ariaLabelForDate
   });
   var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {