@navikt/ds-react 1.4.1 → 1.4.3

package/_docs.json

@@ -8736,6 +8736,46 @@
           "name": "((val?: Date) => void)"
         }
       },
+      "inputFormat": {
+        "defaultValue": {
+          "value": "\"dd.MM.yyyy\""
+        },
+        "description": "Input-format",
+        "name": "inputFormat",
+        "parent": {
+          "fileName": "src/date/hooks/useDatepicker.tsx",
+          "name": "UseDatepickerOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/date/hooks/useDatepicker.tsx",
+            "name": "UseDatepickerOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onValidate": {
+        "defaultValue": null,
+        "description": "validation-callback",
+        "name": "onValidate",
+        "parent": {
+          "fileName": "src/date/hooks/useDatepicker.tsx",
+          "name": "UseDatepickerOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/date/hooks/useDatepicker.tsx",
+            "name": "UseDatepickerOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((val: DateValidationT) => void)"
+        }
+      },
       "locale": {
         "defaultValue": {
           "value": "\"nb\" (norsk bokmål)"
@@ -8879,6 +8919,46 @@
           "name": "((date?: Date) => void)"
         }
       },
+      "inputFormat": {
+        "defaultValue": {
+          "value": "\"MMMM yyyy\""
+        },
+        "description": "Input-format",
+        "name": "inputFormat",
+        "parent": {
+          "fileName": "src/date/hooks/useMonthPicker.tsx",
+          "name": "UseMonthPickerOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/date/hooks/useMonthPicker.tsx",
+            "name": "UseMonthPickerOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onValidate": {
+        "defaultValue": null,
+        "description": "validation-callback",
+        "name": "onValidate",
+        "parent": {
+          "fileName": "src/date/hooks/useMonthPicker.tsx",
+          "name": "UseMonthPickerOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/date/hooks/useMonthPicker.tsx",
+            "name": "UseMonthPickerOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((val: MonthValidationT) => void)"
+        }
+      },
       "locale": {
         "defaultValue": {
           "value": "\"nb\" (norsk bokmål)"
@@ -9020,6 +9100,25 @@
           "name": "((val?: DateRange) => void)"
         }
       },
+      "onValidate": {
+        "defaultValue": null,
+        "description": "validation-callback",
+        "name": "onValidate",
+        "parent": {
+          "fileName": "src/date/hooks/useRangeDatepicker.tsx",
+          "name": "UseRangeDatepickerOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/date/hooks/useRangeDatepicker.tsx",
+            "name": "UseRangeDatepickerOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((val: RangeValidationT) => void)"
+        }
+      },
       "locale": {
         "defaultValue": {
           "value": "\"nb\" (norsk bokmål)"
@@ -9137,6 +9236,27 @@
         "type": {
           "name": "boolean"
         }
+      },
+      "inputFormat": {
+        "defaultValue": {
+          "value": "\"dd.MM.yyyy\""
+        },
+        "description": "Input-format",
+        "name": "inputFormat",
+        "parent": {
+          "fileName": "react/src/date/hooks/useDatepicker.tsx",
+          "name": "UseDatepickerOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/date/hooks/useDatepicker.tsx",
+            "name": "UseDatepickerOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
       }
     }
   },

package/cjs/date/hooks/useDatepicker.js

@@ -9,8 +9,9 @@ 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 getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, val));
 const useDatepicker = (opt = {}) => {
-    const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, } = opt;
+    const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, inputFormat, onValidate, } = opt;
     const locale = (0, utils_1.getLocaleFromString)(_locale);
     const inputRef = (0, react_1.useRef)(null);
     const daypickerRef = (0, react_1.useRef)(null);
@@ -20,13 +21,17 @@ const useDatepicker = (opt = {}) => {
     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, "date")
+        ? (0, utils_1.formatDateForInput)(defaultSelected, locale, "date", inputFormat)
         : "";
     const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
     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;
         if (!(e === null || e === void 0 ? void 0 : e.target) || !((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.nodeType)) {
@@ -58,19 +63,20 @@ const useDatepicker = (opt = {}) => {
     const setSelected = (date) => {
         updateDate(date);
         setMonth(date !== null && date !== void 0 ? date : today);
-        setInputValue(date ? (0, utils_1.formatDateForInput)(date, locale, "date") : "");
+        setInputValue(date ? (0, utils_1.formatDateForInput)(date, locale, "date", inputFormat) : "");
     };
     const handleFocus = (e) => {
         !open && setOpen(true);
         let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
         if ((0, utils_1.isValidDate)(day)) {
             setMonth(day);
-            setInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
+            setInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
         }
     };
     const handleBlur = (e) => {
         let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
-        (0, utils_1.isValidDate)(day) && setInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
+        (0, utils_1.isValidDate)(day) &&
+            setInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
     };
     /* Only allow de-selecting if not required */
     const handleDayClick = (day, { selected }) => {
@@ -81,11 +87,13 @@ const useDatepicker = (opt = {}) => {
         if (!required && selected) {
             updateDate(undefined);
             setInputValue("");
+            updateValidation({ isValidDate: false, isEmpty: true });
             return;
         }
         updateDate(day);
+        updateValidation();
         setMonth(day);
-        setInputValue(day ? (0, utils_1.formatDateForInput)(day, locale, "date") : "");
+        setInputValue(day ? (0, utils_1.formatDateForInput)(day, locale, "date", inputFormat) : "");
     };
     // 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
@@ -93,19 +101,34 @@ const useDatepicker = (opt = {}) => {
     const handleChange = (e) => {
         setInputValue(e.target.value);
         const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
+        const isBefore = fromDate && day && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
+        const isAfter = toDate && day && (0, differenceInCalendarDays_1.default)(day, toDate) > 0;
         if (!(0, utils_1.isValidDate)(day) ||
-            (disabled &&
-                ((disableWeekends && (0, isWeekend_1.default)(day)) || (0, react_day_picker_1.isMatch)(day, disabled)))) {
+            (disableWeekends && (0, isWeekend_1.default)(day)) ||
+            (disabled && (0, react_day_picker_1.isMatch)(day, disabled))) {
             updateDate(undefined);
+            updateValidation({
+                isInvalid: (0, utils_1.isValidDate)(day),
+                isWeekend: disableWeekends && (0, isWeekend_1.default)(day),
+                isDisabled: disabled && (0, react_day_picker_1.isMatch)(day, disabled),
+                isValidDate: false,
+                isEmpty: !e.target.value,
+                isBefore: isBefore !== null && isBefore !== void 0 ? isBefore : false,
+                isAfter: isAfter !== null && isAfter !== void 0 ? isAfter : false,
+            });
             return;
         }
-        const isBefore = fromDate && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
-        const isAfter = toDate && (0, differenceInCalendarDays_1.default)(day, toDate) > 0;
         if (isBefore || isAfter) {
             updateDate(undefined);
+            updateValidation({
+                isValidDate: false,
+                isBefore: isBefore !== null && isBefore !== void 0 ? isBefore : false,
+                isAfter: isAfter !== null && isAfter !== void 0 ? isAfter : false,
+            });
             return;
         }
         updateDate(day);
+        updateValidation();
         setMonth(day);
     };
     const handleClose = (0, react_1.useCallback)(() => {
@@ -123,13 +146,15 @@ const useDatepicker = (opt = {}) => {
         month,
         onMonthChange: (month) => setMonth(month),
         onDayClick: handleDayClick,
-        selected: selectedDay,
+        selected: selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date("Invalid date"),
         locale: _locale,
         fromDate,
         toDate,
         today,
         open,
         onOpenToggle: () => setOpen((x) => !x),
+        disabled,
+        disableWeekends,
         ref: daypickerRef,
     };
     const inputProps = {

package/cjs/date/hooks/useMonthPicker.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMonthpicker = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidMonth: true }, val));
 const useMonthpicker = (opt = {}) => {
-    const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, } = opt;
+    const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, } = opt;
     const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     const today = new Date();
     const locale = (0, utils_1.getLocaleFromString)(_locale);
@@ -15,13 +16,17 @@ const useMonthpicker = (opt = {}) => {
     const [selectedMonth, setSelectedMonth] = (0, react_1.useState)(defaultSelected);
     const [open, setOpen] = (0, react_1.useState)(false);
     const defaultInputValue = defaultSelected
-        ? (0, utils_1.formatDateForInput)(defaultSelected, locale, "month")
+        ? (0, utils_1.formatDateForInput)(defaultSelected, locale, "month", inputFormat)
         : "";
     const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
     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;
         if (!(e === null || e === void 0 ? void 0 : e.target) || !((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.nodeType)) {
@@ -53,19 +58,20 @@ const useMonthpicker = (opt = {}) => {
     const setSelected = (date) => {
         updateMonth(date);
         setYear(date !== null && date !== void 0 ? date : today);
-        setInputValue(date ? (0, utils_1.formatDateForInput)(date, locale, "month") : "");
+        setInputValue(date ? (0, utils_1.formatDateForInput)(date, locale, "month", inputFormat) : "");
     };
     const handleFocus = (e) => {
         !open && setOpen(true);
         let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month");
         if ((0, utils_1.isValidDate)(day)) {
             setYear(day);
-            setInputValue((0, utils_1.formatDateForInput)(day, locale, "month"));
+            setInputValue((0, utils_1.formatDateForInput)(day, locale, "month", inputFormat));
         }
     };
     const handleBlur = (e) => {
         let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month");
-        (0, utils_1.isValidDate)(day) && setInputValue((0, utils_1.formatDateForInput)(day, locale, "month"));
+        (0, utils_1.isValidDate)(day) &&
+            setInputValue((0, utils_1.formatDateForInput)(day, locale, "month", inputFormat));
     };
     /* Only allow de-selecting if not required */
     const handleMonthClick = (month) => {
@@ -75,11 +81,13 @@ const useMonthpicker = (opt = {}) => {
         }
         if (!required && !month) {
             updateMonth(undefined);
+            updateValidation({ isValidMonth: false, isEmpty: true });
             setInputValue("");
             return;
         }
         updateMonth(month);
-        setInputValue(month ? (0, utils_1.formatDateForInput)(month, locale, "month") : "");
+        updateValidation();
+        setInputValue(month ? (0, utils_1.formatDateForInput)(month, locale, "month", inputFormat) : "");
     };
     // 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
@@ -87,25 +95,41 @@ const useMonthpicker = (opt = {}) => {
     const handleChange = (e) => {
         setInputValue(e.target.value);
         const month = (0, utils_1.parseDate)(e.target.value, today, locale, "month");
-        if (!(0, utils_1.isValidDate)(month) || (disabled && (0, utils_1.isMatch)(month, disabled))) {
-            updateMonth(undefined);
-            return;
-        }
         const isBefore = fromDate &&
+            month &&
             (fromDate.getFullYear() > month.getFullYear() ||
                 (fromDate.getFullYear() === month.getFullYear() &&
                     fromDate.getMonth() > month.getMonth()));
         const isAfter = toDate &&
+            month &&
             (toDate.getFullYear() < month.getFullYear() ||
                 (toDate.getFullYear() === month.getFullYear() &&
                     toDate.getMonth() < month.getMonth()));
+        if (!(0, utils_1.isValidDate)(month) || (disabled && (0, utils_1.isMatch)(month, disabled))) {
+            updateMonth(undefined);
+            updateValidation({
+                isInvalid: (0, utils_1.isValidDate)(month),
+                isDisabled: disabled && (0, utils_1.isMatch)(month, disabled),
+                isValidMonth: false,
+                isEmpty: !e.target.value,
+                isBefore: isBefore !== null && isBefore !== void 0 ? isBefore : false,
+                isAfter: isAfter !== null && isAfter !== void 0 ? isAfter : false,
+            });
+            return;
+        }
         if (isAfter ||
             isBefore ||
             (fromDate && toDate && !(0, utils_1.isMatch)(month, [{ from: fromDate, to: toDate }]))) {
             updateMonth(undefined);
+            updateValidation({
+                isValidMonth: false,
+                isBefore: isBefore !== null && isBefore !== void 0 ? isBefore : false,
+                isAfter: isAfter !== null && isAfter !== void 0 ? isAfter : false,
+            });
             return;
         }
         updateMonth(month);
+        updateValidation();
         setYear(month);
     };
     const handleClose = (0, react_1.useCallback)(() => {