@reykjavik/hanna-react 0.10.171 → 0.10.172

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/Datepicker.js +18 -5
  3. package/esm/Datepicker.js +19 -6
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
+ ## 0.10.172
8
+
9
+ _2026-04-30_
10
+
11
+ - `Datepicker`:
12
+ - feat: Scroll calendar into view when opened, and back to input when closed
13
+
7
14
  ## 0.10.171
8
15
 
9
16
  _2026-04-02_
package/Datepicker.js CHANGED
@@ -154,13 +154,16 @@ const Datepicker = (props) => {
154
154
  .concat(txts.dateFormats)
155
155
  .concat(['P', 'PP', 'PPP']);
156
156
  }, [dateFormat, txts]);
157
+ const wrapperRef = (0, react_1.useRef)();
157
158
  return (react_1.default.createElement(FormField_js_1.FormField, Object.assign({ extraClassName: "Datepicker", filled: filled, empty: empty }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => {
158
- return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
159
- ((elm) => {
159
+ return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: (elm) => {
160
+ wrapperRef.current = elm;
161
+ if (inputRef) {
160
162
  inputRef.current =
161
163
  (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
162
- return elm;
163
- }) }, addFocusProps()),
164
+ }
165
+ return elm;
166
+ } }, addFocusProps()),
164
167
  isoMode && react_1.default.createElement("input", { type: "hidden", name: name, value: toLocalIsoDate(value) }),
165
168
  react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang || i18n_1.DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
166
169
  date = date || undefined;
@@ -173,7 +176,17 @@ const Datepicker = (props) => {
173
176
  }, placeholderText: placeholder,
174
177
  // TODO: Implement this
175
178
  // selectsRange
176
- minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
179
+ minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, onCalendarOpen: () => {
180
+ setTimeout(() => {
181
+ var _a;
182
+ const calElm = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.react-datepicker');
183
+ calElm === null || calElm === void 0 ? void 0 : calElm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
184
+ }, 100);
185
+ }, onCalendarClose: () => {
186
+ var _a;
187
+ const inputElm = (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) || ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input'));
188
+ inputElm === null || inputElm === void 0 ? void 0 : inputElm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
189
+ }, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
177
190
  } })));
178
191
  };
179
192
  exports.Datepicker = Datepicker;
package/esm/Datepicker.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useMemo } from 'react';
1
+ import React, { useMemo, useRef } from 'react';
2
2
  import { DEFAULT_LANG, getTexts, } from '@reykjavik/hanna-utils/i18n';
3
3
  // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
4
4
  import is from 'date-fns/locale/is/index.js';
@@ -149,13 +149,16 @@ export const Datepicker = (props) => {
149
149
  .concat(txts.dateFormats)
150
150
  .concat(['P', 'PP', 'PPP']);
151
151
  }, [dateFormat, txts]);
152
+ const wrapperRef = useRef();
152
153
  return (React.createElement(FormField, Object.assign({ extraClassName: "Datepicker", filled: filled, empty: empty }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => {
153
- return (React.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
154
- ((elm) => {
154
+ return (React.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: (elm) => {
155
+ wrapperRef.current = elm;
156
+ if (inputRef) {
155
157
  inputRef.current =
156
158
  (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
157
- return elm;
158
- }) }, addFocusProps()),
159
+ }
160
+ return elm;
161
+ } }, addFocusProps()),
159
162
  isoMode && React.createElement("input", { type: "hidden", name: name, value: toLocalIsoDate(value) }),
160
163
  React.createElement(ReactDatePicker, Object.assign({ required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang || DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
161
164
  date = date || undefined;
@@ -168,7 +171,17 @@ export const Datepicker = (props) => {
168
171
  }, placeholderText: placeholder,
169
172
  // TODO: Implement this
170
173
  // selectsRange
171
- minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
174
+ minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, onCalendarOpen: () => {
175
+ setTimeout(() => {
176
+ var _a;
177
+ const calElm = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.react-datepicker');
178
+ calElm === null || calElm === void 0 ? void 0 : calElm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
179
+ }, 100);
180
+ }, onCalendarClose: () => {
181
+ var _a;
182
+ const inputElm = (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) || ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input'));
183
+ inputElm === null || inputElm === void 0 ? void 0 : inputElm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
184
+ }, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
172
185
  } })));
173
186
  };
174
187
  export default Datepicker;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.171",
3
+ "version": "0.10.172",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",