@entur/datepicker 9.1.6 → 9.2.0

package/dist/datepicker.esm.js

@@ -290,15 +290,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 = _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 = useRef(null);
   var _useCalendarCell = useCalendarCell({
@@ -311,17 +313,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)) != 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': isEqualDay(date, now((_state$timeZone = state.timeZone) != null ? _state$timeZone : getLocalTimeZone()))
-    })
+    className: classNames('eds-datepicker__calendar__grid__cell', (_classNames = {}, _classNames[(_classNameForDate = classNameForDate == null ? void 0 : classNameForDate(date)) != 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'] = isEqualDay(date, now((_state$timeZone = state.timeZone) != null ? _state$timeZone : getLocalTimeZone())), _classNames))
   }, rest, {
     onClick: function onClick(e) {
       buttonProps.onClick && buttonProps.onClick(e);
@@ -334,7 +333,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,
@@ -342,6 +341,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 = useRandomId('eds-calendar');
   var _useLocale = useLocale(),
@@ -383,7 +384,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
       });
@@ -393,7 +396,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,
@@ -401,11 +404,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 = useLocale(),
     locale = _useLocale.locale;
@@ -432,7 +438,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"
@@ -447,11 +453,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,
@@ -460,6 +468,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,
@@ -474,6 +483,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 = useRef(null);
@@ -536,7 +546,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", {