@navikt/ds-react 2.8.9 → 2.8.10

package/_docs.json

@@ -8793,6 +8793,66 @@
     "displayName": "mergeRefs",
     "props": {}
   },
+  {
+    "filePath": "src/date/context/useSharedMonthContext.tsx",
+    "displayName": "SharedMonthProvider",
+    "props": {
+      "dropdownCaption": {
+        "defaultValue": null,
+        "description": "",
+        "name": "dropdownCaption",
+        "required": true,
+        "type": {
+          "name": "any"
+        }
+      },
+      "disabled": {
+        "defaultValue": null,
+        "description": "",
+        "name": "disabled",
+        "required": true,
+        "type": {
+          "name": "any"
+        }
+      },
+      "selected": {
+        "defaultValue": null,
+        "description": "",
+        "name": "selected",
+        "required": true,
+        "type": {
+          "name": "any"
+        }
+      },
+      "onSelect": {
+        "defaultValue": null,
+        "description": "",
+        "name": "onSelect",
+        "required": true,
+        "type": {
+          "name": "any"
+        }
+      },
+      "year": {
+        "defaultValue": null,
+        "description": "",
+        "name": "year",
+        "required": true,
+        "type": {
+          "name": "any"
+        }
+      },
+      "onYearChange": {
+        "defaultValue": null,
+        "description": "",
+        "name": "onYearChange",
+        "required": true,
+        "type": {
+          "name": "any"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/date/datepicker/DatePicker.tsx",
     "displayName": "DatePicker",
@@ -9568,8 +9628,8 @@
     "props": {}
   },
   {
-    "filePath": "src/date/datepicker/Head.tsx",
-    "displayName": "Head",
+    "filePath": "src/date/datepicker/TableHead.tsx",
+    "displayName": "TableHead",
     "props": {}
   },
   {
@@ -10340,66 +10400,6 @@
       }
     }
   },
-  {
-    "filePath": "src/date/hooks/useSharedMonthContext.tsx",
-    "displayName": "SharedMonthProvider",
-    "props": {
-      "dropdownCaption": {
-        "defaultValue": null,
-        "description": "",
-        "name": "dropdownCaption",
-        "required": true,
-        "type": {
-          "name": "any"
-        }
-      },
-      "disabled": {
-        "defaultValue": null,
-        "description": "",
-        "name": "disabled",
-        "required": true,
-        "type": {
-          "name": "any"
-        }
-      },
-      "selected": {
-        "defaultValue": null,
-        "description": "",
-        "name": "selected",
-        "required": true,
-        "type": {
-          "name": "any"
-        }
-      },
-      "onSelect": {
-        "defaultValue": null,
-        "description": "",
-        "name": "onSelect",
-        "required": true,
-        "type": {
-          "name": "any"
-        }
-      },
-      "year": {
-        "defaultValue": null,
-        "description": "",
-        "name": "year",
-        "required": true,
-        "type": {
-          "name": "any"
-        }
-      },
-      "onYearChange": {
-        "defaultValue": null,
-        "description": "",
-        "name": "onYearChange",
-        "required": true,
-        "type": {
-          "name": "any"
-        }
-      }
-    }
-  },
   {
     "filePath": "src/date/monthpicker/MonthButton.tsx",
     "displayName": "MonthButton",

package/cjs/date/DateInput.js

@@ -43,7 +43,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const useFormField_1 = require("../form/useFormField");
-const hooks_1 = require("./hooks");
+const context_1 = require("./context");
 const DateInput = (0, react_1.forwardRef)((props, ref) => {
     const { className, hideLabel = false, label, description, variant = "datepicker" } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "variant"]);
     const isDatepickerVariant = variant === "datepicker";
@@ -54,7 +54,7 @@ const DateInput = (0, react_1.forwardRef)((props, ref) => {
             close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
         },
     };
-    const { onOpen, ariaId, open } = (0, hooks_1.useDateInputContext)();
+    const { onOpen, ariaId, open } = (0, context_1.useDateInputContext)();
     const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = (0, useFormField_1.useFormField)(props, conditionalVariables.prefix);
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-date__field", {
             "navds-text-field--error": hasError,

package/cjs/date/context/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SharedMonthProvider = exports.useSharedMonthContext = exports.DateContext = exports.useDateInputContext = void 0;
+var useDateInputContext_1 = require("./useDateInputContext");
+Object.defineProperty(exports, "useDateInputContext", { enumerable: true, get: function () { return useDateInputContext_1.useDateInputContext; } });
+Object.defineProperty(exports, "DateContext", { enumerable: true, get: function () { return useDateInputContext_1.DateContext; } });
+var useSharedMonthContext_1 = require("./useSharedMonthContext");
+Object.defineProperty(exports, "useSharedMonthContext", { enumerable: true, get: function () { return useSharedMonthContext_1.useSharedMonthContext; } });
+Object.defineProperty(exports, "SharedMonthProvider", { enumerable: true, get: function () { return useSharedMonthContext_1.SharedMonthProvider; } });

package/cjs/date/context/package.json

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

package/cjs/date/datepicker/DatePicker.js

@@ -44,12 +44,12 @@ const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const __1 = require("../..");
 const DateInput_1 = require("../DateInput");
-const hooks_1 = require("../hooks");
+const context_1 = require("../context");
 const utils_1 = require("../utils");
 const caption_1 = require("./caption");
 const DatePickerStandalone_1 = __importDefault(require("./DatePickerStandalone"));
 const DayButton_1 = require("./DayButton");
-const Head_1 = require("./Head");
+const TableHead_1 = require("./TableHead");
 exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
     var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle, strategy = "absolute" } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle", "strategy"]);
@@ -83,7 +83,7 @@ exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
                 ? handleMultipleSelect
                 : handleRangeSelect,
     };
-    return (react_1.default.createElement(hooks_1.DateContext.Provider, { value: {
+    return (react_1.default.createElement(context_1.DateContext.Provider, { value: {
             open: _open !== null && _open !== void 0 ? _open : open,
             onOpen: () => {
                 setOpen((x) => !x);
@@ -100,7 +100,7 @@ exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
                 react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale) }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
                         Caption: dropdownCaption ? caption_1.DropdownCaption : caption_1.Caption,
                         Day: DayButton_1.DayButton,
-                        Head: Head_1.Head,
+                        Head: TableHead_1.TableHead,
                     }, className: (0, clsx_1.default)("navds-date", className), classNames: {
                         vhidden: "navds-sr-only",
                     }, disabled: (day) => {

package/cjs/date/datepicker/DatePickerStandalone.js

@@ -45,7 +45,7 @@ const react_day_picker_1 = require("react-day-picker");
 const __1 = require("../..");
 const utils_1 = require("../utils");
 const caption_1 = require("./caption");
-const Head_1 = require("./Head");
+const TableHead_1 = require("./TableHead");
 exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
     var { children, className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, onSelect, fixedWeeks = true } = _a, rest = __rest(_a, ["children", "className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "onSelect", "fixedWeeks"]);
@@ -73,7 +73,7 @@ exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement("div", { ref: ref, className: (0, clsx_1.default)("navds-date__standalone-wrapper", className) },
         react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale) }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
                 Caption: dropdownCaption ? caption_1.DropdownCaption : caption_1.Caption,
-                Head: Head_1.Head,
+                Head: TableHead_1.TableHead,
             }, className: "navds-date", classNames: { vhidden: "navds-sr-only" }, disabled: (day) => {
                 return ((disableWeekends && (0, isWeekend_1.default)(day)) || (0, react_day_picker_1.isMatch)(day, disabled));
             }, weekStartsOn: 1, initialFocus: false, labels: utils_1.labels, modifiers: {

package/cjs/date/datepicker/{Head.js → TableHead.js}

@@ -3,15 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Head = void 0;
+exports.TableHead = void 0;
 const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 /** Render the table head. */
-function Head() {
+function TableHead() {
     var _a;
     const { classNames, styles, components } = (0, react_day_picker_1.useDayPicker)();
     const HeadRowComponent = (_a = components === null || components === void 0 ? void 0 : components.HeadRow) !== null && _a !== void 0 ? _a : react_day_picker_1.HeadRow;
     return (react_1.default.createElement("thead", { style: styles.head, className: classNames.head, "aria-hidden": true },
         react_1.default.createElement(HeadRowComponent, null)));
 }
-exports.Head = Head;
+exports.TableHead = TableHead;

package/cjs/date/hooks/index.js

@@ -1,15 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SharedMonthProvider = exports.useSharedMonthContext = exports.DateContext = exports.useDateInputContext = exports.UNSAFE_useMonthpicker = exports.UNSAFE_useRangeDatepicker = exports.UNSAFE_useDatepicker = void 0;
+exports.UNSAFE_useMonthpicker = exports.UNSAFE_useRangeDatepicker = exports.UNSAFE_useDatepicker = void 0;
 var useDatepicker_1 = require("./useDatepicker");
 Object.defineProperty(exports, "UNSAFE_useDatepicker", { enumerable: true, get: function () { return useDatepicker_1.useDatepicker; } });
 var useRangeDatepicker_1 = require("./useRangeDatepicker");
 Object.defineProperty(exports, "UNSAFE_useRangeDatepicker", { enumerable: true, get: function () { return useRangeDatepicker_1.useRangeDatepicker; } });
 var useMonthPicker_1 = require("./useMonthPicker");
 Object.defineProperty(exports, "UNSAFE_useMonthpicker", { enumerable: true, get: function () { return useMonthPicker_1.useMonthpicker; } });
-var useDateInputContext_1 = require("./useDateInputContext");
-Object.defineProperty(exports, "useDateInputContext", { enumerable: true, get: function () { return useDateInputContext_1.useDateInputContext; } });
-Object.defineProperty(exports, "DateContext", { enumerable: true, get: function () { return useDateInputContext_1.DateContext; } });
-var useSharedMonthContext_1 = require("./useSharedMonthContext");
-Object.defineProperty(exports, "useSharedMonthContext", { enumerable: true, get: function () { return useSharedMonthContext_1.useSharedMonthContext; } });
-Object.defineProperty(exports, "SharedMonthProvider", { enumerable: true, get: function () { return useSharedMonthContext_1.SharedMonthProvider; } });

package/cjs/date/hooks/useDatepicker.js

@@ -9,13 +9,15 @@ const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
 const react_1 = require("react");
 const react_day_picker_1 = require("react-day-picker");
 const utils_1 = require("../utils");
+const useEscape_1 = require("./useEscape");
+const useOutsideClickHandler_1 = require("./useOutsideClickHandler");
 const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, val));
 const useDatepicker = (opt = {}) => {
-    var _a;
+    var _a, _b;
     const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, openOnFocus = true, } = opt;
     const locale = (0, utils_1.getLocaleFromString)(_locale);
     const inputRef = (0, react_1.useRef)(null);
-    const daypickerRef = (0, react_1.useRef)(null);
+    const [daypickerRef, setDaypickerRef] = (0, react_1.useState)();
     const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     // Initialize states
     const [month, setMonth] = (0, react_1.useState)((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultMonth) !== null && _a !== void 0 ? _a : today);
@@ -25,38 +27,17 @@ const useDatepicker = (opt = {}) => {
         ? (0, utils_1.formatDateForInput)(defaultSelected, locale, "date", inputFormat)
         : "";
     const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
+    (0, useOutsideClickHandler_1.useOutsideClickHandler)(open, setOpen, [
+        daypickerRef,
+        inputRef.current,
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.nextSibling,
+    ]);
+    (0, useEscape_1.useEscape)(open, setOpen, inputRef);
     const updateDate = (date) => {
         onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(date);
         setSelectedDay(date);
     };
-    const updateValidation = (val = {}) => {
-        const msg = getValidationMessage(val);
-        onValidate === null || onValidate === void 0 ? void 0 : onValidate(msg);
-    };
-    const handleFocusIn = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d;
-        /* Workaround for shadow-dom users (open) */
-        const composed = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) === null || _b === void 0 ? void 0 : _b[0];
-        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.nodeType) || !composed) {
-            return;
-        }
-        ![
-            daypickerRef.current,
-            inputRef.current,
-            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.nextSibling,
-        ].some((element) => (element === null || element === void 0 ? void 0 : element.contains(e.target)) || (element === null || element === void 0 ? void 0 : element.contains(composed))) &&
-            open &&
-            setOpen(false);
-    }, [open]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("focusin", handleFocusIn);
-        window.addEventListener("pointerdown", handleFocusIn);
-        return () => {
-            var _a, _b;
-            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
-            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "pointerdown", handleFocusIn);
-        };
-    }, [handleFocusIn]);
+    const updateValidation = (val = {}) => onValidate === null || onValidate === void 0 ? void 0 : onValidate(getValidationMessage(val));
     const reset = () => {
         var _a;
         updateDate(defaultSelected);
@@ -136,17 +117,6 @@ const useDatepicker = (opt = {}) => {
         updateValidation();
         setMonth(defaultMonth !== null && defaultMonth !== void 0 ? defaultMonth : day);
     };
-    const handleClose = (0, react_1.useCallback)(() => {
-        setOpen(false);
-        inputRef.current && inputRef.current.focus();
-    }, []);
-    const escape = (0, react_1.useCallback)((e) => open && e.key === "Escape" && handleClose(), [handleClose, open]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("keydown", escape, false);
-        return () => {
-            window.removeEventListener("keydown", escape, false);
-        };
-    }, [escape]);
     const datepickerProps = {
         month,
         onMonthChange: (month) => setMonth(month),
@@ -160,7 +130,7 @@ const useDatepicker = (opt = {}) => {
         onOpenToggle: () => setOpen((x) => !x),
         disabled,
         disableWeekends,
-        ref: daypickerRef,
+        ref: setDaypickerRef,
     };
     const inputProps = {
         onChange: handleChange,

package/cjs/date/hooks/useEscape.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEscape = void 0;
+const react_1 = require("react");
+const useEscape = (open, setOpen, focusRef) => {
+    const handleClose = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        (focusRef === null || focusRef === void 0 ? void 0 : focusRef.current) && focusRef.current.focus();
+    }, [focusRef, setOpen]);
+    const escape = (0, react_1.useCallback)((e) => open && e.key === "Escape" && handleClose(), [handleClose, open]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("keydown", escape, false);
+        return () => {
+            window.removeEventListener("keydown", escape, false);
+        };
+    }, [escape]);
+};
+exports.useEscape = useEscape;

package/cjs/date/hooks/useMonthPicker.js

@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMonthpicker = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const useEscape_1 = require("./useEscape");
+const useOutsideClickHandler_1 = require("./useOutsideClickHandler");
 const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidMonth: true }, val));
 const useMonthpicker = (opt = {}) => {
-    var _a;
+    var _a, _b;
     const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, allowTwoDigitYear = true, openOnFocus = true, } = opt;
     const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     const today = new Date();
     const locale = (0, utils_1.getLocaleFromString)(_locale);
     const inputRef = (0, react_1.useRef)(null);
-    const monthpickerRef = (0, react_1.useRef)(null);
+    const [monthpickerRef, setMonthpickerRef] = (0, react_1.useState)();
     // Initialize states
     const [year, setYear] = (0, react_1.useState)((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultYear) !== null && _a !== void 0 ? _a : today);
     const [selectedMonth, setSelectedMonth] = (0, react_1.useState)(defaultSelected);
@@ -20,38 +22,17 @@ const useMonthpicker = (opt = {}) => {
         ? (0, utils_1.formatDateForInput)(defaultSelected, locale, "month", inputFormat)
         : "";
     const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
+    (0, useOutsideClickHandler_1.useOutsideClickHandler)(open, setOpen, [
+        monthpickerRef,
+        inputRef.current,
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.nextSibling,
+    ]);
+    (0, useEscape_1.useEscape)(open, setOpen, inputRef);
     const updateMonth = (date) => {
         onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(date);
         setSelectedMonth(date);
     };
-    const updateValidation = (val = {}) => {
-        const msg = getValidationMessage(val);
-        onValidate === null || onValidate === void 0 ? void 0 : onValidate(msg);
-    };
-    const handleFocusIn = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d;
-        /* Workaround for shadow-dom users (open) */
-        const composed = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) === null || _b === void 0 ? void 0 : _b[0];
-        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.nodeType) || !composed) {
-            return;
-        }
-        ![
-            monthpickerRef.current,
-            inputRef.current,
-            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.nextSibling,
-        ].some((element) => (element === null || element === void 0 ? void 0 : element.contains(e.target)) || (element === null || element === void 0 ? void 0 : element.contains(composed))) &&
-            open &&
-            setOpen(false);
-    }, [open]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("focusin", handleFocusIn);
-        window.addEventListener("pointerdown", handleFocusIn);
-        return () => {
-            var _a, _b;
-            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
-            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "pointerdown", handleFocusIn);
-        };
-    }, [handleFocusIn]);
+    const updateValidation = (val = {}) => onValidate === null || onValidate === void 0 ? void 0 : onValidate(getValidationMessage(val));
     const reset = () => {
         var _a;
         updateMonth(defaultSelected);
@@ -143,17 +124,6 @@ const useMonthpicker = (opt = {}) => {
         updateValidation();
         setYear(month);
     };
-    const handleClose = (0, react_1.useCallback)(() => {
-        setOpen(false);
-        inputRef.current && inputRef.current.focus();
-    }, []);
-    const escape = (0, react_1.useCallback)((e) => open && e.key === "Escape" && handleClose(), [handleClose, open]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("keydown", escape, false);
-        return () => {
-            window.removeEventListener("keydown", escape, false);
-        };
-    }, [escape]);
     const monthpickerProps = {
         year,
         onYearChange: (y) => setYear(y !== null && y !== void 0 ? y : today),
@@ -165,7 +135,7 @@ const useMonthpicker = (opt = {}) => {
         open,
         onOpenToggle: () => setOpen((x) => !x),
         disabled,
-        ref: monthpickerRef,
+        ref: setMonthpickerRef,
     };
     const inputProps = {
         onChange: handleChange,

package/cjs/date/hooks/useOutsideClickHandler.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideClickHandler = void 0;
+const react_1 = require("react");
+const useOutsideClickHandler = (open, setOpen, refs) => {
+    const handleFocusIn = (0, react_1.useCallback)((e) => {
+        var _a, _b, _c;
+        const composed = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) === null || _b === void 0 ? void 0 : _b[0];
+        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.nodeType) || !composed) {
+            return;
+        }
+        if (!refs.some((element) => (element === null || element === void 0 ? void 0 : element.contains(e.target)) || (element === null || element === void 0 ? void 0 : element.contains(composed)))) {
+            open && setOpen(false);
+        }
+    }, [open, refs, setOpen]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("focusin", handleFocusIn);
+        window.addEventListener("pointerdown", handleFocusIn);
+        return () => {
+            var _a, _b;
+            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
+            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "pointerdown", handleFocusIn);
+        };
+    }, [handleFocusIn]);
+};
+exports.useOutsideClickHandler = useOutsideClickHandler;

package/cjs/date/hooks/useRangeDatepicker.js

@@ -10,6 +10,8 @@ const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
 const react_1 = require("react");
 const react_day_picker_1 = require("react-day-picker");
 const utils_1 = require("../utils");
+const useEscape_1 = require("./useEscape");
+const useOutsideClickHandler_1 = require("./useOutsideClickHandler");
 const getValidationMessage = (from = {}, to = {}) => ({
     from: Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, from),
     to: Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isBeforeFrom: false, isValidDate: true }, to),
@@ -79,11 +81,12 @@ const initialValidation = (range, opt) => {
     return getValidationMessage(Object.assign({}, fromVal), Object.assign({}, toVal));
 };
 const useRangeDatepicker = (opt = {}) => {
+    var _a, _b;
     const { locale: _locale = "nb", defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, 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);
+    const [daypickerRef, setDaypickerRef] = (0, react_1.useState)();
     const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     // Initialize states
     const [month, setMonth] = (0, react_1.useState)(defaultSelected ? defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from : defaultMonth !== null && defaultMonth !== void 0 ? defaultMonth : today);
@@ -96,6 +99,14 @@ const useRangeDatepicker = (opt = {}) => {
         : "");
     const [validation, setValidation] = (0, react_1.useState)(initialValidation(selectedRange, opt));
     const [open, setOpen] = (0, react_1.useState)(false);
+    (0, useOutsideClickHandler_1.useOutsideClickHandler)(open, setOpen, [
+        daypickerRef,
+        inputRefTo.current,
+        inputRefFrom.current,
+        (_a = inputRefTo.current) === null || _a === void 0 ? void 0 : _a.nextSibling,
+        (_b = inputRefFrom.current) === null || _b === void 0 ? void 0 : _b.nextSibling,
+    ]);
+    (0, useEscape_1.useEscape)(open, setOpen, (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? inputRefTo : inputRefFrom);
     const updateRange = (range) => {
         onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
         setSelectedRange(range);
@@ -105,32 +116,6 @@ const useRangeDatepicker = (opt = {}) => {
         setValidation(msg);
         onValidate === null || onValidate === void 0 ? void 0 : onValidate(msg);
     };
-    const handleFocusIn = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d, _e;
-        /* Workaround for shadow-dom users (open) */
-        const composed = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) === null || _b === void 0 ? void 0 : _b[0];
-        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.nodeType) || !composed) {
-            return;
-        }
-        ![
-            datePickerRef.current,
-            inputRefTo.current,
-            inputRefFrom.current,
-            (_d = inputRefTo.current) === null || _d === void 0 ? void 0 : _d.nextSibling,
-            (_e = inputRefFrom.current) === null || _e === void 0 ? void 0 : _e.nextSibling,
-        ].some((element) => (element === null || element === void 0 ? void 0 : element.contains(e.target)) || (element === null || element === void 0 ? void 0 : element.contains(composed))) &&
-            open &&
-            setOpen(false);
-    }, [open]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("focusin", handleFocusIn);
-        window.addEventListener("pointerdown", handleFocusIn);
-        return () => {
-            var _a, _b;
-            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
-            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "pointerdown", handleFocusIn);
-        };
-    }, [handleFocusIn]);
     const reset = () => {
         updateRange(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : { from: undefined, to: undefined });
         setMonth(defaultSelected ? defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from : defaultMonth !== null && defaultMonth !== void 0 ? defaultMonth : today);
@@ -287,23 +272,6 @@ const useRangeDatepicker = (opt = {}) => {
             ? fromChange(e.target.value, day, isBefore, isAfter)
             : toChange(e.target.value, day, isBefore, isAfter);
     };
-    const handleClose = (0, react_1.useCallback)(() => {
-        var _a, _b;
-        setOpen(false);
-        if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
-            (_a = inputRefTo === null || inputRefTo === void 0 ? void 0 : inputRefTo.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else {
-            (_b = inputRefFrom === null || inputRefFrom === void 0 ? void 0 : inputRefFrom.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-    }, [selectedRange]);
-    const escape = (0, react_1.useCallback)((e) => open && e.key === "Escape" && handleClose(), [handleClose, open]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("keydown", escape, false);
-        return () => {
-            window.removeEventListener("keydown", escape, false);
-        };
-    }, [escape]);
     const datepickerProps = {
         month: month,
         onMonthChange: (month) => setMonth(month),
@@ -318,7 +286,7 @@ const useRangeDatepicker = (opt = {}) => {
         onOpenToggle: () => setOpen((x) => !x),
         disabled,
         disableWeekends,
-        ref: datePickerRef,
+        ref: setDaypickerRef,
     };
     const fromInputProps = {
         onChange: (e) => handleChange(e, RANGE.FROM),

package/cjs/date/monthpicker/MonthButton.js

@@ -35,7 +35,7 @@ const isSameMonth_1 = __importDefault(require("date-fns/isSameMonth"));
 const setYear_1 = __importDefault(require("date-fns/setYear"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
-const hooks_1 = require("../hooks");
+const context_1 = require("../context");
 const utils_1 = require("../utils");
 const disableMonth = (month, fromDate, toDate) => {
     if (fromDate && toDate) {
@@ -51,7 +51,7 @@ const disableMonth = (month, fromDate, toDate) => {
 };
 const MonthButton = ({ month, months, focus, setFocus, tabRoot, setTabRoot, }) => {
     const ref = (0, react_1.useRef)(null);
-    const { hasDropdown, selected, onSelect, year, toYear, disabled } = (0, hooks_1.useSharedMonthContext)();
+    const { hasDropdown, selected, onSelect, year, toYear, disabled } = (0, context_1.useSharedMonthContext)();
     const { fromDate, toDate, locale } = (0, react_day_picker_1.useDayPicker)();
     const isSelected = selected && (0, isSameMonth_1.default)(month, selected);
     (0, react_1.useEffect)(() => {

package/cjs/date/monthpicker/MonthCaption.js

@@ -12,11 +12,11 @@ const startOfYear_1 = __importDefault(require("date-fns/startOfYear"));
 const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const __1 = require("../..");
-const hooks_1 = require("../hooks");
+const context_1 = require("../context");
 const utils_1 = require("../utils");
 const MonthCaption = () => {
     const { fromDate, toDate, formatters: { formatYearCaption }, locale, } = (0, react_day_picker_1.useDayPicker)();
-    const { hasDropdown, year, toYear } = (0, hooks_1.useSharedMonthContext)();
+    const { hasDropdown, year, toYear } = (0, context_1.useSharedMonthContext)();
     const years = [];
     if (hasDropdown && fromDate && toDate) {
         const fromYear = fromDate.getFullYear();