@dhis2-ui/calendar 10.0.0-alpha.6 → 10.0.0-alpha.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/build/cjs/calendar/calendar-container.js +3 -8
  2. package/build/cjs/calendar/calendar.js +3 -8
  3. package/build/cjs/calendar-input/__tests__/calendar-input.test.js +49 -47
  4. package/build/cjs/calendar-input/calendar-input.js +5 -9
  5. package/build/cjs/stories/calendar-story-wrapper.js +3 -8
  6. package/build/es/calendar/calendar-container.js +3 -8
  7. package/build/es/calendar/calendar.js +3 -8
  8. package/build/es/calendar-input/__tests__/calendar-input.test.js +48 -45
  9. package/build/es/calendar-input/calendar-input.js +5 -9
  10. package/build/es/stories/calendar-story-wrapper.js +3 -8
  11. 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/calendar.js CHANGED
@@ -19,10 +19,10 @@ const Calendar = _ref => {
19
19
  dir,
20
20
  locale,
21
21
  numberingSystem,
22
- weekDayFormat,
22
+ weekDayFormat = 'narrow',
23
23
  timeZone,
24
- width,
25
- cellSize
24
+ width = '240px',
25
+ cellSize = '32px'
26
26
  } = _ref;
27
27
  const [selectedDateString, setSelectedDateString] = (0, _react.useState)(date);
28
28
  const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
@@ -70,11 +70,6 @@ const Calendar = _ref => {
70
70
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps));
71
71
  };
72
72
  exports.Calendar = Calendar;
73
- Calendar.defaultProps = {
74
- cellSize: '32px',
75
- width: '240px',
76
- weekDayFormat: 'narrow'
77
- };
78
73
  const CalendarProps = exports.CalendarProps = {
79
74
  /** 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 */
80
75
  calendar: _propTypes.default.any.isRequired,
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,15 +34,16 @@ 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,
43
43
  format,
44
44
  strictValidation,
45
45
  inputWidth,
46
+ dataTest = 'dhis2-uiwidgets-calendar-inputfield',
46
47
  ...rest
47
48
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
48
49
  const ref = (0, _react.useRef)();
@@ -134,6 +135,7 @@ const CalendarInput = function () {
134
135
  }, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
135
136
  label: _index.default.t('Pick a date')
136
137
  }, rest, {
138
+ dataTest: dataTest,
137
139
  type: "text",
138
140
  onFocus: onFocus,
139
141
  value: partialDate,
@@ -170,12 +172,6 @@ const CalendarInput = function () {
170
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;}"]));
171
173
  };
172
174
  exports.CalendarInput = CalendarInput;
173
- CalendarInput.defaultProps = {
174
- dataTest: 'dhis2-uiwidgets-calendar-inputfield',
175
- cellSize: '32px',
176
- width: '300px',
177
- weekDayFormat: 'narrow'
178
- };
179
175
  CalendarInput.propTypes = {
180
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 */
181
177
  calendar: _propTypes.default.any.isRequired,
package/build/cjs/stories/calendar-story-wrapper.js CHANGED
@@ -18,13 +18,13 @@ const {
18
18
  } = _multiCalendarDates.constants;
19
19
  const CalendarStoryWrapper = props => {
20
20
  const {
21
- calendar,
21
+ calendar = 'gregory',
22
22
  locale,
23
23
  timeZone,
24
24
  dir,
25
- component: Component,
25
+ component: Component = _calendar.Calendar,
26
26
  date,
27
- weekDayFormat
27
+ weekDayFormat = 'narrow'
28
28
  } = props;
29
29
  const [selectedCalendar, setSelectedCalendar] = (0, _react.useState)(calendar);
30
30
  const [selectedNumberingSystem, setSelectedNumberingSystem] = (0, _react.useState)();
@@ -161,11 +161,6 @@ const CalendarStoryWrapper = props => {
161
161
  }, selectedDate.calendarDateString)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
162
162
  };
163
163
  exports.CalendarStoryWrapper = CalendarStoryWrapper;
164
- CalendarStoryWrapper.defaultProps = {
165
- calendar: 'gregorian',
166
- component: _calendar.Calendar,
167
- weekDayFormat: 'narrow'
168
- };
169
164
  CalendarStoryWrapper.propTypes = {
170
165
  calendar: _propTypes.default.string.isRequired,
171
166
  component: _propTypes.default.elementType.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/calendar.js CHANGED
@@ -10,10 +10,10 @@ export const Calendar = _ref => {
10
10
  dir,
11
11
  locale,
12
12
  numberingSystem,
13
- weekDayFormat,
13
+ weekDayFormat = 'narrow',
14
14
  timeZone,
15
- width,
16
- cellSize
15
+ width = '240px',
16
+ cellSize = '32px'
17
17
  } = _ref;
18
18
  const [selectedDateString, setSelectedDateString] = useState(date);
19
19
  const languageDirection = useResolvedDirection(dir, locale);
@@ -60,11 +60,6 @@ export const Calendar = _ref => {
60
60
  }, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
61
61
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CalendarContainer, calendarProps));
62
62
  };
63
- Calendar.defaultProps = {
64
- cellSize: '32px',
65
- width: '240px',
66
- weekDayFormat: 'narrow'
67
- };
68
63
  export const CalendarProps = {
69
64
  /** 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 */
70
65
  calendar: PropTypes.any.isRequired,
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,15 +25,16 @@ 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,
34
34
  format,
35
35
  strictValidation,
36
36
  inputWidth,
37
+ dataTest = 'dhis2-uiwidgets-calendar-inputfield',
37
38
  ...rest
38
39
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
39
40
  const ref = useRef();
@@ -125,6 +126,7 @@ export const CalendarInput = function () {
125
126
  }, /*#__PURE__*/React.createElement(InputField, _extends({
126
127
  label: i18n.t('Pick a date')
127
128
  }, rest, {
129
+ dataTest: dataTest,
128
130
  type: "text",
129
131
  onFocus: onFocus,
130
132
  value: partialDate,
@@ -160,12 +162,6 @@ export const CalendarInput = function () {
160
162
  dynamic: [inputWidth, rest.error || rest.warning ? '36px' : '6px']
161
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;}"]));
162
164
  };
163
- CalendarInput.defaultProps = {
164
- dataTest: 'dhis2-uiwidgets-calendar-inputfield',
165
- cellSize: '32px',
166
- width: '300px',
167
- weekDayFormat: 'narrow'
168
- };
169
165
  CalendarInput.propTypes = {
170
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 */
171
167
  calendar: PropTypes.any.isRequired,
package/build/es/stories/calendar-story-wrapper.js CHANGED
@@ -9,13 +9,13 @@ const {
9
9
  } = constants;
10
10
  export const CalendarStoryWrapper = props => {
11
11
  const {
12
- calendar,
12
+ calendar = 'gregory',
13
13
  locale,
14
14
  timeZone,
15
15
  dir,
16
- component: Component,
16
+ component: Component = Calendar,
17
17
  date,
18
- weekDayFormat
18
+ weekDayFormat = 'narrow'
19
19
  } = props;
20
20
  const [selectedCalendar, setSelectedCalendar] = useState(calendar);
21
21
  const [selectedNumberingSystem, setSelectedNumberingSystem] = useState();
@@ -151,11 +151,6 @@ export const CalendarStoryWrapper = props => {
151
151
  "data-test": "storybook-calendar-result"
152
152
  }, selectedDate.calendarDateString)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
153
153
  };
154
- CalendarStoryWrapper.defaultProps = {
155
- calendar: 'gregorian',
156
- component: Calendar,
157
- weekDayFormat: 'narrow'
158
- };
159
154
  CalendarStoryWrapper.propTypes = {
160
155
  calendar: PropTypes.string.isRequired,
161
156
  component: PropTypes.elementType.isRequired,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/calendar",
3
- "version": "10.0.0-alpha.6",
3
+ "version": "10.0.0-alpha.8",
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.6",
37
- "@dhis2-ui/card": "10.0.0-alpha.6",
38
- "@dhis2-ui/input": "10.0.0-alpha.6",
39
- "@dhis2-ui/layer": "10.0.0-alpha.6",
40
- "@dhis2-ui/popper": "10.0.0-alpha.6",
36
+ "@dhis2-ui/button": "10.0.0-alpha.8",
37
+ "@dhis2-ui/card": "10.0.0-alpha.8",
38
+ "@dhis2-ui/input": "10.0.0-alpha.8",
39
+ "@dhis2-ui/layer": "10.0.0-alpha.8",
40
+ "@dhis2-ui/popper": "10.0.0-alpha.8",
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.6",
44
- "@dhis2/ui-icons": "10.0.0-alpha.6",
43
+ "@dhis2/ui-constants": "10.0.0-alpha.8",
44
+ "@dhis2/ui-icons": "10.0.0-alpha.8",
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"