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

package/cjs/datepicker/DatePicker.js

@@ -0,0 +1,122 @@
+"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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = exports.DatePickerContext = void 0;
+const react_dom_interactions_1 = require("@floating-ui/react-dom-interactions");
+const clsx_1 = __importDefault(require("clsx"));
+const date_fns_1 = require("date-fns");
+const react_1 = __importStar(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("..");
+const util_1 = require("../util");
+const caption_1 = require("./caption");
+const DatePickerInput_1 = __importDefault(require("./DatePickerInput"));
+const DatePickerStandalone_1 = __importDefault(require("./DatePickerStandalone"));
+const utils_1 = require("./utils");
+exports.DatePickerContext = (0, react_1.createContext)({
+    open: false,
+    onOpen: () => null,
+    buttonRef: null,
+    ariaId: undefined,
+});
+exports.DatePicker = (0, react_1.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 = (0, __1.useId)(id);
+    const [open, setOpen] = (0, react_1.useState)(_open !== null && _open !== void 0 ? _open : false);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    const [selectedDates, setSelectedDates] = react_1.default.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_1.default.createElement(exports.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_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)("navds-date__wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.wrapper) },
+            children,
+            react_1.default.createElement(react_dom_interactions_1.FloatingPortal, null, (_open !== null && _open !== void 0 ? _open : open) && (react_1.default.createElement(__1.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_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale), mode: mode }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
+                        Caption: yearSelector ? caption_1.DropdownCaption : caption_1.Caption,
+                    }, className: (0, clsx_1.default)("navds-date", classNames === null || classNames === void 0 ? void 0 : classNames.datepicker), classNames: {
+                        vhidden: "navds-sr-only",
+                    }, disabled: (day) => {
+                        return ((disableWeekends && (0, date_fns_1.isWeekend)(day)) ||
+                            (0, react_day_picker_1.isMatch)(day, disabled));
+                    }, weekStartsOn: 1, initialFocus: false, labels: utils_1.labels, modifiers: {
+                        weekend: (day) => disableWeekends && (0, date_fns_1.isWeekend)(day),
+                    }, modifiersClassNames: {
+                        weekend: "rdp-day__weekend",
+                    }, showWeekNumber: showWeekNumber }, (0, util_1.omit)(rest, ["onSelect"])))))))));
+});
+exports.DatePicker.Input = DatePickerInput_1.default;
+exports.DatePicker.Standalone = DatePickerStandalone_1.default;
+exports.default = exports.DatePicker;

package/cjs/datepicker/DatePickerInput.js

@@ -0,0 +1,68 @@
+"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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerInput = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const button_1 = require("../button");
+const useFormField_1 = require("../form/useFormField");
+const typography_1 = require("../typography");
+const util_1 = require("../util");
+const DatePicker_1 = require("./DatePicker");
+exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
+    const { onOpen, buttonRef, ariaId, open } = (0, react_1.useContext)(DatePicker_1.DatePickerContext);
+    const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = (0, useFormField_1.useFormField)(props, "datepicker-input");
+    const { className, hideLabel = false, label, description } = props, rest = __rest(props, ["className", "hideLabel", "label", "description"]);
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-date__field", {
+            "navds-date__field--error": hasError,
+            "navds-date__field--disabled": !!inputProps.disabled,
+        }), ref: props === null || props === void 0 ? void 0 : props.wrapperRef },
+        react_1.default.createElement(typography_1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
+                "navds-sr-only": hideLabel,
+            }) }, label),
+        !!description && (react_1.default.createElement(typography_1.BodyShort, { as: "div", className: (0, clsx_1.default)("navds-form-field__description", {
+                "navds-sr-only": hideLabel,
+            }), id: inputDescriptionId, size: size }, description)),
+        react_1.default.createElement("div", { className: "navds-date__field-wrapper" },
+            react_1.default.createElement("input", Object.assign({ ref: ref }, (0, util_1.omit)(rest, ["error", "errorId", "size", "wrapperRef"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, className: (0, clsx_1.default)(className, "navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14, "aria-haspopup": "grid" })),
+            react_1.default.createElement(button_1.Button, { ref: buttonRef, variant: "tertiary", type: "button", size: "small", onClick: () => onOpen(), className: "navds-date__field-button", icon: react_1.default.createElement(ds_icons_1.Calender, { title: open ? "Lukk datovelger" : "Åpne datovelger" }), "aria-haspopup": "grid" })),
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(typography_1.ErrorMessage, { size: size }, props.error))));
+});
+exports.default = exports.DatePickerInput;

package/cjs/datepicker/DatePickerStandalone.js

@@ -0,0 +1,80 @@
+"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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerStandalone = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const date_fns_1 = require("date-fns");
+const react_1 = __importStar(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const caption_1 = require("./caption");
+const utils_1 = require("./utils");
+exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, className, locale = "nb", yearSelector, disabled = [], disableWeekends = false, showWeekNumber = false, mode = "single", selected, id, defaultSelected, onSelect } = _a, rest = __rest(_a, ["children", "className", "locale", "yearSelector", "disabled", "disableWeekends", "showWeekNumber", "mode", "selected", "id", "defaultSelected", "onSelect"]);
+    const [selectedDates, setSelectedDates] = react_1.default.useState(defaultSelected);
+    const handleSingleSelect = (selectedDay) => {
+        setSelectedDates(selectedDay);
+        onSelect && onSelect(selectedDay);
+    };
+    const handleMultipleSelect = (selectedDays) => {
+        setSelectedDates(selectedDays);
+        onSelect && onSelect(selectedDays);
+    };
+    const handleRangeSelect = (selectedDays) => {
+        setSelectedDates(selectedDays);
+        onSelect && onSelect(selectedDays);
+    };
+    const overrideProps = {
+        onSelect: mode === "single"
+            ? handleSingleSelect
+            : mode === "multiple"
+                ? handleMultipleSelect
+                : handleRangeSelect,
+    };
+    return (react_1.default.createElement("div", { ref: ref, className: (0, clsx_1.default)("navds-date__standalone-wrapper", className) },
+        react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale), mode: mode }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
+                Caption: yearSelector ? caption_1.DropdownCaption : caption_1.Caption,
+            }, className: "navds-date", classNames: { vhidden: "navds-sr-only" }, disabled: (day) => {
+                return ((disableWeekends && (0, date_fns_1.isWeekend)(day)) || (0, react_day_picker_1.isMatch)(day, disabled));
+            }, weekStartsOn: 1, initialFocus: false, labels: utils_1.labels, modifiers: {
+                weekend: (day) => disableWeekends && (0, date_fns_1.isWeekend)(day),
+            }, modifiersClassNames: {
+                weekend: "rdp-day__weekend",
+            }, showWeekNumber: showWeekNumber }, rest))));
+});
+exports.default = exports.DatePickerStandalone;

package/cjs/datepicker/caption/Caption.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerCaption = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
+const react_1 = __importDefault(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("../..");
+const DatePickerCaption = ({ displayMonth, id }) => {
+    const { goToMonth, nextMonth, previousMonth } = (0, react_day_picker_1.useNavigation)();
+    const { labels: { labelPrevious, labelNext }, formatters: { formatCaption }, locale, } = (0, react_day_picker_1.useDayPicker)();
+    const previousLabel = labelPrevious(previousMonth, { locale });
+    const nextLabel = labelNext(nextMonth, { locale });
+    return (react_1.default.createElement("div", { className: "navds-date__caption" },
+        react_1.default.createElement(__1.Label, { as: "span", "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-date__caption-label" }, formatCaption(displayMonth, { locale })),
+        react_1.default.createElement("div", { className: "navds-date__caption__month-wrapper" },
+            react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(ds_icons_1.Left, { title: "velg forrige m\u00E5nede" }), className: "navds-date__caption-button" }),
+            react_1.default.createElement(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(ds_icons_1.Right, { title: "velg neste m\u00E5nede" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button" }))));
+};
+exports.DatePickerCaption = DatePickerCaption;
+exports.default = exports.DatePickerCaption;

package/cjs/datepicker/caption/DropdownCaption.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownCaption = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
+const date_fns_1 = require("date-fns");
+const react_1 = __importDefault(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("../..");
+const get_dates_1 = require("../utils/get-dates");
+const labels_1 = require("../utils/labels");
+const DropdownCaption = ({ displayMonth, id }) => {
+    const { goToMonth, nextMonth, previousMonth } = (0, react_day_picker_1.useNavigation)();
+    const { fromDate, toDate, formatters: { formatYearCaption, formatMonthCaption, formatCaption }, labels: { labelPrevious, labelNext }, locale, } = (0, react_day_picker_1.useDayPicker)();
+    if (!fromDate || !toDate)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    const handleYearChange = (e) => goToMonth((0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(displayMonth), Number(e.target.value)));
+    const handleMonthChange = (e) => goToMonth((0, date_fns_1.setMonth)((0, date_fns_1.startOfMonth)(displayMonth), Number(e.target.value)));
+    const years = (0, get_dates_1.getYears)(fromDate, toDate);
+    const months = (0, get_dates_1.getMonths)(fromDate, toDate, displayMonth);
+    const previousLabel = labelPrevious(previousMonth, { locale });
+    const nextLabel = labelNext(nextMonth, { locale });
+    const yearDropdownLabel = (0, labels_1.labelYearDropdown)(locale);
+    const MonthDropdownLabel = (0, labels_1.labelMonthDropdown)(locale);
+    return (react_1.default.createElement("div", { className: "navds-date__caption-dropdown" },
+        react_1.default.createElement("span", { "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-sr-only" }, formatCaption(displayMonth, { locale })),
+        react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(ds_icons_1.Left, { title: "velg forrige m\u00E5nede" }), className: "navds-date__caption-button" }),
+        react_1.default.createElement("div", { className: "navds-date__caption__month-wrapper" },
+            react_1.default.createElement(__1.Select, { label: MonthDropdownLabel, hideLabel: true, className: "navds-date__caption__month", value: displayMonth.getMonth(), onChange: handleMonthChange }, months.map((m) => (react_1.default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale }))))),
+            react_1.default.createElement(__1.Select, { label: yearDropdownLabel, hideLabel: true, value: displayMonth.getFullYear(), onChange: handleYearChange }, years.map((year) => (react_1.default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale })))))),
+        react_1.default.createElement(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(ds_icons_1.Right, { title: "velg neste m\u00E5nede" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button" })));
+};
+exports.DropdownCaption = DropdownCaption;
+exports.default = exports.DropdownCaption;

package/cjs/datepicker/caption/index.js

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

package/cjs/datepicker/caption/package.json

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

package/cjs/datepicker/hooks/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeDatepicker = exports.useDatepicker = void 0;
+var useDatepicker_1 = require("./useDatepicker");
+Object.defineProperty(exports, "useDatepicker", { enumerable: true, get: function () { return useDatepicker_1.useDatepicker; } });
+var useRangeDatepicker_1 = require("./useRangeDatepicker");
+Object.defineProperty(exports, "useRangeDatepicker", { enumerable: true, get: function () { return useRangeDatepicker_1.useRangeDatepicker; } });

package/cjs/datepicker/hooks/package.json

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

package/cjs/datepicker/hooks/useDatepicker.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDatepicker = void 0;
+const date_fns_1 = require("date-fns");
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const parse_date_1 = require("../utils/parse-date");
+const useDatepicker = (opt = {}) => {
+    const { locale: _locale = "nb", required, defaultSelected, today = new Date(), fromDate, toDate, openOnFocus = true, } = opt;
+    const locale = (0, utils_1.getLocaleFromString)(_locale);
+    const inputRef = (0, react_1.useRef)(null);
+    const daypickerRef = (0, react_1.useRef)(null);
+    // Initialize states
+    const [month, setMonth] = (0, react_1.useState)(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : today);
+    const [selectedDay, setSelectedDay] = (0, react_1.useState)(defaultSelected);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const defaultInputValue = defaultSelected
+        ? (0, utils_1.formatDateForInput)(defaultSelected, locale)
+        : "";
+    const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
+    const handleFocusOut = (0, react_1.useCallback)((e) => ![daypickerRef.current, inputRef.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.relatedTarget)) && setOpen(false), []);
+    (0, react_1.useEffect)(() => {
+        const el = inputRef.current;
+        el === null || el === void 0 ? void 0 : el.addEventListener("focusout", handleFocusOut);
+        return () => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(el, "focusout", handleFocusOut); };
+    }, [handleFocusOut]);
+    const reset = () => {
+        setSelectedDay(defaultSelected);
+        setMonth(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : today);
+        setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : "");
+    };
+    const setSelected = (date) => {
+        setSelectedDay(date);
+        setMonth(date !== null && date !== void 0 ? date : today);
+        setInputValue(date ? (0, utils_1.formatDateForInput)(date, locale) : "");
+    };
+    const handleFocus = (e) => {
+        !open && openOnFocus && setOpen(true);
+        if (!e.target.value) {
+            reset();
+            return;
+        }
+        let day = (0, parse_date_1.parseDate)(e.target.value, today, locale);
+        if ((0, utils_1.isValidDate)(day)) {
+            setMonth(day);
+            setInputValue((0, utils_1.formatDateForInput)(day, locale));
+        }
+    };
+    const handleBlur = (e) => {
+        let day = (0, parse_date_1.parseDate)(e.target.value, today, locale);
+        (0, utils_1.isValidDate)(day) && setInputValue((0, utils_1.formatDateForInput)(day, locale));
+    };
+    /* Only allow de-selecting if not required */
+    const handleDayClick = (day, { selected }) => {
+        if (!required && selected) {
+            setSelectedDay(undefined);
+            setInputValue("");
+            return;
+        }
+        setSelectedDay(day);
+        setInputValue(day ? (0, utils_1.formatDateForInput)(day, locale) : "");
+    };
+    // When changing the input field, save its value in state and check if the
+    // string is a valid date. If it is a valid day, set it as selected and update
+    // the calendar’s month.
+    const handleChange = (e) => {
+        setInputValue(e.target.value);
+        const day = (0, parse_date_1.parseDate)(e.target.value, today, locale);
+        const isBefore = fromDate && (0, date_fns_1.differenceInCalendarDays)(fromDate, day) > 0;
+        const isAfter = toDate && (0, date_fns_1.differenceInCalendarDays)(day, toDate) > 0;
+        if (!(0, utils_1.isValidDate)(day) || isBefore || isAfter) {
+            setSelectedDay(undefined);
+            return;
+        }
+        setSelectedDay(day);
+        setMonth(day);
+    };
+    const dayPickerProps = {
+        month,
+        onMonthChange: (month) => setMonth(month),
+        onDayClick: handleDayClick,
+        selected: selectedDay,
+        locale: _locale,
+        fromDate,
+        toDate,
+        today,
+        open,
+        onClose: () => setOpen(false),
+        onOpenToggle: () => setOpen((x) => !x),
+        ref: daypickerRef,
+    };
+    const inputProps = {
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        value: inputValue,
+        wrapperRef: inputRef,
+    };
+    return { dayPickerProps, inputProps, reset, selectedDay, setSelected };
+};
+exports.useDatepicker = useDatepicker;

package/cjs/datepicker/hooks/useRangeDatepicker.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeDatepicker = void 0;
+const date_fns_1 = require("date-fns");
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const RANGE = {
+    FROM: "FROM",
+    TO: "TO",
+};
+const useRangeDatepicker = (opt = {}) => {
+    const { locale: _locale = "nb", defaultSelected, today = new Date(), fromDate, toDate, openOnFocus = true, } = opt;
+    const locale = (0, utils_1.getLocaleFromString)(_locale);
+    const inputRefTo = (0, react_1.useRef)(null);
+    const inputRefFrom = (0, react_1.useRef)(null);
+    const datePickerRef = (0, react_1.useRef)(null);
+    // Initialize states
+    const [month, setMonth] = (0, react_1.useState)(defaultSelected ? defaultSelected.from : today);
+    const [selectedRange, setSelectedRange] = (0, react_1.useState)(defaultSelected);
+    const [fromInputValue, setFromInputValue] = (0, react_1.useState)((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from)
+        ? (0, utils_1.formatDateForInput)(defaultSelected.from, locale)
+        : "");
+    const [toInputValue, setToInputValue] = (0, react_1.useState)((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to) ? (0, utils_1.formatDateForInput)(defaultSelected.to, locale) : "");
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const handleFocusOut = (0, react_1.useCallback)((e) => ![datePickerRef.current, inputRefTo.current, inputRefFrom.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.relatedTarget)) && setOpen(false), []);
+    (0, react_1.useEffect)(() => {
+        const from = inputRefFrom.current;
+        const to = inputRefTo.current;
+        from === null || from === void 0 ? void 0 : from.addEventListener("focusout", handleFocusOut);
+        to === null || to === void 0 ? void 0 : to.addEventListener("focusout", handleFocusOut);
+        return () => {
+            var _a, _b;
+            (_a = from === null || from === void 0 ? void 0 : from.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(from, "focusout", handleFocusOut);
+            (_b = to === null || to === void 0 ? void 0 : to.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(to, "focusout", handleFocusOut);
+        };
+    }, [handleFocusOut]);
+    const reset = () => {
+        setSelectedRange(defaultSelected);
+        setMonth(defaultSelected ? defaultSelected.from : today);
+        setFromInputValue((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from)
+            ? (0, utils_1.formatDateForInput)(defaultSelected.from, locale)
+            : "");
+        setToInputValue((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to) ? (0, utils_1.formatDateForInput)(defaultSelected.to, locale) : "");
+    };
+    const setSelected = (range) => {
+        setSelectedRange(range);
+        setFromInputValue((range === null || range === void 0 ? void 0 : range.from) ? (0, utils_1.formatDateForInput)(range.from, locale) : "");
+        setToInputValue((range === null || range === void 0 ? void 0 : range.to) ? (0, utils_1.formatDateForInput)(range === null || range === void 0 ? void 0 : range.to, locale) : "");
+    };
+    const handleFocus = (e, src) => {
+        !open && openOnFocus && setOpen(true);
+        let day = (0, utils_1.parseDate)(e.target.value, today, locale);
+        if ((0, utils_1.isValidDate)(day)) {
+            setMonth(day);
+            src === RANGE.FROM
+                ? setFromInputValue((0, utils_1.formatDateForInput)(day, locale))
+                : setToInputValue((0, utils_1.formatDateForInput)(day, locale));
+        }
+    };
+    const handleInputs = (day, src) => {
+        if (src === RANGE.FROM) {
+            const isAfter = toInputValue &&
+                (0, date_fns_1.differenceInCalendarDays)(day, (0, utils_1.parseDate)(toInputValue, today, locale)) >
+                    0;
+            if (isAfter) {
+                setFromInputValue((0, utils_1.formatDateForInput)((0, utils_1.parseDate)(toInputValue, today, locale), locale));
+                setToInputValue((0, utils_1.formatDateForInput)(day, locale));
+            }
+            else {
+                setFromInputValue((0, utils_1.formatDateForInput)(day, locale));
+            }
+        }
+        else if (src === RANGE.TO) {
+            const isBefore = fromInputValue &&
+                (0, date_fns_1.differenceInCalendarDays)((0, utils_1.parseDate)(fromInputValue, today, locale), day) > 0;
+            if (isBefore) {
+                setToInputValue((0, utils_1.formatDateForInput)((0, utils_1.parseDate)(fromInputValue, today, locale), locale));
+                setFromInputValue((0, utils_1.formatDateForInput)(day, locale));
+            }
+            else {
+                setToInputValue((0, utils_1.formatDateForInput)(day, locale));
+            }
+        }
+    };
+    const handleBlur = (e, src) => {
+        let day = (0, utils_1.parseDate)(e.target.value, today, locale);
+        if (!(0, utils_1.isValidDate)(day)) {
+            return;
+        }
+        handleInputs(day, src);
+    };
+    const handleSelect = (range) => {
+        const prevToRange = !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to : range === null || range === void 0 ? void 0 : range.to;
+        (range === null || range === void 0 ? void 0 : range.from)
+            ? setFromInputValue((0, utils_1.formatDateForInput)(range === null || range === void 0 ? void 0 : range.from, locale))
+            : setFromInputValue("");
+        prevToRange
+            ? setToInputValue((0, utils_1.formatDateForInput)(prevToRange, locale))
+            : setToInputValue("");
+        setSelectedRange({ from: range === null || range === void 0 ? void 0 : range.from, to: prevToRange });
+    };
+    /* live-update datepicker based on changes in inputfields */
+    const handleChange = (e, src) => {
+        src === RANGE.FROM
+            ? setFromInputValue(e.target.value)
+            : setToInputValue(e.target.value);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale);
+        const isBefore = fromDate && (0, date_fns_1.differenceInCalendarDays)(fromDate, day) > 0;
+        const isAfter = toDate && (0, date_fns_1.differenceInCalendarDays)(day, toDate) > 0;
+        if (!(0, utils_1.isValidDate)(day) || isBefore || isAfter) {
+            src === RANGE.FROM
+                ? setSelectedRange((x) => (Object.assign(Object.assign({}, x), { from: undefined })))
+                : setSelectedRange((x) => ({ from: x === null || x === void 0 ? void 0 : x.from, to: undefined }));
+            return;
+        }
+        /* If to-value < from-value, switch places in state */
+        if (src === RANGE.TO &&
+            (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) &&
+            (0, date_fns_1.differenceInCalendarDays)(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, day) >= 0) {
+            setSelectedRange({ from: day, to: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from });
+            setMonth(day);
+            return;
+        }
+        /* If from-value > to-value  , switch places in state */
+        if (src === RANGE.FROM &&
+            (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) &&
+            (0, date_fns_1.differenceInCalendarDays)(day, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) >= 0) {
+            setSelectedRange({ to: day, from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to });
+            setMonth(day);
+            return;
+        }
+        src === RANGE.FROM && setSelectedRange((x) => (Object.assign(Object.assign({}, x), { from: day })));
+        src === RANGE.TO && setSelectedRange((x) => ({ from: x === null || x === void 0 ? void 0 : x.from, to: day }));
+        setMonth(day);
+    };
+    const dayPickerProps = {
+        month: month,
+        onMonthChange: (month) => setMonth(month),
+        onSelect: handleSelect,
+        selected: selectedRange,
+        locale: _locale,
+        fromDate,
+        toDate,
+        today,
+        mode: "range",
+        open,
+        onClose: () => setOpen(false),
+        onOpenToggle: () => setOpen((x) => !x),
+        ref: datePickerRef,
+    };
+    const fromInputProps = {
+        onChange: (e) => handleChange(e, RANGE.FROM),
+        onFocus: (e) => handleFocus(e, RANGE.FROM),
+        onBlur: (e) => handleBlur(e, RANGE.FROM),
+        value: fromInputValue,
+        wrapperRef: inputRefFrom,
+    };
+    const toInputProps = {
+        onChange: (e) => handleChange(e, RANGE.TO),
+        onFocus: (e) => handleFocus(e, RANGE.TO),
+        onBlur: (e) => handleBlur(e, RANGE.TO),
+        value: toInputValue,
+        wrapperRef: inputRefTo,
+    };
+    return {
+        dayPickerProps,
+        fromInputProps,
+        toInputProps,
+        reset,
+        selectedRange,
+        setSelected,
+    };
+};
+exports.useRangeDatepicker = useRangeDatepicker;