@navikt/ds-react 5.5.0 → 5.6.0

package/cjs/accordion/Accordion.js

@@ -70,6 +70,7 @@ exports.Accordion = (0, react_1.forwardRef)((_a, ref) => {
             variant,
             headingSize,
             size,
+            mounted: true,
         } },
         react_1.default.createElement("div", Object.assign({}, rest, { className: (0, clsx_1.default)("navds-accordion", className, `navds-accordion--${size}`, { "navds-accordion--indent": indent }), ref: ref }))));
 });

package/cjs/accordion/AccordionContext.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionContext = void 0;
 const react_1 = require("react");
 exports.AccordionContext = (0, react_1.createContext)({
-    variant: "default",
     headingSize: "small",
     size: "medium",
     openItems: [],
+    mounted: false,
 });

package/cjs/accordion/AccordionHeader.js

@@ -48,7 +48,7 @@ const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, onClick } = _a, rest = __rest(_a, ["children", "className", "onClick"]);
     const itemContext = (0, react_1.useContext)(AccordionItem_1.AccordionItemContext);
     const accordionContext = (0, react_1.useContext)(AccordionContext_1.AccordionContext);
-    if (accordionContext === null || itemContext === null) {
+    if (itemContext === null) {
         console.error("<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>");
         return null;
     }
@@ -58,6 +58,6 @@ const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
         }, "aria-expanded": itemContext.open, type: "button" }),
         react_1.default.createElement("div", { className: "navds-accordion__icon-wrapper" },
             react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-accordion__header-chevron", title: "Vis mer", "aria-hidden": true })),
-        react_1.default.createElement(Heading_1.Heading, { size: (_b = accordionContext.headingSize) !== null && _b !== void 0 ? _b : "small", as: "span", className: "navds-accordion__header-content" }, children)));
+        react_1.default.createElement(Heading_1.Heading, { size: (_b = accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.headingSize) !== null && _b !== void 0 ? _b : "small", as: "span", className: "navds-accordion__header-content" }, children)));
 });
 exports.default = AccordionHeader;

package/cjs/accordion/AccordionItem.js

@@ -41,9 +41,10 @@ exports.AccordionItemContext = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const AccordionContext_1 = require("./AccordionContext");
+const util_1 = require("../util");
 exports.AccordionItemContext = (0, react_1.createContext)(null);
 const AccordionItem = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, open, defaultOpen = false, onClick, id } = _a, rest = __rest(_a, ["children", "className", "open", "defaultOpen", "onClick", "id"]);
+    var { children, className, open, defaultOpen = false } = _a, rest = __rest(_a, ["children", "className", "open", "defaultOpen"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
     const context = (0, react_1.useContext)(AccordionContext_1.AccordionContext);
     const [_open, _setOpen] = (0, react_1.useState)(defaultOpen);
@@ -59,11 +60,14 @@ const AccordionItem = (0, react_1.forwardRef)((_a, ref) => {
         }
         shouldAnimate.current = true;
     };
+    if (!(context === null || context === void 0 ? void 0 : context.mounted)) {
+        console.error("<Accordion.Item> has to be used within an <Accordion>");
+    }
     return (react_1.default.createElement("div", Object.assign({ className: (0, clsx_1.default)("navds-accordion__item", className, {
             "navds-accordion__item--open": open !== null && open !== void 0 ? open : internalOpen,
             "navds-accordion__item--neutral": (context === null || context === void 0 ? void 0 : context.variant) === "neutral",
             "navds-accordion__item--no-animation": !shouldAnimate.current,
-        }), ref: ref }, rest),
+        }), ref: ref }, (0, util_1.omit)(rest, ["onClick"])),
         react_1.default.createElement(exports.AccordionItemContext.Provider, { value: {
                 open: open !== null && open !== void 0 ? open : internalOpen,
                 toggleOpen: handleOpen,

package/cjs/date/datepicker/DatePicker.js

@@ -46,10 +46,14 @@ const __1 = require("../..");
 const DateInput_1 = require("../DateInput");
 const context_1 = require("../context");
 const utils_1 = require("../utils");
-const caption_1 = require("./caption");
 const DatePickerStandalone_1 = __importDefault(require("./DatePickerStandalone"));
-const DayButton_1 = require("./DayButton");
-const TableHead_1 = require("./TableHead");
+const Caption_1 = __importDefault(require("./parts/Caption"));
+const DayButton_1 = __importDefault(require("./parts/DayButton"));
+const DropdownCaption_1 = __importDefault(require("./parts/DropdownCaption"));
+const HeadRow_1 = require("./parts/HeadRow");
+const Row_1 = __importDefault(require("./parts/Row"));
+const TableHead_1 = __importDefault(require("./parts/TableHead"));
+const WeekNumber_1 = __importDefault(require("./parts/WeekNumber"));
 /**
  * A component that allows users to select a date from a calendar.
  *
@@ -74,36 +78,25 @@ const TableHead_1 = require("./TableHead");
  */
 exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
-    var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle, strategy, bubbleEscape = false } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle", "strategy", "bubbleEscape"]);
+    var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle, strategy, bubbleEscape = false, onWeekNumberClick } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle", "strategy", "bubbleEscape", "onWeekNumberClick"]);
     const ariaId = (0, __1.useId)(id);
     const [open, setOpen] = (0, react_1.useState)(_open !== null && _open !== void 0 ? _open : false);
     const wrapperRef = (0, react_1.useRef)(null);
     const [selectedDates, setSelectedDates] = react_1.default.useState(defaultSelected);
-    const handleSingleSelect = (selectedDay) => {
-        var _a;
-        setSelectedDates(selectedDay);
-        selectedDay && ((_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false));
-        (rest === null || rest === void 0 ? void 0 : rest.onSelect) && (rest === null || rest === void 0 ? void 0 : rest.onSelect)(selectedDay);
-    };
-    const handleMultipleSelect = (selectedDays) => {
-        setSelectedDates(selectedDays);
-        (rest === null || rest === void 0 ? void 0 : rest.onSelect) &&
-            (rest === null || rest === void 0 ? void 0 : rest.onSelect)(selectedDays);
-    };
-    const handleRangeSelect = (selectedDays) => {
-        var _a;
-        setSelectedDates(selectedDays);
-        (selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.from) && (selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.to) && ((_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false));
-        (rest === null || rest === void 0 ? void 0 : rest.onSelect) &&
-            (rest === null || rest === void 0 ? void 0 : rest.onSelect)(selectedDays);
-    };
-    const overrideProps = {
-        mode: (_b = rest.mode) !== null && _b !== void 0 ? _b : "single",
-        onSelect: (rest === null || rest === void 0 ? void 0 : rest.mode) === "single"
-            ? handleSingleSelect
-            : (rest === null || rest === void 0 ? void 0 : rest.mode) === "multiple"
-                ? handleMultipleSelect
-                : handleRangeSelect,
+    const mode = (_b = rest.mode) !== null && _b !== void 0 ? _b : "single";
+    /**
+     * @param selected Date | Date[] | DateRange | undefined
+     */
+    const handleSelect = (selected) => {
+        var _a, _b, _c;
+        setSelectedDates(selected);
+        if (rest.mode === "single") {
+            selected && ((_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false));
+        }
+        else if (rest.mode === "range") {
+            (selected === null || selected === void 0 ? void 0 : selected.from) && (selected === null || selected === void 0 ? void 0 : selected.to) && ((_b = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _b !== void 0 ? _b : setOpen(false));
+        }
+        (_c = rest === null || rest === void 0 ? void 0 : rest.onSelect) === null || _c === void 0 ? void 0 : _c.call(rest, selected);
     };
     return (react_1.default.createElement(context_1.DateContext.Provider, { value: {
             open: _open !== null && _open !== void 0 ? _open : open,
@@ -119,10 +112,13 @@ exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
                     var _a;
                     (_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false);
                 }, placement: "bottom-start", id: ariaId, role: "dialog", ref: ref, strategy: strategy, className: "navds-date__popover", bubbleEscape: bubbleEscape },
-                react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale) }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
-                        Caption: dropdownCaption ? caption_1.DropdownCaption : caption_1.Caption,
-                        Day: DayButton_1.DayButton,
-                        Head: TableHead_1.TableHead,
+                react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale), mode: mode, onSelect: handleSelect, selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
+                        Caption: dropdownCaption ? DropdownCaption_1.default : Caption_1.default,
+                        Head: TableHead_1.default,
+                        HeadRow: HeadRow_1.HeadRow,
+                        WeekNumber: WeekNumber_1.default,
+                        Row: Row_1.default,
+                        Day: DayButton_1.default,
                     }, className: (0, clsx_1.default)("navds-date", className), classNames: {
                         vhidden: "navds-sr-only",
                     }, disabled: (day) => {
@@ -132,7 +128,7 @@ exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
                         weekend: (day) => disableWeekends && (0, isWeekend_1.default)(day),
                     }, modifiersClassNames: {
                         weekend: "rdp-day__weekend",
-                    }, showWeekNumber: showWeekNumber, fixedWeeks: true, showOutsideDays: true }, (0, __1.omit)(rest, ["onSelect"]))))))));
+                    }, showWeekNumber: showWeekNumber, onWeekNumberClick: mode === "multiple" ? onWeekNumberClick : undefined, fixedWeeks: true, showOutsideDays: true }, (0, __1.omit)(rest, ["onSelect"]))))))));
 });
 exports.DatePicker.Standalone = DatePickerStandalone_1.default;
 exports.DatePicker.Input = DateInput_1.DatePickerInput;

package/cjs/date/datepicker/DatePickerStandalone.js

@@ -44,42 +44,39 @@ const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const __1 = require("../..");
 const utils_1 = require("../utils");
-const caption_1 = require("./caption");
-const TableHead_1 = require("./TableHead");
+const TableHead_1 = __importDefault(require("./parts/TableHead"));
+const WeekNumber_1 = __importDefault(require("./parts/WeekNumber"));
+const Caption_1 = __importDefault(require("./parts/Caption"));
+const DropdownCaption_1 = __importDefault(require("./parts/DropdownCaption"));
+const Row_1 = __importDefault(require("./parts/Row"));
+const HeadRow_1 = require("./parts/HeadRow");
+const DayButton_1 = __importDefault(require("./parts/DayButton"));
 exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
-    var { children, className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, onSelect, fixedWeeks = true } = _a, rest = __rest(_a, ["children", "className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "onSelect", "fixedWeeks"]);
+    var { className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, defaultSelected, onSelect, fixedWeeks = false, onWeekNumberClick } = _a, rest = __rest(_a, ["className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "defaultSelected", "onSelect", "fixedWeeks", "onWeekNumberClick"]);
     const [selectedDates, setSelectedDates] = react_1.default.useState(defaultSelected);
-    const handleSingleSelect = (selectedDay) => {
-        setSelectedDates(selectedDay);
-        onSelect && onSelect(selectedDay);
-    };
-    const handleMultipleSelect = (selectedDays) => {
-        setSelectedDates(selectedDays);
-        onSelect && onSelect(selectedDays);
-    };
-    const handleRangeSelect = (selectedDays) => {
-        setSelectedDates(selectedDays);
-        onSelect && onSelect(selectedDays);
-    };
-    const overrideProps = {
-        mode: (_b = rest.mode) !== null && _b !== void 0 ? _b : "single",
-        onSelect: (rest === null || rest === void 0 ? void 0 : rest.mode) === "single"
-            ? handleSingleSelect
-            : (rest === null || rest === void 0 ? void 0 : rest.mode) === "multiple"
-                ? handleMultipleSelect
-                : handleRangeSelect,
+    const mode = (_b = rest.mode) !== null && _b !== void 0 ? _b : "single";
+    /**
+     * @param selected Date | Date[] | DateRange | undefined
+     */
+    const handleSelect = (selected) => {
+        setSelectedDates(selected);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
     };
     return (react_1.default.createElement("div", { ref: ref, className: (0, clsx_1.default)("navds-date__standalone-wrapper", className) },
-        react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale) }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
-                Caption: dropdownCaption ? caption_1.DropdownCaption : caption_1.Caption,
-                Head: TableHead_1.TableHead,
+        react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale), mode: mode, onSelect: handleSelect, selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
+                Caption: dropdownCaption ? DropdownCaption_1.default : Caption_1.default,
+                Head: TableHead_1.default,
+                HeadRow: HeadRow_1.HeadRow,
+                WeekNumber: WeekNumber_1.default,
+                Row: Row_1.default,
+                Day: DayButton_1.default,
             }, className: "navds-date", classNames: { vhidden: "navds-sr-only" }, disabled: (day) => {
                 return ((disableWeekends && (0, isWeekend_1.default)(day)) || (0, react_day_picker_1.isMatch)(day, disabled));
             }, weekStartsOn: 1, initialFocus: false, labels: utils_1.labels, modifiers: {
                 weekend: (day) => disableWeekends && (0, isWeekend_1.default)(day),
             }, modifiersClassNames: {
                 weekend: "rdp-day__weekend",
-            }, showWeekNumber: showWeekNumber, fixedWeeks: fixedWeeks, showOutsideDays: true }, (0, __1.omit)(rest, ["onSelect"])))));
+            }, showWeekNumber: showWeekNumber, onWeekNumberClick: mode === "multiple" ? onWeekNumberClick : undefined, fixedWeeks: fixedWeeks, showOutsideDays: true }, (0, __1.omit)(rest, ["children", "id"])))));
 });
 exports.default = exports.DatePickerStandalone;

package/cjs/date/datepicker/parts/Caption.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerCaption = void 0;
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const react_1 = __importDefault(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("../../..");
+const WeekRow_1 = __importDefault(require("./WeekRow"));
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Caption
+ */
+const DatePickerCaption = ({ displayMonth, id }) => {
+    const { goToMonth, nextMonth, previousMonth } = (0, react_day_picker_1.useNavigation)();
+    const { labels: { labelPrevious, labelNext }, formatters: { formatCaption }, locale, } = (0, react_day_picker_1.useDayPicker)();
+    const previousLabel = labelPrevious(previousMonth, { locale });
+    const nextLabel = labelNext(nextMonth, { locale });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "navds-date__caption" },
+            react_1.default.createElement(__1.Button, { variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(aksel_icons_1.ArrowLeftIcon, { title: previousLabel }), className: "navds-date__caption-button", type: "button" }),
+            react_1.default.createElement(__1.Label, { as: "span", "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-date__caption-label" }, formatCaption(displayMonth, { locale })),
+            react_1.default.createElement(__1.Button, { icon: react_1.default.createElement(aksel_icons_1.ArrowRightIcon, { title: nextLabel }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" })),
+        react_1.default.createElement(WeekRow_1.default, { displayMonth: displayMonth })));
+};
+exports.DatePickerCaption = DatePickerCaption;
+exports.default = exports.DatePickerCaption;

package/cjs/date/datepicker/{DayButton.js → parts/DayButton.js}

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DayButton = void 0;
 const format_1 = __importDefault(require("date-fns/format"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
@@ -43,4 +42,4 @@ const DayButton = (props) => {
     }
     return (react_1.default.createElement(react_day_picker_1.Button, Object.assign({ name: "day", ref: buttonRef }, dayRender.buttonProps, { "aria-label": dateTime, "aria-hidden": dayRender.activeModifiers.outside })));
 };
-exports.DayButton = DayButton;
+exports.default = DayButton;

package/cjs/date/datepicker/{caption → parts}/DropdownCaption.js

@@ -14,6 +14,10 @@ const __1 = require("../../..");
 const get_dates_1 = require("../../utils/get-dates");
 const labels_1 = require("../../utils/labels");
 const date_fns_1 = require("date-fns");
+const WeekRow_1 = __importDefault(require("./WeekRow"));
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/CaptionDropdowns
+ */
 const DropdownCaption = ({ displayMonth, id }) => {
     const { goToMonth, nextMonth, previousMonth } = (0, react_day_picker_1.useNavigation)();
     const { fromDate, toDate, formatters: { formatYearCaption, formatMonthCaption, formatCaption }, labels: { labelPrevious, labelNext }, locale, } = (0, react_day_picker_1.useDayPicker)();
@@ -32,13 +36,15 @@ const DropdownCaption = ({ displayMonth, id }) => {
     const nextLabel = labelNext(nextMonth, { locale });
     const yearDropdownLabel = (0, labels_1.labelYearDropdown)(locale);
     const MonthDropdownLabel = (0, labels_1.labelMonthDropdown)(locale);
-    return (react_1.default.createElement("div", { className: "navds-date__caption-dropdown" },
-        react_1.default.createElement("span", { "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-sr-only" }, formatCaption(displayMonth, { locale })),
-        react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(aksel_icons_1.ArrowLeftIcon, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button", type: "button" }),
-        react_1.default.createElement("div", { className: "navds-date__caption__month-wrapper" },
-            react_1.default.createElement(__1.Select, { label: MonthDropdownLabel, hideLabel: true, className: "navds-date__caption__month", value: displayMonth.getMonth(), onChange: handleMonthChange }, months.map((m) => (react_1.default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale }))))),
-            react_1.default.createElement(__1.Select, { label: yearDropdownLabel, hideLabel: true, value: displayMonth.getFullYear(), onChange: handleYearChange, className: "navds-date__caption__year" }, years.map((year) => (react_1.default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale })))))),
-        react_1.default.createElement(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(aksel_icons_1.ArrowRightIcon, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "navds-date__caption" },
+            react_1.default.createElement("span", { "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-sr-only" }, formatCaption(displayMonth, { locale })),
+            react_1.default.createElement(__1.Button, { variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(aksel_icons_1.ArrowLeftIcon, { title: previousLabel }), className: "navds-date__caption-button", type: "button" }),
+            react_1.default.createElement("div", { className: "navds-date__caption" },
+                react_1.default.createElement(__1.Select, { label: MonthDropdownLabel, hideLabel: true, className: "navds-date__caption__month", value: displayMonth.getMonth(), onChange: handleMonthChange }, months.map((m) => (react_1.default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale }))))),
+                react_1.default.createElement(__1.Select, { label: yearDropdownLabel, hideLabel: true, value: displayMonth.getFullYear(), onChange: handleYearChange, className: "navds-date__caption__year" }, years.map((year) => (react_1.default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale })))))),
+            react_1.default.createElement(__1.Button, { icon: react_1.default.createElement(aksel_icons_1.ArrowRightIcon, { title: nextLabel }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" })),
+        react_1.default.createElement(WeekRow_1.default, { displayMonth: displayMonth })));
 };
 exports.DropdownCaption = DropdownCaption;
 exports.default = exports.DropdownCaption;

package/cjs/date/datepicker/parts/HeadRow.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWeekdays = exports.HeadRow = void 0;
+const react_1 = __importDefault(require("react"));
+const date_fns_1 = require("date-fns");
+const react_day_picker_1 = require("react-day-picker");
+const responsive_1 = require("../../../layout/responsive");
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/HeadRow
+ */
+function HeadRow() {
+    const { classNames, styles, showWeekNumber, locale, formatters: { formatWeekdayName }, labels: { labelWeekday }, } = (0, react_day_picker_1.useDayPicker)();
+    const weekdays = getWeekdays(locale);
+    return (react_1.default.createElement("tr", { style: styles.head_row, className: classNames.head_row },
+        showWeekNumber && (react_1.default.createElement(responsive_1.Hide, { below: "sm", asChild: true },
+            react_1.default.createElement("td", { style: styles.head_cell, className: classNames.head_cell }))),
+        weekdays.map((weekday, i) => (react_1.default.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell, "aria-label": labelWeekday(weekday, { locale }) }, formatWeekdayName(weekday, { locale }))))));
+}
+exports.HeadRow = HeadRow;
+/**
+ * Generate a series of 7 days, starting from the week, to use for formatting
+ * the weekday names (Monday, Tuesday, etc.).
+ */
+function getWeekdays(locale) {
+    const start = (0, date_fns_1.startOfWeek)(new Date(), { locale, weekStartsOn: 1 });
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+        const day = (0, date_fns_1.addDays)(start, i);
+        days.push(day);
+    }
+    return days;
+}
+exports.getWeekdays = getWeekdays;

package/cjs/date/datepicker/parts/Row.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const date_fns_1 = require("date-fns");
+const react_day_picker_1 = require("react-day-picker");
+const WeekNumber_1 = __importDefault(require("./WeekNumber"));
+const responsive_1 = require("../../../layout/responsive");
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Row
+ */
+function Row(props) {
+    const { styles, classNames, showWeekNumber } = (0, react_day_picker_1.useDayPicker)();
+    return (react_1.default.createElement("tr", { className: classNames.row, style: styles.row },
+        showWeekNumber && (react_1.default.createElement(responsive_1.Hide, { below: "sm", asChild: true },
+            react_1.default.createElement("td", { className: classNames.cell, style: styles.cell },
+                react_1.default.createElement(WeekNumber_1.default, { number: props.weekNumber, dates: props.dates })))),
+        props.dates.map((date) => (react_1.default.createElement("td", { className: classNames.cell, style: styles.cell, key: (0, date_fns_1.getUnixTime)(date) },
+            react_1.default.createElement(react_day_picker_1.Day, { displayMonth: props.displayMonth, date: date }))))));
+}
+exports.default = Row;

package/cjs/date/datepicker/{TableHead.js → parts/TableHead.js}

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableHead = void 0;
 const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
-/** Render the table head. */
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Head
+ */
 function TableHead() {
     var _a;
     const { classNames, styles, components } = (0, react_day_picker_1.useDayPicker)();
@@ -14,4 +15,4 @@ function TableHead() {
     return (react_1.default.createElement("thead", { style: styles.head, className: classNames.head, "aria-hidden": true },
         react_1.default.createElement(HeadRowComponent, null)));
 }
-exports.TableHead = TableHead;
+exports.default = TableHead;

package/cjs/date/datepicker/parts/WeekNumber.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* https://github.com/gpbl/react-day-picker/blob/7f78cd5/src/components/WeekNumber/WeekNumber.tsx#L21 */
+const react_1 = __importDefault(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const labels_1 = require("../../utils/labels");
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/WeekNumber
+ */
+function WeekNumber(props) {
+    const { number: weekNumber, dates } = props;
+    const { onWeekNumberClick, styles, classNames, locale: { code }, } = (0, react_day_picker_1.useDayPicker)();
+    const weekLabel = (0, labels_1.labelWeekNumber)({
+        week: Number(weekNumber),
+        localeCode: code,
+    });
+    if (!onWeekNumberClick) {
+        return (react_1.default.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber, "aria-label": weekLabel }, weekNumber));
+    }
+    const label = (0, labels_1.labelWeekNumberButton)({
+        week: Number(weekNumber),
+        localeCode: code,
+    });
+    const handleClick = function (e) {
+        onWeekNumberClick(weekNumber, dates, e);
+    };
+    if (props === null || props === void 0 ? void 0 : props.headerVersion) {
+        return (react_1.default.createElement(react_day_picker_1.Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, weekNumber));
+    }
+    return (react_1.default.createElement(react_day_picker_1.Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, weekNumber));
+}
+exports.default = WeekNumber;

package/cjs/date/datepicker/parts/WeekRow.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const responsive_1 = require("../../../layout/responsive");
+const typography_1 = require("../../../typography");
+const get_month_weeks_1 = require("../../utils/get-month-weeks");
+const labels_1 = require("../../utils/labels");
+const WeekNumber_1 = __importDefault(require("./WeekNumber"));
+const util_1 = require("../../../util");
+const WeekRow = ({ displayMonth }) => {
+    const { locale, fixedWeeks, onWeekNumberClick } = (0, react_day_picker_1.useDayPicker)();
+    const labelId = (0, util_1.useId)();
+    if (!onWeekNumberClick) {
+        return null;
+    }
+    const weeks = (0, get_month_weeks_1.getMonthWeeks)(displayMonth, {
+        useFixedWeeks: Boolean(fixedWeeks),
+        locale,
+    });
+    return (react_1.default.createElement(responsive_1.Show, { below: "sm", asChild: true },
+        react_1.default.createElement("table", { className: "rdp-table", role: "grid" },
+            react_1.default.createElement("tbody", { className: "rdp-tbody" },
+                react_1.default.createElement("tr", { className: "rdp-row navds-date__week-row" },
+                    react_1.default.createElement(typography_1.Detail, { as: "th", weight: "semibold", className: "rdp-cell navds-date__week-cell" },
+                        react_1.default.createElement("span", { className: "navds-date__week-wrapper", id: labelId }, (0, labels_1.labelWeek)(locale === null || locale === void 0 ? void 0 : locale.code))),
+                    weeks.map((week) => (react_1.default.createElement("td", { key: week.weekNumber, className: "rdp-cell navds-date__week-cell" },
+                        react_1.default.createElement("span", { className: "navds-date__week-wrapper" },
+                            react_1.default.createElement(WeekNumber_1.default, { number: week.weekNumber, dates: week.dates, headerVersion: true }))))))))));
+};
+exports.default = WeekRow;

package/cjs/date/hooks/useDatepicker.js

@@ -74,7 +74,7 @@ const useDatepicker = (opt = {}) => {
             return;
         }
         !open && openOnFocus && handleOpen(true);
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if ((0, utils_1.isValidDate)(day)) {
             setInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
             const isBefore = fromDate && day && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
@@ -83,7 +83,7 @@ const useDatepicker = (opt = {}) => {
         }
     };
     const handleBlur = (e) => {
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         (0, utils_1.isValidDate)(day) &&
             setInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
     };

package/cjs/date/hooks/useMonthPicker.js

@@ -80,7 +80,7 @@ const useMonthpicker = (opt = {}) => {
             return;
         }
         !open && openOnFocus && handleOpen(true);
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
         const isBefore = getIsBefore({ fromDate, date: day });
         const isAfter = getIsAfter({ toDate, date: day });
         if ((0, utils_1.isValidDate)(day)) {
@@ -92,7 +92,7 @@ const useMonthpicker = (opt = {}) => {
         }
     };
     const handleBlur = (e) => {
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
         (0, utils_1.isValidDate)(day) &&
             setInputValue((0, utils_1.formatDateForInput)(day, locale, "month", inputFormat));
     };

package/cjs/date/hooks/useRangeDatepicker.js

@@ -155,7 +155,7 @@ const useRangeDatepicker = (opt = {}) => {
             return;
         }
         !open && openOnFocus && setOpen(true);
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if ((0, utils_1.isValidDate)(day)) {
             src === RANGE.FROM
                 ? setFromInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat))
@@ -166,7 +166,7 @@ const useRangeDatepicker = (opt = {}) => {
         }
     };
     const handleBlur = (e, src) => {
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if (!(0, utils_1.isValidDate)(day)) {
             return;
         }
@@ -186,7 +186,7 @@ const useRangeDatepicker = (opt = {}) => {
         if ((range === null || range === void 0 ? void 0 : range.from) && (range === null || range === void 0 ? void 0 : range.to)) {
             setOpen(false);
         }
-        let prevToRange = !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to : range === null || range === void 0 ? void 0 : range.to;
+        const prevToRange = !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to : range === null || range === void 0 ? void 0 : range.to;
         const resetTo = (0, isBefore_1.default)(prevToRange, range === null || range === void 0 ? void 0 : range.from);
         (range === null || range === void 0 ? void 0 : range.from)
             ? setFromInputValue((0, utils_1.formatDateForInput)(range === null || range === void 0 ? void 0 : range.from, locale, "date", inputFormat))

package/cjs/date/monthpicker/MonthSelector.js

@@ -73,7 +73,7 @@ const MonthSelector = () => {
         months.slice(8, 12),
     ];
     return (react_1.default.createElement(__1.BodyShort, { as: "table", className: "rdp-table" },
-        react_1.default.createElement("tbody", { className: "rdp-tbody" }, tableMonths.map((x, y) => (react_1.default.createElement("tr", { className: "rdp-row", key: y }, x.map((month, y) => {
+        react_1.default.createElement("tbody", { className: "rdp-tbody" }, tableMonths.map((months, i) => (react_1.default.createElement("tr", { className: "rdp-row", key: i }, months.map((month) => {
             return (react_1.default.createElement("td", { key: month.toDateString(), className: "rdp-cell" },
                 react_1.default.createElement(MonthButton_1.default, { month: (0, setYear_1.default)(month, year.getFullYear()), months: months, focus: focus, setFocus: setFocus, tabRoot: tabRoot, setTabRoot: setTabRoot })));
         })))))));

package/cjs/date/utils/get-month-weeks.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.daysToMonthWeeks = exports.getMonthWeeks = void 0;
+const date_fns_1 = require("date-fns");
+function getMonthWeeks(month, options) {
+    const _options = Object.assign(Object.assign({}, options), { weekStartsOn: 1 });
+    const weeksInMonth = daysToMonthWeeks((0, date_fns_1.startOfMonth)(month), (0, date_fns_1.endOfMonth)(month), _options);
+    if (_options === null || _options === void 0 ? void 0 : _options.useFixedWeeks) {
+        // Add extra weeks to the month, up to 6 weeks
+        const nrOfMonthWeeks = (0, date_fns_1.getWeeksInMonth)(month, _options);
+        if (nrOfMonthWeeks < 6) {
+            const lastWeek = weeksInMonth[weeksInMonth.length - 1];
+            const lastDate = lastWeek.dates[lastWeek.dates.length - 1];
+            const toDate = (0, date_fns_1.addWeeks)(lastDate, 6 - nrOfMonthWeeks);
+            const extraWeeks = daysToMonthWeeks((0, date_fns_1.addWeeks)(lastDate, 1), toDate, _options);
+            weeksInMonth.push(...extraWeeks);
+        }
+    }
+    return weeksInMonth;
+}
+exports.getMonthWeeks = getMonthWeeks;
+/** Return the weeks between two dates.  */
+function daysToMonthWeeks(fromDate, toDate, options) {
+    const toWeek = (0, date_fns_1.endOfWeek)(toDate, options);
+    const fromWeek = (0, date_fns_1.startOfWeek)(fromDate, options);
+    const nOfDays = (0, date_fns_1.differenceInCalendarDays)(toWeek, fromWeek);
+    const days = [];
+    for (let i = 0; i <= nOfDays; i++) {
+        days.push((0, date_fns_1.addDays)(fromWeek, i));
+    }
+    const weeksInMonth = days.reduce((result, date) => {
+        const weekNumber = (0, date_fns_1.getWeek)(date, options);
+        const existingWeek = result.find((value) => value.weekNumber === weekNumber);
+        if (existingWeek) {
+            existingWeek.dates.push(date);
+            return result;
+        }
+        result.push({
+            weekNumber,
+            dates: [date],
+        });
+        return result;
+    }, []);
+    return weeksInMonth;
+}
+exports.daysToMonthWeeks = daysToMonthWeeks;