@neo4j-ndl/react 2.16.17 → 2.16.19

package/lib/cjs/date-picker/DatePicker.js

@@ -35,11 +35,14 @@ const helpers_1 = require("../helpers");
 const icons_1 = require("../icons");
 const text_input_1 = require("../text-input");
 const typography_1 = require("../typography");
+const utils_1 = require("./utils");
 exports.DatePicker = (0, helpers_1.forwardRef)(function DatePicker(props, ref) {
+    var _a;
     const { reactDatePickerProps, textInputProps, disabled, className } = props;
     const classes = (0, defaultImports_1.classNames)(`ndl-datepicker`, className, {});
     const datetimeRef = (0, react_1.useRef)(null);
     const [picker, setPicker] = (0, react_1.useState)('day');
+    const [preSelectedDate, setPreSelectedDate] = (0, react_1.useState)((_a = reactDatePickerProps.selected) !== null && _a !== void 0 ? _a : reactDatePickerProps.startDate);
     const headerAction = (0, react_1.useCallback)((action) => {
         picker === action ? setPicker('day') : setPicker(action);
     }, [picker]);
@@ -49,22 +52,32 @@ exports.DatePicker = (0, helpers_1.forwardRef)(function DatePicker(props, ref) {
         const nextCallback = picker === 'year' ? increaseYear : increaseMonth;
         const prevDisabled = picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;
         const nextDisabled = picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-datepicker-header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-datepicker-selects", children: [(0, jsx_runtime_1.jsx)("button", { className: "ndl-datepicker-header", onClick: () => headerAction('month'), children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-items-center", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "label", className: "n-p-token-4", children: (0, date_fns_1.format)(props.date, 'MMMM') }), (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconOutline, { className: (0, defaultImports_1.classNames)('ndl-datepicker-chevron', {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-datepicker-header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-datepicker-selects", children: [picker !== 'year' && ((0, jsx_runtime_1.jsx)("button", { "aria-label": `${picker === 'month' ? 'Close' : 'Open'} month picker`, "aria-pressed": picker === 'month', onClick: () => headerAction('month'), children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-items-center n-gap-token-3", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "subheading-small", children: (0, date_fns_1.format)(props.date, 'MMM') }), (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconOutline, { className: (0, defaultImports_1.classNames)('ndl-datepicker-chevron', {
                                             'n-rotate-180': picker === 'month',
-                                        }), "aria-label": "Chevron icon" })] }) }), (0, jsx_runtime_1.jsx)("button", { className: "ndl-datepicker-header", onClick: () => headerAction('year'), children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-items-center", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "label", className: "n-p-token-4", children: (0, date_fns_1.format)(props.date, 'yyyy') }), (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconOutline, { className: (0, defaultImports_1.classNames)('ndl-datepicker-chevron', {
+                                        }), "aria-label": "Chevron icon" })] }) })), picker !== 'month' && ((0, jsx_runtime_1.jsx)("button", { "aria-label": `${picker === 'year' ? 'Close' : 'Open'} year picker`, onClick: () => headerAction('year'), children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-items-center n-gap-token-3", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "subheading-small", children: picker === 'year'
+                                            ? (0, utils_1.getYearsPeriodString)(props.date, reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.yearItemNumber)
+                                            : (0, date_fns_1.format)(props.date, 'yyyy') }), (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconOutline, { className: (0, defaultImports_1.classNames)('ndl-datepicker-chevron', {
                                             'n-rotate-180': picker === 'year',
-                                        }), "aria-label": "Chevron icon" })] }) })] }), picker !== 'month' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(button_1.IconButton, { "aria-label": "Previous period", clean: true, onClick: prevCallback, disabled: prevDisabled, children: (0, jsx_runtime_1.jsx)(icons_1.ArrowLeftIconOutline, {}) }), (0, jsx_runtime_1.jsx)(button_1.IconButton, { "aria-label": "Next period", clean: true, onClick: nextCallback, disabled: nextDisabled, children: (0, jsx_runtime_1.jsx)(icons_1.ArrowRightIconOutline, {}) })] }))] }));
-    }, [picker, headerAction]);
+                                        }), "aria-label": "Chevron icon" })] }) }))] }), picker !== 'month' && ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-6", children: [(0, jsx_runtime_1.jsx)(button_1.IconButton, { "aria-label": "Previous period", clean: true, onClick: prevCallback, disabled: prevDisabled, className: "n-text-palette-neutral-text-default;", size: "small", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowLeftIconOutline, {}) }), (0, jsx_runtime_1.jsx)(button_1.IconButton, { "aria-label": "Next period", clean: true, onClick: nextCallback, disabled: nextDisabled, className: "n-text-palette-neutral-text-default;", size: "small", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowRightIconOutline, {}) })] }))] }));
+    }, [picker, headerAction, reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.yearItemNumber]);
     /**
      * Intercept onChange so we can work with
      * Month and Year pickers
      */
     const interceptedChange = (0, react_1.useCallback)((...args) => {
         if (picker !== 'day') {
-            reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onChange(...args);
-            setPicker('day');
+            // setTimeout to prevent picker change before the handleMonthChange logic
+            setTimeout(() => {
+                setPicker('day');
+            });
         }
-        else {
+        else if (picker === 'day') {
+            if (args[0] instanceof Date) {
+                setPreSelectedDate(args[0]);
+            }
+            else if (args[0] !== null) {
+                setPreSelectedDate(args[0][0]);
+            }
             reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onChange(...args);
         }
     }, [picker, reactDatePickerProps]);
@@ -80,13 +93,30 @@ exports.DatePicker = (0, helpers_1.forwardRef)(function DatePicker(props, ref) {
         }
         (_a = reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onCalendarClose) === null || _a === void 0 ? void 0 : _a.call(reactDatePickerProps);
     }, [picker, reactDatePickerProps]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes, children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, Object.assign({ ref: datetimeRef, customInput: (0, jsx_runtime_1.jsx)(text_input_1.TextInput, Object.assign({ ref: ref, "aria-label": "Date picker input", rightIcon: (0, jsx_runtime_1.jsx)(icons_1.CalendarIconOutline, { onClick: (e) => {
+    const handleMonthChange = (0, react_1.useCallback)((date) => {
+        var _a, _b, _c, _d, _e;
+        if (picker === 'month') {
+            const selectedDay = (_a = preSelectedDate === null || preSelectedDate === void 0 ? void 0 : preSelectedDate.getDate()) !== null && _a !== void 0 ? _a : 1;
+            const daysInNewMonth = (0, utils_1.daysInMonth)(date.getMonth(), date.getFullYear());
+            date.setDate(Math.min(selectedDay, daysInNewMonth));
+            (_b = reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onMonthChange) === null || _b === void 0 ? void 0 : _b.call(reactDatePickerProps, date);
+        }
+        else if (picker === 'year') {
+            const selectedDay = (_c = preSelectedDate === null || preSelectedDate === void 0 ? void 0 : preSelectedDate.getDate()) !== null && _c !== void 0 ? _c : 1;
+            const selectedMonth = (_d = preSelectedDate === null || preSelectedDate === void 0 ? void 0 : preSelectedDate.getMonth()) !== null && _d !== void 0 ? _d : 0;
+            const daysInNewMonth = (0, utils_1.daysInMonth)(selectedMonth, date.getFullYear());
+            date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));
+            (_e = reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onMonthChange) === null || _e === void 0 ? void 0 : _e.call(reactDatePickerProps, date);
+        }
+        setPreSelectedDate(date);
+    }, [picker, preSelectedDate, reactDatePickerProps]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes, children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, Object.assign({ ref: datetimeRef, customInput: (0, jsx_runtime_1.jsx)(text_input_1.TextInput, Object.assign({ ref: ref, "aria-label": "Date picker input", rightIcon: (0, jsx_runtime_1.jsx)(icons_1.CalendarDaysIconOutline, { onClick: (e) => {
                         var _a;
                         if ((_a = datetimeRef.current) === null || _a === void 0 ? void 0 : _a.isCalendarOpen()) {
                             datetimeRef.current.setOpen(false);
                             e.preventDefault();
                             e.stopPropagation();
                         }
-                    }, "aria-label": "Calender Icon" }) }, textInputProps, { disabled: disabled })), disabled: disabled, showMonthYearPicker: picker === 'month', showYearPicker: picker === 'year', shouldCloseOnSelect: picker === 'day', dayClassName: () => 'ndl-datepicker-day', renderCustomHeader: CustomHeader }, reactDatePickerProps, { onChange: interceptedChange, onCalendarClose: interceptedOnCalendarClose })) }));
+                    }, "aria-label": "Calender Icon" }) }, textInputProps, { disabled: disabled })), disabled: disabled, showMonthYearPicker: picker === 'month', showYearPicker: picker === 'year', shouldCloseOnSelect: picker === 'day', dayClassName: () => 'ndl-datepicker-day', renderCustomHeader: CustomHeader }, reactDatePickerProps, { onChange: interceptedChange, onMonthChange: handleMonthChange, onCalendarClose: interceptedOnCalendarClose })) }));
 });
 //# sourceMappingURL=DatePicker.js.map

package/lib/cjs/date-picker/DatePicker.js.map

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

package/lib/cjs/date-picker/utils.js

@@ -0,0 +1,36 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.daysInMonth = exports.getYearsPeriodString = void 0;
+const date_fns_1 = require("date-fns");
+/**
+ * A version of getYearsPeriod copied from https://github.com/Hacker0x01/react-datepicker/blob/main/src/date_utils.ts
+ */
+function getYearsPeriodString(date, yearItemNumber = 12) {
+    const endPeriod = Math.ceil(+(0, date_fns_1.format)(date, 'yyyy') / yearItemNumber) * yearItemNumber;
+    const startPeriod = endPeriod - (yearItemNumber - 1);
+    return `${startPeriod}-${endPeriod}`;
+}
+exports.getYearsPeriodString = getYearsPeriodString;
+const daysInMonth = (month, year) => new Date(year, month + 1, 0).getDate();
+exports.daysInMonth = daysInMonth;
+//# sourceMappingURL=utils.js.map

package/lib/cjs/date-picker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/date-picker/utils.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,uCAAkC;AAElC;;GAEG;AACH,SAAgB,oBAAoB,CAClC,IAAU,EACV,iBAAyB,EAAE;IAE3B,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,CAAC,CAAC,IAAA,iBAAM,EAAC,IAAI,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,GAAG,cAAc,CAAC;IACrE,MAAM,WAAW,GAAG,SAAS,GAAG,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;IACrD,OAAO,GAAG,WAAW,IAAI,SAAS,EAAE,CAAC;AACvC,CAAC;AARD,oDAQC;AAEM,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE,CACzD,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;AAD5B,QAAA,WAAW,eACiB"}

package/lib/cjs/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRenderCount = exports.useEffectDebugger = exports.usePrevious = exports.useEventListener = exports.useLockedBody = exports.useCopyToClipboard = exports.useMediaQuery = exports.useInterval = exports.useOnClickOutside = exports.useWindowSize = exports.useDebounce = void 0;
+exports.useRenderDebugger = exports.useRenderCount = exports.useEffectDebugger = exports.usePrevious = exports.useEventListener = exports.useLockedBody = exports.useCopyToClipboard = exports.useMediaQuery = exports.useInterval = exports.useOnClickOutside = exports.useWindowSize = exports.useDebounce = void 0;
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -95,4 +95,40 @@ function useRenderCount() {
     return count.current;
 }
 exports.useRenderCount = useRenderCount;
+/**
+ * The `useRenderDebugger` outputs to console what props or states are causing a render (or re-render) of a component
+ * if all relevant props and states variables are passed to the hook.
+ * For debugging purposes only.
+ *
+ * Howto use:
+ * Place the hook at the top of the component you want to debug and call it like this:
+ * useRenderDebugger('MyComponent', props);
+ *
+ * if there are state variables include them as well:
+ *
+ * useRenderDebugger('MyComponent', { ...props, stateVar1, stateVar2 });
+ *
+ * @param componentName Name of the component to debug
+ * @param propsAndStates an object containing all props and states variables of the component
+ */
+const useRenderDebugger = (componentName, propsAndStates) => {
+    const prev = (0, react_1.useRef)(propsAndStates);
+    (0, react_1.useEffect)(() => {
+        const changedPropsOrState = {};
+        Object.entries(propsAndStates).forEach(([key, newValue]) => {
+            if (prev.current[key] !== newValue) {
+                changedPropsOrState[key] = {
+                    old: prev.current[key],
+                    new: newValue,
+                };
+            }
+        }, {});
+        if (Object.keys(changedPropsOrState).length > 0) {
+            // eslint-disable-next-line no-console
+            console.debug(`[${componentName}] Re-rendered due to:`, changedPropsOrState);
+        }
+        prev.current = propsAndStates;
+    });
+};
+exports.useRenderDebugger = useRenderDebugger;
 //# sourceMappingURL=index.js.map

package/lib/cjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iCAA0C;AAE1C,2CASqB;AARnB,0GAAA,WAAW,OAAA;AACX,4GAAA,aAAa,OAAA;AACb,gHAAA,iBAAiB,OAAA;AACjB,0GAAA,WAAW,OAAA;AACX,4GAAA,aAAa,OAAA;AACb,iHAAA,kBAAkB,OAAA;AAClB,4GAAA,aAAa,OAAA;AACb,+GAAA,gBAAgB,OAAA;AAGlB;;;;;;GAMG;AAEH;;;GAGG;AACH,SAAgB,WAAW,CAAI,KAAQ;IACrC,0EAA0E;IAC1E,qEAAqE;IACrE,8DAA8D;IAC9D,MAAM,GAAG,GAAQ,IAAA,cAAM,GAAK,CAAC;IAC7B,6BAA6B;IAC7B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,+BAA+B;IAC5C,mEAAmE;IACnE,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC;AAXD,kCAWC;AAED;;;;;;;GAOG;AACH,SAAgB,iBAAiB,CAC/B,UAAmB,EACnB,YAAuB,EACvB,kBAA4B,EAAE;IAE9B,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/C,8DAA8D;IAC9D,MAAM,WAAW,GAAQ,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;QACxE,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,OAAO,KAAK,CAAC;SACd;QACD,IAAI,UAAU,KAAK,YAAY,CAAC,KAAK,CAAC,EAAE;YACtC,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;YAChD,uCAEM,KAAa,KACjB,CAAC,OAAO,CAAC,EAAE;oBACT,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC;oBAC3B,KAAK,EAAE,UAAU;iBAClB,IACD;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE;QACnC,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,CAAC;KACrD;IAED,2FAA2F;IAC3F,IAAA,iBAAS,EAAC,UAAiB,EAAE,YAAY,CAAC,CAAC;AAC7C,CAAC;AAjCD,8CAiCC;AAED;;GAEG;AACH,SAAgB,cAAc;IAC5B,MAAM,KAAK,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,OAAO,EAAE,CAAC;IAEhB,OAAO,KAAK,CAAC,OAAO,CAAC;AACvB,CAAC;AAND,wCAMC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"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"}

package/lib/esm/date-picker/DatePicker.js

@@ -26,14 +26,17 @@ import ReactDatePicker from 'react-datepicker';
 import { classNames } from '../_common/defaultImports';
 import { IconButton } from '../button';
 import { forwardRef } from '../helpers';
-import { ArrowLeftIconOutline, ArrowRightIconOutline, CalendarIconOutline, ChevronDownIconOutline, } from '../icons';
+import { ArrowLeftIconOutline, ArrowRightIconOutline, CalendarDaysIconOutline, ChevronDownIconOutline, } from '../icons';
 import { TextInput } from '../text-input';
 import { Typography } from '../typography';
+import { daysInMonth, getYearsPeriodString } from './utils';
 export const DatePicker = forwardRef(function DatePicker(props, ref) {
+    var _a;
     const { reactDatePickerProps, textInputProps, disabled, className } = props;
     const classes = classNames(`ndl-datepicker`, className, {});
     const datetimeRef = useRef(null);
     const [picker, setPicker] = useState('day');
+    const [preSelectedDate, setPreSelectedDate] = useState((_a = reactDatePickerProps.selected) !== null && _a !== void 0 ? _a : reactDatePickerProps.startDate);
     const headerAction = useCallback((action) => {
         picker === action ? setPicker('day') : setPicker(action);
     }, [picker]);
@@ -43,22 +46,32 @@ export const DatePicker = forwardRef(function DatePicker(props, ref) {
         const nextCallback = picker === 'year' ? increaseYear : increaseMonth;
         const prevDisabled = picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;
         const nextDisabled = picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;
-        return (_jsxs("div", { className: "ndl-datepicker-header", children: [_jsxs("div", { className: "ndl-datepicker-selects", children: [_jsx("button", { className: "ndl-datepicker-header", onClick: () => headerAction('month'), children: _jsxs("div", { className: "n-flex n-items-center", children: [_jsx(Typography, { variant: "label", className: "n-p-token-4", children: format(props.date, 'MMMM') }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-datepicker-chevron', {
+        return (_jsxs("div", { className: "ndl-datepicker-header", children: [_jsxs("div", { className: "ndl-datepicker-selects", children: [picker !== 'year' && (_jsx("button", { "aria-label": `${picker === 'month' ? 'Close' : 'Open'} month picker`, "aria-pressed": picker === 'month', onClick: () => headerAction('month'), children: _jsxs("div", { className: "n-flex n-items-center n-gap-token-3", children: [_jsx(Typography, { variant: "subheading-small", children: format(props.date, 'MMM') }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-datepicker-chevron', {
                                             'n-rotate-180': picker === 'month',
-                                        }), "aria-label": "Chevron icon" })] }) }), _jsx("button", { className: "ndl-datepicker-header", onClick: () => headerAction('year'), children: _jsxs("div", { className: "n-flex n-items-center", children: [_jsx(Typography, { variant: "label", className: "n-p-token-4", children: format(props.date, 'yyyy') }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-datepicker-chevron', {
+                                        }), "aria-label": "Chevron icon" })] }) })), picker !== 'month' && (_jsx("button", { "aria-label": `${picker === 'year' ? 'Close' : 'Open'} year picker`, onClick: () => headerAction('year'), children: _jsxs("div", { className: "n-flex n-items-center n-gap-token-3", children: [_jsx(Typography, { variant: "subheading-small", children: picker === 'year'
+                                            ? getYearsPeriodString(props.date, reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.yearItemNumber)
+                                            : format(props.date, 'yyyy') }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-datepicker-chevron', {
                                             'n-rotate-180': picker === 'year',
-                                        }), "aria-label": "Chevron icon" })] }) })] }), picker !== 'month' && (_jsxs("div", { children: [_jsx(IconButton, { "aria-label": "Previous period", clean: true, onClick: prevCallback, disabled: prevDisabled, children: _jsx(ArrowLeftIconOutline, {}) }), _jsx(IconButton, { "aria-label": "Next period", clean: true, onClick: nextCallback, disabled: nextDisabled, children: _jsx(ArrowRightIconOutline, {}) })] }))] }));
-    }, [picker, headerAction]);
+                                        }), "aria-label": "Chevron icon" })] }) }))] }), picker !== 'month' && (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-6", children: [_jsx(IconButton, { "aria-label": "Previous period", clean: true, onClick: prevCallback, disabled: prevDisabled, className: "n-text-palette-neutral-text-default;", size: "small", children: _jsx(ArrowLeftIconOutline, {}) }), _jsx(IconButton, { "aria-label": "Next period", clean: true, onClick: nextCallback, disabled: nextDisabled, className: "n-text-palette-neutral-text-default;", size: "small", children: _jsx(ArrowRightIconOutline, {}) })] }))] }));
+    }, [picker, headerAction, reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.yearItemNumber]);
     /**
      * Intercept onChange so we can work with
      * Month and Year pickers
      */
     const interceptedChange = useCallback((...args) => {
         if (picker !== 'day') {
-            reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onChange(...args);
-            setPicker('day');
+            // setTimeout to prevent picker change before the handleMonthChange logic
+            setTimeout(() => {
+                setPicker('day');
+            });
         }
-        else {
+        else if (picker === 'day') {
+            if (args[0] instanceof Date) {
+                setPreSelectedDate(args[0]);
+            }
+            else if (args[0] !== null) {
+                setPreSelectedDate(args[0][0]);
+            }
             reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onChange(...args);
         }
     }, [picker, reactDatePickerProps]);
@@ -74,13 +87,30 @@ export const DatePicker = forwardRef(function DatePicker(props, ref) {
         }
         (_a = reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onCalendarClose) === null || _a === void 0 ? void 0 : _a.call(reactDatePickerProps);
     }, [picker, reactDatePickerProps]);
-    return (_jsx("div", { className: classes, children: _jsx(ReactDatePicker, Object.assign({ ref: datetimeRef, customInput: _jsx(TextInput, Object.assign({ ref: ref, "aria-label": "Date picker input", rightIcon: _jsx(CalendarIconOutline, { onClick: (e) => {
+    const handleMonthChange = useCallback((date) => {
+        var _a, _b, _c, _d, _e;
+        if (picker === 'month') {
+            const selectedDay = (_a = preSelectedDate === null || preSelectedDate === void 0 ? void 0 : preSelectedDate.getDate()) !== null && _a !== void 0 ? _a : 1;
+            const daysInNewMonth = daysInMonth(date.getMonth(), date.getFullYear());
+            date.setDate(Math.min(selectedDay, daysInNewMonth));
+            (_b = reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onMonthChange) === null || _b === void 0 ? void 0 : _b.call(reactDatePickerProps, date);
+        }
+        else if (picker === 'year') {
+            const selectedDay = (_c = preSelectedDate === null || preSelectedDate === void 0 ? void 0 : preSelectedDate.getDate()) !== null && _c !== void 0 ? _c : 1;
+            const selectedMonth = (_d = preSelectedDate === null || preSelectedDate === void 0 ? void 0 : preSelectedDate.getMonth()) !== null && _d !== void 0 ? _d : 0;
+            const daysInNewMonth = daysInMonth(selectedMonth, date.getFullYear());
+            date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));
+            (_e = reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onMonthChange) === null || _e === void 0 ? void 0 : _e.call(reactDatePickerProps, date);
+        }
+        setPreSelectedDate(date);
+    }, [picker, preSelectedDate, reactDatePickerProps]);
+    return (_jsx("div", { className: classes, children: _jsx(ReactDatePicker, Object.assign({ ref: datetimeRef, customInput: _jsx(TextInput, Object.assign({ ref: ref, "aria-label": "Date picker input", rightIcon: _jsx(CalendarDaysIconOutline, { onClick: (e) => {
                         var _a;
                         if ((_a = datetimeRef.current) === null || _a === void 0 ? void 0 : _a.isCalendarOpen()) {
                             datetimeRef.current.setOpen(false);
                             e.preventDefault();
                             e.stopPropagation();
                         }
-                    }, "aria-label": "Calender Icon" }) }, textInputProps, { disabled: disabled })), disabled: disabled, showMonthYearPicker: picker === 'month', showYearPicker: picker === 'year', shouldCloseOnSelect: picker === 'day', dayClassName: () => 'ndl-datepicker-day', renderCustomHeader: CustomHeader }, reactDatePickerProps, { onChange: interceptedChange, onCalendarClose: interceptedOnCalendarClose })) }));
+                    }, "aria-label": "Calender Icon" }) }, textInputProps, { disabled: disabled })), disabled: disabled, showMonthYearPicker: picker === 'month', showYearPicker: picker === 'year', shouldCloseOnSelect: picker === 'day', dayClassName: () => 'ndl-datepicker-day', renderCustomHeader: CustomHeader }, reactDatePickerProps, { onChange: interceptedChange, onMonthChange: handleMonthChange, onCalendarClose: interceptedOnCalendarClose })) }));
 });
 //# sourceMappingURL=DatePicker.js.map

package/lib/esm/date-picker/DatePicker.js.map

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

package/lib/esm/date-picker/utils.js

@@ -0,0 +1,31 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { format } from 'date-fns';
+/**
+ * A version of getYearsPeriod copied from https://github.com/Hacker0x01/react-datepicker/blob/main/src/date_utils.ts
+ */
+export function getYearsPeriodString(date, yearItemNumber = 12) {
+    const endPeriod = Math.ceil(+format(date, 'yyyy') / yearItemNumber) * yearItemNumber;
+    const startPeriod = endPeriod - (yearItemNumber - 1);
+    return `${startPeriod}-${endPeriod}`;
+}
+export const daysInMonth = (month, year) => new Date(year, month + 1, 0).getDate();
+//# sourceMappingURL=utils.js.map

package/lib/esm/date-picker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/date-picker/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAClC,IAAU,EACV,iBAAyB,EAAE;IAE3B,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,GAAG,cAAc,CAAC;IACrE,MAAM,WAAW,GAAG,SAAS,GAAG,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;IACrD,OAAO,GAAG,WAAW,IAAI,SAAS,EAAE,CAAC;AACvC,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE,CACzD,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC"}

package/lib/esm/hooks/index.js

@@ -81,4 +81,39 @@ export function useRenderCount() {
     count.current++;
     return count.current;
 }
+/**
+ * The `useRenderDebugger` outputs to console what props or states are causing a render (or re-render) of a component
+ * if all relevant props and states variables are passed to the hook.
+ * For debugging purposes only.
+ *
+ * Howto use:
+ * Place the hook at the top of the component you want to debug and call it like this:
+ * useRenderDebugger('MyComponent', props);
+ *
+ * if there are state variables include them as well:
+ *
+ * useRenderDebugger('MyComponent', { ...props, stateVar1, stateVar2 });
+ *
+ * @param componentName Name of the component to debug
+ * @param propsAndStates an object containing all props and states variables of the component
+ */
+export const useRenderDebugger = (componentName, propsAndStates) => {
+    const prev = useRef(propsAndStates);
+    useEffect(() => {
+        const changedPropsOrState = {};
+        Object.entries(propsAndStates).forEach(([key, newValue]) => {
+            if (prev.current[key] !== newValue) {
+                changedPropsOrState[key] = {
+                    old: prev.current[key],
+                    new: newValue,
+                };
+            }
+        }, {});
+        if (Object.keys(changedPropsOrState).length > 0) {
+            // eslint-disable-next-line no-console
+            console.debug(`[${componentName}] Re-rendered due to:`, changedPropsOrState);
+        }
+        prev.current = propsAndStates;
+    });
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EACL,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAErB;;;;;;GAMG;AAEH;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAI,KAAQ;IACrC,0EAA0E;IAC1E,qEAAqE;IACrE,8DAA8D;IAC9D,MAAM,GAAG,GAAQ,MAAM,EAAK,CAAC;IAC7B,6BAA6B;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,+BAA+B;IAC5C,mEAAmE;IACnE,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,iBAAiB,CAC/B,UAAmB,EACnB,YAAuB,EACvB,kBAA4B,EAAE;IAE9B,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/C,8DAA8D;IAC9D,MAAM,WAAW,GAAQ,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;QACxE,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,OAAO,KAAK,CAAC;SACd;QACD,IAAI,UAAU,KAAK,YAAY,CAAC,KAAK,CAAC,EAAE;YACtC,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;YAChD,uCAEM,KAAa,KACjB,CAAC,OAAO,CAAC,EAAE;oBACT,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC;oBAC3B,KAAK,EAAE,UAAU;iBAClB,IACD;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE;QACnC,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,CAAC;KACrD;IAED,2FAA2F;IAC3F,SAAS,CAAC,UAAiB,EAAE,YAAY,CAAC,CAAC;AAC7C,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,OAAO,EAAE,CAAC;IAEhB,OAAO,KAAK,CAAC,OAAO,CAAC;AACvB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"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"}

package/lib/types/date-picker/utils.d.ts

@@ -0,0 +1,25 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+/**
+ * A version of getYearsPeriod copied from https://github.com/Hacker0x01/react-datepicker/blob/main/src/date_utils.ts
+ */
+export declare function getYearsPeriodString(date: Date, yearItemNumber?: number): string;
+export declare const daysInMonth: (month: number, year: number) => number;

package/lib/types/hooks/index.d.ts

@@ -45,3 +45,20 @@ export declare function useEffectDebugger(effectHook: unknown, dependencies: unk
  * The `useRenderCount` hook returns the number of times a component has rendered.
  */
 export declare function useRenderCount(): number;
+/**
+ * The `useRenderDebugger` outputs to console what props or states are causing a render (or re-render) of a component
+ * if all relevant props and states variables are passed to the hook.
+ * For debugging purposes only.
+ *
+ * Howto use:
+ * Place the hook at the top of the component you want to debug and call it like this:
+ * useRenderDebugger('MyComponent', props);
+ *
+ * if there are state variables include them as well:
+ *
+ * useRenderDebugger('MyComponent', { ...props, stateVar1, stateVar2 });
+ *
+ * @param componentName Name of the component to debug
+ * @param propsAndStates an object containing all props and states variables of the component
+ */
+export declare const useRenderDebugger: (componentName: string, propsAndStates: Record<string, unknown>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "2.16.17",
+  "version": "2.16.19",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -92,7 +92,7 @@
     "sonner": "1.4.41",
     "tinycolor2": "^1.4.2",
     "usehooks-ts": "2.9.1",
-    "@neo4j-ndl/base": "^2.12.11"
+    "@neo4j-ndl/base": "^2.12.12"
   },
   "scripts": {
     "generate-component": "node ./scripts/component-generator.js",