@entur/datepicker 9.2.0-beta.0 → 9.3.0

package/dist/DatePicker/Calendar.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
 import { CalendarDate, DateValue } from '@internationalized/date';
+import { MappedDateValue } from '@react-types/datepicker';
 import './Calendar.scss';
-export type CalendarProps = {
-    selectedDate: DateValue | null;
-    onChange: (SelectedDate: DateValue | null) => void;
+export type CalendarProps<DateType extends DateValue> = {
+    selectedDate: DateType | null;
+    onChange: (SelectedDate: MappedDateValue<DateType> | null) => void | React.Dispatch<React.SetStateAction<DateType | null>>;
     navigationDescription?: string;
     style?: React.CSSProperties;
+    /** Ekstra klassenavn */
+    className?: string;
     onSelectedCellClick?: () => void;
     /** Tidligste gyldige datovalg.
      * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
@@ -21,6 +24,13 @@ export 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;
+    /** Slå på visning av ukenummere i kalenderen. Overskriften for ukenummer-kolonnen
+     * kan endres med prop-en 'weekNumberHeader'
+     * @default false */
+    showWeekNumbers?: boolean;
+    /** Overskrift som vises for ukenummer-kolonnen. Vises kun hvis 'showWeekNumbers' er true.
+     * @default 'uke' */
+    weekNumberHeader?: string;
     /** 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
@@ -36,6 +46,7 @@ export type CalendarProps = {
      *  @example (date) => isWeekend(date, 'no-NO') ? 'helgedag' : ''
      */
     ariaLabelForDate?: (date: CalendarDate) => string;
-    [key: string]: any;
+    locale?: string;
+    calendarRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
-export declare const Calendar: React.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Calendar: <DateType extends DateValue>({ locale: localOverride, ...rest }: CalendarProps<DateType>) => React.JSX.Element;

package/dist/DatePicker/CalendarCell.d.ts

@@ -4,9 +4,10 @@ import { CalendarDate } from '@internationalized/date';
 type CalendarCellProps = {
     state: CalendarState;
     date: CalendarDate;
+    weekNumberString: string;
     onSelectedCellClick?: () => void;
     classNameForDate?: (date: CalendarDate) => string;
     ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const CalendarCell: ({ state, date, onSelectedCellClick, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
+export declare const CalendarCell: ({ state, date, onSelectedCellClick, weekNumberString, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/CalendarGrid.d.ts

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

package/dist/DatePicker/DatePicker.d.ts

@@ -52,6 +52,13 @@ export type DatePickerProps<DateType extends DateValue> = {
      */
     validationVariant?: VariantType;
     disabled?: boolean;
+    /** Slå på visning av ukenummere i kalenderen. Overskriften for ukenummer-kolonnen
+     * kan endres med prop-en 'weekNumberHeader'
+     * @default false */
+    showWeekNumbers?: boolean;
+    /** Overskrift som vises for ukenummer-kolonnen. Vises kun hvis 'showWeekNumbers' er true.
+     * @default '#' */
+    weekNumberHeader?: string;
     /** Hvis true vil kalenderen alltid vises i en popover når den åpnes
      *  @default false
      */
@@ -94,4 +101,4 @@ export type DatePickerProps<DateType extends DateValue> = {
     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, classNameForDate, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ariaLabelForDate, ...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, showWeekNumbers, weekNumberHeader, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ariaLabelForDate, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;

package/dist/datepicker.cjs.development.js

@@ -197,6 +197,21 @@ var focusSegment = function focusSegment(ref, segment) {
     }
   }
 };
+/** Based on code from https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php */
+function getWeekNumberForDate(date$1) {
+  if (date$1 === null) return -1;
+  var calendarDate = convertValueToType({
+    value: date$1,
+    type: 'CalendarDate'
+  });
+  var firstDayOfWeek = date.startOfWeek(calendarDate, 'no-NO');
+  var thursdayOfWeek = firstDayOfWeek.add({
+    days: 3
+  });
+  var firstDayOfYearForThursday = date.startOfYear(thursdayOfWeek);
+  var weekNumber = Math.ceil((thursdayOfWeek.compare(firstDayOfYearForThursday) + 1) / 7);
+  return weekNumber;
+}
 
 var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
 var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -293,15 +308,16 @@ var CalendarButton = function CalendarButton(_ref) {
   }), children);
 };
 
-var _excluded$8 = ["state", "date", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate"];
+var _excluded$8 = ["state", "date", "onSelectedCellClick", "weekNumberString", "classNameForDate", "ariaLabelForDate"];
 var CalendarCell = function CalendarCell(_ref) {
-  var _ariaLabelForDate, _classNameForDate, _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,
+    weekNumberString = _ref.weekNumberString,
     classNameForDate = _ref.classNameForDate,
     ariaLabelForDate = _ref.ariaLabelForDate,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
@@ -316,19 +332,15 @@ 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 : '');
+  var ariaLabel = "" + buttonProps['aria-label'] + weekNumberString + " " + ((_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,
+    "aria-hidden": isOutsideVisibleRange,
     ref: cellRef,
     hidden: isOutsideVisibleRange,
-    className: classNames('eds-datepicker__calendar__grid__cell', [(_classNameForDate = classNameForDate == null ? void 0 : classNameForDate(date$1)) != null ? _classNameForDate : ''], {
-      '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);
@@ -341,7 +353,7 @@ var CalendarCell = function CalendarCell(_ref) {
   }), formattedDate));
 };
 
-var _excluded$7 = ["state", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate"];
+var _excluded$7 = ["state", "navigationDescription", "onSelectedCellClick", "showWeekNumbers", "weekNumberHeader", "classNameForDate", "ariaLabelForDate"];
 var CalendarGrid = function CalendarGrid(_ref) {
   var state = _ref.state,
     navigationDescription = _ref.navigationDescription,
@@ -349,6 +361,8 @@ var CalendarGrid = function CalendarGrid(_ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
+    showWeekNumbers = _ref.showWeekNumbers,
+    weekNumberHeader = _ref.weekNumberHeader,
     classNameForDate = _ref.classNameForDate,
     ariaLabelForDate = _ref.ariaLabelForDate,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
@@ -379,19 +393,26 @@ var CalendarGrid = function CalendarGrid(_ref) {
   return React.createElement(React.Fragment, null, React.createElement("table", _extends({}, gridProps, {
     cellSpacing: "0",
     className: "eds-datepicker__calendar__grid"
-  }), React.createElement("thead", _extends({}, headerProps), React.createElement("tr", null, weekDaysMapped().map(function (day, index) {
+  }), React.createElement("thead", _extends({}, headerProps), React.createElement("tr", null, showWeekNumbers && React.createElement("th", {
+    className: "eds-datepicker__calendar__grid__weeknumber-header"
+  }, weekNumberHeader), weekDaysMapped().map(function (day, index) {
     return React.createElement("th", {
       key: index
     }, day);
   }))), React.createElement("tbody", null, weeksArray.map(function (weekIndex) {
+    var weekNumber = getWeekNumberForDate(state.getDatesInWeek(weekIndex)[0]);
     return React.createElement("tr", {
       key: weekIndex
-    }, state.getDatesInWeek(weekIndex).map(function (date, i) {
+    }, showWeekNumbers && React.createElement("th", {
+      "aria-hidden": true,
+      className: "eds-datepicker__calendar__grid__weeknumber"
+    }, weekNumber), state.getDatesInWeek(weekIndex).map(function (date, i) {
       return date ? React.createElement(CalendarCell, {
         key: i,
         state: state,
         date: date,
         "aria-describedby": calendarGridId + 'description',
+        weekNumberString: showWeekNumbers ? ", " + weekNumberHeader + " " + weekNumber + "," : '',
         onSelectedCellClick: onSelectedCellClick,
         classNameForDate: classNameForDate,
         ariaLabelForDate: ariaLabelForDate
@@ -404,28 +425,43 @@ var CalendarGrid = function CalendarGrid(_ref) {
   }, getNavigationDescription()));
 };
 
-var _excluded$6 = ["selectedDate", "onChange", "locale", "minDate", "maxDate", "style", "children", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate"];
-var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var selectedDate = _ref.selectedDate,
-    onChange = _ref.onChange,
-    customLocale = _ref.locale,
-    minDate = _ref.minDate,
-    maxDate = _ref.maxDate,
-    style = _ref.style,
-    navigationDescription = _ref.navigationDescription,
-    _ref$onSelectedCellCl = _ref.onSelectedCellClick,
-    onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
-      return;
-    } : _ref$onSelectedCellCl,
-    classNameForDate = _ref.classNameForDate,
-    ariaLabelForDate = _ref.ariaLabelForDate,
+var _excluded$6 = ["locale"],
+  _excluded2$3 = ["selectedDate", "onChange", "minDate", "maxDate", "showWeekNumbers", "weekNumberHeader", "style", "className", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate", "calendarRef"];
+var Calendar = function Calendar(_ref) {
+  var localOverride = _ref.locale,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
+  return React.createElement(i18n.I18nProvider, {
+    locale: localOverride != null ? localOverride : locale
+  }, React.createElement(CalendarBase, _extends({}, rest)));
+};
+var CalendarBase = function CalendarBase(_ref2) {
+  var selectedDate = _ref2.selectedDate,
+    onChange = _ref2.onChange,
+    minDate = _ref2.minDate,
+    maxDate = _ref2.maxDate,
+    _ref2$showWeekNumbers = _ref2.showWeekNumbers,
+    showWeekNumbers = _ref2$showWeekNumbers === void 0 ? false : _ref2$showWeekNumbers,
+    _ref2$weekNumberHeade = _ref2.weekNumberHeader,
+    weekNumberHeader = _ref2$weekNumberHeade === void 0 ? 'uke' : _ref2$weekNumberHeade,
+    style = _ref2.style,
+    className = _ref2.className,
+    navigationDescription = _ref2.navigationDescription,
+    _ref2$onSelectedCellC = _ref2.onSelectedCellClick,
+    onSelectedCellClick = _ref2$onSelectedCellC === void 0 ? function () {
+      return;
+    } : _ref2$onSelectedCellC,
+    classNameForDate = _ref2.classNameForDate,
+    ariaLabelForDate = _ref2.ariaLabelForDate,
+    calendarRef = _ref2.calendarRef,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+  var _useLocale2 = i18n.useLocale(),
+    locale = _useLocale2.locale;
   var allProps = _extends({}, rest, {
     value: selectedDate,
     onChange: onChange,
-    locale: customLocale != null ? customLocale : locale,
+    locale: locale,
     createCalendar: createCalendar,
     minValue: minDate,
     maxValue: maxDate
@@ -436,16 +472,9 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     prevButtonProps = _useCalendar.prevButtonProps,
     nextButtonProps = _useCalendar.nextButtonProps,
     title = _useCalendar.title;
-  return React.createElement(utils.ConditionalWrapper, {
-    condition: customLocale,
-    wrapper: function wrapper(child) {
-      return React.createElement(i18n.I18nProvider, {
-        locale: customLocale
-      }, child);
-    }
-  }, React.createElement("div", _extends({}, calendarProps, {
-    ref: ref,
-    className: "eds-datepicker__calendar",
+  return React.createElement("div", _extends({}, calendarProps, {
+    ref: calendarRef,
+    className: classNames('eds-datepicker__calendar', className),
     style: style
   }), React.createElement("div", {
     className: "eds-datepicker__calendar__header"
@@ -462,11 +491,13 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     navigationDescription: navigationDescription,
     onSelectedCellClick: onSelectedCellClick,
     classNameForDate: classNameForDate,
-    ariaLabelForDate: ariaLabelForDate
-  })));
-});
+    ariaLabelForDate: ariaLabelForDate,
+    showWeekNumbers: showWeekNumbers,
+    weekNumberHeader: weekNumberHeader
+  }));
+};
 
-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 _excluded$5 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate"];
 var DatePicker = function DatePicker(_ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -481,6 +512,8 @@ var DatePicker = function DatePicker(_ref) {
     feedback = _ref.feedback,
     validationVariant = _ref.validationVariant,
     validationFeedback = _ref.validationFeedback,
+    showWeekNumbers = _ref.showWeekNumbers,
+    weekNumberHeader = _ref.weekNumberHeader,
     _ref$disableModal = _ref.disableModal,
     disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
     labelTooltip = _ref.labelTooltip,
@@ -553,9 +586,11 @@ var DatePicker = function DatePicker(_ref) {
     onChange: handleOnChange,
     minDate: minDate,
     maxDate: maxDate,
-    ref: calendarRef,
+    calendarRef: calendarRef,
     classNameForDate: classNameForDate,
-    ariaLabelForDate: ariaLabelForDate
+    ariaLabelForDate: ariaLabelForDate,
+    showWeekNumbers: showWeekNumbers,
+    weekNumberHeader: weekNumberHeader
   });
   var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {
@@ -1139,6 +1174,7 @@ exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;
 exports.convertValueToType = convertValueToType;
 exports.createCalendar = createCalendar;
 exports.focusSegment = focusSegment;
+exports.getWeekNumberForDate = getWeekNumberForDate;
 exports.lastMillisecondOfDay = lastMillisecondOfDay;
 exports.modulo = modulo;
 exports.nativeDateToDateValue = nativeDateToDateValue;