@danske/sapphire-react-lab 0.76.0

package/build/esm/Calendar/src/CalendarButtons.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import clsx from 'clsx';
+import { FocusRing } from '@react-aria/focus';
+import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
+import { useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const CalendarButton = React.forwardRef(function SapphireCalendarButton(_a, forwardedRef) {
+  var _b = _a, {
+    children,
+    className = "",
+    isSelected,
+    isDisabled,
+    isInGridCell,
+    hasCurrentIndicator
+  } = _b, otherProps = __objRest(_b, [
+    "children",
+    "className",
+    "isSelected",
+    "isDisabled",
+    "isInGridCell",
+    "hasCurrentIndicator"
+  ]);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const ElementType = isInGridCell ? "span" : "button";
+  return /* @__PURE__ */ React.createElement(FocusRing, {
+    focusRingClass: styles["is-focus"]
+  }, /* @__PURE__ */ React.createElement(ElementType, __spreadProps(__spreadValues(__spreadValues({
+    ref: forwardedRef,
+    role: "button"
+  }, ElementType === "button" ? { type: "button" } : {}), mergeProps(otherProps, hoverProps)), {
+    className: clsx(className, styles["js-focus"], styles["js-hover"], styles["sapphire-calendar__button"], {
+      [styles[`sapphire-calendar__button--selected`]]: isSelected,
+      [styles["sapphire-calendar__button--current"]]: hasCurrentIndicator,
+      [styles[`is-hover`]]: isHovered,
+      [styles[`is-disabled`]]: isDisabled
+    })
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: styles["sapphire-calendar__button-text"]
+  }, children)));
+});
+const CalendarDayButton = React.forwardRef(function SapphireCalendarDayButton(_c, forwardedRef) {
+  var _d = _c, {
+    isOutsideVisibleRange,
+    rangeHighlight
+  } = _d, props = __objRest(_d, [
+    "isOutsideVisibleRange",
+    "rangeHighlight"
+  ]);
+  return /* @__PURE__ */ React.createElement(CalendarButton, __spreadProps(__spreadValues({}, props), {
+    isInGridCell: true,
+    className: clsx(styles["sapphire-calendar__button--day"], {
+      [styles["sapphire-calendar__button--range-selection"]]: rangeHighlight.highlighted,
+      [styles["sapphire-calendar__button--range-start"]]: rangeHighlight.highlighted && rangeHighlight.start,
+      [styles["sapphire-calendar__button--range-end"]]: rangeHighlight.highlighted && rangeHighlight.end,
+      [styles["sapphire-calendar__button--selection-start"]]: rangeHighlight.highlighted && rangeHighlight.start && props.isSelected,
+      [styles["sapphire-calendar__button--selection-end"]]: rangeHighlight.highlighted && rangeHighlight.end && props.isSelected,
+      [styles["sapphire-calendar__button--outside-month"]]: isOutsideVisibleRange
+    }),
+    ref: forwardedRef
+  }));
+});
+
+export { CalendarButton, CalendarDayButton };
+//# sourceMappingURL=CalendarButtons.js.map

package/build/esm/Calendar/src/CalendarButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarButtons.js","sources":["../../../../src/Calendar/src/CalendarButtons.tsx"],"sourcesContent":["import React, { DOMAttributes, ForwardedRef, HTMLAttributes } from 'react';\nimport clsx from 'clsx';\nimport { FocusRing } from '@react-aria/focus';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\nimport { useHover } from '@react-aria/interactions';\nimport { mergeProps } from '@react-aria/utils';\n\ntype CalendarButtonProps = {\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  hasCurrentIndicator?: boolean;\n  tabIndex?: HTMLAttributes<HTMLButtonElement>['tabIndex'];\n  isInGridCell?: boolean;\n} & DOMAttributes<HTMLButtonElement>;\n\nexport const CalendarButton = React.forwardRef(function SapphireCalendarButton(\n  {\n    children,\n    className = '',\n    isSelected,\n    isDisabled,\n    isInGridCell,\n    hasCurrentIndicator,\n    ...otherProps\n  }: CalendarButtonProps & { className?: string },\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const ElementType: 'span' | 'button' = isInGridCell ? 'span' : 'button';\n\n  return (\n    <FocusRing focusRingClass={styles['is-focus']}>\n      <ElementType\n        ref={forwardedRef}\n        role=\"button\"\n        {...(ElementType === 'button' ? ({ type: 'button' } as const) : {})}\n        {...mergeProps(otherProps, hoverProps)}\n        className={clsx(\n          className,\n          styles['js-focus'],\n          styles['js-hover'],\n          styles['sapphire-calendar__button'],\n          {\n            [styles[`sapphire-calendar__button--selected`]]: isSelected,\n            [styles['sapphire-calendar__button--current']]: hasCurrentIndicator,\n            [styles[`is-hover`]]: isHovered,\n            [styles[`is-disabled`]]: isDisabled,\n          }\n        )}\n      >\n        <span className={styles['sapphire-calendar__button-text']}>\n          {children}\n        </span>\n      </ElementType>\n    </FocusRing>\n  );\n});\n\nexport const CalendarDayButton = React.forwardRef(\n  function SapphireCalendarDayButton(\n    {\n      isOutsideVisibleRange,\n      rangeHighlight,\n      ...props\n    }: CalendarButtonProps & {\n      rangeHighlight:\n        | { highlighted: false }\n        | { highlighted: true; start?: boolean; end?: boolean };\n      isOutsideVisibleRange?: boolean;\n    },\n    forwardedRef: ForwardedRef<HTMLButtonElement>\n  ) {\n    return (\n      <CalendarButton\n        {...props}\n        isInGridCell\n        className={clsx(styles['sapphire-calendar__button--day'], {\n          [styles['sapphire-calendar__button--range-selection']]:\n            rangeHighlight.highlighted,\n          [styles['sapphire-calendar__button--range-start']]:\n            rangeHighlight.highlighted && rangeHighlight.start,\n          [styles['sapphire-calendar__button--range-end']]:\n            rangeHighlight.highlighted && rangeHighlight.end,\n          [styles['sapphire-calendar__button--selection-start']]:\n            rangeHighlight.highlighted &&\n            rangeHighlight.start &&\n            props.isSelected,\n          [styles['sapphire-calendar__button--selection-end']]:\n            rangeHighlight.highlighted &&\n            rangeHighlight.end &&\n            props.isSelected,\n          [styles['sapphire-calendar__button--outside-month']]:\n            isOutsideVisibleRange,\n        })}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/build/esm/Calendar/src/CalendarDaysGrid.js

@@ -0,0 +1,169 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { useCalendarGrid, useCalendarCell } from '@react-aria/calendar';
+import { endOfMonth, getWeeksInMonth, startOfWeek, today, isSameMonth, isSameDay, getDayOfWeek, startOfMonth, getLocalTimeZone } from '@internationalized/date';
+import { useLocale, useDateFormatter, useMessageFormatter } from '@react-aria/i18n';
+import intlMessages from '../i18n/index.js';
+import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
+import { CalendarDayButton } from './CalendarButtons.js';
+import { sentenceCase } from './utils.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function CalendarDaysGrid(_a) {
+  var _b = _a, {
+    state,
+    startDate = state.visibleRange.start,
+    showWeekNumbers
+  } = _b, props = __objRest(_b, [
+    "state",
+    "startDate",
+    "showWeekNumbers"
+  ]);
+  const { locale } = useLocale();
+  const { gridProps, headerProps } = useCalendarGrid(__spreadProps(__spreadValues({}, props), {
+    startDate,
+    endDate: endOfMonth(startDate)
+  }), state);
+  const weeksInMonth = getWeeksInMonth(startDate, locale);
+  const dayFormatter = useDateFormatter({
+    weekday: "short",
+    timeZone: state.timeZone
+  });
+  const weekDays = useMemo(() => {
+    const weekStart = startOfWeek(today(state.timeZone), locale);
+    return [...new Array(7).keys()].map((index) => {
+      const date = weekStart.add({ days: index });
+      const dateDay = date.toDate(state.timeZone);
+      return dayFormatter.format(dateDay);
+    });
+  }, [locale, state.timeZone, dayFormatter]);
+  return /* @__PURE__ */ React.createElement("table", __spreadProps(__spreadValues({}, gridProps), {
+    className: clsx(styles["sapphire-calendar__table"], {
+      [styles["sapphire-calendar__table--with-week-numbers"]]: showWeekNumbers
+    })
+  }), /* @__PURE__ */ React.createElement("thead", __spreadValues({}, headerProps), /* @__PURE__ */ React.createElement("tr", null, showWeekNumbers && /* @__PURE__ */ React.createElement("th", {
+    className: styles["sapphire-calendar__table-head-cell"],
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: styles["sapphire-calendar__week-number"]
+  }, "#")), weekDays.map((day, index) => /* @__PURE__ */ React.createElement("th", {
+    key: index,
+    className: styles["sapphire-calendar__table-head-cell"]
+  }, /* @__PURE__ */ React.createElement("abbr", {
+    className: styles["sapphire-calendar__day-of-week"]
+  }, sentenceCase(day)))))), /* @__PURE__ */ React.createElement("tbody", null, [...new Array(weeksInMonth).keys()].map((weekIndex) => {
+    return /* @__PURE__ */ React.createElement("tr", {
+      className: styles["sapphire-calendar__table-body-row"],
+      key: weekIndex
+    }, showWeekNumbers && /* @__PURE__ */ React.createElement(CalendarWeekNumberCell, {
+      date: startDate.add({ days: 7 * weekIndex })
+    }), state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ React.createElement(CalendarCell, {
+      currentMonth: startDate,
+      key: date.toString(),
+      state,
+      date
+    }) : /* @__PURE__ */ React.createElement("td", {
+      key: i
+    })));
+  }), /* @__PURE__ */ React.createElement("tr", null)));
+}
+function CalendarWeekNumberCell({ date }) {
+  const weekNumber = getWeekNumber(date);
+  const formatMessage = useMessageFormatter(intlMessages);
+  return /* @__PURE__ */ React.createElement("th", {
+    className: styles["sapphire-calendar__table-body-cell"],
+    role: "rowheader",
+    "aria-label": formatMessage("week", { weekNumber })
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: styles["sapphire-calendar__week-number"]
+  }, weekNumber));
+}
+function CalendarCell({
+  state,
+  date,
+  currentMonth
+}) {
+  const ref = React.useRef(null);
+  const { locale } = useLocale();
+  const sameMonth = isSameMonth(date, currentMonth);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected: isInSelection,
+    isDisabled,
+    formattedDate,
+    isUnavailable
+  } = useCalendarCell({ date, isDisabled: !sameMonth }, state, ref);
+  const highlightedRange = "highlightedRange" in state ? state.highlightedRange : null;
+  const isSelected = isInSelection && (!highlightedRange || isSameDay(highlightedRange.start, date) || isSameDay(highlightedRange.end, date));
+  return /* @__PURE__ */ React.createElement("td", __spreadProps(__spreadValues({}, cellProps), {
+    className: styles["sapphire-calendar__table-body-cell"]
+  }), /* @__PURE__ */ React.createElement(CalendarDayButton, __spreadProps(__spreadValues({}, buttonProps), {
+    ref,
+    isSelected,
+    isDisabled: isDisabled || isUnavailable,
+    hasCurrentIndicator: today(state.timeZone).compare(date) === 0,
+    isOutsideVisibleRange: !isSameMonth(currentMonth, date),
+    rangeHighlight: highlightedRange ? getRangeHighlight({ date, highlightedRange, locale }) : { highlighted: false }
+  }), formattedDate));
+}
+const getRangeHighlight = ({
+  date,
+  highlightedRange,
+  locale
+}) => {
+  const isInSelection = highlightedRange.start.compare(date) <= 0 && highlightedRange.end.compare(date) >= 0;
+  const rangeIsNotASingleDay = highlightedRange && !isSameDay(highlightedRange.start, highlightedRange.end);
+  const isStartOfWeek = getDayOfWeek(date, locale) === 0;
+  const isEndOfWeek = getDayOfWeek(date, locale) === 6;
+  const isStartOfMonth = isSameDay(date, startOfMonth(date));
+  const isEndOfMonth = isSameDay(date, endOfMonth(date));
+  const isStartOfRange = highlightedRange && isSameDay(highlightedRange == null ? void 0 : highlightedRange.start, date);
+  const isEndOfRange = highlightedRange && isSameDay(highlightedRange == null ? void 0 : highlightedRange.end, date);
+  const highlighted = isInSelection && rangeIsNotASingleDay;
+  return {
+    highlighted,
+    start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),
+    end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange)
+  };
+};
+const getWeekNumber = function(dateValue) {
+  const date = new Date(dateValue.toDate(getLocalTimeZone()));
+  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
+  const week1 = new Date(date.getFullYear(), 0, 4);
+  return 1 + Math.round(((date.getTime() - week1.getTime()) / 864e5 - 3 + (week1.getDay() + 6) % 7) / 7);
+};
+
+export { CalendarDaysGrid };
+//# sourceMappingURL=CalendarDaysGrid.js.map

package/build/esm/Calendar/src/CalendarDaysGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDaysGrid.js","sources":["../../../../src/Calendar/src/CalendarDaysGrid.tsx"],"sourcesContent":["import React, { ComponentProps, useMemo } from 'react';\nimport clsx from 'clsx';\nimport {\n  AriaCalendarCellProps,\n  AriaCalendarGridProps,\n  useCalendarCell,\n  useCalendarGrid,\n} from '@react-aria/calendar';\nimport { CalendarState, RangeCalendarState } from '@react-stately/calendar';\nimport {\n  CalendarDate,\n  DateValue,\n  endOfMonth,\n  getDayOfWeek,\n  getLocalTimeZone,\n  getWeeksInMonth,\n  isSameDay,\n  isSameMonth,\n  startOfMonth,\n  startOfWeek,\n  today,\n} from '@internationalized/date';\nimport {\n  useDateFormatter,\n  useLocale,\n  useMessageFormatter,\n} from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDayButton } from './CalendarButtons';\nimport { sentenceCase } from './utils';\n\nexport function CalendarDaysGrid({\n  state,\n  startDate = state.visibleRange.start,\n  showWeekNumbers,\n  ...props\n}: {\n  state: CalendarState | RangeCalendarState;\n  startDate?: CalendarDate;\n  showWeekNumbers?: boolean;\n} & AriaCalendarGridProps): JSX.Element {\n  const { locale } = useLocale();\n  const { gridProps, headerProps } = useCalendarGrid(\n    {\n      ...props,\n      startDate,\n      endDate: endOfMonth(startDate),\n    },\n    state\n  );\n  const weeksInMonth = getWeeksInMonth(startDate, locale);\n\n  // `weekDays` is returned from useCalendarGrid, but there is currently no option\n  // for customizing weekday format. So the corresponding piece of code is copy-pasted\n  // from useCalendarGrid, just to use \"short\" format instead of \"narrow\"\n  const dayFormatter = useDateFormatter({\n    weekday: 'short',\n    timeZone: state.timeZone,\n  });\n  const weekDays = useMemo(() => {\n    const weekStart = startOfWeek(today(state.timeZone), locale);\n    return [...new Array(7).keys()].map((index) => {\n      const date = weekStart.add({ days: index });\n      const dateDay = date.toDate(state.timeZone);\n      return dayFormatter.format(dateDay);\n    });\n  }, [locale, state.timeZone, dayFormatter]);\n\n  return (\n    <table\n      {...gridProps}\n      className={clsx(styles['sapphire-calendar__table'], {\n        [styles['sapphire-calendar__table--with-week-numbers']]:\n          showWeekNumbers,\n      })}\n    >\n      <thead {...headerProps}>\n        <tr>\n          {showWeekNumbers && (\n            <th\n              className={styles['sapphire-calendar__table-head-cell']}\n              aria-hidden=\"true\"\n            >\n              <span className={styles['sapphire-calendar__week-number']}>\n                #\n              </span>\n            </th>\n          )}\n          {weekDays.map((day, index) => (\n            <th\n              key={index}\n              className={styles['sapphire-calendar__table-head-cell']}\n            >\n              <abbr className={styles['sapphire-calendar__day-of-week']}>\n                {sentenceCase(day)}\n              </abbr>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n          return (\n            <tr\n              className={styles['sapphire-calendar__table-body-row']}\n              key={weekIndex}\n            >\n              {showWeekNumbers && (\n                <CalendarWeekNumberCell\n                  date={startDate.add({ days: 7 * weekIndex })}\n                />\n              )}\n              {state.getDatesInWeek(weekIndex, startDate).map((date, i) =>\n                date ? (\n                  <CalendarCell\n                    currentMonth={startDate}\n                    // by passing date.toString() instead of index, we make sure the cell\n                    // is remounted as we navigate between months. That prevents awkward\n                    // color transition if the same day-of-the-month is highlighted in one month\n                    // but not the other.\n                    key={date.toString()}\n                    state={state}\n                    date={date}\n                  />\n                ) : (\n                  <td key={i} />\n                )\n              )}\n            </tr>\n          );\n        })}\n        <tr></tr>\n      </tbody>\n    </table>\n  );\n}\nfunction CalendarWeekNumberCell({ date }: { date: DateValue }) {\n  const weekNumber = getWeekNumber(date);\n  const formatMessage = useMessageFormatter(intlMessages);\n  return (\n    <th\n      className={styles['sapphire-calendar__table-body-cell']}\n      role=\"rowheader\"\n      aria-label={formatMessage('week', { weekNumber })}\n    >\n      <span className={styles['sapphire-calendar__week-number']}>\n        {weekNumber}\n      </span>\n    </th>\n  );\n}\n\nfunction CalendarCell({\n  state,\n  date,\n  currentMonth,\n}: {\n  state: CalendarState | RangeCalendarState;\n  currentMonth: CalendarDate;\n} & AriaCalendarCellProps) {\n  const ref = React.useRef(null);\n  const { locale } = useLocale();\n  const sameMonth = isSameMonth(date, currentMonth);\n  const {\n    cellProps,\n    buttonProps,\n    isSelected: isInSelection,\n    isDisabled,\n    formattedDate,\n    isUnavailable,\n  } = useCalendarCell({ date, isDisabled: !sameMonth }, state, ref);\n\n  const highlightedRange =\n    'highlightedRange' in state ? state.highlightedRange : null;\n\n  const isSelected =\n    isInSelection &&\n    // if we have a highlighted range, only start and end of the range are styled selected.\n    (!highlightedRange ||\n      isSameDay(highlightedRange.start, date) ||\n      isSameDay(highlightedRange.end, date));\n\n  return (\n    <td {...cellProps} className={styles['sapphire-calendar__table-body-cell']}>\n      <CalendarDayButton\n        {...buttonProps}\n        ref={ref}\n        isSelected={isSelected}\n        isDisabled={isDisabled || isUnavailable}\n        hasCurrentIndicator={today(state.timeZone).compare(date) === 0}\n        isOutsideVisibleRange={!isSameMonth(currentMonth, date)}\n        rangeHighlight={\n          highlightedRange\n            ? getRangeHighlight({ date, highlightedRange, locale })\n            : { highlighted: false }\n        }\n      >\n        {formattedDate}\n      </CalendarDayButton>\n    </td>\n  );\n}\n\n/**\n * Given a date and a highlighted range, returns the range highlight state for that date.\n * Note that \"start\" doesn't simply mean start of the range, but means range start **style**,\n * which applies to some dates inside the range as well. A css-only solution could also cover\n * this, but it would require `:has()` selector which is not widely supported at the time of writing\n * this.\n */\nconst getRangeHighlight = ({\n  date,\n  highlightedRange,\n  locale,\n}: {\n  date: DateValue;\n  highlightedRange: RangeCalendarState['highlightedRange'];\n  locale: string;\n}): ComponentProps<typeof CalendarDayButton>['rangeHighlight'] => {\n  const isInSelection =\n    highlightedRange.start.compare(date) <= 0 &&\n    highlightedRange.end.compare(date) >= 0;\n  const rangeIsNotASingleDay =\n    highlightedRange &&\n    !isSameDay(highlightedRange.start, highlightedRange.end);\n  const isStartOfWeek = getDayOfWeek(date, locale) === 0;\n  const isEndOfWeek = getDayOfWeek(date, locale) === 6;\n  const isStartOfMonth = isSameDay(date, startOfMonth(date));\n  const isEndOfMonth = isSameDay(date, endOfMonth(date));\n  const isStartOfRange =\n    highlightedRange && isSameDay(highlightedRange?.start, date);\n  const isEndOfRange =\n    highlightedRange && isSameDay(highlightedRange?.end, date);\n\n  const highlighted = isInSelection && rangeIsNotASingleDay;\n  return {\n    highlighted,\n    start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),\n    end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange),\n  };\n};\n\n/**\n * Almost copied from https://weeknumber.com/how-to/javascript\n * No corresponding API found in @internationalized/date package, at the time\n * of writing this.\n * Caveat: this code is based on built-in Date object, and may not be\n * calendar-agnostic. We don't really care about supporting different types\n * of calendar, so it should be fine for now. But we can look into improving\n * this if needed.\n */\nconst getWeekNumber = function (dateValue: DateValue) {\n  const date = new Date(dateValue.toDate(getLocalTimeZone()));\n  date.setHours(0, 0, 0, 0);\n  // Thursday in current week decides the year.\n  date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));\n  // January 4 is always in week 1.\n  const week1 = new Date(date.getFullYear(), 0, 4);\n  // Adjust to Thursday in week 1 and count number of weeks from date to week1.\n  return (\n    1 +\n    Math.round(\n      ((date.getTime() - week1.getTime()) / 86400000 -\n        3 +\n        ((week1.getDay() + 6) % 7)) /\n        7\n    )\n  );\n};\n"],"names":[],"mappings":"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"}

package/build/esm/Calendar/src/CalendarHeader.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import clsx from 'clsx';
+import { IconButton } from '@danske/sapphire-react';
+import { ChevronLeft, ChevronRight } from '@danske/sapphire-icons/react';
+import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function CalendarHeader({
+  isLeft,
+  isRight,
+  children,
+  prevButtonProps,
+  nextButtonProps
+}) {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-calendar__header"], {
+      [styles["sapphire-calendar__header--left"]]: isLeft,
+      [styles["sapphire-calendar__header--right"]]: isRight
+    })
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles["sapphire-calendar__header-prev-month"]
+  }, /* @__PURE__ */ React.createElement(IconButton, __spreadProps(__spreadValues({}, prevButtonProps), {
+    variant: "tertiary",
+    appearance: "ghost",
+    size: "large",
+    "aria-label": "Previous"
+  }), /* @__PURE__ */ React.createElement(ChevronLeft, null))), /* @__PURE__ */ React.createElement("div", {
+    className: styles["sapphire-calendar__header-title"]
+  }, children), /* @__PURE__ */ React.createElement("div", {
+    className: styles["sapphire-calendar__header-next-month"]
+  }, /* @__PURE__ */ React.createElement(IconButton, __spreadProps(__spreadValues({}, nextButtonProps), {
+    variant: "tertiary",
+    appearance: "ghost",
+    size: "large",
+    "aria-label": "Next"
+  }), /* @__PURE__ */ React.createElement(ChevronRight, null))));
+}
+
+export { CalendarHeader };
+//# sourceMappingURL=CalendarHeader.js.map

package/build/esm/Calendar/src/CalendarHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/src/CalendarHeader.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { PressProps } from '@react-aria/interactions';\nimport { IconButton } from '@danske/sapphire-react';\nimport { ChevronLeft, ChevronRight } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\n/**\n * Calendar header shown above the grid.\n * @internal\n */\nexport function CalendarHeader({\n  isLeft,\n  isRight,\n  children,\n  prevButtonProps,\n  nextButtonProps,\n}: {\n  children: React.ReactNode;\n  prevButtonProps?: PressProps;\n  nextButtonProps?: PressProps;\n  isLeft?: boolean;\n  isRight?: boolean;\n}) {\n  return (\n    <div\n      className={clsx(styles['sapphire-calendar__header'], {\n        [styles['sapphire-calendar__header--left']]: isLeft,\n        [styles['sapphire-calendar__header--right']]: isRight,\n      })}\n    >\n      <div className={styles['sapphire-calendar__header-prev-month']}>\n        <IconButton\n          {...prevButtonProps}\n          variant=\"tertiary\"\n          appearance=\"ghost\"\n          size=\"large\"\n          aria-label=\"Previous\"\n        >\n          <ChevronLeft />\n        </IconButton>\n      </div>\n      <div className={styles['sapphire-calendar__header-title']}>\n        {children}\n      </div>\n      <div className={styles['sapphire-calendar__header-next-month']}>\n        <IconButton\n          {...nextButtonProps}\n          variant=\"tertiary\"\n          appearance=\"ghost\"\n          size=\"large\"\n          aria-label=\"Next\"\n        >\n          <ChevronRight />\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAW+B,SAAA,cAAA,CAAA;AAAA,EAC7B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,CAOC,EAAA;AACD,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA;AAAA,MAAA,CAClD,OAAO,iCAAqC,CAAA,GAAA,MAAA;AAAA,MAAA,CAC5C,OAAO,kCAAsC,CAAA,GAAA,OAAA;AAAA,KAAA,CAAA;AAAA,GAAA,sCAG/C,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,sCAAA,CAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eADN,CAAA,EAAA;AAAA,IAEE,OAAQ,EAAA,UAAA;AAAA,IACR,UAAW,EAAA,OAAA;AAAA,IACX,IAAK,EAAA,OAAA;AAAA,IACL,YAAW,EAAA,UAAA;AAAA,GAAA,CAAA,kBAEV,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,IAGJ,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GACpB,EAAA,QAAA,CAAA,sCAEF,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,sCAAA,CAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eADN,CAAA,EAAA;AAAA,IAEE,OAAQ,EAAA,UAAA;AAAA,IACR,UAAW,EAAA,OAAA;AAAA,IACX,IAAK,EAAA,OAAA;AAAA,IACL,YAAW,EAAA,MAAA;AAAA,GAAA,CAAA,sCAEV,YAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Calendar/src/CalendarMonthOrYearCell.js

@@ -0,0 +1,79 @@
+import React, { useEffect } from 'react';
+import { today, isSameMonth, isSameYear } from '@internationalized/date';
+import { usePress } from '@react-aria/interactions';
+import { focusWithoutScrolling, mergeProps } from '@react-aria/utils';
+import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
+import { CalendarButton } from './CalendarButtons.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const isSame = { month: isSameMonth, year: isSameYear };
+function CalendarMonthOrYearCell({
+  date,
+  state,
+  isDisabled,
+  field,
+  children
+}) {
+  const ref = React.useRef(null);
+  const isFocused = state.focusedDate[field] === date[field];
+  let tabIndex;
+  if (!isDisabled) {
+    tabIndex = isSame[field](date, state.focusedDate) ? 0 : -1;
+  }
+  useEffect(() => {
+    if (isFocused && ref.current) {
+      focusWithoutScrolling(ref.current);
+    }
+  }, [isFocused, ref]);
+  const { pressProps } = usePress({
+    isDisabled: state.isDisabled || isDisabled,
+    onPress: () => {
+      state.setFocusedDate(date);
+      if (!state.isReadOnly) {
+        state.narrowView();
+      }
+    }
+  });
+  const buttonProps = mergeProps(pressProps, {
+    onFocus() {
+      if (!isDisabled) {
+        state.setFocusedDate(date);
+      }
+    },
+    tabIndex,
+    role: "button",
+    "aria-disabled": isDisabled || void 0
+  });
+  return /* @__PURE__ */ React.createElement("td", {
+    className: styles["sapphire-calendar__table-body-cell"],
+    role: "gridcell"
+  }, /* @__PURE__ */ React.createElement(CalendarButton, __spreadProps(__spreadValues({
+    ref
+  }, buttonProps), {
+    isInGridCell: true,
+    isSelected: state.value && isSame[field](state.value, date),
+    isDisabled: state.isDisabled || isDisabled,
+    hasCurrentIndicator: isSame[field](date, today(state.timeZone))
+  }), children));
+}
+
+export { CalendarMonthOrYearCell };
+//# sourceMappingURL=CalendarMonthOrYearCell.js.map

package/build/esm/Calendar/src/CalendarMonthOrYearCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarMonthOrYearCell.js","sources":["../../../../src/Calendar/src/CalendarMonthOrYearCell.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport {\n  isSameMonth,\n  CalendarDate,\n  DateField,\n  isSameYear,\n  today,\n} from '@internationalized/date';\nimport { usePress } from '@react-aria/interactions';\nimport { focusWithoutScrolling, mergeProps } from '@react-aria/utils';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { CalendarButton } from './CalendarButtons';\n\nconst isSame = { month: isSameMonth, year: isSameYear } as const;\n\nexport function CalendarMonthOrYearCell({\n  date,\n  state,\n  isDisabled,\n  field,\n  children,\n}: {\n  date: CalendarDate;\n  field: Extract<DateField, 'month' | 'year'>;\n  state: SapphireCalendarState;\n  isDisabled?: boolean;\n  children: React.ReactNode;\n}): JSX.Element {\n  const ref = React.useRef(null);\n  const isFocused = state.focusedDate[field] === date[field];\n\n  let tabIndex: number | undefined;\n  if (!isDisabled) {\n    tabIndex = isSame[field](date, state.focusedDate) ? 0 : -1;\n  }\n\n  useEffect(() => {\n    if (isFocused && ref.current) {\n      focusWithoutScrolling(ref.current);\n    }\n  }, [isFocused, ref]);\n\n  const { pressProps } = usePress({\n    isDisabled: state.isDisabled || isDisabled,\n    onPress: () => {\n      state.setFocusedDate(date);\n      if (!state.isReadOnly) {\n        state.narrowView();\n      }\n    },\n  });\n  const buttonProps = mergeProps(pressProps, {\n    onFocus() {\n      if (!isDisabled) {\n        state.setFocusedDate(date);\n      }\n    },\n    tabIndex,\n    role: 'button',\n    'aria-disabled': isDisabled || undefined,\n  });\n  return (\n    <td\n      className={styles['sapphire-calendar__table-body-cell']}\n      role=\"gridcell\"\n    >\n      <CalendarButton\n        ref={ref}\n        {...buttonProps}\n        isInGridCell\n        isSelected={state.value && isSame[field](state.value, date)}\n        isDisabled={state.isDisabled || isDisabled}\n        hasCurrentIndicator={isSame[field](date, today(state.timeZone))}\n      >\n        {children}\n      </CalendarButton>\n    </td>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,MAAS,GAAA,EAAE,KAAO,EAAA,WAAA,EAAa,IAAM,EAAA,UAAA,EAAA,CAAA;AAEH,SAAA,uBAAA,CAAA;AAAA,EACtC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,CAOc,EAAA;AACd,EAAM,MAAA,GAAA,GAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACzB,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,WAAY,CAAA,KAAA,CAAA,KAAW,IAAK,CAAA,KAAA,CAAA,CAAA;AAEpD,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAA,QAAA,GAAW,MAAO,CAAA,KAAA,CAAA,CAAO,IAAM,EAAA,KAAA,CAAM,eAAe,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,GAAA;AAG1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,SAAA,IAAa,IAAI,OAAS,EAAA;AAC5B,MAAA,qBAAA,CAAsB,GAAI,CAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAE3B,CAAC,SAAW,EAAA,GAAA,CAAA,CAAA,CAAA;AAEf,EAAM,MAAA,EAAE,eAAe,QAAS,CAAA;AAAA,IAC9B,UAAA,EAAY,MAAM,UAAc,IAAA,UAAA;AAAA,IAChC,SAAS,MAAM;AACb,MAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AACrB,MAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,QAAM,KAAA,CAAA,UAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA;AAIZ,EAAM,MAAA,WAAA,GAAc,WAAW,UAAY,EAAA;AAAA,IACzC,OAAU,GAAA;AACR,MAAA,IAAI,CAAC,UAAY,EAAA;AACf,QAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,IAGzB,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,iBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAEjC,EAAA,2CACG,IAAD,EAAA;AAAA,IACE,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,IAClB,IAAK,EAAA,UAAA;AAAA,GAAA,sCAEJ,cAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,GAAA,EACI,WAFN,CAAA,EAAA;AAAA,IAGE,YAAY,EAAA,IAAA;AAAA,IACZ,YAAY,KAAM,CAAA,KAAA,IAAS,MAAO,CAAA,KAAA,CAAA,CAAO,MAAM,KAAO,EAAA,IAAA,CAAA;AAAA,IACtD,UAAA,EAAY,MAAM,UAAc,IAAA,UAAA;AAAA,IAChC,mBAAqB,EAAA,MAAA,CAAO,KAAO,CAAA,CAAA,IAAA,EAAM,MAAM,KAAM,CAAA,QAAA,CAAA,CAAA;AAAA,GAEpD,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Calendar/src/CalendarMonthsGrid.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useDateFormatter } from '@react-aria/i18n';
+import { startOfMonth, endOfMonth } from '@internationalized/date';
+import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
+import { range, chunks, sentenceCase } from './utils.js';
+import { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell.js';
+import { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function CalendarMonthsGrid({
+  state
+}) {
+  const formatter = useDateFormatter({
+    month: "long",
+    timeZone: state.timeZone
+  });
+  const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+  const months = range(1, numMonths).map((month) => formatter.format(state.focusedDate.set({ month }).toDate(state.timeZone)));
+  const monthRows = [...chunks(months, 3)];
+  const { gridProps } = useCustomDurationCalendarGrid({ cellsDuration: "months" }, state);
+  return /* @__PURE__ */ React.createElement("table", __spreadValues({
+    className: clsx(styles["sapphire-calendar__table"], styles["sapphire-calendar__table--month-year"])
+  }, gridProps), /* @__PURE__ */ React.createElement("tbody", null, monthRows.map((currentRowMonths, rowIndex) => /* @__PURE__ */ React.createElement("tr", {
+    key: rowIndex,
+    className: styles["sapphire-calendar__table-body-row"]
+  }, currentRowMonths.map((month, index) => {
+    const newFocusedDate = state.focusedDate.set({
+      month: months.indexOf(month) + 1
+    });
+    const isMonthDisabled = state.isInvalid(startOfMonth(newFocusedDate)) && state.isInvalid(endOfMonth(newFocusedDate));
+    return /* @__PURE__ */ React.createElement(CalendarMonthOrYearCell, {
+      key: index,
+      date: newFocusedDate,
+      field: "month",
+      isDisabled: isMonthDisabled,
+      state
+    }, sentenceCase(month));
+  })))));
+}
+
+export { CalendarMonthsGrid };
+//# sourceMappingURL=CalendarMonthsGrid.js.map

package/build/esm/Calendar/src/CalendarMonthsGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarMonthsGrid.js","sources":["../../../../src/Calendar/src/CalendarMonthsGrid.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { useDateFormatter } from '@react-aria/i18n';\nimport { endOfMonth, startOfMonth } from '@internationalized/date';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { chunks, range, sentenceCase } from './utils';\nimport { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell';\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid';\n\nexport function CalendarMonthsGrid({\n  state,\n}: {\n  state: SapphireCalendarState;\n}): JSX.Element {\n  const formatter = useDateFormatter({\n    month: 'long',\n    timeZone: state.timeZone,\n  });\n\n  const numMonths = state.focusedDate.calendar.getMonthsInYear(\n    state.focusedDate\n  );\n  const months = range(1, numMonths).map((month) =>\n    formatter.format(state.focusedDate.set({ month }).toDate(state.timeZone))\n  );\n  const monthRows = [...chunks(months, 3)];\n\n  const { gridProps } = useCustomDurationCalendarGrid(\n    { cellsDuration: 'months' },\n    state\n  );\n\n  return (\n    <table\n      className={clsx(\n        styles['sapphire-calendar__table'],\n        styles['sapphire-calendar__table--month-year']\n      )}\n      {...gridProps}\n    >\n      <tbody>\n        {monthRows.map((currentRowMonths, rowIndex) => (\n          <tr\n            key={rowIndex}\n            className={styles['sapphire-calendar__table-body-row']}\n          >\n            {currentRowMonths.map((month, index) => {\n              const newFocusedDate = state.focusedDate.set({\n                month: months.indexOf(month) + 1,\n              });\n\n              // Since validation is only about min and max dates, we just\n              // check the edges of the period\n              const isMonthDisabled =\n                state.isInvalid(startOfMonth(newFocusedDate)) &&\n                state.isInvalid(endOfMonth(newFocusedDate));\n              return (\n                <CalendarMonthOrYearCell\n                  key={index}\n                  date={newFocusedDate}\n                  field={'month'}\n                  isDisabled={isMonthDisabled}\n                  state={state}\n                >\n                  {sentenceCase(month)}\n                </CalendarMonthOrYearCell>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYmC,SAAA,kBAAA,CAAA;AAAA,EACjC,KAAA;AAAA,CAGc,EAAA;AACd,EAAA,MAAM,YAAY,gBAAiB,CAAA;AAAA,IACjC,KAAO,EAAA,MAAA;AAAA,IACP,UAAU,KAAM,CAAA,QAAA;AAAA,GAAA,CAAA,CAAA;AAGlB,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,WAAY,CAAA,QAAA,CAAS,gBAC3C,KAAM,CAAA,WAAA,CAAA,CAAA;AAER,EAAA,MAAM,MAAS,GAAA,KAAA,CAAM,CAAG,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,KAAA,KACtC,SAAU,CAAA,MAAA,CAAO,MAAM,WAAY,CAAA,GAAA,CAAI,EAAE,KAAA,EAAA,CAAA,CAAS,OAAO,KAAM,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAEjE,EAAA,MAAM,SAAY,GAAA,CAAC,GAAG,MAAA,CAAO,MAAQ,EAAA,CAAA,CAAA,CAAA,CAAA;AAErC,EAAA,MAAM,EAAE,SAAA,EAAA,GAAc,6BACpB,CAAA,EAAE,eAAe,QACjB,EAAA,EAAA,KAAA,CAAA,CAAA;AAGF,EAAA,2CACG,OAAD,EAAA,cAAA,CAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,0BAAA,CAAA,EACP,MAAO,CAAA,sCAAA,CAAA,CAAA;AAAA,GAEL,EAAA,SAAA,CAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,OAAA,EAAD,IACG,EAAA,SAAA,CAAU,IAAI,CAAC,gBAAA,EAAkB,QAChC,qBAAA,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAA,IACE,GAAK,EAAA,QAAA;AAAA,IACL,WAAW,MAAO,CAAA,mCAAA,CAAA;AAAA,GAAA,EAEjB,gBAAiB,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,KAAU,KAAA;AACtC,IAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,WAAA,CAAY,GAAI,CAAA;AAAA,MAC3C,KAAA,EAAO,MAAO,CAAA,OAAA,CAAQ,KAAS,CAAA,GAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAKjC,IAAA,MAAM,kBACJ,KAAM,CAAA,SAAA,CAAU,aAAa,cAC7B,CAAA,CAAA,IAAA,KAAA,CAAM,UAAU,UAAW,CAAA,cAAA,CAAA,CAAA,CAAA;AAC7B,IAAA,2CACG,uBAAD,EAAA;AAAA,MACE,GAAK,EAAA,KAAA;AAAA,MACL,IAAM,EAAA,cAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,MACP,UAAY,EAAA,eAAA;AAAA,MACZ,KAAA;AAAA,KAAA,EAEC,YAAa,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Calendar/src/CalendarPageAnimation.js

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
+import clsx from 'clsx';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function CalendarPageAnimation({
+  children,
+  state: { direction, key }
+}) {
+  return /* @__PURE__ */ React.createElement(TransitionGroup, {
+    className: clsx(styles["sapphire-calendar__grid-page-animation"], styles[`sapphire-calendar__grid-page-animation--${direction}`])
+  }, /* @__PURE__ */ React.createElement(CSSTransition, {
+    key,
+    addEndListener: (node, done) => {
+      node.addEventListener("transitionend", done, false);
+    },
+    unmountOnExit: true,
+    classNames: {
+      enter: styles["enter"],
+      enterActive: styles["enter-active"],
+      exit: styles["exit"],
+      exitActive: styles["exit-active"]
+    }
+  }, children));
+}
+function useCalendarAnimationState(state) {
+  const [animationState, setAnimationState] = useState({ key: 0, direction: "next" });
+  return __spreadProps(__spreadValues({}, state), {
+    focusNextPage: () => {
+      setAnimationState(({ key }) => ({
+        key: key + 1,
+        direction: "next"
+      }));
+      state.focusNextPage();
+    },
+    focusPreviousPage: () => {
+      setAnimationState(({ key }) => ({
+        key: key - 1,
+        direction: "prev"
+      }));
+      state.focusPreviousPage();
+    },
+    animationState
+  });
+}
+
+export { CalendarPageAnimation, useCalendarAnimationState };
+//# sourceMappingURL=CalendarPageAnimation.js.map

package/build/esm/Calendar/src/CalendarPageAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPageAnimation.js","sources":["../../../../src/Calendar/src/CalendarPageAnimation.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\nimport { CalendarState } from '@react-stately/calendar';\nimport clsx from 'clsx';\n\nexport function CalendarPageAnimation({\n  children,\n  state: { direction, key },\n}: {\n  children: ReactNode;\n  state: CalendarAnimationState;\n}) {\n  return (\n    <TransitionGroup\n      className={clsx(\n        styles['sapphire-calendar__grid-page-animation'],\n        styles[`sapphire-calendar__grid-page-animation--${direction}`]\n      )}\n    >\n      <CSSTransition\n        key={key}\n        addEndListener={(node, done) => {\n          // Using addEndListener, to avoid passing `timeout` which we can't easily know in js\n          node.addEventListener('transitionend', done, false);\n        }}\n        unmountOnExit\n        classNames={{\n          enter: styles['enter'],\n          enterActive: styles['enter-active'],\n          exit: styles['exit'],\n          exitActive: styles['exit-active'],\n        }}\n      >\n        {children}\n      </CSSTransition>\n    </TransitionGroup>\n  );\n}\n\ntype CalendarAnimationState = {\n  key: React.Key;\n  direction: 'prev' | 'next';\n};\n\n/**\n * @param state input calendar state\n * @returns a new calendar state which has additional properties required for animation\n */\nexport function useCalendarAnimationState<\n  T extends Pick<CalendarState, 'focusNextPage' | 'focusPreviousPage'>\n>(\n  state: T\n): T & {\n  animationState: CalendarAnimationState;\n} {\n  const [animationState, setAnimationState] = useState<{\n    key: number;\n    direction: 'prev' | 'next';\n  }>({ key: 0, direction: 'next' });\n  return {\n    ...state,\n    focusNextPage: () => {\n      setAnimationState(({ key }) => ({\n        key: key + 1,\n        direction: 'next',\n      }));\n      state.focusNextPage();\n    },\n    focusPreviousPage: () => {\n      setAnimationState(({ key }) => ({\n        key: key - 1,\n        direction: 'prev',\n      }));\n      state.focusPreviousPage();\n    },\n    animationState,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMsC,SAAA,qBAAA,CAAA;AAAA,EACpC,QAAA;AAAA,EACA,KAAA,EAAO,EAAE,SAAW,EAAA,GAAA,EAAA;AAAA,CAInB,EAAA;AACD,EAAA,2CACG,eAAD,EAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,wCAAA,CAAA,EACP,OAAO,CAA2C,wCAAA,EAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAAA,sCAGnD,aAAD,EAAA;AAAA,IACE,GAAA;AAAA,IACA,cAAA,EAAgB,CAAC,IAAA,EAAM,IAAS,KAAA;AAE9B,MAAK,IAAA,CAAA,gBAAA,CAAiB,iBAAiB,IAAM,EAAA,KAAA,CAAA,CAAA;AAAA,KAAA;AAAA,IAE/C,aAAa,EAAA,IAAA;AAAA,IACb,UAAY,EAAA;AAAA,MACV,OAAO,MAAO,CAAA,OAAA,CAAA;AAAA,MACd,aAAa,MAAO,CAAA,cAAA,CAAA;AAAA,MACpB,MAAM,MAAO,CAAA,MAAA,CAAA;AAAA,MACb,YAAY,MAAO,CAAA,aAAA,CAAA;AAAA,KAAA;AAAA,GAGpB,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA,CAAA;AAeF,SAAA,yBAAA,CAGL,KAGA,EAAA;AACA,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAA,CAAA,GAAqB,SAGzC,EAAE,GAAA,EAAK,GAAG,SAAW,EAAA,MAAA,EAAA,CAAA,CAAA;AACxB,EAAA,OAAO,iCACF,KADE,CAAA,EAAA;AAAA,IAEL,eAAe,MAAM;AACnB,MAAkB,iBAAA,CAAA,CAAC,EAAE,GAAW,EAAA,MAAA;AAAA,QAC9B,KAAK,GAAM,GAAA,CAAA;AAAA,QACX,SAAW,EAAA,MAAA;AAAA,OAAA,CAAA,CAAA,CAAA;AAEb,MAAM,KAAA,CAAA,aAAA,EAAA,CAAA;AAAA,KAAA;AAAA,IAER,mBAAmB,MAAM;AACvB,MAAkB,iBAAA,CAAA,CAAC,EAAE,GAAW,EAAA,MAAA;AAAA,QAC9B,KAAK,GAAM,GAAA,CAAA;AAAA,QACX,SAAW,EAAA,MAAA;AAAA,OAAA,CAAA,CAAA,CAAA;AAEb,MAAM,KAAA,CAAA,iBAAA,EAAA,CAAA;AAAA,KAAA;AAAA,IAER,cAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}