@navikt/ds-react 5.6.0-beta.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

@@ -60,6 +60,9 @@ 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",

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 { className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, defaultSelected, onSelect, fixedWeeks = true } = _a, rest = __rest(_a, ["className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "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", "children", "id"])))));
+            }, 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/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;

package/cjs/date/utils/labels.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labels = exports.labelPrevYear = exports.labelNextYear = exports.labelMonthDropdown = exports.labelYearDropdown = void 0;
+exports.labelWeek = exports.labelWeekNumberButton = exports.labelWeekNumber = exports.labels = exports.labelPrevYear = exports.labelNextYear = exports.labelMonthDropdown = exports.labelYearDropdown = void 0;
 const labelNext = (date, options) => {
     var _a;
     switch ((_a = options === null || options === void 0 ? void 0 : options.locale) === null || _a === void 0 ? void 0 : _a.code) {
@@ -83,3 +83,42 @@ exports.labels = {
     labelNext,
     labelPrevious,
 };
+const labelWeekNumber = ({ localeCode, week, }) => {
+    switch (localeCode) {
+        case "nb":
+            return `Uke ${week}`;
+        case "nn":
+            return `Veke ${week}`;
+        case "en-GB":
+            return `Week ${week}`;
+        default:
+            return `Uke ${week}`;
+    }
+};
+exports.labelWeekNumber = labelWeekNumber;
+const labelWeekNumberButton = ({ localeCode, week, }) => {
+    switch (localeCode) {
+        case "nb":
+            return `Velg uke ${week}`;
+        case "nn":
+            return `Vel veke ${week}`;
+        case "en-GB":
+            return `Pick week ${week}`;
+        default:
+            return `Velg uke ${week}`;
+    }
+};
+exports.labelWeekNumberButton = labelWeekNumberButton;
+const labelWeek = (localeCode) => {
+    switch (localeCode) {
+        case "nb":
+            return `Uke:`;
+        case "nn":
+            return `Veke:`;
+        case "en-GB":
+            return `Week:`;
+        default:
+            return `Uke:`;
+    }
+};
+exports.labelWeek = labelWeek;

package/cjs/index.js

@@ -48,6 +48,7 @@ __exportStar(require("./toggle-group"), exports);
 __exportStar(require("./tooltip"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);
+__exportStar(require("./layout/bleed"), exports);
 __exportStar(require("./layout/box"), exports);
 __exportStar(require("./layout/stack"), exports);
 __exportStar(require("./layout/grid"), exports);

package/cjs/layout/bleed/Bleed.js

@@ -40,10 +40,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Bleed = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const css_1 = require("../utilities/css");
+const Slot_1 = require("../../util/Slot");
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/Bleed)
+ * @see 🏷️ {@link BleedProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <Box padding="4">
+ *   <Bleed marginInline="4" marginBlock="4">
+ *     <BodyLong>Some content</BodyLong>
+ *   </Bleed>
+ * </Box>
+ */
 exports.Bleed = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "div", preservePadding = false, className } = _a, rest = __rest(_a, ["as", "preservePadding", "className"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-bleed", className, {
-            "navds-bleed--preserve": preservePadding,
-        }) })));
+    var { className, marginInline, marginBlock, reflectivePadding, style: _style, asChild } = _a, rest = __rest(_a, ["className", "marginInline", "marginBlock", "reflectivePadding", "style", "asChild"]);
+    let style = Object.assign(Object.assign(Object.assign({}, _style), (0, css_1.getResponsiveProps)("bleed", "margin-inline", "spacing", marginInline, true, ["0", "full", "px"])), (0, css_1.getResponsiveProps)("bleed", "margin-block", "spacing", marginBlock, true, ["0", "px"]));
+    if (reflectivePadding) {
+        style = Object.assign(Object.assign(Object.assign({}, style), (0, css_1.getResponsiveProps)("bleed", "padding-inline", "spacing", marginInline, false, ["0", "full", "px"])), (0, css_1.getResponsiveProps)("bleed", "padding-block", "spacing", marginBlock, false, ["0", "px"]));
+    }
+    const Comp = asChild ? Slot_1.Slot : "div";
+    return (react_1.default.createElement(Comp, Object.assign({}, rest, { className: (0, clsx_1.default)("navds-bleed", className, {
+            "navds-bleed--padding": reflectivePadding,
+        }), ref: ref, style: style })));
 });
-exports.default = exports.Bleed;

package/cjs/layout/bleed/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Bleed = void 0;
 var Bleed_1 = require("./Bleed");
-Object.defineProperty(exports, "Bleed", { enumerable: true, get: function () { return __importDefault(Bleed_1).default; } });
+Object.defineProperty(exports, "Bleed", { enumerable: true, get: function () { return Bleed_1.Bleed; } });

package/cjs/layout/box/Box.js

@@ -79,6 +79,6 @@ exports.Box = (0, react_1.forwardRef)((_a, ref) => {
                 .split(" ")
                 .map((x) => `${x}px`)
                 .join(" ")
-            : undefined }), (0, css_1.getResponsiveProps)("box", "border-radius", "border-radius", borderRadius, ["0"])), (0, css_1.getResponsiveProps)("box", "padding", "spacing", padding)), (0, css_1.getResponsiveProps)("box", "padding-inline", "spacing", paddingInline)), (0, css_1.getResponsiveProps)("box", "padding-block", "spacing", paddingBlock));
+            : undefined }), (0, css_1.getResponsiveProps)("box", "border-radius", "border-radius", borderRadius, false, ["0"])), (0, css_1.getResponsiveProps)("box", "padding", "spacing", padding)), (0, css_1.getResponsiveProps)("box", "padding-inline", "spacing", paddingInline)), (0, css_1.getResponsiveProps)("box", "padding-block", "spacing", paddingBlock));
     return (react_1.default.createElement(Component, Object.assign({}, rest, { className: (0, clsx_1.default)("navds-box", className), ref: ref, style: style })));
 });