@navikt/ds-react 1.2.2 → 1.3.0-alpha.0

package/cjs/datepicker/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeDatepicker = exports.useDatepicker = exports.DatePicker = void 0;
+var DatePicker_1 = require("./DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useDatepicker", { enumerable: true, get: function () { return hooks_1.useDatepicker; } });
+Object.defineProperty(exports, "useRangeDatepicker", { enumerable: true, get: function () { return hooks_1.useRangeDatepicker; } });

package/cjs/datepicker/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/datepicker/index.js",
+  "types": "../../esm/datepicker/index.d.ts"
+}

package/cjs/datepicker/utils/dates-disabled.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.disableDate = void 0;
+const date_fns_1 = require("date-fns");
+const react_day_picker_1 = require("react-day-picker");
+// TODO: ((date: Date) => boolean)
+const disableDate = (disabledSelection, date) => {
+    let result = false;
+    if (disabledSelection instanceof Date) {
+        return (0, date_fns_1.isSameDay)(disabledSelection, date);
+    }
+    else if (disabledSelection instanceof Array) {
+        for (let i = 0; i < disabledSelection.length; i++) {
+            const selection = disabledSelection[i];
+            if ((0, react_day_picker_1.isDateRange)(selection)) {
+                if (selection.from && selection.to) {
+                    result = date >= selection.from && date <= selection.to;
+                }
+            }
+            else if (selection instanceof Date) {
+                result = (0, date_fns_1.isSameDay)(selection, date);
+            }
+            if (result)
+                break;
+        }
+    }
+    return result;
+};
+exports.disableDate = disableDate;

package/cjs/datepicker/utils/format-date.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDateForInput = void 0;
+const date_fns_1 = require("date-fns");
+const parse_date_1 = require("./parse-date");
+const formatDateForInput = (date, locale) => (0, date_fns_1.format)(date, parse_date_1.INPUT_DATE_STRING_FORMAT, { locale });
+exports.formatDateForInput = formatDateForInput;

package/cjs/datepicker/utils/get-dates.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getYears = exports.getMonths = void 0;
+const date_fns_1 = require("date-fns");
+const getMonths = (start, end, current) => {
+    const dropdownMonths = [];
+    if ((0, date_fns_1.isSameYear)(start, end)) {
+        const date = (0, date_fns_1.startOfMonth)(start);
+        for (let month = start.getMonth(); month <= end.getMonth(); month++) {
+            dropdownMonths.push((0, date_fns_1.setMonth)(date, month));
+        }
+    }
+    else if ((0, date_fns_1.isSameYear)(current, end)) {
+        const date = (0, date_fns_1.startOfMonth)(new Date());
+        for (let month = 0; month <= end.getMonth(); month++) {
+            dropdownMonths.push((0, date_fns_1.setMonth)(date, month));
+        }
+    }
+    else if ((0, date_fns_1.isSameYear)(current, start)) {
+        const date = (0, date_fns_1.startOfMonth)(start);
+        for (let month = date.getMonth(); month <= 11; month++) {
+            dropdownMonths.push((0, date_fns_1.setMonth)(date, month));
+        }
+    }
+    else {
+        const date = (0, date_fns_1.startOfMonth)(new Date());
+        for (let month = 0; month <= 11; month++) {
+            dropdownMonths.push((0, date_fns_1.setMonth)(date, month));
+        }
+    }
+    return dropdownMonths;
+};
+exports.getMonths = getMonths;
+const getYears = (start, end) => {
+    const years = [];
+    const fromYear = start.getFullYear();
+    const toYear = end.getFullYear();
+    for (let year = fromYear; year <= toYear; year++) {
+        years.push((0, date_fns_1.setYear)((0, date_fns_1.startOfYear)(new Date()), year));
+    }
+    return years;
+};
+exports.getYears = getYears;

package/cjs/datepicker/utils/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidDate = exports.getLocaleFromString = exports.parseDate = exports.INPUT_DATE_STRING_FORMAT = exports.labels = exports.labelYearDropdown = exports.labelMonthDropdown = exports.getYears = exports.getMonths = exports.formatDateForInput = void 0;
+var format_date_1 = require("./format-date");
+Object.defineProperty(exports, "formatDateForInput", { enumerable: true, get: function () { return format_date_1.formatDateForInput; } });
+var get_dates_1 = require("./get-dates");
+Object.defineProperty(exports, "getMonths", { enumerable: true, get: function () { return get_dates_1.getMonths; } });
+Object.defineProperty(exports, "getYears", { enumerable: true, get: function () { return get_dates_1.getYears; } });
+var labels_1 = require("./labels");
+Object.defineProperty(exports, "labelMonthDropdown", { enumerable: true, get: function () { return labels_1.labelMonthDropdown; } });
+Object.defineProperty(exports, "labelYearDropdown", { enumerable: true, get: function () { return labels_1.labelYearDropdown; } });
+Object.defineProperty(exports, "labels", { enumerable: true, get: function () { return labels_1.labels; } });
+var parse_date_1 = require("./parse-date");
+Object.defineProperty(exports, "INPUT_DATE_STRING_FORMAT", { enumerable: true, get: function () { return parse_date_1.INPUT_DATE_STRING_FORMAT; } });
+Object.defineProperty(exports, "parseDate", { enumerable: true, get: function () { return parse_date_1.parseDate; } });
+var locale_1 = require("./locale");
+Object.defineProperty(exports, "getLocaleFromString", { enumerable: true, get: function () { return locale_1.getLocaleFromString; } });
+var valid_date_1 = require("./valid-date");
+Object.defineProperty(exports, "isValidDate", { enumerable: true, get: function () { return valid_date_1.isValidDate; } });

package/cjs/datepicker/utils/labels.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.labels = 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) {
+        case "nb":
+            return "Gå til neste månede";
+        case "nn":
+            return "Gå til neste månede";
+        case "en":
+            return "Go to next month";
+        default:
+            return "Gå til neste månede";
+    }
+};
+const labelPrevious = (date, options) => {
+    var _a;
+    switch ((_a = options === null || options === void 0 ? void 0 : options.locale) === null || _a === void 0 ? void 0 : _a.code) {
+        case "nb":
+            return "Gå til forrige månede";
+        case "nn":
+            return "Gå til forrige månede";
+        case "en":
+            return "Go to previous month";
+        default:
+            return "Gå til forrige månede";
+    }
+};
+const labelYearDropdown = (locale) => {
+    switch (locale === null || locale === void 0 ? void 0 : locale.code) {
+        case "nb":
+            return "År";
+        case "nn":
+            return "År";
+        case "en":
+            return "Year";
+        default:
+            return "År";
+    }
+};
+exports.labelYearDropdown = labelYearDropdown;
+const labelMonthDropdown = (locale) => {
+    switch (locale === null || locale === void 0 ? void 0 : locale.code) {
+        case "nb":
+            return "Månede";
+        case "nn":
+            return "Månede";
+        case "en":
+            return "Month";
+        default:
+            return "Månede";
+    }
+};
+exports.labelMonthDropdown = labelMonthDropdown;
+exports.labels = {
+    labelNext,
+    labelPrevious,
+};

package/cjs/datepicker/utils/locale.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocaleFromString = void 0;
+const en_GB_1 = __importDefault(require("date-fns/locale/en-GB"));
+const nb_1 = __importDefault(require("date-fns/locale/nb"));
+const nn_1 = __importDefault(require("date-fns/locale/nn"));
+/** @private */
+const getLocaleFromString = (locale = "nb") => {
+    switch (locale) {
+        case "nn":
+            return nn_1.default;
+        case "en":
+            return en_GB_1.default;
+        default:
+            return nb_1.default;
+    }
+};
+exports.getLocaleFromString = getLocaleFromString;

package/cjs/datepicker/utils/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../esm/datepicker/utils/index.js",
+  "types": "../../../esm/datepicker/utils/index.d.ts"
+}

package/cjs/datepicker/utils/parse-date.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseDate = exports.INPUT_DATE_STRING_FORMAT = void 0;
+const date_fns_1 = require("date-fns");
+const valid_date_1 = require("./valid-date");
+exports.INPUT_DATE_STRING_FORMAT = "dd.MM.yyyy";
+const ALLOWED_INPUT_FORMATS = [
+    "ddMMyy",
+    "d.M.yy",
+    "dd.MM.yy",
+    "dd/MM/yy",
+    "dd-MM-yy",
+    exports.INPUT_DATE_STRING_FORMAT,
+    "ddMMyyyy",
+    "dd/MM/yyyy",
+    "dd-MM-yyyy",
+    "d.M.yyyy",
+];
+const parseDate = (date, today, locale) => {
+    let parsed;
+    for (const format of ALLOWED_INPUT_FORMATS) {
+        parsed = (0, date_fns_1.parse)(date, format, today, { locale });
+        if ((0, valid_date_1.isValidDate)(parsed)) {
+            return parsed;
+        }
+    }
+    return parsed;
+};
+exports.parseDate = parseDate;

package/cjs/datepicker/utils/valid-date.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidDate = void 0;
+/** @private */
+function isValidDate(day) {
+    return !isNaN(day.getTime());
+}
+exports.isValidDate = isValidDate;

package/cjs/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./accordion"), exports);
 __exportStar(require("./alert"), exports);
 __exportStar(require("./button"), exports);
+__exportStar(require("./datepicker"), exports);
 __exportStar(require("./form"), exports);
 __exportStar(require("./grid"), exports);
 __exportStar(require("./help-text"), exports);

package/cjs/monthpicker/MonthPicker.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.F = exports.MonthPicker = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
+const clsx_1 = __importDefault(require("clsx"));
+const date_fns_1 = require("date-fns");
+const nb_1 = __importDefault(require("date-fns/locale/nb"));
+const react_1 = __importStar(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("..");
+const check_dates_1 = require("./utils/check-dates");
+const TestCaption = ({ selected, onSelect, isValidYearSelector, yearSelector, }) => {
+    const { nextMonth, previousMonth } = (0, react_day_picker_1.useNavigation)();
+    const { fromDate, toDate, formatters: { formatYearCaption }, locale, } = (0, react_day_picker_1.useDayPicker)();
+    const [yearState, setYearState] = (0, react_1.useState)(selected);
+    const years = [];
+    if (yearSelector && fromDate && toDate) {
+        const fromYear = fromDate.getFullYear();
+        const toYear = toDate.getFullYear();
+        for (let year = fromYear; year <= toYear; year++) {
+            years.push((0, date_fns_1.setYear)((0, date_fns_1.startOfYear)(new Date()), year));
+        }
+    }
+    const handleYearChange = (e) => {
+        const newMonth = (0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(selected), Number(e.target.value));
+        setYearState(newMonth);
+        onSelect(newMonth);
+    };
+    const handleButtonClick = (val) => {
+        const newMonth = (0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(selected), yearState.getFullYear() + val);
+        setYearState(newMonth);
+        onSelect(newMonth);
+    };
+    return (react_1.default.createElement("div", { className: "navds-monthpicker__caption" },
+        react_1.default.createElement("button", { className: "navds-monthpicker__caption-button", disabled: !previousMonth, onClick: () => years.some((x) => yearState.getFullYear() - 1 === x.getFullYear()) &&
+                handleButtonClick(-1) },
+            react_1.default.createElement(ds_icons_1.Left, { "aria-hidden": true })),
+        isValidYearSelector ? (react_1.default.createElement(__1.Select, { label: "velg \u00E5r", hideLabel: true, value: selected === null || selected === void 0 ? void 0 : selected.getFullYear(), onChange: handleYearChange, style: { width: "79px" } }, years.map((year) => (react_1.default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale })))))) : (react_1.default.createElement("span", { className: "navds-monthpicker__year-label", "aria-live": "polite" }, yearState.getFullYear())),
+        react_1.default.createElement("button", { className: "navds-monthpicker__caption-button", disabled: !nextMonth, onClick: () => years.some((x) => yearState.getFullYear() + 1 === x.getFullYear()) &&
+                handleButtonClick(1) },
+            react_1.default.createElement(ds_icons_1.Right, { "aria-hidden": true }))));
+};
+const MonthSelector = ({ onSelect, selected, }) => {
+    const months = [];
+    const { fromDate, toDate, formatters: { formatYearCaption, formatMonthCaption }, locale, } = (0, react_day_picker_1.useDayPicker)();
+    if (!fromDate)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    if (!toDate)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    if ((0, date_fns_1.isSameYear)(fromDate, toDate)) {
+        const date = (0, date_fns_1.startOfMonth)(fromDate);
+        for (let month = fromDate.getMonth(); month <= toDate.getMonth(); month++) {
+            months.push((0, date_fns_1.setMonth)(date, month));
+        }
+    }
+    else {
+        const date = (0, date_fns_1.startOfMonth)(new Date());
+        for (let month = 0; month <= 11; month++) {
+            months.push((0, date_fns_1.setMonth)(date, month));
+        }
+    }
+    const hideMonth = (month) => {
+        return (0, date_fns_1.compareAsc)(month, fromDate) === -1;
+    };
+    return (react_1.default.createElement(__1.BodyShort, { as: "div", className: "navds-monthpicker__months" }, months.map((x, y) => {
+        return (react_1.default.createElement("button", { key: x.toDateString(), onClick: () => onSelect((0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(x), Number(selected.getFullYear()))), className: (0, clsx_1.default)("navds-monthpicker__month", {
+                "navds-monthpicker__month--hidden": hideMonth(x),
+                "navds-monthpicker__month--current": (0, check_dates_1.dateIsInCurrentMonth)(x, selected),
+                "navds-monthpicker__month--selected": (0, check_dates_1.dateIsSelected)(x, selected),
+            }) },
+            react_1.default.createElement("span", { "aria-hidden": "true" }, (0, date_fns_1.format)(new Date(x), "LLL", { locale })
+                .replace(".", "")
+                .substring(0, 3)),
+            react_1.default.createElement("span", { className: "navds-sr-only" }, (0, date_fns_1.format)(new Date(x), "LLLL", { locale }))));
+    })));
+};
+exports.MonthPicker = (0, react_1.forwardRef)(({ children, yearSelector = false, fromDate = new Date(), toDate = new Date("Sep 27 2032"), }, ref) => {
+    const [selected, setSelected] = react_1.default.useState(new Date());
+    const isValidYearSelector = yearSelector && fromDate && toDate ? true : false;
+    return (react_1.default.createElement(react_day_picker_1.RootProvider, { locale: nb_1.default, selected: selected, className: "navds-monthpicker-month", toDate: toDate, fromDate: fromDate },
+        react_1.default.createElement("div", { className: "navds-monthpicker__wrapper" },
+            react_1.default.createElement(TestCaption, { selected: selected, onSelect: setSelected, yearSelector: yearSelector, isValidYearSelector: isValidYearSelector }),
+            react_1.default.createElement(MonthSelector, { onSelect: setSelected, selected: selected }))));
+});
+exports.default = exports.MonthPicker;
+exports.F = "";

package/cjs/monthpicker/index.js

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

package/cjs/monthpicker/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/monthpicker/index.js",
+  "types": "../../esm/monthpicker/index.d.ts"
+}

package/cjs/monthpicker/utils/check-dates.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateIsSelected = exports.dateIsInCurrentMonth = void 0;
+const date_fns_1 = require("date-fns");
+const dateIsInCurrentMonth = (date, dateToCompare) => {
+    return (0, date_fns_1.isThisMonth)((0, date_fns_1.setYear)(date, Number(dateToCompare.getFullYear())));
+};
+exports.dateIsInCurrentMonth = dateIsInCurrentMonth;
+const dateIsSelected = (date, selectedDate) => {
+    return (0, date_fns_1.isSameMonth)((0, date_fns_1.setYear)(date, Number(selectedDate.getFullYear())), selectedDate);
+};
+exports.dateIsSelected = dateIsSelected;

package/cjs/monthpicker/utils/handle-selected.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasNextYear = exports.updateWithYearSelector = exports.updateWithoutYearSelector = void 0;
+const date_fns_1 = require("date-fns");
+const updateWithoutYearSelector = (yearState, val) => {
+    const newYear = Number(yearState.getFullYear() + val);
+    return (0, date_fns_1.setYear)(yearState, newYear);
+};
+exports.updateWithoutYearSelector = updateWithoutYearSelector;
+const updateWithYearSelector = (yearState, selected, years, val) => {
+    return (0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(selected), yearState.getFullYear() + val);
+};
+exports.updateWithYearSelector = updateWithYearSelector;
+const hasNextYear = (yearState, years, val) => {
+    return years.some((x) => yearState.getFullYear() + val === x.getFullYear());
+};
+exports.hasNextYear = hasNextYear;

package/esm/chat/Chat.d.ts

@@ -8,7 +8,7 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Chat-message name
      */
-    name: string;
+    name?: string;
     /**
      * Timestamp for sent message
      */

package/esm/datepicker/DatePicker.d.ts

@@ -0,0 +1,107 @@
+import React from "react";
+import { DateRange, DayPickerBase, Matcher } from "react-day-picker";
+import { DatePickerInputType } from "./DatePickerInput";
+import { DatePickerStandaloneType } from "./DatePickerStandalone";
+export declare type ConditionalModeProps = {
+    mode?: "single";
+    onSelect?: (val?: Date) => void;
+    selected?: Date;
+    defaultSelected?: Date;
+} | {
+    mode?: "multiple";
+    onSelect?: (val?: Date[]) => void;
+    selected?: Date[];
+    defaultSelected?: Date[];
+    min?: number;
+    max?: number;
+} | {
+    mode?: "range";
+    onSelect?: (val?: DateRange) => void;
+    selected?: DateRange;
+    defaultSelected?: DateRange;
+    min?: number;
+    max?: number;
+};
+export interface DatePickerDefaultProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">, Pick<DayPickerBase, "month" | "onMonthChange" | "today" | "onDayClick"> {
+    /**
+     * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle,
+     * or make your own with the open/onClose props
+     */
+    children?: React.ReactNode;
+    /**
+     * Changes datepicker locale
+     * @default "nb" (norsk bokmål)
+     */
+    locale?: "nb" | "nn" | "en";
+    /**
+     * The earliest Date available for the user to pick from
+     */
+    fromDate?: Date;
+    /**
+     * The latest Date available for the user to pick from
+     */
+    toDate?: Date;
+    /**
+     * Adds a `Select` for picking Year and Month
+     * Needs `fromDate` + `toDate` to be set!
+     * @default false
+     */
+    yearSelector?: boolean;
+    /**
+     * Apply the disabled modifier to the matching days.
+     * {@link https://react-day-picker.js.org/api/types/Matcher | Matcher type-definition}
+     */
+    disabled?: Matcher[];
+    /**
+     * Disable saturday and sunday.
+     * @default false
+     */
+    disableWeekends?: boolean;
+    /**
+     * Shows week numbers in left-column
+     * Use with caution, takes up valuable screenspace in small screens!
+     * @default false
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Open state for user-controlled state
+     * @remark Controlled by component by default
+     */
+    open?: boolean;
+    /**
+     * onClose callback for user-controlled state
+     */
+    onClose?: () => void;
+    /**
+     * onOpenToggle callback for user-controlled-state
+     * @remark only called if `<DatePicker.Input />` is used
+     */
+    onOpenToggle?: () => void;
+    /**
+     * Classnames for adding classes
+     */
+    classNames?: {
+        /**
+         * Children wrapper
+         */
+        wrapper?: string;
+        /**
+         * DatePicker-wrapper
+         */
+        datepicker?: string;
+    };
+}
+export declare type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
+interface DatePickerComponent extends React.ForwardRefExoticComponent<DatePickerProps> {
+    Input: DatePickerInputType;
+    Standalone: DatePickerStandaloneType;
+}
+interface DatePickerContextProps {
+    open: boolean;
+    onOpen: () => void;
+    buttonRef: React.MutableRefObject<HTMLButtonElement | null> | null;
+    ariaId?: string;
+}
+export declare const DatePickerContext: React.Context<DatePickerContextProps>;
+export declare const DatePicker: DatePickerComponent;
+export default DatePicker;

package/esm/datepicker/DatePicker.js

@@ -0,0 +1,94 @@
+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 { FloatingPortal } from "@floating-ui/react-dom-interactions";
+import cl from "clsx";
+import { isWeekend } from "date-fns";
+import React, { createContext, forwardRef, useRef, useState } from "react";
+import { DayPicker, isMatch, } from "react-day-picker";
+import { Popover, useId } from "..";
+import { omit } from "../util";
+import { Caption, DropdownCaption } from "./caption";
+import DatePickerInput from "./DatePickerInput";
+import DatePickerStandalone from "./DatePickerStandalone";
+import { getLocaleFromString, labels } from "./utils";
+export const DatePickerContext = createContext({
+    open: false,
+    onOpen: () => null,
+    buttonRef: null,
+    ariaId: undefined,
+});
+export const DatePicker = forwardRef((_a, ref) => {
+    var { children, locale = "nb", yearSelector, disabled = [], disableWeekends = false, showWeekNumber = false, mode = "single", selected, id, defaultSelected, classNames, open: _open, onClose, onOpenToggle } = _a, rest = __rest(_a, ["children", "locale", "yearSelector", "disabled", "disableWeekends", "showWeekNumber", "mode", "selected", "id", "defaultSelected", "classNames", "open", "onClose", "onOpenToggle"]);
+    const ariaId = useId(id);
+    const [open, setOpen] = useState(_open !== null && _open !== void 0 ? _open : false);
+    const wrapperRef = useRef(null);
+    const buttonRef = useRef(null);
+    const [selectedDates, setSelectedDates] = React.useState(defaultSelected);
+    const handleSingleSelect = (selectedDay) => {
+        var _a, _b;
+        setSelectedDates(selectedDay);
+        selectedDay && ((_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false));
+        selectedDay && buttonRef && ((_b = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus());
+        (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, _b;
+        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));
+        (selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.from) &&
+            (selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.to) &&
+            buttonRef &&
+            ((_b = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus());
+        (rest === null || rest === void 0 ? void 0 : rest.onSelect) &&
+            (rest === null || rest === void 0 ? void 0 : rest.onSelect)(selectedDays);
+    };
+    const overrideProps = {
+        onSelect: mode === "single"
+            ? handleSingleSelect
+            : mode === "multiple"
+                ? handleMultipleSelect
+                : handleRangeSelect,
+    };
+    return (React.createElement(DatePickerContext.Provider, { value: {
+            open: _open !== null && _open !== void 0 ? _open : open,
+            onOpen: () => {
+                setOpen((x) => !x);
+                onOpenToggle === null || onOpenToggle === void 0 ? void 0 : onOpenToggle();
+            },
+            buttonRef,
+            ariaId,
+        } },
+        React.createElement("div", { ref: wrapperRef, className: cl("navds-date__wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.wrapper) },
+            children,
+            React.createElement(FloatingPortal, null, (_open !== null && _open !== void 0 ? _open : open) && (React.createElement(Popover, { arrow: false, anchorEl: wrapperRef.current, open: _open !== null && _open !== void 0 ? _open : open, onClose: () => { var _a; return (_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false); }, placement: "bottom-start", id: ariaId, "aria-roledescription": locale === "en" ? "datepicker" : "datovelger", role: "dialog", ref: ref },
+                React.createElement(DayPicker, Object.assign({ locale: getLocaleFromString(locale), mode: mode }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
+                        Caption: yearSelector ? DropdownCaption : Caption,
+                    }, className: cl("navds-date", classNames === null || classNames === void 0 ? void 0 : classNames.datepicker), classNames: {
+                        vhidden: "navds-sr-only",
+                    }, disabled: (day) => {
+                        return ((disableWeekends && isWeekend(day)) ||
+                            isMatch(day, disabled));
+                    }, weekStartsOn: 1, initialFocus: false, labels: labels, modifiers: {
+                        weekend: (day) => disableWeekends && isWeekend(day),
+                    }, modifiersClassNames: {
+                        weekend: "rdp-day__weekend",
+                    }, showWeekNumber: showWeekNumber }, omit(rest, ["onSelect"])))))))));
+});
+DatePicker.Input = DatePickerInput;
+DatePicker.Standalone = DatePickerStandalone;
+export default DatePicker;
+//# sourceMappingURL=DatePicker.js.map

package/esm/datepicker/DatePicker.js.map

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