@navikt/ds-react 7.12.2 → 7.14.0-alpha.1

package/esm/date/datepicker/parts/DatePicker.Standalone.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { DatePickerDefaultProps, MultipleMode, RangeMode, SingleMode } from "../DatePicker.types.js";
+interface DatePickerStandaloneDefaultProps extends Omit<DatePickerDefaultProps, "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"> {
+    /**
+     * Datepicker classname
+     */
+    className?: string;
+    /**
+     * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
+     * @default true
+     */
+    fixedWeeks?: boolean;
+}
+type StandaloneConditionalModeProps = SingleMode | MultipleMode | RangeMode;
+export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps & StandaloneConditionalModeProps;
+export type DatePickerStandaloneType = React.ForwardRefExoticComponent<DatePickerStandaloneProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePickerStandalone: DatePickerStandaloneType;
+export default DatePickerStandalone;

package/esm/date/datepicker/parts/DatePicker.Standalone.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { useControllableState } from "../../../util/hooks/index.js";
+import { useI18n } from "../../../util/i18n/i18n.hooks.js";
+import { DateTranslationContextProvider, getTranslations, } from "../../Date.locale.js";
+import { ReactDayPicker } from "./DatePicker.RDP.js";
+export const DatePickerStandalone = forwardRef((_a, ref) => {
+    var { className, locale, translations, selected, defaultSelected, onSelect, mode } = _a, rest = __rest(_a, ["className", "locale", "translations", "selected", "defaultSelected", "onSelect", "mode"]);
+    const translate = useI18n("DatePicker", translations, getTranslations(locale));
+    const [value, setValue] = useControllableState({
+        defaultValue: defaultSelected,
+        value: selected,
+        onChange: (newValue) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValue),
+    });
+    return (React.createElement(DateTranslationContextProvider, { translate: translate },
+        React.createElement("div", { ref: ref, className: cl("navds-date__standalone-wrapper", className) },
+            React.createElement(ReactDayPicker, Object.assign({}, rest, { locale: locale, handleSelect: setValue, selected: value, mode: mode })))));
+});
+export default DatePickerStandalone;
+//# sourceMappingURL=DatePicker.Standalone.js.map

package/esm/date/datepicker/parts/DatePicker.Standalone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.Standalone.js","sourceRoot":"","sources":["../../../../src/date/datepicker/parts/DatePicker.Standalone.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACL,8BAA8B,EAC9B,eAAe,GAChB,MAAM,mBAAmB,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA2BlD,MAAM,CAAC,MAAM,oBAAoB,GAA6B,UAAU,CAItE,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,IAAI,OAEL,EADI,IAAI,cART,0FASC,CADQ;IAIT,MAAM,SAAS,GAAG,OAAO,CACvB,YAAY,EACZ,YAAY,EACZ,eAAe,CAAC,MAAM,CAAC,CACxB,CAAC;IAEF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAE5C;QACA,YAAY,EAAE,eAAe;QAC7B,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAe,CAAC;KACpD,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,8BAA8B,IAAC,SAAS,EAAE,SAAS;QAClD,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC;YAE1D,oBAAC,cAAc,oBACT,IAAI,IACR,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,QAAQ,EACtB,QAAQ,EAAE,KAAY,EACtB,IAAI,EAAE,IAAW,IACjB,CACE,CACyB,CAClC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/esm/date/datepicker/parts/DatePicker.WeekNumber.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { CalendarWeek } from "react-day-picker";
+import { MultipleMode } from "../DatePicker.types.js";
+declare const DatePickerWeekNumber: ({ week: { weekNumber, days }, onWeekNumberClick, className, style, showOnDesktop, }: {
+    week: CalendarWeek;
+    onWeekNumberClick: MultipleMode["onWeekNumberClick"];
+    showOnDesktop: boolean;
+} & React.ThHTMLAttributes<HTMLTableCellElement>) => React.JSX.Element;
+export { DatePickerWeekNumber };

package/esm/date/datepicker/parts/DatePicker.WeekNumber.js

@@ -0,0 +1,35 @@
+import cl from "clsx";
+import React, { useMemo } from "react";
+import { useDayPicker } from "react-day-picker";
+import { Button } from "../../../button/index.js";
+import { Hide, Show } from "../../../layout/responsive/index.js";
+import { Detail } from "../../../typography/index.js";
+import { useDateTranslationContext } from "../../Date.locale.js";
+const DatePickerWeekNumber = ({ week: { weekNumber, days }, onWeekNumberClick, className, style, showOnDesktop, }) => {
+    const translate = useDateTranslationContext().translate;
+    const { getModifiers } = useDayPicker();
+    const hideWeek = useMemo(() => {
+        if (days.filter((day) => {
+            const mods = getModifiers(day);
+            return !(mods.hidden || mods.outside || mods.disabled);
+        }).length === 0) {
+            return true;
+        }
+        return false;
+    }, [days, getModifiers]);
+    const DisplayMode = showOnDesktop ? Show : Hide;
+    if (!onWeekNumberClick || hideWeek) {
+        return (React.createElement(DisplayMode, { above: "sm", asChild: true },
+            React.createElement("td", { className: "rdp-cell" },
+                React.createElement(Detail, { as: "span", textColor: "subtle", className: className, style: style, "aria-label": translate("weekNumber", { week: weekNumber }) }, weekNumber))));
+    }
+    return (React.createElement(DisplayMode, { above: "sm", asChild: true },
+        React.createElement("td", { className: cl("rdp-cell", {
+                "navds-date__week-wrapper": !showOnDesktop,
+            }) },
+            React.createElement(Button, { variant: "secondary-neutral", size: "small", name: "week-number", "aria-label": translate("selectWeekNumber", { week: weekNumber }), style: style, className: cl("navds-date__weeknumber", "rdp-weeknumber"), onClick: () => {
+                    onWeekNumberClick(weekNumber, days.map((day) => day.date));
+                }, icon: React.createElement("span", { className: "navds-date__weeknumber-number" }, weekNumber) }))));
+};
+export { DatePickerWeekNumber };
+//# sourceMappingURL=DatePicker.WeekNumber.js.map

package/esm/date/datepicker/parts/DatePicker.WeekNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.WeekNumber.js","sourceRoot":"","sources":["../../../../src/date/datepicker/parts/DatePicker.WeekNumber.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAgB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,MAAM,oBAAoB,GAAG,CAAC,EAC5B,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,EAC1B,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,aAAa,GAKiC,EAAE,EAAE;IAClD,MAAM,SAAS,GAAG,yBAAyB,EAAE,CAAC,SAAS,CAAC;IAExD,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE,CAAC;IAExC,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,IACE,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE;YAClB,MAAM,IAAI,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;YAC/B,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,EACf,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzB,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhD,IAAI,CAAC,iBAAiB,IAAI,QAAQ,EAAE,CAAC;QACnC,OAAO,CACL,oBAAC,WAAW,IAAC,KAAK,EAAC,IAAI,EAAC,OAAO;YAC7B,4BAAI,SAAS,EAAC,UAAU;gBACtB,oBAAC,MAAM,IACL,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,gBACA,SAAS,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAExD,UAAU,CACJ,CACN,CACO,CACf,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oBAAC,WAAW,IAAC,KAAK,EAAC,IAAI,EAAC,OAAO;QAC7B,4BACE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE;gBACxB,0BAA0B,EAAE,CAAC,aAAa;aAC3C,CAAC;YAEF,oBAAC,MAAM,IACL,OAAO,EAAC,mBAAmB,EAC3B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,aAAa,gBACN,SAAS,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAC/D,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,gBAAgB,CAAC,EACzD,OAAO,EAAE,GAAG,EAAE;oBACZ,iBAAiB,CACf,UAAU,EACV,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAC5B,CAAC;gBACJ,CAAC,EACD,IAAI,EACF,8BAAM,SAAS,EAAC,+BAA+B,IAAE,UAAU,CAAQ,GAErE,CACC,CACO,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/esm/date/datepicker/parts/DatePicker.WeekRow.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CalendarWeek } from "react-day-picker";
+import { MultipleMode } from "../DatePicker.types.js";
+declare const DatePickerWeekRow: ({ onWeekNumberClick, weeks, }: {
+    onWeekNumberClick: MultipleMode["onWeekNumberClick"];
+    weeks?: CalendarWeek[];
+}) => React.JSX.Element | null;
+export { DatePickerWeekRow };

package/esm/date/datepicker/parts/DatePicker.WeekRow.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Show } from "../../../layout/responsive/index.js";
+import { Detail } from "../../../typography/index.js";
+import { useId } from "../../../util/hooks/index.js";
+import { useDateTranslationContext } from "../../Date.locale.js";
+import { DatePickerWeekNumber } from "./DatePicker.WeekNumber.js";
+const DatePickerWeekRow = ({ onWeekNumberClick, weeks, }) => {
+    const translate = useDateTranslationContext().translate;
+    const labelId = useId();
+    if (!onWeekNumberClick) {
+        return null;
+    }
+    return (React.createElement(Show, { below: "sm", asChild: true },
+        React.createElement("table", { className: "rdp-table", role: "grid" },
+            React.createElement("tbody", { className: "rdp-tbody" },
+                React.createElement("tr", { className: "rdp-row navds-date__week-row" },
+                    React.createElement(Detail, { as: "th", weight: "semibold", className: "rdp-cell navds-date__week-cell" },
+                        React.createElement("span", { className: "navds-date__week-wrapper", id: labelId }, translate("week"))), weeks === null || weeks === void 0 ? void 0 :
+                    weeks.map((week) => (React.createElement(DatePickerWeekNumber, { key: week.weekNumber, week: week, onWeekNumberClick: onWeekNumberClick, showOnDesktop: false, className: "navds-date__week-wrapper" }))))))));
+};
+export { DatePickerWeekRow };
+//# sourceMappingURL=DatePicker.WeekRow.js.map

package/esm/date/datepicker/parts/DatePicker.WeekRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.WeekRow.js","sourceRoot":"","sources":["../../../../src/date/datepicker/parts/DatePicker.WeekRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAE/D,MAAM,iBAAiB,GAAG,CAAC,EACzB,iBAAiB,EACjB,KAAK,GAIN,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,yBAAyB,EAAE,CAAC,SAAS,CAAC;IACxD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAC,IAAI,EAAC,OAAO;QACtB,+BAAO,SAAS,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;YACtC,+BAAO,SAAS,EAAC,WAAW;gBAC1B,4BAAI,SAAS,EAAC,8BAA8B;oBAC1C,oBAAC,MAAM,IACL,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,UAAU,EACjB,SAAS,EAAC,gCAAgC;wBAE1C,8BAAM,SAAS,EAAC,0BAA0B,EAAC,EAAE,EAAE,OAAO,IACnD,SAAS,CAAC,MAAM,CAAC,CACb,CACA,EAER,KAAK,aAAL,KAAK;oBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACpB,oBAAC,oBAAoB,IACnB,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,IAAI,EAAE,IAAI,EACV,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,KAAK,EACpB,SAAS,EAAC,0BAA0B,GACpC,CACH,CAAC,CACC,CACC,CACF,CACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/esm/date/monthpicker/MonthPicker.context.d.ts

@@ -0,0 +1,21 @@
+import { Locale } from "date-fns";
+import React from "react";
+import { MonthPickerProps } from "./MonthPicker.types.js";
+type MonthPickerProviderProps = Pick<MonthPickerProps, "dropdownCaption" | "disabled" | "selected" | "defaultSelected" | "onMonthSelect" | "year" | "onYearChange" | "fromDate" | "toDate"> & {
+    children: React.ReactNode;
+    locale: Locale;
+};
+type MonthPickerContextProps = {
+    caption: "label" | "dropdown";
+    year: Date;
+    onYearChange: (year: Date) => void;
+    selected: MonthPickerProps["selected"];
+    onMonthSelect: MonthPickerProps["onMonthSelect"];
+    disabled: NonNullable<MonthPickerProps["disabled"]>;
+    locale: Locale;
+    fromDate?: MonthPickerProps["fromDate"];
+    toDate?: MonthPickerProps["toDate"];
+};
+declare const useMonthPickerContext: <S extends boolean = true>(strict?: S) => S extends true ? MonthPickerContextProps : MonthPickerContextProps | undefined;
+declare const MonthPickerProvider: ({ children, disabled, year, onYearChange, fromDate, toDate, selected, defaultSelected, onMonthSelect, dropdownCaption, locale, }: MonthPickerProviderProps) => React.JSX.Element;
+export { MonthPickerProvider, useMonthPickerContext };

package/esm/date/monthpicker/MonthPicker.context.js

@@ -0,0 +1,41 @@
+import { isSameYear } from "date-fns";
+import React from "react";
+import { createContext } from "../../util/create-context.js";
+import { useControllableState } from "../../util/hooks/index.js";
+import { clampDisplayYear } from "../date-utils/index.js";
+const [MonthPickerContextProvider, useMonthPickerContext] = createContext({
+    name: "MonthPickerContext",
+    errorMessage: "useMonthPickerContext must be used within an MonthPickerContextProvider",
+});
+const MonthPickerProvider = ({ children, disabled = [], year, onYearChange, fromDate, toDate, selected, defaultSelected, onMonthSelect, dropdownCaption, locale, }) => {
+    var _a, _b;
+    /**
+     * Controlls current displayed year in MonthPicker
+     */
+    const [displayYear, setDisplayYear] = useControllableState({
+        defaultValue: (_b = clampDisplayYear({
+            month: (_a = year !== null && year !== void 0 ? year : selected) !== null && _a !== void 0 ? _a : defaultSelected,
+            start: fromDate,
+            end: toDate,
+        })) !== null && _b !== void 0 ? _b : new Date(),
+        value: year,
+        onChange: onYearChange,
+    });
+    /**
+     * Allows both controlled and uncontrolled use of MonthPicker
+     */
+    const [month, setMonth] = useControllableState({
+        defaultValue: defaultSelected,
+        value: selected,
+        onChange: onMonthSelect,
+    });
+    const handleDisplayYearUpdate = (newYear) => {
+        if (isSameYear(newYear, displayYear)) {
+            return;
+        }
+        setDisplayYear(newYear);
+    };
+    return (React.createElement(MonthPickerContextProvider, { caption: dropdownCaption && fromDate && toDate ? "dropdown" : "label", disabled: disabled, selected: month, onMonthSelect: setMonth, year: displayYear, onYearChange: handleDisplayYearUpdate, locale: locale, fromDate: fromDate, toDate: toDate }, children));
+};
+export { MonthPickerProvider, useMonthPickerContext };
+//# sourceMappingURL=MonthPicker.context.js.map

package/esm/date/monthpicker/MonthPicker.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.context.js","sourceRoot":"","sources":["../../../src/date/monthpicker/MonthPicker.context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,UAAU,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA+BjD,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,GACvD,aAAa,CAA0B;IACrC,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EACV,yEAAyE;CAC5E,CAAC,CAAC;AAEL,MAAM,mBAAmB,GAAG,CAAC,EAC3B,QAAQ,EACR,QAAQ,GAAG,EAAE,EACb,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAe,EACf,aAAa,EACb,eAAe,EACf,MAAM,GACmB,EAAE,EAAE;;IAC7B;;OAEG;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,oBAAoB,CAAC;QACzD,YAAY,EACV,MAAA,gBAAgB,CAAC;YACf,KAAK,EAAE,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,mCAAI,eAAe;YAC1C,KAAK,EAAE,QAAQ;YACf,GAAG,EAAE,MAAM;SACZ,CAAC,mCAAI,IAAI,IAAI,EAAE;QAClB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,YAAY;KACvB,CAAC,CAAC;IAEH;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAC;QAC7C,YAAY,EAAE,eAAe;QAC7B,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAAG,CAAC,OAAa,EAAE,EAAE;QAChD,IAAI,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QACD,cAAc,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,0BAA0B,IACzB,OAAO,EAAE,eAAe,IAAI,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EACrE,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,QAAQ,EACvB,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,uBAAuB,EACrC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,IAEb,QAAQ,CACkB,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,CAAC"}

package/esm/date/monthpicker/MonthPicker.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { MonthPickerInput } from "../parts/DateInput.js";
-import MonthPickerStandalone from "./MonthPickerStandalone.js";
-import { MonthPickerProps } from "./types.js";
+import { MonthPickerInput } from "../Date.Input.js";
+import { MonthPickerProps } from "./MonthPicker.types.js";
+import { MonthPickerStandalone } from "./parts/MonthPicker.Standalone.js";
 interface MonthPickerComponent extends React.ForwardRefExoticComponent<MonthPickerProps> {
     /**
      * @example

package/esm/date/monthpicker/MonthPicker.js

@@ -1,16 +1,15 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
-import { DayPickerProvider } from "react-day-picker";
-import { useId } from "../../util/hooks/index.js";
+import { useControllableState, useId } from "../../util/hooks/index.js";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs.js";
 import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks.js";
-import { DateInputContext, DateTranslationContextProvider, SharedMonthProvider, } from "../context/index.js";
-import { MonthPickerInput } from "../parts/DateInput.js";
-import { DateWrapper } from "../parts/DateWrapper.js";
-import { getLocaleFromString, getTranslations } from "../utils/index.js";
-import MonthCaption from "./MonthCaption.js";
-import MonthPickerStandalone from "./MonthPickerStandalone.js";
-import MonthSelector from "./MonthSelector.js";
+import { DateDialog } from "../Date.Dialog.js";
+import { DateInputContextProvider, MonthPickerInput } from "../Date.Input.js";
+import { DateTranslationContextProvider, getLocaleFromString, getTranslations, } from "../Date.locale.js";
+import { MonthPickerProvider } from "./MonthPicker.context.js";
+import { MonthPickerCaption } from "./parts/MonthPicker.Caption.js";
+import { MonthPickerStandalone } from "./parts/MonthPicker.Standalone.js";
+import { MonthPickerTable } from "./parts/MonthPicker.Table.js";
 /**
  * A component that displays a month picker.
  *
@@ -37,50 +36,42 @@ export const MonthPicker = forwardRef(({ children, dropdownCaption = false, from
     const translate = useI18n("DatePicker", translations, getTranslations(locale));
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
-    const [open, setOpen] = useState(_open !== null && _open !== void 0 ? _open : false);
+    const [open, setOpen] = useControllableState({
+        defaultValue: false,
+        value: _open,
+        onChange: () => {
+            onOpenToggle === null || onOpenToggle === void 0 ? void 0 : onOpenToggle();
+        },
+    });
     /* We use state here to insure that anchor is defined if open is true on initial render */
     const [wrapperRef, setWrapperRef] = useState(null);
     const mergedRef = useMergeRefs(setWrapperRef, ref);
-    const [selectedMonth, setSelectedMonth] = useState(defaultSelected);
     const handleSelect = (month) => {
-        var _a;
-        !onMonthSelect && setSelectedMonth(month);
         onMonthSelect === null || onMonthSelect === void 0 ? void 0 : onMonthSelect(month);
-        month && ((_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false));
+        if (month) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            setOpen(false);
+        }
     };
     if (dropdownCaption && (!fromDate || !toDate)) {
         console.warn("Using dropdownCaption required fromDate and toDate");
         return null;
     }
     return (React.createElement(DateTranslationContextProvider, { translate: translate },
-        React.createElement(DateInputContext.Provider, { value: {
-                open: _open !== null && _open !== void 0 ? _open : open,
-                onOpen: () => {
-                    setOpen((x) => !x);
-                    onOpenToggle === null || onOpenToggle === void 0 ? void 0 : onOpenToggle();
-                },
-                ariaId,
-                defined: true,
-            } },
-            React.createElement("div", { ref: mergedRef, className: cl("navds-date__wrapper", wrapperClassName) },
-                children,
-                React.createElement(DateWrapper, { open: _open !== null && _open !== void 0 ? _open : open, anchor: wrapperRef, onClose: () => { var _a; return (_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false); }, locale: locale, translate: translate, variant: "month", popoverProps: {
-                        id: ariaId,
-                        strategy,
-                    } },
-                    React.createElement(DayPickerProvider, { initialProps: {
-                            locale: locale
-                                ? getLocaleFromString(locale)
-                                : langProviderLocale,
-                            selected: selected !== null && selected !== void 0 ? selected : selectedMonth,
-                            toDate,
-                            fromDate,
-                            month: selected !== null && selected !== void 0 ? selected : selectedMonth,
+        React.createElement(DateInputContextProvider, { open: open, onOpen: () => setOpen((x) => !x), ariaId: ariaId, defined: true },
+            React.createElement(MonthPickerProvider, { dropdownCaption: dropdownCaption, defaultSelected: defaultSelected, selected: selected, disabled: disabled, fromDate: fromDate, toDate: toDate, year: year, onYearChange: onYearChange, onMonthSelect: handleSelect, locale: locale ? getLocaleFromString(locale) : langProviderLocale },
+                React.createElement("div", { ref: mergedRef, className: cl("navds-date__wrapper", wrapperClassName) },
+                    children,
+                    React.createElement(DateDialog, { open: open, anchor: wrapperRef, onClose: () => {
+                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                            open && setOpen(false);
+                        }, locale: locale, translate: translate, variant: "month", popoverProps: {
+                            id: ariaId,
+                            strategy,
                         } },
                         React.createElement("div", { className: cl("rdp-month", className) },
-                            React.createElement(SharedMonthProvider, { dropdownCaption: dropdownCaption, disabled: disabled, selected: selected !== null && selected !== void 0 ? selected : selectedMonth, onSelect: handleSelect, year: year, onYearChange: onYearChange },
-                                React.createElement(MonthCaption, null),
-                                React.createElement(MonthSelector, null)))))))));
+                            React.createElement(MonthPickerCaption, null),
+                            React.createElement(MonthPickerTable, null))))))));
 });
 MonthPicker.Standalone = MonthPickerStandalone;
 MonthPicker.Input = MonthPickerInput;

package/esm/date/monthpicker/MonthPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthPicker.js","sourceRoot":"","sources":["../../../src/date/monthpicker/MonthPicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MonthPicker.js","sourceRoot":"","sources":["../../../src/date/monthpicker/MonthPicker.tsx"],"names":[],"mappings":"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"}

package/esm/date/monthpicker/MonthPicker.types.d.ts

@@ -0,0 +1,86 @@
+import { ComponentTranslation } from "../../util/i18n/i18n.types.js";
+import { Matcher } from "../Date.typeutils.js";
+export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Element monthpicker anchors to. Use <MonthPicker.Input /> for built-in toggle,
+     * or make your own with the open/onClose props
+     */
+    children?: React.ReactNode;
+    /**
+     * Classname for datepicker in popover
+     */
+    className?: string;
+    /**
+     * Classname for wrapper
+     */
+    wrapperClassName?: string;
+    /**
+     * The earliest month to start navigation.
+     */
+    fromDate?: Date;
+    /**
+     * The latest day to end  navigation.
+     */
+    toDate?: Date;
+    /**
+     * Changes monthpicker locale
+     * @default "nb" (norsk bokmål)
+     * @deprecated Use `<Provider />`-component
+     */
+    locale?: "nb" | "nn" | "en";
+    /**
+     * i18n-API for customizing texts and labels.
+     *
+     * **NB: If you need to change the language, use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) instead.**
+     */
+    translations?: ComponentTranslation<"DatePicker">;
+    /**
+     * Display dropdown for choosing year. Needs `fromDate` + `toDate` to work.
+     * @default false
+     */
+    dropdownCaption?: boolean;
+    /**
+     * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/type-aliases/Matcher
+     */
+    disabled?: Matcher[];
+    /**
+     * Controlled selected-month
+     */
+    selected?: Date;
+    /**
+     * Default selected month.
+     */
+    defaultSelected?: Date;
+    /**
+     * Open state for user-controlled state. Component controlled by default
+     */
+    open?: boolean;
+    /**
+     * onClose callback for user-controlled state
+     */
+    onClose?: () => void;
+    /**
+     * onOpenToggle callback for user-controlled-state. Only called if `<MonthPicker.Input />` is used
+     */
+    onOpenToggle?: () => void;
+    /**
+     * Callback for user-controlled state
+     */
+    onMonthSelect?: (month?: Date) => void;
+    /**
+     * Used to set visible year programmatically. Component controlled by default
+     */
+    year?: Date;
+    /**
+     * Event fired when the user navigates between years.
+     */
+    onYearChange?: (y?: Date) => void;
+    /**
+     * **Avoid using if possible!**
+     *
+     * Changes what CSS position property to use
+     * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+     * @default "absolute"
+     */
+    strategy?: "absolute" | "fixed";
+}

package/esm/date/monthpicker/MonthPicker.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MonthPicker.types.js.map

package/esm/date/monthpicker/MonthPicker.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.types.js","sourceRoot":"","sources":["../../../src/date/monthpicker/MonthPicker.types.ts"],"names":[],"mappings":""}

package/esm/date/monthpicker/MonthPicker.util.d.ts

@@ -0,0 +1,2 @@
+import { Matcher } from "../Date.typeutils.js";
+export declare const nextEnabled: (months: Date[], key: string, disabled: Matcher[], currentMonth: Date, setYearState: (date: Date) => void, yearState: Date, dropdownCaption: boolean, fromDate?: Date, toDate?: Date) => Date;

package/esm/date/monthpicker/MonthPicker.util.js

@@ -0,0 +1,152 @@
+import { setYear } from "date-fns";
+import { isMatch } from "../date-utils/index.js";
+export const nextEnabled = (months, key, disabled, currentMonth, setYearState, yearState, dropdownCaption, fromDate, toDate) => {
+    const currentIndex = currentMonth.getMonth();
+    if (key === "Home") {
+        const nextDate = nextOnRow(currentIndex, months, yearState, disabled, "home");
+        if (nextDate) {
+            return nextDate;
+        }
+    }
+    if (key === "End") {
+        const nextDate = nextOnRow(currentIndex, months, yearState, disabled, "end");
+        if (nextDate) {
+            return nextDate;
+        }
+    }
+    if (key === "PageUp") {
+        if (!dropdownCaption ||
+            (fromDate && yearState.getFullYear() - 1 >= (fromDate === null || fromDate === void 0 ? void 0 : fromDate.getFullYear()))) {
+            setYearState(setYear(yearState, Number(yearState.getFullYear() - 1)));
+        }
+    }
+    if (key === "PageDown") {
+        if (!dropdownCaption ||
+            (toDate && yearState.getFullYear() + 1 <= (toDate === null || toDate === void 0 ? void 0 : toDate.getFullYear()))) {
+            setYearState(setYear(yearState, Number(yearState.getFullYear() + 1)));
+        }
+    }
+    if (key === "ArrowRight") {
+        const nextMonth = loopForward(currentIndex, months, yearState, setYearState, disabled, false, dropdownCaption, fromDate, toDate);
+        if (nextMonth) {
+            return setYear(months[nextMonth.index], nextMonth.year);
+        }
+    }
+    if (key === "ArrowLeft") {
+        const prevMonth = loopBack(currentIndex - 1, months, disabled, yearState, setYearState, false, dropdownCaption, fromDate, toDate);
+        if (prevMonth) {
+            return setYear(months[prevMonth.index], prevMonth.year);
+        }
+    }
+    if (key === "ArrowDown") {
+        if (months[currentIndex + 4] &&
+            !isMatch(setYear(months[currentIndex + 4], yearState.getFullYear()), disabled)) {
+            return setYear(months[currentIndex + 4], yearState.getFullYear());
+        }
+        const fallbackNext = loopForward(currentIndex, months, yearState, setYearState, disabled, true, dropdownCaption, fromDate, toDate);
+        if (fallbackNext &&
+            getRow(fallbackNext.index) !== getRow(currentIndex + 8)) {
+            return setYear(months[fallbackNext.index], fallbackNext.year);
+        }
+    }
+    if (key === "ArrowUp") {
+        if (months[currentIndex - 4] &&
+            !isMatch(setYear(months[currentIndex - 4], Number(yearState.getFullYear())), disabled))
+            return setYear(months[currentIndex - 4], Number(yearState.getFullYear()));
+        const fallbackPrev = loopBack(currentIndex, months, disabled, yearState, setYearState, true, dropdownCaption, fromDate, toDate);
+        if (fallbackPrev)
+            return setYear(months[fallbackPrev.index], fallbackPrev.year);
+    }
+    return currentMonth;
+};
+const loopBack = (currentIndex, months, disabled, yearState, setYearState, rowCheck, dropdownCaption, fromDate, toDate) => {
+    let currentYear = setYear(yearState, Number(yearState.getFullYear()));
+    for (let i = currentIndex; i >= -1; i--) {
+        if (i === -1) {
+            if (isOutOfRange(dropdownCaption, setYear(currentYear, Number(currentYear.getFullYear() - 1)), fromDate, toDate))
+                return;
+            currentYear = setYear(currentYear, Number(currentYear.getFullYear() - 1));
+            setYearState(currentYear);
+            i = 11;
+        }
+        const month = months[i];
+        const isDisabled = !isMatch(setYear(month, Number(currentYear.getFullYear())), disabled);
+        if (rowCheck) {
+            if (isDisabled && getRow(i) !== getRow(currentIndex)) {
+                return { index: i, year: Number(currentYear.getFullYear()) };
+            }
+        }
+        else {
+            if (isDisabled) {
+                return { index: i, year: Number(currentYear.getFullYear()) };
+            }
+        }
+    }
+};
+const loopForward = (currentIndex, months, yearState, setYearState, disabled, rowCheck, dropdownCaption, fromDate, toDate) => {
+    let currentYear = setYear(yearState, Number(yearState.getFullYear()));
+    for (let i = currentIndex + 1; i < months.length + 1; i++) {
+        if (i === 12) {
+            if (isOutOfRange(dropdownCaption, setYear(currentYear, Number(currentYear.getFullYear() + 1)), fromDate, toDate))
+                return;
+            currentYear = setYear(currentYear, Number(currentYear.getFullYear() + 1));
+            setYearState(currentYear);
+            i = 0;
+        }
+        const month = months[i];
+        const isDisabled = !isMatch(setYear(month, Number(currentYear.getFullYear())), disabled);
+        if (rowCheck) {
+            if (isDisabled && getRow(i) !== getRow(currentIndex)) {
+                return { index: i, year: Number(currentYear.getFullYear()) };
+            }
+        }
+        else {
+            if (isDisabled) {
+                return { index: i, year: Number(currentYear.getFullYear()) };
+            }
+        }
+    }
+};
+const getRow = (index) => {
+    if (index >= 0 && index <= 3)
+        return 1;
+    if (index >= 4 && index <= 7)
+        return 2;
+    return 3;
+};
+const isOutOfRange = (dropdownCaption, year, fromDate, toDate) => {
+    if (dropdownCaption &&
+        fromDate &&
+        toDate &&
+        (year.getFullYear() < (fromDate === null || fromDate === void 0 ? void 0 : fromDate.getFullYear()) ||
+            year.getFullYear() > (toDate === null || toDate === void 0 ? void 0 : toDate.getFullYear()))) {
+        return true;
+    }
+    return false;
+};
+const nextOnRow = (currentIndex, months, yearState, disabled, mode) => {
+    const row = getRow(currentIndex);
+    let monthsOfRow = [];
+    switch (row) {
+        case 1:
+            monthsOfRow = months.slice(0, 4);
+            break;
+        case 2:
+            monthsOfRow = months.slice(4, 8);
+            break;
+        case 3:
+            monthsOfRow = months.slice(8, 12);
+            break;
+        default:
+            break;
+    }
+    if (mode === "end")
+        monthsOfRow = monthsOfRow.reverse();
+    for (let i = 0; i < monthsOfRow.length; i++) {
+        const month = monthsOfRow[i];
+        if (!isMatch(setYear(month, Number(yearState.getFullYear())), disabled)) {
+            return setYear(month, Number(yearState.getFullYear()));
+        }
+    }
+};
+//# sourceMappingURL=MonthPicker.util.js.map

package/esm/date/monthpicker/MonthPicker.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.util.js","sourceRoot":"","sources":["../../../src/date/monthpicker/MonthPicker.util.ts"],"names":[],"mappings":"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"}