@helsenorge/datepicker 12.5.0 → 12.7.0

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+## [12.7.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.4&targetVersion=GTv12.7.0) (2025-10-17)
+
+### Features
+
+- **formgroup:** endre prop for FormFieldTag til å være lik som i label
+  ([850b4e0](https://github.com/helsenorge/designsystem/commit/850b4e0cdc5888dbe29ba894c23e460dfe9d4930)), closes
+  [#362503](https://github.com/helsenorge/designsystem/issues/362503)
+
+## [12.6.4](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.3&targetVersion=GTv12.6.4) (2025-10-16)
+
+### Reverts
+
+- Revert "v12.6.3" ([973e6b8](https://github.com/helsenorge/designsystem/commit/973e6b8893fc765892a993adf83d93f4d5bfd5dd))
+
+## [12.6.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.2&targetVersion=GTv12.6.3) (2025-10-16)
+
+## [12.6.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.1&targetVersion=GTv12.6.2) (2025-10-16)
+
+## [12.6.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.0&targetVersion=GTv12.6.1) (2025-10-16)
+
+## [12.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.5.0&targetVersion=GTv12.6.0) (2025-10-16)
+
+### Features
+
+- **formfieldtag:** ny komponent for å markere obligatoriske felter
+  ([43186e8](https://github.com/helsenorge/designsystem/commit/43186e85e06d6b3e34124c3afd372180ecff9af9)), closes
+  [#361861](https://github.com/helsenorge/designsystem/issues/361861)
+- **stickynote:** justeringer etter ny figma komponent
+  ([b3afb5a](https://github.com/helsenorge/designsystem/commit/b3afb5a41f1400bef0afce40b244deafcac7b505)), closes
+  [#361520](https://github.com/helsenorge/designsystem/issues/361520)
+
+### Bug Fixes
+
+- **formfieldtag:** fiks display for at den holder seg i riktig størrelse
+  ([1e53dc1](https://github.com/helsenorge/designsystem/commit/1e53dc1cf52215a3476a1d6d86c36f8108b0fbc1)), closes
+  [#361861](https://github.com/helsenorge/designsystem/issues/361861)
+- **label:** bruk formfieldtag som komponent slik at man får satt id
+  ([006e152](https://github.com/helsenorge/designsystem/commit/006e1520cc16b66f637c11c193902510ebd72b76)), closes
+  [#361861](https://github.com/helsenorge/designsystem/issues/361861)
+
 ## [12.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.4.0&targetVersion=GTv12.5.0) (2025-10-08)
 
 ### Features

package/components/DatePicker/index.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React, { createContext, useContext, useCallback, useRef, useLayoutEffect, useState, useEffect, useMemo } from "react";
-import { addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, format, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear, isValid, parse, isWithinInterval } from "date-fns";
+import { addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, eachYearOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, format, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear, isValid, parse, isWithinInterval } from "date-fns";
 import { nb } from "date-fns/locale";
 import Button$1 from "@helsenorge/designsystem-react/components/Button";
 import Icon from "@helsenorge/designsystem-react/components/Icon";
@@ -325,6 +325,19 @@ class DateLib {
       var _a;
       return ((_a = this.overrides) == null ? void 0 : _a.eachMonthOfInterval) ? this.overrides.eachMonthOfInterval(interval) : eachMonthOfInterval(interval);
     };
+    this.eachYearOfInterval = (interval) => {
+      var _a;
+      const years = ((_a = this.overrides) == null ? void 0 : _a.eachYearOfInterval) ? this.overrides.eachYearOfInterval(interval) : eachYearOfInterval(interval);
+      const uniqueYears = new Set(years.map((d) => this.getYear(d)));
+      if (uniqueYears.size === years.length) {
+        return years;
+      }
+      const yearsArray = [];
+      uniqueYears.forEach((y) => {
+        yearsArray.push(new Date(y, 0, 1));
+      });
+      return yearsArray;
+    };
     this.endOfBroadcastWeek = (date) => {
       var _a;
       return ((_a = this.overrides) == null ? void 0 : _a.endOfBroadcastWeek) ? this.overrides.endOfBroadcastWeek(date) : endOfBroadcastWeek(date, this);
@@ -475,7 +488,62 @@ class DateLib {
   formatNumber(value) {
     return this.replaceDigits(value.toString());
   }
-}
+  /**
+   * Returns the preferred ordering for month and year labels for the current
+   * locale.
+   */
+  getMonthYearOrder() {
+    var _a;
+    const code = (_a = this.options.locale) == null ? void 0 : _a.code;
+    if (!code) {
+      return "month-first";
+    }
+    return DateLib.yearFirstLocales.has(code) ? "year-first" : "month-first";
+  }
+  /**
+   * Formats the month/year pair respecting locale conventions.
+   *
+   * @since 9.11.0
+   */
+  formatMonthYear(date) {
+    const { locale, timeZone, numerals } = this.options;
+    const localeCode = locale == null ? void 0 : locale.code;
+    if (localeCode && DateLib.yearFirstLocales.has(localeCode)) {
+      try {
+        const intl = new Intl.DateTimeFormat(localeCode, {
+          month: "long",
+          year: "numeric",
+          timeZone,
+          numberingSystem: numerals
+        });
+        const formatted = intl.format(date);
+        return formatted;
+      } catch {
+      }
+    }
+    const pattern = this.getMonthYearOrder() === "year-first" ? "y LLLL" : "LLLL y";
+    return this.format(date, pattern);
+  }
+}
+DateLib.yearFirstLocales = /* @__PURE__ */ new Set([
+  "eu",
+  "hu",
+  "ja",
+  "ja-Hira",
+  "ja-JP",
+  "ko",
+  "ko-KR",
+  "lt",
+  "lt-LT",
+  "lv",
+  "lv-LV",
+  "mn",
+  "mn-MN",
+  "zh",
+  "zh-CN",
+  "zh-HK",
+  "zh-TW"
+]);
 const defaultDateLib = new DateLib();
 class CalendarDay {
   constructor(date, displayMonth, dateLib = defaultDateLib) {
@@ -947,7 +1015,8 @@ function getDefaultClassNames() {
   return classNames2;
 }
 function formatCaption(month, options, dateLib) {
-  return (dateLib ?? new DateLib(options)).format(month, "LLLL y");
+  const lib = dateLib ?? new DateLib(options);
+  return lib.formatMonthYear(month);
 }
 const formatMonthCaption = formatCaption;
 function formatDay(date, options, dateLib) {
@@ -1035,21 +1104,16 @@ function getYearOptions(navStart, navEnd, formatters, dateLib, reverse = false)
     return void 0;
   if (!navEnd)
     return void 0;
-  const { startOfYear: startOfYear2, endOfYear: endOfYear2, addYears: addYears2, getYear: getYear2, isBefore: isBefore2, isSameYear: isSameYear2 } = dateLib;
+  const { startOfYear: startOfYear2, endOfYear: endOfYear2, eachYearOfInterval: eachYearOfInterval2, getYear: getYear2 } = dateLib;
   const firstNavYear = startOfYear2(navStart);
   const lastNavYear = endOfYear2(navEnd);
-  const years = [];
-  let year = firstNavYear;
-  while (isBefore2(year, lastNavYear) || isSameYear2(year, lastNavYear)) {
-    years.push(year);
-    year = addYears2(year, 1);
-  }
+  const years = eachYearOfInterval2({ start: firstNavYear, end: lastNavYear });
   if (reverse)
     years.reverse();
-  return years.map((year2) => {
-    const label = formatters.formatYearDropdown(year2, dateLib);
+  return years.map((year) => {
+    const label = formatters.formatYearDropdown(year, dateLib);
     return {
-      value: getYear2(year2),
+      value: getYear2(year),
       label,
       disabled: false
     };
@@ -1065,7 +1129,8 @@ function labelDayButton(date, modifiers, options, dateLib) {
 }
 const labelDay = labelDayButton;
 function labelGrid(date, options, dateLib) {
-  return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
+  const lib = dateLib ?? new DateLib(options);
+  return lib.formatMonthYear(date);
 }
 const labelCaption = labelGrid;
 function labelGridcell(date, modifiers, options, dateLib) {
@@ -1557,6 +1622,12 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
     const nextFocus = getNextFocus(moveBy, moveDir, focusedDay, calendar.navStart, calendar.navEnd, props, dateLib);
     if (!nextFocus)
       return;
+    if (props.disableNavigation) {
+      const isNextInCalendar = calendar.days.some((day) => day.isEqualTo(nextFocus));
+      if (!isNextInCalendar) {
+        return;
+      }
+    }
     calendar.goToDay(nextFocus);
     setFocused(nextFocus);
   };
@@ -1977,7 +2048,7 @@ function DayPicker(initialProps) {
     { value: contextValue },
     React.createElement(
       components2.Root,
-      { rootRef: props.animate ? rootElRef : void 0, className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
+      { rootRef: props.animate ? rootElRef : void 0, className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
       React.createElement(
         components2.Months,
         { className: classNames2[UI.Months], style: styles2 == null ? void 0 : styles2[UI.Months] },
@@ -2002,8 +2073,12 @@ function DayPicker(initialProps) {
             React.createElement(components2.MonthCaption, { "data-animated-caption": props.animate ? "true" : void 0, className: classNames2[UI.MonthCaption], style: styles2 == null ? void 0 : styles2[UI.MonthCaption], calendarMonth, displayIndex }, (captionLayout == null ? void 0 : captionLayout.startsWith("dropdown")) ? React.createElement(
               components2.DropdownNav,
               { className: classNames2[UI.Dropdowns], style: styles2 == null ? void 0 : styles2[UI.Dropdowns] },
-              captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React.createElement(components2.MonthsDropdown, { className: classNames2[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : React.createElement("span", null, formatMonthDropdown2(calendarMonth.date, dateLib)),
-              captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React.createElement(components2.YearsDropdown, { className: classNames2[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : React.createElement("span", null, formatYearDropdown2(calendarMonth.date, dateLib)),
+              (() => {
+                const monthControl = captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React.createElement(components2.MonthsDropdown, { key: "month", className: classNames2[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : React.createElement("span", { key: "month" }, formatMonthDropdown2(calendarMonth.date, dateLib));
+                const yearControl = captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React.createElement(components2.YearsDropdown, { key: "year", className: classNames2[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : React.createElement("span", { key: "year" }, formatYearDropdown2(calendarMonth.date, dateLib));
+                const controls = dateLib.getMonthYearOrder() === "year-first" ? [yearControl, monthControl] : [monthControl, yearControl];
+                return controls;
+              })(),
               React.createElement("span", { role: "status", "aria-live": "polite", style: {
                 border: 0,
                 clip: "rect(0 0 0 0)",