@dhis2-ui/calendar 10.0.0-alpha.7 → 10.0.0

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 (7) hide show
  1. package/build/cjs/calendar/calendar-container.js +3 -8
  2. package/build/cjs/calendar-input/__tests__/calendar-input.test.js +49 -47
  3. package/build/cjs/calendar-input/calendar-input.js +3 -9
  4. package/build/es/calendar/calendar-container.js +3 -8
  5. package/build/es/calendar-input/__tests__/calendar-input.test.js +48 -45
  6. package/build/es/calendar-input/calendar-input.js +3 -9
  7. package/package.json +12 -12
package/build/cjs/calendar/calendar-container.js CHANGED
@@ -19,8 +19,8 @@ const backgroundColor = 'none';
19
19
  const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.default.memo(function CalendarContainer(_ref) {
20
20
  let {
21
21
  date,
22
- width,
23
- cellSize,
22
+ width = '240px',
23
+ cellSize = '32px',
24
24
  calendarWeekDays,
25
25
  weekDayLabels,
26
26
  currMonth,
@@ -31,7 +31,7 @@ const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.defaul
31
31
  prevYear,
32
32
  languageDirection,
33
33
  excludedRef,
34
- unfocusable
34
+ unfocusable = false
35
35
  } = _ref;
36
36
  const navigationProps = (0, _react.useMemo)(() => {
37
37
  return {
@@ -67,11 +67,6 @@ const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.defaul
67
67
  dynamic: [backgroundColor, wrapperBorderColor, width]
68
68
  }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
69
69
  });
70
- CalendarContainer.defaultProps = {
71
- cellSize: '32px',
72
- width: '240px',
73
- unfocusable: false
74
- };
75
70
  CalendarContainer.propTypes = {
76
71
  /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
77
72
  date: _propTypes.default.string,
package/build/cjs/calendar-input/__tests__/calendar-input.test.js CHANGED
@@ -2,13 +2,12 @@
2
2
 
3
3
  var _button = require("@dhis2-ui/button");
4
4
  var _react = require("@testing-library/react");
5
- var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
5
+ var _userEvent = require("@testing-library/user-event");
6
6
  var _react2 = _interopRequireWildcard(require("react"));
7
7
  var _reactFinalForm = require("react-final-form");
8
8
  var _calendarInput = require("../calendar-input.js");
9
9
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
10
10
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
11
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
11
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
13
12
  describe('Calendar Input', () => {
14
13
  beforeEach(() => {
@@ -18,7 +17,7 @@ describe('Calendar Input', () => {
18
17
  afterEach(jest.useRealTimers);
19
18
  it('allow selection of a date through the calendar widget', async () => {
20
19
  const onDateSelectMock = jest.fn();
21
- const screen = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_calendarInput.CalendarInput, {
20
+ const screen = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_calendarInput.CalendarInput, {
22
21
  calendar: "gregory",
23
22
  onDateSelect: onDateSelectMock
24
23
  }));
@@ -38,7 +37,7 @@ describe('Calendar Input', () => {
38
37
  });
39
38
  it('allow selection of a date through the input', async () => {
40
39
  const onDateSelectMock = jest.fn();
41
- const screen = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_calendarInput.CalendarInput, {
40
+ const screen = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_calendarInput.CalendarInput, {
42
41
  calendar: "gregory",
43
42
  onDateSelect: onDateSelectMock
44
43
  }));
@@ -55,18 +54,19 @@ describe('Calendar Input', () => {
55
54
  }));
56
55
  });
57
56
  describe('validation', () => {
57
+ beforeEach(jest.useRealTimers);
58
58
  it('should validate minimum date', async () => {
59
59
  const onDateSelectMock = jest.fn();
60
- const screen = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
60
+ const screen = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
61
61
  calendar: "gregory",
62
62
  minDate: "2024-01-01",
63
63
  onDateSelect: onDateSelectMock
64
64
  }));
65
65
  const dateInputString = '2023-10-12';
66
66
  const dateInput = (0, _react.within)(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
67
- _userEvent.default.clear(dateInput);
68
- _userEvent.default.type(dateInput, dateInputString);
69
- _userEvent.default.tab();
67
+ await _userEvent.userEvent.clear(dateInput);
68
+ await _userEvent.userEvent.type(dateInput, dateInputString);
69
+ await _userEvent.userEvent.tab();
70
70
  expect(await screen.findByText('Date 2023-10-12 is less than the minimum allowed date 2024-01-01.'));
71
71
  expect(onDateSelectMock).toHaveBeenCalledTimes(1);
72
72
  });
@@ -74,15 +74,15 @@ describe('Calendar Input', () => {
74
74
  const {
75
75
  getByTestId,
76
76
  findByText
77
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
77
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
78
78
  calendar: "gregory",
79
79
  maxDate: "2024-01-01"
80
80
  }));
81
81
  const dateInputString = '2024-10-12';
82
82
  const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
83
- _userEvent.default.clear(dateInput);
84
- _userEvent.default.type(dateInput, dateInputString);
85
- _userEvent.default.tab();
83
+ await _userEvent.userEvent.clear(dateInput);
84
+ await _userEvent.userEvent.type(dateInput, dateInputString);
85
+ await _userEvent.userEvent.tab();
86
86
  expect(await findByText('Date 2024-10-12 is greater than the maximum allowed date 2024-01-01.'));
87
87
  });
88
88
  it('should validate date in ethiopic calendar', async () => {
@@ -91,26 +91,26 @@ describe('Calendar Input', () => {
91
91
  getByTestId,
92
92
  findByText,
93
93
  queryByText
94
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
94
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
95
95
  calendar: "ethiopian",
96
96
  minDate: "2018-13-04",
97
97
  onDateSelect: onDateSelectMock
98
98
  }));
99
99
  let dateInputString = '2018-13-02';
100
100
  const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
101
- _userEvent.default.clear(dateInput);
102
- _userEvent.default.type(dateInput, dateInputString);
103
- _userEvent.default.tab();
101
+ await _userEvent.userEvent.clear(dateInput);
102
+ await _userEvent.userEvent.type(dateInput, dateInputString);
103
+ await _userEvent.userEvent.tab();
104
104
  expect(await findByText('Date 2018-13-02 is less than the minimum allowed date 2018-13-04.'));
105
105
  dateInputString = '2018-13-05';
106
- _userEvent.default.clear(dateInput);
107
- _userEvent.default.type(dateInput, dateInputString);
108
- _userEvent.default.tab();
106
+ await _userEvent.userEvent.clear(dateInput);
107
+ await _userEvent.userEvent.type(dateInput, dateInputString);
108
+ await _userEvent.userEvent.tab();
109
109
  expect(queryByText('Date 2018-13-04 is less than the minimum allowed date 2018-13-05.')).not.toBeInTheDocument();
110
110
  dateInputString = '2018-13-07';
111
- _userEvent.default.clear(dateInput);
112
- _userEvent.default.type(dateInput, dateInputString);
113
- _userEvent.default.tab();
111
+ await _userEvent.userEvent.clear(dateInput);
112
+ await _userEvent.userEvent.type(dateInput, dateInputString);
113
+ await _userEvent.userEvent.tab();
114
114
  expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
115
115
  });
116
116
  it('should validate date in nepali calendar', async () => {
@@ -119,45 +119,47 @@ describe('Calendar Input', () => {
119
119
  getByTestId,
120
120
  findByText,
121
121
  queryByText
122
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
122
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
123
123
  calendar: "nepali",
124
124
  maxDate: "2080-05-30",
125
125
  onDateSelect: onDateSelectMock
126
126
  }));
127
127
  let dateInputString = '2080-06-01';
128
128
  const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
129
- _userEvent.default.clear(dateInput);
130
- _userEvent.default.type(dateInput, dateInputString);
131
- _userEvent.default.tab();
129
+ await _userEvent.userEvent.clear(dateInput);
130
+ await _userEvent.userEvent.type(dateInput, dateInputString);
131
+ await _userEvent.userEvent.tab();
132
132
  expect(await findByText('Date 2080-06-01 is greater than the maximum allowed date 2080-05-30.'));
133
133
  dateInputString = '2080-04-32';
134
- _userEvent.default.clear(dateInput);
135
- _userEvent.default.type(dateInput, dateInputString);
136
- _userEvent.default.tab();
134
+ await _userEvent.userEvent.clear(dateInput);
135
+ await _userEvent.userEvent.type(dateInput, dateInputString);
136
+ await _userEvent.userEvent.tab();
137
137
  expect(queryByText(/greater than the maximum allowed date/)).not.toBeInTheDocument();
138
138
  dateInputString = '2080-01-32';
139
- _userEvent.default.clear(dateInput);
140
- _userEvent.default.type(dateInput, dateInputString);
141
- _userEvent.default.tab();
139
+ await _userEvent.userEvent.clear(dateInput);
140
+ await _userEvent.userEvent.type(dateInput, dateInputString);
141
+ await _userEvent.userEvent.tab();
142
142
  expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
143
143
  });
144
144
  it('should validate from date picker', async () => {
145
+ jest.useFakeTimers('modern');
146
+ jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
145
147
  const onDateSelectMock = jest.fn();
146
148
  const {
147
149
  queryByText,
148
150
  getByText,
149
151
  getByTestId
150
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
152
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
151
153
  calendar: "gregory",
152
154
  minDate: "2024-02-16",
153
155
  onDateSelect: onDateSelectMock
154
156
  }));
155
157
  const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
156
- await _userEvent.default.click(dateInput);
157
- await _userEvent.default.click(getByText('17'));
158
+ await _react.fireEvent.focusIn(dateInput);
159
+ await _react.fireEvent.click(getByText('17'));
158
160
  expect(queryByText('17')).not.toBeInTheDocument();
159
161
 
160
- // Bug where callback used to be called first with undefined
162
+ // Checking fix for Bug where callback used to be called twice - first with undefined
161
163
  expect(onDateSelectMock).toHaveBeenCalledTimes(1);
162
164
  expect(onDateSelectMock).toHaveBeenCalledWith({
163
165
  calendarDateString: '2024-10-17',
@@ -174,7 +176,7 @@ describe('Calendar Input', () => {
174
176
  queryByText,
175
177
  getByText,
176
178
  getByTestId
177
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
179
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
178
180
  calendar: "gregory",
179
181
  minDate: "2024-02-16",
180
182
  onDateSelect: onDateSelectMock,
@@ -182,11 +184,11 @@ describe('Calendar Input', () => {
182
184
  }));
183
185
  const dateInputString = '2023-10-12';
184
186
  const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
185
- _userEvent.default.clear(dateInput);
186
- _userEvent.default.type(dateInput, dateInputString);
187
- _userEvent.default.tab();
187
+ await _userEvent.userEvent.clear(dateInput);
188
+ await _userEvent.userEvent.type(dateInput, dateInputString);
189
+ await _userEvent.userEvent.tab();
188
190
  expect(getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')).toBeInTheDocument();
189
- await _userEvent.default.click(getByText('Clear'));
191
+ await _userEvent.userEvent.click(getByText('Clear'));
190
192
  expect(queryByText('17')).not.toBeInTheDocument();
191
193
  expect(onDateSelectMock).toHaveBeenLastCalledWith({
192
194
  calendarDateString: null,
@@ -199,7 +201,7 @@ describe('Calendar Input', () => {
199
201
  const onDateSelectMock = jest.fn();
200
202
  const {
201
203
  getByTestId
202
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
204
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
203
205
  calendar: "gregory",
204
206
  minDate: "2024-02-16",
205
207
  onDateSelect: onDateSelectMock,
@@ -207,12 +209,12 @@ describe('Calendar Input', () => {
207
209
  }));
208
210
  const dateInputString = '2023-10-12';
209
211
  const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
210
- _userEvent.default.clear(dateInput);
211
- _userEvent.default.type(dateInput, dateInputString);
212
- _userEvent.default.tab();
212
+ await _userEvent.userEvent.clear(dateInput);
213
+ await _userEvent.userEvent.type(dateInput, dateInputString);
214
+ await _userEvent.userEvent.tab();
213
215
  expect(getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')).toBeInTheDocument();
214
- _userEvent.default.clear(dateInput);
215
- _userEvent.default.tab();
216
+ await _userEvent.userEvent.clear(dateInput);
217
+ await _userEvent.userEvent.tab();
216
218
  expect(onDateSelectMock).toHaveBeenCalledWith({
217
219
  calendarDateString: null,
218
220
  validation: {
package/build/cjs/calendar-input/calendar-input.js CHANGED
@@ -34,9 +34,9 @@ const CalendarInput = function () {
34
34
  dir,
35
35
  locale,
36
36
  numberingSystem,
37
- weekDayFormat,
38
- width,
39
- cellSize,
37
+ weekDayFormat = 'narrow',
38
+ width = '300px',
39
+ cellSize = '32px',
40
40
  clearable,
41
41
  minDate,
42
42
  maxDate,
@@ -172,12 +172,6 @@ const CalendarInput = function () {
172
172
  }, [`.calendar-input-wrapper.__jsx-style-dynamic-selector{position:relative;width:${inputWidth};}`, `.calendar-clear-button.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:${rest.error || rest.warning ? '36px' : '6px'};-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}`, ".calendar-clear-button.with-icon.__jsx-style-dynamic-selector{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.__jsx-style-dynamic-selector{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
173
173
  };
174
174
  exports.CalendarInput = CalendarInput;
175
- CalendarInput.defaultProps = {
176
- dataTest: 'dhis2-uiwidgets-calendar-inputfield',
177
- cellSize: '32px',
178
- width: '300px',
179
- weekDayFormat: 'narrow'
180
- };
181
175
  CalendarInput.propTypes = {
182
176
  /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts */
183
177
  calendar: _propTypes.default.any.isRequired,
package/build/es/calendar/calendar-container.js CHANGED
@@ -10,8 +10,8 @@ const backgroundColor = 'none';
10
10
  export const CalendarContainer = /*#__PURE__*/React.memo(function CalendarContainer(_ref) {
11
11
  let {
12
12
  date,
13
- width,
14
- cellSize,
13
+ width = '240px',
14
+ cellSize = '32px',
15
15
  calendarWeekDays,
16
16
  weekDayLabels,
17
17
  currMonth,
@@ -22,7 +22,7 @@ export const CalendarContainer = /*#__PURE__*/React.memo(function CalendarContai
22
22
  prevYear,
23
23
  languageDirection,
24
24
  excludedRef,
25
- unfocusable
25
+ unfocusable = false
26
26
  } = _ref;
27
27
  const navigationProps = useMemo(() => {
28
28
  return {
@@ -58,11 +58,6 @@ export const CalendarContainer = /*#__PURE__*/React.memo(function CalendarContai
58
58
  dynamic: [backgroundColor, wrapperBorderColor, width]
59
59
  }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
60
60
  });
61
- CalendarContainer.defaultProps = {
62
- cellSize: '32px',
63
- width: '240px',
64
- unfocusable: false
65
- };
66
61
  CalendarContainer.propTypes = {
67
62
  /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
68
63
  date: PropTypes.string,
package/build/es/calendar-input/__tests__/calendar-input.test.js CHANGED
@@ -1,7 +1,7 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
2
  import { Button } from '@dhis2-ui/button';
3
3
  import { fireEvent, render, waitFor, within } from '@testing-library/react';
4
- import userEvent from '@testing-library/user-event';
4
+ import { userEvent } from '@testing-library/user-event';
5
5
  import React, { useState } from 'react';
6
6
  import { Field, Form } from 'react-final-form';
7
7
  import { CalendarInput } from '../calendar-input.js';
@@ -13,7 +13,7 @@ describe('Calendar Input', () => {
13
13
  afterEach(jest.useRealTimers);
14
14
  it('allow selection of a date through the calendar widget', async () => {
15
15
  const onDateSelectMock = jest.fn();
16
- const screen = render( /*#__PURE__*/React.createElement(CalendarInput, {
16
+ const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
17
17
  calendar: "gregory",
18
18
  onDateSelect: onDateSelectMock
19
19
  }));
@@ -33,7 +33,7 @@ describe('Calendar Input', () => {
33
33
  });
34
34
  it('allow selection of a date through the input', async () => {
35
35
  const onDateSelectMock = jest.fn();
36
- const screen = render( /*#__PURE__*/React.createElement(CalendarInput, {
36
+ const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
37
37
  calendar: "gregory",
38
38
  onDateSelect: onDateSelectMock
39
39
  }));
@@ -50,18 +50,19 @@ describe('Calendar Input', () => {
50
50
  }));
51
51
  });
52
52
  describe('validation', () => {
53
+ beforeEach(jest.useRealTimers);
53
54
  it('should validate minimum date', async () => {
54
55
  const onDateSelectMock = jest.fn();
55
- const screen = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
56
+ const screen = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
56
57
  calendar: "gregory",
57
58
  minDate: "2024-01-01",
58
59
  onDateSelect: onDateSelectMock
59
60
  }));
60
61
  const dateInputString = '2023-10-12';
61
62
  const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
62
- userEvent.clear(dateInput);
63
- userEvent.type(dateInput, dateInputString);
64
- userEvent.tab();
63
+ await userEvent.clear(dateInput);
64
+ await userEvent.type(dateInput, dateInputString);
65
+ await userEvent.tab();
65
66
  expect(await screen.findByText('Date 2023-10-12 is less than the minimum allowed date 2024-01-01.'));
66
67
  expect(onDateSelectMock).toHaveBeenCalledTimes(1);
67
68
  });
@@ -69,15 +70,15 @@ describe('Calendar Input', () => {
69
70
  const {
70
71
  getByTestId,
71
72
  findByText
72
- } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
73
+ } = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
73
74
  calendar: "gregory",
74
75
  maxDate: "2024-01-01"
75
76
  }));
76
77
  const dateInputString = '2024-10-12';
77
78
  const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
78
- userEvent.clear(dateInput);
79
- userEvent.type(dateInput, dateInputString);
80
- userEvent.tab();
79
+ await userEvent.clear(dateInput);
80
+ await userEvent.type(dateInput, dateInputString);
81
+ await userEvent.tab();
81
82
  expect(await findByText('Date 2024-10-12 is greater than the maximum allowed date 2024-01-01.'));
82
83
  });
83
84
  it('should validate date in ethiopic calendar', async () => {
@@ -86,26 +87,26 @@ describe('Calendar Input', () => {
86
87
  getByTestId,
87
88
  findByText,
88
89
  queryByText
89
- } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
90
+ } = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
90
91
  calendar: "ethiopian",
91
92
  minDate: "2018-13-04",
92
93
  onDateSelect: onDateSelectMock
93
94
  }));
94
95
  let dateInputString = '2018-13-02';
95
96
  const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
96
- userEvent.clear(dateInput);
97
- userEvent.type(dateInput, dateInputString);
98
- userEvent.tab();
97
+ await userEvent.clear(dateInput);
98
+ await userEvent.type(dateInput, dateInputString);
99
+ await userEvent.tab();
99
100
  expect(await findByText('Date 2018-13-02 is less than the minimum allowed date 2018-13-04.'));
100
101
  dateInputString = '2018-13-05';
101
- userEvent.clear(dateInput);
102
- userEvent.type(dateInput, dateInputString);
103
- userEvent.tab();
102
+ await userEvent.clear(dateInput);
103
+ await userEvent.type(dateInput, dateInputString);
104
+ await userEvent.tab();
104
105
  expect(queryByText('Date 2018-13-04 is less than the minimum allowed date 2018-13-05.')).not.toBeInTheDocument();
105
106
  dateInputString = '2018-13-07';
106
- userEvent.clear(dateInput);
107
- userEvent.type(dateInput, dateInputString);
108
- userEvent.tab();
107
+ await userEvent.clear(dateInput);
108
+ await userEvent.type(dateInput, dateInputString);
109
+ await userEvent.tab();
109
110
  expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
110
111
  });
111
112
  it('should validate date in nepali calendar', async () => {
@@ -114,45 +115,47 @@ describe('Calendar Input', () => {
114
115
  getByTestId,
115
116
  findByText,
116
117
  queryByText
117
- } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
118
+ } = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
118
119
  calendar: "nepali",
119
120
  maxDate: "2080-05-30",
120
121
  onDateSelect: onDateSelectMock
121
122
  }));
122
123
  let dateInputString = '2080-06-01';
123
124
  const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
124
- userEvent.clear(dateInput);
125
- userEvent.type(dateInput, dateInputString);
126
- userEvent.tab();
125
+ await userEvent.clear(dateInput);
126
+ await userEvent.type(dateInput, dateInputString);
127
+ await userEvent.tab();
127
128
  expect(await findByText('Date 2080-06-01 is greater than the maximum allowed date 2080-05-30.'));
128
129
  dateInputString = '2080-04-32';
129
- userEvent.clear(dateInput);
130
- userEvent.type(dateInput, dateInputString);
131
- userEvent.tab();
130
+ await userEvent.clear(dateInput);
131
+ await userEvent.type(dateInput, dateInputString);
132
+ await userEvent.tab();
132
133
  expect(queryByText(/greater than the maximum allowed date/)).not.toBeInTheDocument();
133
134
  dateInputString = '2080-01-32';
134
- userEvent.clear(dateInput);
135
- userEvent.type(dateInput, dateInputString);
136
- userEvent.tab();
135
+ await userEvent.clear(dateInput);
136
+ await userEvent.type(dateInput, dateInputString);
137
+ await userEvent.tab();
137
138
  expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
138
139
  });
139
140
  it('should validate from date picker', async () => {
141
+ jest.useFakeTimers('modern');
142
+ jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
140
143
  const onDateSelectMock = jest.fn();
141
144
  const {
142
145
  queryByText,
143
146
  getByText,
144
147
  getByTestId
145
- } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
148
+ } = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
146
149
  calendar: "gregory",
147
150
  minDate: "2024-02-16",
148
151
  onDateSelect: onDateSelectMock
149
152
  }));
150
153
  const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
151
- await userEvent.click(dateInput);
152
- await userEvent.click(getByText('17'));
154
+ await fireEvent.focusIn(dateInput);
155
+ await fireEvent.click(getByText('17'));
153
156
  expect(queryByText('17')).not.toBeInTheDocument();
154
157
 
155
- // Bug where callback used to be called first with undefined
158
+ // Checking fix for Bug where callback used to be called twice - first with undefined
156
159
  expect(onDateSelectMock).toHaveBeenCalledTimes(1);
157
160
  expect(onDateSelectMock).toHaveBeenCalledWith({
158
161
  calendarDateString: '2024-10-17',
@@ -169,7 +172,7 @@ describe('Calendar Input', () => {
169
172
  queryByText,
170
173
  getByText,
171
174
  getByTestId
172
- } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
175
+ } = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
173
176
  calendar: "gregory",
174
177
  minDate: "2024-02-16",
175
178
  onDateSelect: onDateSelectMock,
@@ -177,9 +180,9 @@ describe('Calendar Input', () => {
177
180
  }));
178
181
  const dateInputString = '2023-10-12';
179
182
  const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
180
- userEvent.clear(dateInput);
181
- userEvent.type(dateInput, dateInputString);
182
- userEvent.tab();
183
+ await userEvent.clear(dateInput);
184
+ await userEvent.type(dateInput, dateInputString);
185
+ await userEvent.tab();
183
186
  expect(getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')).toBeInTheDocument();
184
187
  await userEvent.click(getByText('Clear'));
185
188
  expect(queryByText('17')).not.toBeInTheDocument();
@@ -194,7 +197,7 @@ describe('Calendar Input', () => {
194
197
  const onDateSelectMock = jest.fn();
195
198
  const {
196
199
  getByTestId
197
- } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
200
+ } = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
198
201
  calendar: "gregory",
199
202
  minDate: "2024-02-16",
200
203
  onDateSelect: onDateSelectMock,
@@ -202,12 +205,12 @@ describe('Calendar Input', () => {
202
205
  }));
203
206
  const dateInputString = '2023-10-12';
204
207
  const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
205
- userEvent.clear(dateInput);
206
- userEvent.type(dateInput, dateInputString);
207
- userEvent.tab();
208
+ await userEvent.clear(dateInput);
209
+ await userEvent.type(dateInput, dateInputString);
210
+ await userEvent.tab();
208
211
  expect(getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')).toBeInTheDocument();
209
- userEvent.clear(dateInput);
210
- userEvent.tab();
212
+ await userEvent.clear(dateInput);
213
+ await userEvent.tab();
211
214
  expect(onDateSelectMock).toHaveBeenCalledWith({
212
215
  calendarDateString: null,
213
216
  validation: {
package/build/es/calendar-input/calendar-input.js CHANGED
@@ -25,9 +25,9 @@ export const CalendarInput = function () {
25
25
  dir,
26
26
  locale,
27
27
  numberingSystem,
28
- weekDayFormat,
29
- width,
30
- cellSize,
28
+ weekDayFormat = 'narrow',
29
+ width = '300px',
30
+ cellSize = '32px',
31
31
  clearable,
32
32
  minDate,
33
33
  maxDate,
@@ -162,12 +162,6 @@ export const CalendarInput = function () {
162
162
  dynamic: [inputWidth, rest.error || rest.warning ? '36px' : '6px']
163
163
  }, [`.calendar-input-wrapper.__jsx-style-dynamic-selector{position:relative;width:${inputWidth};}`, `.calendar-clear-button.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:${rest.error || rest.warning ? '36px' : '6px'};-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}`, ".calendar-clear-button.with-icon.__jsx-style-dynamic-selector{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.__jsx-style-dynamic-selector{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
164
164
  };
165
- CalendarInput.defaultProps = {
166
- dataTest: 'dhis2-uiwidgets-calendar-inputfield',
167
- cellSize: '32px',
168
- width: '300px',
169
- weekDayFormat: 'narrow'
170
- };
171
165
  CalendarInput.propTypes = {
172
166
  /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts */
173
167
  calendar: PropTypes.any.isRequired,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/calendar",
3
- "version": "10.0.0-alpha.7",
3
+ "version": "10.0.0",
4
4
  "description": "UI Calendar",
5
5
  "repository": {
6
6
  "type": "git",
@@ -28,20 +28,20 @@
28
28
  },
29
29
  "peerDependencies": {
30
30
  "@dhis2/d2-i18n": "^1",
31
- "react": "^16.13",
32
- "react-dom": "^16.13",
31
+ "react": "^16.13 || ^18",
32
+ "react-dom": "^16.13 || ^18",
33
33
  "styled-jsx": "^4"
34
34
  },
35
35
  "dependencies": {
36
- "@dhis2-ui/button": "10.0.0-alpha.7",
37
- "@dhis2-ui/card": "10.0.0-alpha.7",
38
- "@dhis2-ui/input": "10.0.0-alpha.7",
39
- "@dhis2-ui/layer": "10.0.0-alpha.7",
40
- "@dhis2-ui/popper": "10.0.0-alpha.7",
36
+ "@dhis2-ui/button": "10.0.0",
37
+ "@dhis2-ui/card": "10.0.0",
38
+ "@dhis2-ui/input": "10.0.0",
39
+ "@dhis2-ui/layer": "10.0.0",
40
+ "@dhis2-ui/popper": "10.0.0",
41
41
  "@dhis2/multi-calendar-dates": "2.0.0-alpha.5",
42
42
  "@dhis2/prop-types": "^3.1.2",
43
- "@dhis2/ui-constants": "10.0.0-alpha.7",
44
- "@dhis2/ui-icons": "10.0.0-alpha.7",
43
+ "@dhis2/ui-constants": "10.0.0",
44
+ "@dhis2/ui-icons": "10.0.0",
45
45
  "classnames": "^2.3.1",
46
46
  "prop-types": "^15.7.2"
47
47
  },
@@ -51,8 +51,8 @@
51
51
  ],
52
52
  "devDependencies": {
53
53
  "@dhis2/d2-i18n": "^1.1.0",
54
- "react": "16.13",
55
- "react-dom": "16.13",
54
+ "react": "^18.3.1",
55
+ "react-dom": "^18.3.1",
56
56
  "styled-jsx": "^4.0.1"
57
57
  },
58
58
  "types": "types"