@navikt/ds-react 1.3.8 → 1.3.9

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseDate = exports.INPUT_DATE_STRING_FORMAT_MONTH = exports.INPUT_DATE_STRING_FORMAT_DATE = void 0;
+const date_fns_1 = require("date-fns");
+const _1 = require(".");
+exports.INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";
+exports.INPUT_DATE_STRING_FORMAT_MONTH = "MM.yyyy";
+const ALLOWED_INPUT_FORMATS_DATE = [
+    "ddMMyy",
+    "d.M.yy",
+    "dd.MM.yy",
+    "dd/MM/yy",
+    "dd-MM-yy",
+    exports.INPUT_DATE_STRING_FORMAT_DATE,
+    "ddMMyyyy",
+    "dd/MM/yyyy",
+    "dd-MM-yyyy",
+    "d.M.yyyy",
+];
+const ALLOWED_INPUT_FORMATS_MONTH = [
+    "M/yyyy",
+    "MM/yyyy",
+    "M-yyyy",
+    "MM-yyyy",
+    "MM.yyyy",
+    exports.INPUT_DATE_STRING_FORMAT_MONTH,
+];
+const parseDate = (date, today, locale, type) => {
+    let parsed;
+    const ALLOWED_FORMATS = type === "date" ? ALLOWED_INPUT_FORMATS_DATE : ALLOWED_INPUT_FORMATS_MONTH;
+    for (const format of ALLOWED_FORMATS) {
+        parsed = (0, date_fns_1.parse)(date, format, today, { locale });
+        if ((0, _1.isValidDate)(parsed)) {
+            return parsed;
+        }
+    }
+    return parsed;
+};
+exports.parseDate = parseDate;

package/cjs/form/ConfirmationPanel.js

@@ -44,15 +44,16 @@ const __1 = require("..");
 const useFormField_1 = require("./useFormField");
 exports.ConfirmationPanel = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, label } = _a, props = __rest(_a, ["className", "children", "label"]);
-    const { errorId, showErrorMsg, hasError, size, inputProps } = (0, useFormField_1.useFormField)(props, "confirmationPanel");
+    const { errorId, showErrorMsg, hasError, size, inputProps } = (0, useFormField_1.useFormField)(props, "confirmation-panel");
+    const id = (0, react_1.useId)();
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-confirmation-panel", "navds-form-field", className, {
             "navds-confirmation-panel--small": size === "small",
             "navds-confirmation-panel--error": hasError,
             "navds-confirmation-panel--checked": !!props.checked,
         }) },
         react_1.default.createElement("div", { className: "navds-confirmation-panel__inner" },
-            children && (react_1.default.createElement(__1.BodyLong, { size: props.size, className: "navds-confirmation-panel__content" }, children)),
-            react_1.default.createElement(__1.Checkbox, Object.assign({ ref: ref }, props, inputProps, { error: hasError, size: size }), label)),
+            children && (react_1.default.createElement(__1.BodyLong, { size: props.size, className: "navds-confirmation-panel__content", id: `confirmation-panel-${id}` }, children)),
+            react_1.default.createElement(__1.Checkbox, Object.assign({ ref: ref }, props, inputProps, { "aria-describedby": (0, clsx_1.default)(inputProps["aria-describedby"], children && `confirmation-panel-${id}`), error: hasError, size: size }), label)),
         react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error))));
 });
 exports.default = exports.ConfirmationPanel;

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("./date"), exports);
 __exportStar(require("./form"), exports);
 __exportStar(require("./grid"), exports);
 __exportStar(require("./help-text"), exports);

package/esm/date/DateInput.d.ts

@@ -0,0 +1,30 @@
+import React, { InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../form/useFormField";
+export interface DateInputProps extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Input label
+     */
+    label: React.ReactNode;
+    /**
+     * Shows label and description for screenreaders-only
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Changes padding and font-sizes
+     * @default medium
+     */
+    size?: "medium" | "small";
+    /**
+     * @private
+     */
+    wrapperRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Defines usage for date or month picker.
+     * @default "datepicker"
+     */
+    variant?: "datepicker" | "monthpicker";
+}
+export declare type DateInputType = React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const DatePickerInput: DateInputType;
+export declare const MonthPickerInput: DateInputType;

package/esm/date/DateInput.js

@@ -0,0 +1,51 @@
+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 { Calender } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
+import { useFormField } from "../form/useFormField";
+import { useDateInputContext } from "./hooks";
+const DateInput = forwardRef((props, ref) => {
+    const { className, hideLabel = false, label, description, variant = "datepicker" } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "variant"]);
+    const isDatepickerVariant = variant === "datepicker";
+    const conditionalVariables = {
+        prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
+        iconTitle: {
+            open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
+            close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
+        },
+    };
+    const { onOpen, ariaId, open } = useDateInputContext();
+    const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = useFormField(props, conditionalVariables.prefix);
+    return (React.createElement("div", { className: cl(className, "navds-form-field", `navds-form-field--${size}`, "navds-date__field", {
+            "navds-text-field--error": hasError,
+            "navds-date__field--error": hasError,
+            "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-text-field--disabled": !!inputProps.disabled,
+        }), ref: props === null || props === void 0 ? void 0 : props.wrapperRef },
+        React.createElement(Label, { htmlFor: inputProps.id, size: size, className: cl("navds-form-field__label", {
+                "navds-sr-only": hideLabel,
+            }) }, label),
+        !!description && (React.createElement(BodyShort, { as: "div", className: cl("navds-form-field__description", {
+                "navds-sr-only": hideLabel,
+            }), id: inputDescriptionId, size: size }, description)),
+        React.createElement("div", { className: "navds-date__field-wrapper" },
+            React.createElement("input", Object.assign({ ref: ref }, omit(rest, ["error", "errorId", "size", "wrapperRef"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, className: cl(className, "navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
+            React.createElement(Button, { variant: "tertiary", type: "button", size: "small", onClick: () => onOpen(), className: "navds-date__field-button", tabIndex: open ? -1 : 0, disabled: inputProps.disabled, icon: React.createElement(Calender, { title: open
+                        ? conditionalVariables.iconTitle.close
+                        : conditionalVariables.iconTitle.open }) })),
+        React.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (React.createElement(ErrorMessage, { size: size }, props.error)))));
+});
+export const DatePickerInput = forwardRef((props, ref) => React.createElement(DateInput, Object.assign({}, props, { ref: ref })));
+export const MonthPickerInput = forwardRef((props, ref) => React.createElement(DateInput, Object.assign({}, props, { variant: "monthpicker", ref: ref })));
+//# sourceMappingURL=DateInput.js.map

package/esm/date/DateInput.js.map

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

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { DateRange, DayPickerBase, Matcher } from "react-day-picker";
+import { DateInputType } from "../DateInput";
+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;
+    /**
+     * Classname for datepicker in popover
+     */
+    className?: string;
+    /**
+     * Classname for wrapper
+     */
+    wrapperClassName?: string;
+    /**
+     * Changes datepicker locale
+     * @default "nb" (norsk bokmål)
+     */
+    locale?: "nb" | "nn" | "en";
+    /**
+     * The earliest day to start navigation.
+     */
+    fromDate?: Date;
+    /**
+     * The latests day to end navigation.
+     */
+    toDate?: Date;
+    /**
+     * Display dropdown for choosing the month and the year.
+     * Needs `fromDate` + `toDate` to work.
+     * @default false
+     */
+    dropdownCaption?: 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 for small screens.
+     * @default false
+     */
+    showWeekNumber?: boolean;
+    /**
+     * 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 `<DatePicker.Input />` is used
+     */
+    onOpenToggle?: () => void;
+}
+export declare type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
+interface DatePickerComponent extends React.ForwardRefExoticComponent<DatePickerProps> {
+    Standalone: DatePickerStandaloneType;
+    Input: DateInputType;
+}
+export declare const DatePicker: DatePickerComponent;
+export default DatePicker;

package/esm/date/datepicker/DatePicker.js

@@ -0,0 +1,85 @@
+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 { isWeekend } from "date-fns";
+import React, { forwardRef, useRef, useState } from "react";
+import { DayPicker, isMatch, } from "react-day-picker";
+import { omit, Popover, useId } from "../..";
+import { DatePickerInput } from "../DateInput";
+import { DateContext } from "../hooks";
+import { getLocaleFromString, labels } from "../utils";
+import { Caption, DropdownCaption } from "./caption";
+import DatePickerStandalone from "./DatePickerStandalone";
+import { DayButton } from "./DayButton";
+export const DatePicker = forwardRef((_a, ref) => {
+    var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle"]);
+    const ariaId = useId(id);
+    const [open, setOpen] = useState(_open !== null && _open !== void 0 ? _open : false);
+    const wrapperRef = useRef(null);
+    const [selectedDates, setSelectedDates] = React.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 = {
+        onSelect: (rest === null || rest === void 0 ? void 0 : rest.mode) === "single"
+            ? handleSingleSelect
+            : (rest === null || rest === void 0 ? void 0 : rest.mode) === "multiple"
+                ? handleMultipleSelect
+                : handleRangeSelect,
+    };
+    return (React.createElement(DateContext.Provider, { value: {
+            open: _open !== null && _open !== void 0 ? _open : open,
+            onOpen: () => {
+                setOpen((x) => !x);
+                onOpenToggle === null || onOpenToggle === void 0 ? void 0 : onOpenToggle();
+            },
+            ariaId,
+        } },
+        React.createElement("div", { ref: wrapperRef, className: cl("navds-date__wrapper", wrapperClassName) },
+            children,
+            (_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;
+                    (_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 },
+                React.createElement(DayPicker, Object.assign({ locale: getLocaleFromString(locale) }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
+                        Caption: dropdownCaption ? DropdownCaption : Caption,
+                        Day: DayButton,
+                    }, className: cl("navds-date", className), 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.Standalone = DatePickerStandalone;
+DatePicker.Input = DatePickerInput;
+export default DatePicker;
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date/datepicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAEL,SAAS,EAET,OAAO,GAKR,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAiB,eAAe,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,oBAEN,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAsGxC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EAgBC,EACD,GAAG,EACH,EAAE;QAlBF,EACE,QAAQ,EACR,MAAM,GAAG,IAAI,EACb,eAAe,EACf,QAAQ,GAAG,EAAE,EACb,eAAe,GAAG,KAAK,EACvB,cAAc,GAAG,KAAK,EACtB,QAAQ,EACR,EAAE,EACF,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,IAAI,EAAE,KAAK,EACX,OAAO,EACP,YAAY,OAEb,EADI,IAAI,cAfT,mMAgBC,CADQ;IAIT,MAAM,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;IACzB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,CAAC,CAAC;IAEjD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAEtD,eAAe,CAAC,CAAC;IAEnB,MAAM,kBAAkB,GAA6B,CAAC,WAAW,EAAE,EAAE;;QACnE,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAC9B,WAAW,IAAI,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,mCAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/C,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,KAAI,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAiC,CAAA,CAAC,WAAW,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAA+B,CAAC,YAAY,EAAE,EAAE;QACxE,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAC/B,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ;YACZ,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAmC,CAAA,CAAC,YAAY,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAA4B,CAAC,YAAY,EAAE,EAAE;;QAClE,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAC/B,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,MAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAA,IAAI,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,mCAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1E,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ;YACZ,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAsC,CAAA,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG;QACpB,QAAQ,EACN,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,QAAQ;YACrB,CAAC,CAAC,kBAAkB;YACpB,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,UAAU;gBAC3B,CAAC,CAAC,oBAAoB;gBACtB,CAAC,CAAC,iBAAiB;KACxB,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;YACL,IAAI,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI;YACnB,MAAM,EAAE,GAAG,EAAE;gBACX,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;YACnB,CAAC;YACD,MAAM;SACP;QAED,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,gBAAgB,CAAC;YAErD,QAAQ;YACR,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,IAAI,CAClB,oBAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAU,CAAC,OAAO,EAC5B,IAAI,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,EACnB,OAAO,EAAE,GAAG,EAAE;;oBACZ,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,mCAAI,OAAO,CAAC,KAAK,CAAC,CAAC;gBAChC,CAAC,EACD,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE,MAAM,EACV,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG;gBAER,oBAAC,SAAS,kBACR,MAAM,EAAE,mBAAmB,CAAC,MAAM,CAAC,IAC/B,aAAa,IACjB,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EACnC,UAAU,EAAE;wBACV,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;wBACpD,GAAG,EAAE,SAAS;qBACf,EACD,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,EACtC,UAAU,EAAE;wBACV,OAAO,EAAE,eAAe;qBACzB,EACD,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE;wBAChB,OAAO,CACL,CAAC,eAAe,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC;4BACnC,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC,CACvB,CAAC;oBACJ,CAAC,EACD,YAAY,EAAE,CAAC,EACf,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE,MAAa,EACrB,SAAS,EAAE;wBACT,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,eAAe,IAAI,SAAS,CAAC,GAAG,CAAC;qBACpD,EACD,mBAAmB,EAAE;wBACnB,OAAO,EAAE,kBAAkB;qBAC5B,EACD,cAAc,EAAE,cAAc,IAC1B,IAAI,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,EAC5B,CACM,CACX,CACG,CACe,CACxB,CAAC;AACJ,CAAC,CACqB,CAAC;AAEzB,UAAU,CAAC,UAAU,GAAG,oBAAoB,CAAC;AAC7C,UAAU,CAAC,KAAK,GAAG,eAAe,CAAC;AAEnC,eAAe,UAAU,CAAC"}

package/esm/date/datepicker/DatePickerStandalone.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ConditionalModeProps, DatePickerDefaultProps } from "./DatePicker";
+interface DatePickerStandaloneDefaultProps extends Omit<DatePickerDefaultProps, "open" | "onClose" | "onOpenToggle" | "wrapperClassName"> {
+    /**
+     * Datepicker classname
+     */
+    className?: string;
+}
+export declare type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps & ConditionalModeProps;
+export declare type DatePickerStandaloneType = React.ForwardRefExoticComponent<DatePickerStandaloneProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePickerStandalone: DatePickerStandaloneType;
+export default DatePickerStandalone;

package/esm/date/datepicker/DatePickerStandalone.js

@@ -0,0 +1,53 @@
+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 { isWeekend } from "date-fns";
+import React, { forwardRef } from "react";
+import { DayPicker, isMatch, } from "react-day-picker";
+import { omit } from "../..";
+import { getLocaleFromString, labels } from "../utils";
+import { Caption, DropdownCaption } from "./caption";
+export const DatePickerStandalone = forwardRef((_a, ref) => {
+    var { children, className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, onSelect } = _a, rest = __rest(_a, ["children", "className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "onSelect"]);
+    const [selectedDates, setSelectedDates] = React.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 = {
+        onSelect: (rest === null || rest === void 0 ? void 0 : rest.mode) === "single"
+            ? handleSingleSelect
+            : (rest === null || rest === void 0 ? void 0 : rest.mode) === "multiple"
+                ? handleMultipleSelect
+                : handleRangeSelect,
+    };
+    return (React.createElement("div", { ref: ref, className: cl("navds-date__standalone-wrapper", className) },
+        React.createElement(DayPicker, Object.assign({ locale: getLocaleFromString(locale) }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
+                Caption: dropdownCaption ? DropdownCaption : Caption,
+            }, className: "navds-date", 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"])))));
+});
+export default DatePickerStandalone;
+//# sourceMappingURL=DatePickerStandalone.js.map

package/esm/date/datepicker/DatePickerStandalone.js.map

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

package/esm/date/datepicker/DayButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DayProps } from "react-day-picker";
+export declare const DayButton: (props: DayProps) => JSX.Element;

package/esm/date/datepicker/DayButton.js

@@ -0,0 +1,17 @@
+import { format } from "date-fns";
+import React, { useRef } from "react";
+import { Button, useDayPicker, useDayRender } from "react-day-picker";
+export const DayButton = (props) => {
+    const buttonRef = useRef(null);
+    const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
+    const { locale } = useDayPicker();
+    const dateTime = format(props.date, "cccc d", { locale });
+    if (dayRender.isHidden) {
+        return React.createElement(React.Fragment, null);
+    }
+    if (!dayRender.isButton) {
+        return React.createElement("div", Object.assign({}, dayRender.divProps));
+    }
+    return (React.createElement(Button, Object.assign({ name: "day", ref: buttonRef }, dayRender.buttonProps, { "aria-label": dateTime })));
+};
+//# sourceMappingURL=DayButton.js.map

package/esm/date/datepicker/DayButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DayButton.js","sourceRoot":"","sources":["../../../src/date/datepicker/DayButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,MAAM,EAAY,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAe,EAAE,EAAE;IAC3C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAC1E,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IAClC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAE1D,IAAI,SAAS,CAAC,QAAQ,EAAE;QACtB,OAAO,yCAAK,CAAC;KACd;IACD,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;QACvB,OAAO,6CAAS,SAAS,CAAC,QAAQ,EAAI,CAAC;KACxC;IAED,OAAO,CACL,oBAAC,MAAM,kBACL,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,SAAS,IACV,SAAS,CAAC,WAAW,kBACb,QAAQ,IACpB,CACH,CAAC;AACJ,CAAC,CAAC"}

package/esm/date/datepicker/caption/Caption.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CaptionProps } from "react-day-picker";
+export declare const DatePickerCaption: ({ displayMonth, id }: CaptionProps) => JSX.Element;
+export default DatePickerCaption;

package/esm/date/datepicker/caption/Caption.js

@@ -0,0 +1,17 @@
+import { Left, Right } from "@navikt/ds-icons";
+import React from "react";
+import { useDayPicker, useNavigation } from "react-day-picker";
+import { Button, Label } from "../../..";
+export const DatePickerCaption = ({ displayMonth, id }) => {
+    const { goToMonth, nextMonth, previousMonth } = useNavigation();
+    const { labels: { labelPrevious, labelNext }, formatters: { formatCaption }, locale, } = useDayPicker();
+    const previousLabel = labelPrevious(previousMonth, { locale });
+    const nextLabel = labelNext(nextMonth, { locale });
+    return (React.createElement("div", { className: "navds-date__caption" },
+        React.createElement(Label, { as: "span", "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-date__caption-label" }, formatCaption(displayMonth, { locale })),
+        React.createElement("div", { className: "navds-date__caption__month-wrapper" },
+            React.createElement(Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: React.createElement(Left, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button" }),
+            React.createElement(Button, { "aria-label": nextLabel, icon: React.createElement(Right, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button" }))));
+};
+export default DatePickerCaption;
+//# sourceMappingURL=Caption.js.map

package/esm/date/datepicker/caption/Caption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../src/date/datepicker/caption/Caption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAC;IAChE,MAAM,EACJ,MAAM,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EACpC,UAAU,EAAE,EAAE,aAAa,EAAE,EAC7B,MAAM,GACP,GAAG,YAAY,EAAE,CAAC;IAEnB,MAAM,aAAa,GAAG,aAAa,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,6BAAK,SAAS,EAAC,qBAAqB;QAClC,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,eACC,QAAQ,iBACN,MAAM,EAClB,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,2BAA2B,IAEpC,aAAa,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,CAAC,CAClC;QAER,6BAAK,SAAS,EAAC,oCAAoC;YACjD,oBAAC,MAAM,kBACO,aAAa,EACzB,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,IAAI,SAAS,CAAC,aAAa,CAAC,EACxD,IAAI,EAAE,oBAAC,IAAI,IAAC,KAAK,EAAC,yBAAoB,GAAG,EACzC,SAAS,EAAC,4BAA4B,GACtC;YACF,oBAAC,MAAM,kBACO,SAAS,EACrB,IAAI,EAAE,oBAAC,KAAK,IAAC,KAAK,EAAC,uBAAkB,GAAG,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,EAChD,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAC,UAAU,EAClB,SAAS,EAAC,4BAA4B,GACtC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/esm/date/datepicker/caption/DropdownCaption.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CaptionProps } from "react-day-picker";
+export declare const DropdownCaption: ({ displayMonth, id }: CaptionProps) => JSX.Element | null;
+export default DropdownCaption;

package/esm/date/datepicker/caption/DropdownCaption.js

@@ -0,0 +1,32 @@
+import { Left, Right } from "@navikt/ds-icons";
+import { setMonth, setYear, startOfMonth } from "date-fns";
+import React from "react";
+import { useDayPicker, useNavigation } from "react-day-picker";
+import { Button, Select } from "../../..";
+import { getMonths, getYears } from "../../utils/get-dates";
+import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
+export const DropdownCaption = ({ displayMonth, id }) => {
+    const { goToMonth, nextMonth, previousMonth } = useNavigation();
+    const { fromDate, toDate, formatters: { formatYearCaption, formatMonthCaption, formatCaption }, labels: { labelPrevious, labelNext }, locale, } = useDayPicker();
+    if (!fromDate || !toDate) {
+        console.warn("Using dropdownCaption required fromDate and toDate");
+        return null;
+    }
+    const handleYearChange = (e) => goToMonth(setYear(startOfMonth(displayMonth), Number(e.target.value)));
+    const handleMonthChange = (e) => goToMonth(setMonth(startOfMonth(displayMonth), Number(e.target.value)));
+    const years = getYears(fromDate, toDate);
+    const months = getMonths(fromDate, toDate, displayMonth);
+    const previousLabel = labelPrevious(previousMonth, { locale });
+    const nextLabel = labelNext(nextMonth, { locale });
+    const yearDropdownLabel = labelYearDropdown(locale);
+    const MonthDropdownLabel = labelMonthDropdown(locale);
+    return (React.createElement("div", { className: "navds-date__caption-dropdown" },
+        React.createElement("span", { "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-sr-only" }, formatCaption(displayMonth, { locale })),
+        React.createElement(Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: React.createElement(Left, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button" }),
+        React.createElement("div", { className: "navds-date__caption__month-wrapper" },
+            React.createElement(Select, { label: MonthDropdownLabel, hideLabel: true, className: "navds-date__caption__month", value: displayMonth.getMonth(), onChange: handleMonthChange }, months.map((m) => (React.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale }))))),
+            React.createElement(Select, { label: yearDropdownLabel, hideLabel: true, value: displayMonth.getFullYear(), onChange: handleYearChange, className: "navds-date__caption__year" }, years.map((year) => (React.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale })))))),
+        React.createElement(Button, { "aria-label": nextLabel, icon: React.createElement(Right, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button" })));
+};
+export default DropdownCaption;
+//# sourceMappingURL=DropdownCaption.js.map

package/esm/date/datepicker/caption/DropdownCaption.js.map

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

package/esm/date/datepicker/caption/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Caption } from "./Caption";
+export { default as DropdownCaption } from "./DropdownCaption";

package/esm/date/datepicker/caption/index.js

@@ -0,0 +1,3 @@
+export { default as Caption } from "./Caption";
+export { default as DropdownCaption } from "./DropdownCaption";
+//# sourceMappingURL=index.js.map

package/esm/date/datepicker/caption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date/datepicker/caption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/esm/date/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useDatepicker as UNSAFE_useDatepicker } from "./useDatepicker";
+export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatepicker";
+export { useMonthPicker as UNSAFE_useMonthPicker } from "./useMonthPicker";
+export { useDateInputContext, DateContext } from "./useDateInputContext";
+export { useSharedMonthContext, SharedMonthProvider, } from "./useSharedMonthContext";

package/esm/date/hooks/index.js

@@ -0,0 +1,6 @@
+export { useDatepicker as UNSAFE_useDatepicker } from "./useDatepicker";
+export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatepicker";
+export { useMonthPicker as UNSAFE_useMonthPicker } from "./useMonthPicker";
+export { useDateInputContext, DateContext } from "./useDateInputContext";
+export { useSharedMonthContext, SharedMonthProvider, } from "./useSharedMonthContext";
+//# sourceMappingURL=index.js.map

package/esm/date/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/date/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,kBAAkB,IAAI,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACvF,OAAO,EAAE,cAAc,IAAI,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EACL,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC"}

package/esm/date/hooks/useDateInputContext.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+interface DateContextContextProps {
+    /**
+     * Open state for popover
+     */
+    open: boolean;
+    /**
+     * Callback for opOpen toggle
+     */
+    onOpen: () => void;
+    /**
+     * Aria-connected ID
+     */
+    ariaId?: string;
+}
+export declare const DateContext: import("react").Context<DateContextContextProps>;
+export declare const useDateInputContext: () => DateContextContextProps;
+export {};

package/esm/date/hooks/useDateInputContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+export const DateContext = createContext({
+    open: false,
+    onOpen: () => null,
+    ariaId: undefined,
+});
+export const useDateInputContext = () => {
+    const context = useContext(DateContext);
+    if (!context) {
+        console.warn("useDateInputContext must be used with DateContext");
+    }
+    return context;
+};
+//# sourceMappingURL=useDateInputContext.js.map

package/esm/date/hooks/useDateInputContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDateInputContext.js","sourceRoot":"","sources":["../../../src/date/hooks/useDateInputContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiBlD,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B;IAChE,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI;IAClB,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,IAAI,CAAC,mDAAmD,CAAC,CAAC;KACnE;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}