@dhis2-ui/calendar 9.9.0-alpha.1 → 9.9.0-alpha.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (13) hide show
  1. package/build/cjs/calendar/calendar-container.js +83 -0
  2. package/build/cjs/calendar/calendar-table.js +5 -3
  3. package/build/cjs/calendar/calendar.js +26 -33
  4. package/build/cjs/calendar/navigation-container.js +29 -32
  5. package/build/cjs/calendar-input/calendar-input.js +67 -34
  6. package/build/cjs/stories/calendar-input.stories.js +22 -2
  7. package/build/es/calendar/calendar-container.js +61 -0
  8. package/build/es/calendar/calendar-table.js +3 -2
  9. package/build/es/calendar/calendar.js +27 -31
  10. package/build/es/calendar/navigation-container.js +27 -31
  11. package/build/es/calendar-input/calendar-input.js +67 -35
  12. package/build/es/stories/calendar-input.stories.js +18 -1
  13. package/package.json +9 -9
package/build/cjs/calendar/calendar-container.js ADDED
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.CalendarContainer = void 0;
7
+
8
+ var _style = _interopRequireDefault(require("styled-jsx/style"));
9
+
10
+ var _uiConstants = require("@dhis2/ui-constants");
11
+
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _calendarTable = require("./calendar-table.js");
17
+
18
+ var _navigationContainer = require("./navigation-container.js");
19
+
20
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
+
22
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
+
24
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
+
26
+ const wrapperBorderColor = _uiConstants.colors.grey300;
27
+ const backgroundColor = 'none';
28
+
29
+ const CalendarContainer = _ref => {
30
+ let {
31
+ date,
32
+ width,
33
+ cellSize,
34
+ calendarWeekDays,
35
+ weekDayLabels,
36
+ currMonth,
37
+ currYear,
38
+ nextMonth,
39
+ nextYear,
40
+ prevMonth,
41
+ prevYear,
42
+ languageDirection
43
+ } = _ref;
44
+ const navigationProps = (0, _react.useMemo)(() => {
45
+ return {
46
+ currMonth,
47
+ currYear,
48
+ nextMonth,
49
+ nextYear,
50
+ prevMonth,
51
+ prevYear,
52
+ languageDirection
53
+ };
54
+ }, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear]);
55
+ return /*#__PURE__*/_react.default.createElement("div", {
56
+ className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
57
+ }, /*#__PURE__*/_react.default.createElement("div", {
58
+ dir: languageDirection,
59
+ "data-test": "calendar",
60
+ className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
61
+ }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, navigationProps), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
62
+ selectedDate: date,
63
+ calendarWeekDays: calendarWeekDays,
64
+ weekDayLabels: weekDayLabels,
65
+ cellSize: cellSize,
66
+ width: width
67
+ })), /*#__PURE__*/_react.default.createElement(_style.default, {
68
+ id: "2823859047",
69
+ dynamic: [backgroundColor, wrapperBorderColor, width]
70
+ }, [".calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:".concat(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 ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(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;}")]));
71
+ };
72
+
73
+ exports.CalendarContainer = CalendarContainer;
74
+ CalendarContainer.defaultProps = {
75
+ cellSize: '32px',
76
+ width: '240px'
77
+ };
78
+ CalendarContainer.propTypes = {
79
+ /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
80
+ date: _propTypes.default.string,
81
+ ..._calendarTable.CalendarTableProps,
82
+ ..._navigationContainer.NavigationContainerProps
83
+ };
package/build/cjs/calendar/calendar-table.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.CalendarTable = void 0;
6
+ exports.CalendarTableProps = exports.CalendarTable = void 0;
7
7
 
8
8
  var _style = _interopRequireDefault(require("styled-jsx/style"));
9
9
 
@@ -51,7 +51,7 @@ const CalendarTable = _ref => {
51
51
  };
52
52
 
53
53
  exports.CalendarTable = CalendarTable;
54
- CalendarTable.propTypes = {
54
+ const CalendarTableProps = {
55
55
  calendarWeekDays: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.shape({
56
56
  calendarDate: _propTypes.default.string,
57
57
  isInCurrentMonth: _propTypes.default.bool,
@@ -65,4 +65,6 @@ CalendarTable.propTypes = {
65
65
  selectedDate: _propTypes.default.string,
66
66
  weekDayLabels: _propTypes.default.arrayOf(_propTypes.default.string),
67
67
  width: _propTypes.default.string
68
- };
68
+ };
69
+ exports.CalendarTableProps = CalendarTableProps;
70
+ CalendarTable.propTypes = CalendarTableProps;
package/build/cjs/calendar/calendar.js CHANGED
@@ -5,19 +5,13 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.CalendarProps = exports.Calendar = void 0;
7
7
 
8
- var _style = _interopRequireDefault(require("styled-jsx/style"));
9
-
10
8
  var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
11
9
 
12
- var _uiConstants = require("@dhis2/ui-constants");
13
-
14
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
11
 
16
12
  var _react = _interopRequireWildcard(require("react"));
17
13
 
18
- var _calendarTable = require("./calendar-table.js");
19
-
20
- var _navigationContainer = require("./navigation-container.js");
14
+ var _calendarContainer = require("./calendar-container.js");
21
15
 
22
16
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
17
 
@@ -38,8 +32,6 @@ const Calendar = _ref => {
38
32
  width,
39
33
  cellSize
40
34
  } = _ref;
41
- const wrapperBorderColor = _uiConstants.colors.grey300;
42
- const backgroundColor = 'none';
43
35
  const [selectedDateString, setSelectedDateString] = (0, _react.useState)(date);
44
36
  const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
45
37
  const options = {
@@ -49,7 +41,7 @@ const Calendar = _ref => {
49
41
  numberingSystem,
50
42
  weekDayFormat
51
43
  };
52
- const pickerOptions = (0, _multiCalendarDates.useDatePicker)({
44
+ const pickerResults = (0, _multiCalendarDates.useDatePicker)({
53
45
  onDateSelect: result => {
54
46
  const {
55
47
  calendarDateString
@@ -60,29 +52,30 @@ const Calendar = _ref => {
60
52
  date: selectedDateString,
61
53
  options
62
54
  });
63
- const {
64
- calendarWeekDays,
65
- weekDayLabels
66
- } = pickerOptions;
67
- return /*#__PURE__*/_react.default.createElement("div", {
68
- className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
69
- }, /*#__PURE__*/_react.default.createElement("div", {
70
- dir: languageDirection,
71
- "data-test": "calendar",
72
- className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
73
- }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, {
74
- pickerOptions: pickerOptions,
75
- languageDirection: languageDirection
76
- }), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
77
- selectedDate: selectedDateString,
78
- calendarWeekDays: calendarWeekDays,
79
- weekDayLabels: weekDayLabels,
80
- cellSize: cellSize,
81
- width: width
82
- })), /*#__PURE__*/_react.default.createElement(_style.default, {
83
- id: "2823859047",
84
- dynamic: [backgroundColor, wrapperBorderColor, width]
85
- }, [".calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:".concat(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 ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(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;}")]));
55
+ const calendarProps = (0, _react.useMemo)(() => {
56
+ return {
57
+ date,
58
+ dir,
59
+ locale,
60
+ width,
61
+ cellSize,
62
+ // minDate,
63
+ // maxDate,
64
+ // validation, // todo: clarify how we use validation props (and format) in Calendar (not CalendarInput)
65
+ // format,
66
+ isValid: pickerResults.isValid,
67
+ calendarWeekDays: pickerResults.calendarWeekDays,
68
+ weekDayLabels: pickerResults.weekDayLabels,
69
+ currMonth: pickerResults.currMonth,
70
+ currYear: pickerResults.currYear,
71
+ nextMonth: pickerResults.nextMonth,
72
+ nextYear: pickerResults.nextYear,
73
+ prevMonth: pickerResults.prevMonth,
74
+ prevYear: pickerResults.prevYear,
75
+ languageDirection
76
+ };
77
+ }, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
78
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps));
86
79
  };
87
80
 
88
81
  exports.Calendar = Calendar;
package/build/cjs/calendar/navigation-container.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.NavigationContainer = void 0;
6
+ exports.NavigationContainerProps = exports.NavigationContainer = void 0;
7
7
 
8
8
  var _style = _interopRequireDefault(require("styled-jsx/style"));
9
9
 
@@ -27,18 +27,15 @@ const NavigationContainer = _ref => {
27
27
 
28
28
  let {
29
29
  languageDirection,
30
- pickerOptions
31
- } = _ref;
32
- const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
33
- const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
34
- const {
35
30
  currMonth,
36
31
  currYear,
37
32
  nextMonth,
38
33
  nextYear,
39
34
  prevMonth,
40
35
  prevYear
41
- } = pickerOptions; // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
36
+ } = _ref;
37
+ const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
38
+ const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16; // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
42
39
  // there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
43
40
 
44
41
  const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
@@ -106,30 +103,30 @@ const NavigationContainer = _ref => {
106
103
  };
107
104
 
108
105
  exports.NavigationContainer = NavigationContainer;
109
- NavigationContainer.propTypes = {
106
+ const NavigationContainerProps = {
107
+ currMonth: _propTypes.default.shape({
108
+ label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
109
+ }),
110
+ currYear: _propTypes.default.shape({
111
+ label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
112
+ }),
110
113
  languageDirection: _propTypes.default.oneOf(['ltr', 'rtl']),
111
- pickerOptions: _propTypes.default.shape({
112
- currMonth: _propTypes.default.shape({
113
- label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
114
- }),
115
- currYear: _propTypes.default.shape({
116
- label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
117
- }),
118
- nextMonth: _propTypes.default.shape({
119
- label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
120
- navigateTo: _propTypes.default.func
121
- }),
122
- nextYear: _propTypes.default.shape({
123
- label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
124
- navigateTo: _propTypes.default.func
125
- }),
126
- prevMonth: _propTypes.default.shape({
127
- label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
128
- navigateTo: _propTypes.default.func
129
- }),
130
- prevYear: _propTypes.default.shape({
131
- label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
132
- navigateTo: _propTypes.default.func
133
- })
114
+ nextMonth: _propTypes.default.shape({
115
+ label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
116
+ navigateTo: _propTypes.default.func
117
+ }),
118
+ nextYear: _propTypes.default.shape({
119
+ label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
120
+ navigateTo: _propTypes.default.func
121
+ }),
122
+ prevMonth: _propTypes.default.shape({
123
+ label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
124
+ navigateTo: _propTypes.default.func
125
+ }),
126
+ prevYear: _propTypes.default.shape({
127
+ label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
128
+ navigateTo: _propTypes.default.func
134
129
  })
135
- };
130
+ };
131
+ exports.NavigationContainerProps = NavigationContainerProps;
132
+ NavigationContainer.propTypes = NavigationContainerProps;
package/build/cjs/calendar-input/calendar-input.js CHANGED
@@ -17,10 +17,14 @@ var _layer = require("@dhis2-ui/layer");
17
17
 
18
18
  var _popper = require("@dhis2-ui/popper");
19
19
 
20
+ var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
21
+
20
22
  var _classnames = _interopRequireDefault(require("classnames"));
21
23
 
22
24
  var _react = _interopRequireWildcard(require("react"));
23
25
 
26
+ var _calendarContainer = require("../calendar/calendar-container.js");
27
+
24
28
  var _calendar = require("../calendar/calendar.js");
25
29
 
26
30
  var _index = _interopRequireDefault(require("../locales/index.js"));
@@ -42,7 +46,7 @@ const offsetModifier = {
42
46
 
43
47
  const CalendarInput = function () {
44
48
  let {
45
- onDateSelect,
49
+ onDateSelect: parentOnDateSelect,
46
50
  calendar,
47
51
  date,
48
52
  dir,
@@ -53,49 +57,79 @@ const CalendarInput = function () {
53
57
  width,
54
58
  cellSize,
55
59
  clearable,
60
+ minDate,
61
+ maxDate,
62
+ format,
63
+ // todo: props and types for format and validation
64
+ strictValidation,
56
65
  ...rest
57
66
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
58
67
  const ref = (0, _react.useRef)();
59
68
  const [open, setOpen] = (0, _react.useState)(false);
60
-
61
- const calendarProps = _react.default.useMemo(() => {
62
- const onDateSelectWrapper = selectedDate => {
69
+ const useDatePickerOptions = (0, _react.useMemo)(() => ({
70
+ calendar,
71
+ locale,
72
+ timeZone,
73
+ // todo: we probably shouldn't have had timezone here in the first place
74
+ numberingSystem,
75
+ weekDayFormat
76
+ }), [calendar, locale, numberingSystem, timeZone, weekDayFormat]);
77
+ const pickerResults = (0, _multiCalendarDates.useDatePicker)({
78
+ onDateSelect: result => {
63
79
  setOpen(false);
64
- onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
65
- };
66
-
67
- return {
68
- onDateSelect: onDateSelectWrapper,
69
- calendar,
70
- date,
71
- dir,
72
- locale,
73
- numberingSystem,
74
- weekDayFormat,
75
- timeZone,
76
- width,
77
- cellSize
78
- };
79
- }, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
80
+ parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(result);
81
+ },
82
+ date,
83
+ minDate: minDate,
84
+ maxDate: maxDate,
85
+ strictValidation: strictValidation,
86
+ format: format,
87
+ options: useDatePickerOptions
88
+ });
89
+
90
+ const handleChange = e => {
91
+ parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
92
+ calendarDateString: e.value
93
+ });
94
+ };
80
95
 
81
96
  const onFocus = () => {
82
97
  setOpen(true);
83
98
  };
84
99
 
100
+ const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
101
+ const calendarProps = (0, _react.useMemo)(() => {
102
+ return {
103
+ date,
104
+ width,
105
+ cellSize,
106
+ isValid: pickerResults.isValid,
107
+ calendarWeekDays: pickerResults.calendarWeekDays,
108
+ weekDayLabels: pickerResults.weekDayLabels,
109
+ currMonth: pickerResults.currMonth,
110
+ currYear: pickerResults.currYear,
111
+ nextMonth: pickerResults.nextMonth,
112
+ nextYear: pickerResults.nextYear,
113
+ prevMonth: pickerResults.prevMonth,
114
+ prevYear: pickerResults.prevYear,
115
+ languageDirection
116
+ };
117
+ }, [cellSize, date, pickerResults, width, languageDirection]);
85
118
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
86
119
  ref: ref,
87
- className: "jsx-862452676" + " " + "calendar-input-wrapper"
120
+ className: "jsx-633677374" + " " + "calendar-input-wrapper"
88
121
  }, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
89
122
  label: "Pick a date"
90
123
  }, rest, {
91
124
  type: "text",
92
125
  onFocus: onFocus,
93
- value: date
126
+ value: date,
127
+ onChange: handleChange,
128
+ validationText: pickerResults.errorMessage || pickerResults.warningMessage,
129
+ error: !!pickerResults.errorMessage,
130
+ warning: !!pickerResults.warningMessage
94
131
  })), clearable && /*#__PURE__*/_react.default.createElement("div", {
95
- className: "jsx-862452676" + " " + ((0, _classnames.default)('calendar-clear-button', {
96
- // ToDo: this is a workaround to show the clear button in the correct place when an icon is shown.
97
- // Long-term, we should abstract and share the logic multi-select uses for the input-wrapper
98
- // https://dhis2.atlassian.net/browse/DHIS2-14848
132
+ className: "jsx-633677374" + " " + ((0, _classnames.default)('calendar-clear-button', {
99
133
  'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
100
134
  'with-dense-wrapper': rest.dense
101
135
  }) || "")
@@ -103,7 +137,9 @@ const CalendarInput = function () {
103
137
  dataTest: "calendar-clear-button",
104
138
  secondary: true,
105
139
  small: true,
106
- onClick: () => calendarProps.onDateSelect(null),
140
+ onClick: () => {
141
+ parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
142
+ },
107
143
  type: "button"
108
144
  }, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
109
145
  onBackdropClick: () => {
@@ -113,17 +149,14 @@ const CalendarInput = function () {
113
149
  reference: ref,
114
150
  placement: "bottom-start",
115
151
  modifiers: [offsetModifier]
116
- }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendar.Calendar, _extends({}, calendarProps, {
117
- date: date
118
- }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
119
- id: "862452676"
120
- }, [".calendar-input-wrapper.jsx-862452676{position:relative;}", ".calendar-clear-button.jsx-862452676{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-862452676{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-862452676{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
152
+ }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps)))), /*#__PURE__*/_react.default.createElement(_style.default, {
153
+ id: "633677374"
154
+ }, [".calendar-input-wrapper.jsx-633677374{position:relative;}", ".calendar-clear-button.jsx-633677374{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-633677374{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-633677374{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
121
155
  };
122
156
 
123
157
  exports.CalendarInput = CalendarInput;
124
158
  CalendarInput.defaultProps = {
125
159
  dataTest: 'dhis2-uiwidgets-calendar-inputfield'
126
160
  };
127
- CalendarInput.propTypes = { ..._calendar.CalendarProps,
128
- ..._input.InputFieldProps
161
+ CalendarInput.propTypes = { ..._calendar.CalendarProps
129
162
  };
package/build/cjs/stories/calendar-input.stories.js CHANGED
@@ -3,7 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = exports.CalendarWithClearButton = void 0;
6
+ exports.CalendarWithClearButton = void 0;
7
+ exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
8
+ exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
7
9
 
8
10
  var _react = _interopRequireWildcard(require("react"));
9
11
 
@@ -127,4 +129,22 @@ const CalendarWithClearButton = _ref2 => {
127
129
  }, date !== null && date !== void 0 ? date : 'undefined')));
128
130
  };
129
131
 
130
- exports.CalendarWithClearButton = CalendarWithClearButton;
132
+ exports.CalendarWithClearButton = CalendarWithClearButton;
133
+
134
+ function CalendarWithEditiableInput() {
135
+ const [date, setDate] = (0, _react.useState)('2020-07-03');
136
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, {
137
+ editable: true,
138
+ date: date,
139
+ calendar: "gregory",
140
+ onDateSelect: selectedDate => {
141
+ const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
142
+ setDate(date);
143
+ },
144
+ width: '700px',
145
+ inputWidth: "900px",
146
+ timeZone: 'UTC',
147
+ minDate: '2020-07-01',
148
+ maxDate: '2020-07-09'
149
+ })));
150
+ }
package/build/es/calendar/calendar-container.js ADDED
@@ -0,0 +1,61 @@
1
+ import _JSXStyle from "styled-jsx/style";
2
+ import { colors } from '@dhis2/ui-constants';
3
+ import PropTypes from 'prop-types';
4
+ import React, { useMemo } from 'react';
5
+ import { CalendarTable, CalendarTableProps } from './calendar-table.js';
6
+ import { NavigationContainer, NavigationContainerProps } from './navigation-container.js';
7
+ const wrapperBorderColor = colors.grey300;
8
+ const backgroundColor = 'none';
9
+ export const CalendarContainer = _ref => {
10
+ let {
11
+ date,
12
+ width,
13
+ cellSize,
14
+ calendarWeekDays,
15
+ weekDayLabels,
16
+ currMonth,
17
+ currYear,
18
+ nextMonth,
19
+ nextYear,
20
+ prevMonth,
21
+ prevYear,
22
+ languageDirection
23
+ } = _ref;
24
+ const navigationProps = useMemo(() => {
25
+ return {
26
+ currMonth,
27
+ currYear,
28
+ nextMonth,
29
+ nextYear,
30
+ prevMonth,
31
+ prevYear,
32
+ languageDirection
33
+ };
34
+ }, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear]);
35
+ return /*#__PURE__*/React.createElement("div", {
36
+ className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
37
+ }, /*#__PURE__*/React.createElement("div", {
38
+ dir: languageDirection,
39
+ "data-test": "calendar",
40
+ className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
41
+ }, /*#__PURE__*/React.createElement(NavigationContainer, navigationProps), /*#__PURE__*/React.createElement(CalendarTable, {
42
+ selectedDate: date,
43
+ calendarWeekDays: calendarWeekDays,
44
+ weekDayLabels: weekDayLabels,
45
+ cellSize: cellSize,
46
+ width: width
47
+ })), /*#__PURE__*/React.createElement(_JSXStyle, {
48
+ id: "2823859047",
49
+ dynamic: [backgroundColor, wrapperBorderColor, width]
50
+ }, [".calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:".concat(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 ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(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;}")]));
51
+ };
52
+ CalendarContainer.defaultProps = {
53
+ cellSize: '32px',
54
+ width: '240px'
55
+ };
56
+ CalendarContainer.propTypes = {
57
+ /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
58
+ date: PropTypes.string,
59
+ ...CalendarTableProps,
60
+ ...NavigationContainerProps
61
+ };
package/build/es/calendar/calendar-table.js CHANGED
@@ -34,7 +34,7 @@ export const CalendarTable = _ref => {
34
34
  dynamic: [spacers.dp4, spacers.dp4]
35
35
  }, [".calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:".concat(spacers.dp4, ";}"), ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", ".calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:".concat(spacers.dp4, ";}")]));
36
36
  };
37
- CalendarTable.propTypes = {
37
+ export const CalendarTableProps = {
38
38
  calendarWeekDays: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
39
39
  calendarDate: PropTypes.string,
40
40
  isInCurrentMonth: PropTypes.bool,
@@ -48,4 +48,5 @@ CalendarTable.propTypes = {
48
48
  selectedDate: PropTypes.string,
49
49
  weekDayLabels: PropTypes.arrayOf(PropTypes.string),
50
50
  width: PropTypes.string
51
- };
51
+ };
52
+ CalendarTable.propTypes = CalendarTableProps;
package/build/es/calendar/calendar.js CHANGED
@@ -1,10 +1,7 @@
1
- import _JSXStyle from "styled-jsx/style";
2
1
  import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
3
- import { colors } from '@dhis2/ui-constants';
4
2
  import PropTypes from 'prop-types';
5
- import React, { useState } from 'react';
6
- import { CalendarTable } from './calendar-table.js';
7
- import { NavigationContainer } from './navigation-container.js';
3
+ import React, { useMemo, useState } from 'react';
4
+ import { CalendarContainer } from './calendar-container.js';
8
5
  export const Calendar = _ref => {
9
6
  let {
10
7
  onDateSelect,
@@ -18,8 +15,6 @@ export const Calendar = _ref => {
18
15
  width,
19
16
  cellSize
20
17
  } = _ref;
21
- const wrapperBorderColor = colors.grey300;
22
- const backgroundColor = 'none';
23
18
  const [selectedDateString, setSelectedDateString] = useState(date);
24
19
  const languageDirection = useResolvedDirection(dir, locale);
25
20
  const options = {
@@ -29,7 +24,7 @@ export const Calendar = _ref => {
29
24
  numberingSystem,
30
25
  weekDayFormat
31
26
  };
32
- const pickerOptions = useDatePicker({
27
+ const pickerResults = useDatePicker({
33
28
  onDateSelect: result => {
34
29
  const {
35
30
  calendarDateString
@@ -40,29 +35,30 @@ export const Calendar = _ref => {
40
35
  date: selectedDateString,
41
36
  options
42
37
  });
43
- const {
44
- calendarWeekDays,
45
- weekDayLabels
46
- } = pickerOptions;
47
- return /*#__PURE__*/React.createElement("div", {
48
- className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
49
- }, /*#__PURE__*/React.createElement("div", {
50
- dir: languageDirection,
51
- "data-test": "calendar",
52
- className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
53
- }, /*#__PURE__*/React.createElement(NavigationContainer, {
54
- pickerOptions: pickerOptions,
55
- languageDirection: languageDirection
56
- }), /*#__PURE__*/React.createElement(CalendarTable, {
57
- selectedDate: selectedDateString,
58
- calendarWeekDays: calendarWeekDays,
59
- weekDayLabels: weekDayLabels,
60
- cellSize: cellSize,
61
- width: width
62
- })), /*#__PURE__*/React.createElement(_JSXStyle, {
63
- id: "2823859047",
64
- dynamic: [backgroundColor, wrapperBorderColor, width]
65
- }, [".calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:".concat(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 ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(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;}")]));
38
+ const calendarProps = useMemo(() => {
39
+ return {
40
+ date,
41
+ dir,
42
+ locale,
43
+ width,
44
+ cellSize,
45
+ // minDate,
46
+ // maxDate,
47
+ // validation, // todo: clarify how we use validation props (and format) in Calendar (not CalendarInput)
48
+ // format,
49
+ isValid: pickerResults.isValid,
50
+ calendarWeekDays: pickerResults.calendarWeekDays,
51
+ weekDayLabels: pickerResults.weekDayLabels,
52
+ currMonth: pickerResults.currMonth,
53
+ currYear: pickerResults.currYear,
54
+ nextMonth: pickerResults.nextMonth,
55
+ nextYear: pickerResults.nextYear,
56
+ prevMonth: pickerResults.prevMonth,
57
+ prevYear: pickerResults.prevYear,
58
+ languageDirection
59
+ };
60
+ }, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
61
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CalendarContainer, calendarProps));
66
62
  };
67
63
  Calendar.defaultProps = {
68
64
  cellSize: '32px',
package/build/es/calendar/navigation-container.js CHANGED
@@ -11,18 +11,15 @@ export const NavigationContainer = _ref => {
11
11
 
12
12
  let {
13
13
  languageDirection,
14
- pickerOptions
15
- } = _ref;
16
- const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
17
- const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16;
18
- const {
19
14
  currMonth,
20
15
  currYear,
21
16
  nextMonth,
22
17
  nextYear,
23
18
  prevMonth,
24
19
  prevYear
25
- } = pickerOptions; // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
20
+ } = _ref;
21
+ const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
22
+ const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16; // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
26
23
  // there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
27
24
 
28
25
  const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
@@ -88,30 +85,29 @@ export const NavigationContainer = _ref => {
88
85
  dynamic: [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]
89
86
  }, ["button.__jsx-style-dynamic-selector{background:none;border:0;}", ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:default;}", ".month.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector{-webkit-flex:2;-ms-flex:2;flex:2;white-space:nowrap;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}", ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{padding:".concat(spacers.dp4, ";height:24px;width:24px;color:").concat(colors.grey600, ";border-radius:3px;}"), ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", ".prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:".concat(colors.grey200, ";color:").concat(colors.grey900, ";cursor:pointer;}"), ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey300, ";}"), ".label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px 8px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:16px;}", ".navigation-container.__jsx-style-dynamic-selector{gap:".concat(spacers.dp8, ";padding:").concat(spacers.dp4, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid ").concat(wrapperBorderColor, ";background-color:").concat(headerBackground, ";font-size:1.08em;}")]));
90
87
  };
91
- NavigationContainer.propTypes = {
88
+ export const NavigationContainerProps = {
89
+ currMonth: PropTypes.shape({
90
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
91
+ }),
92
+ currYear: PropTypes.shape({
93
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
94
+ }),
92
95
  languageDirection: PropTypes.oneOf(['ltr', 'rtl']),
93
- pickerOptions: PropTypes.shape({
94
- currMonth: PropTypes.shape({
95
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
96
- }),
97
- currYear: PropTypes.shape({
98
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
99
- }),
100
- nextMonth: PropTypes.shape({
101
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
102
- navigateTo: PropTypes.func
103
- }),
104
- nextYear: PropTypes.shape({
105
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
106
- navigateTo: PropTypes.func
107
- }),
108
- prevMonth: PropTypes.shape({
109
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
110
- navigateTo: PropTypes.func
111
- }),
112
- prevYear: PropTypes.shape({
113
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
114
- navigateTo: PropTypes.func
115
- })
96
+ nextMonth: PropTypes.shape({
97
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
98
+ navigateTo: PropTypes.func
99
+ }),
100
+ nextYear: PropTypes.shape({
101
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
102
+ navigateTo: PropTypes.func
103
+ }),
104
+ prevMonth: PropTypes.shape({
105
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
106
+ navigateTo: PropTypes.func
107
+ }),
108
+ prevYear: PropTypes.shape({
109
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
110
+ navigateTo: PropTypes.func
116
111
  })
117
- };
112
+ };
113
+ NavigationContainer.propTypes = NavigationContainerProps;
package/build/es/calendar-input/calendar-input.js CHANGED
@@ -4,12 +4,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
4
4
 
5
5
  import { Button } from '@dhis2-ui/button';
6
6
  import { Card } from '@dhis2-ui/card';
7
- import { InputField, InputFieldProps } from '@dhis2-ui/input';
7
+ import { InputField } from '@dhis2-ui/input';
8
8
  import { Layer } from '@dhis2-ui/layer';
9
9
  import { Popper } from '@dhis2-ui/popper';
10
+ import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
10
11
  import cx from 'classnames';
11
- import React, { useRef, useState } from 'react';
12
- import { Calendar, CalendarProps } from '../calendar/calendar.js';
12
+ import React, { useRef, useState, useMemo } from 'react';
13
+ import { CalendarContainer } from '../calendar/calendar-container.js';
14
+ import { CalendarProps } from '../calendar/calendar.js';
13
15
  import i18n from '../locales/index.js';
14
16
  const offsetModifier = {
15
17
  name: 'offset',
@@ -19,7 +21,7 @@ const offsetModifier = {
19
21
  };
20
22
  export const CalendarInput = function () {
21
23
  let {
22
- onDateSelect,
24
+ onDateSelect: parentOnDateSelect,
23
25
  calendar,
24
26
  date,
25
27
  dir,
@@ -30,48 +32,79 @@ export const CalendarInput = function () {
30
32
  width,
31
33
  cellSize,
32
34
  clearable,
35
+ minDate,
36
+ maxDate,
37
+ format,
38
+ // todo: props and types for format and validation
39
+ strictValidation,
33
40
  ...rest
34
41
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
35
42
  const ref = useRef();
36
43
  const [open, setOpen] = useState(false);
37
- const calendarProps = React.useMemo(() => {
38
- const onDateSelectWrapper = selectedDate => {
44
+ const useDatePickerOptions = useMemo(() => ({
45
+ calendar,
46
+ locale,
47
+ timeZone,
48
+ // todo: we probably shouldn't have had timezone here in the first place
49
+ numberingSystem,
50
+ weekDayFormat
51
+ }), [calendar, locale, numberingSystem, timeZone, weekDayFormat]);
52
+ const pickerResults = useDatePicker({
53
+ onDateSelect: result => {
39
54
  setOpen(false);
40
- onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
41
- };
55
+ parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(result);
56
+ },
57
+ date,
58
+ minDate: minDate,
59
+ maxDate: maxDate,
60
+ strictValidation: strictValidation,
61
+ format: format,
62
+ options: useDatePickerOptions
63
+ });
42
64
 
43
- return {
44
- onDateSelect: onDateSelectWrapper,
45
- calendar,
46
- date,
47
- dir,
48
- locale,
49
- numberingSystem,
50
- weekDayFormat,
51
- timeZone,
52
- width,
53
- cellSize
54
- };
55
- }, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
65
+ const handleChange = e => {
66
+ parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
67
+ calendarDateString: e.value
68
+ });
69
+ };
56
70
 
57
71
  const onFocus = () => {
58
72
  setOpen(true);
59
73
  };
60
74
 
75
+ const languageDirection = useResolvedDirection(dir, locale);
76
+ const calendarProps = useMemo(() => {
77
+ return {
78
+ date,
79
+ width,
80
+ cellSize,
81
+ isValid: pickerResults.isValid,
82
+ calendarWeekDays: pickerResults.calendarWeekDays,
83
+ weekDayLabels: pickerResults.weekDayLabels,
84
+ currMonth: pickerResults.currMonth,
85
+ currYear: pickerResults.currYear,
86
+ nextMonth: pickerResults.nextMonth,
87
+ nextYear: pickerResults.nextYear,
88
+ prevMonth: pickerResults.prevMonth,
89
+ prevYear: pickerResults.prevYear,
90
+ languageDirection
91
+ };
92
+ }, [cellSize, date, pickerResults, width, languageDirection]);
61
93
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
62
94
  ref: ref,
63
- className: "jsx-862452676" + " " + "calendar-input-wrapper"
95
+ className: "jsx-633677374" + " " + "calendar-input-wrapper"
64
96
  }, /*#__PURE__*/React.createElement(InputField, _extends({
65
97
  label: "Pick a date"
66
98
  }, rest, {
67
99
  type: "text",
68
100
  onFocus: onFocus,
69
- value: date
101
+ value: date,
102
+ onChange: handleChange,
103
+ validationText: pickerResults.errorMessage || pickerResults.warningMessage,
104
+ error: !!pickerResults.errorMessage,
105
+ warning: !!pickerResults.warningMessage
70
106
  })), clearable && /*#__PURE__*/React.createElement("div", {
71
- className: "jsx-862452676" + " " + (cx('calendar-clear-button', {
72
- // ToDo: this is a workaround to show the clear button in the correct place when an icon is shown.
73
- // Long-term, we should abstract and share the logic multi-select uses for the input-wrapper
74
- // https://dhis2.atlassian.net/browse/DHIS2-14848
107
+ className: "jsx-633677374" + " " + (cx('calendar-clear-button', {
75
108
  'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
76
109
  'with-dense-wrapper': rest.dense
77
110
  }) || "")
@@ -79,7 +112,9 @@ export const CalendarInput = function () {
79
112
  dataTest: "calendar-clear-button",
80
113
  secondary: true,
81
114
  small: true,
82
- onClick: () => calendarProps.onDateSelect(null),
115
+ onClick: () => {
116
+ parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
117
+ },
83
118
  type: "button"
84
119
  }, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {
85
120
  onBackdropClick: () => {
@@ -89,15 +124,12 @@ export const CalendarInput = function () {
89
124
  reference: ref,
90
125
  placement: "bottom-start",
91
126
  modifiers: [offsetModifier]
92
- }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Calendar, _extends({}, calendarProps, {
93
- date: date
94
- }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
95
- id: "862452676"
96
- }, [".calendar-input-wrapper.jsx-862452676{position:relative;}", ".calendar-clear-button.jsx-862452676{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-862452676{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-862452676{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
127
+ }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CalendarContainer, calendarProps)))), /*#__PURE__*/React.createElement(_JSXStyle, {
128
+ id: "633677374"
129
+ }, [".calendar-input-wrapper.jsx-633677374{position:relative;}", ".calendar-clear-button.jsx-633677374{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-633677374{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-633677374{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
97
130
  };
98
131
  CalendarInput.defaultProps = {
99
132
  dataTest: 'dhis2-uiwidgets-calendar-inputfield'
100
133
  };
101
- CalendarInput.propTypes = { ...CalendarProps,
102
- ...InputFieldProps
134
+ CalendarInput.propTypes = { ...CalendarProps
103
135
  };
package/build/es/stories/calendar-input.stories.js CHANGED
@@ -100,4 +100,21 @@ export const CalendarWithClearButton = _ref2 => {
100
100
  }), /*#__PURE__*/React.createElement("div", null, "value:", /*#__PURE__*/React.createElement("span", {
101
101
  "data-test": "storybook-calendar-date-value"
102
102
  }, date !== null && date !== void 0 ? date : 'undefined')));
103
- };
103
+ };
104
+ export function CalendarWithEditiableInput() {
105
+ const [date, setDate] = useState('2020-07-03');
106
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarInput, {
107
+ editable: true,
108
+ date: date,
109
+ calendar: "gregory",
110
+ onDateSelect: selectedDate => {
111
+ const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
112
+ setDate(date);
113
+ },
114
+ width: '700px',
115
+ inputWidth: "900px",
116
+ timeZone: 'UTC',
117
+ minDate: '2020-07-01',
118
+ maxDate: '2020-07-09'
119
+ })));
120
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/calendar",
3
- "version": "9.9.0-alpha.1",
3
+ "version": "9.9.0-alpha.2",
4
4
  "description": "UI Calendar",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,15 +33,15 @@
33
33
  "styled-jsx": "^4"
34
34
  },
35
35
  "dependencies": {
36
- "@dhis2-ui/button": "9.9.0-alpha.1",
37
- "@dhis2-ui/card": "9.9.0-alpha.1",
38
- "@dhis2-ui/input": "9.9.0-alpha.1",
39
- "@dhis2-ui/layer": "9.9.0-alpha.1",
40
- "@dhis2-ui/popper": "9.9.0-alpha.1",
41
- "@dhis2/multi-calendar-dates": "^1.1.1",
36
+ "@dhis2-ui/button": "9.9.0-alpha.2",
37
+ "@dhis2-ui/card": "9.9.0-alpha.2",
38
+ "@dhis2-ui/input": "9.9.0-alpha.2",
39
+ "@dhis2-ui/layer": "9.9.0-alpha.2",
40
+ "@dhis2-ui/popper": "9.9.0-alpha.2",
41
+ "@dhis2/multi-calendar-dates": "v1.0.0-alpha.26",
42
42
  "@dhis2/prop-types": "^3.1.2",
43
- "@dhis2/ui-constants": "9.9.0-alpha.1",
44
- "@dhis2/ui-icons": "9.9.0-alpha.1",
43
+ "@dhis2/ui-constants": "9.9.0-alpha.2",
44
+ "@dhis2/ui-icons": "9.9.0-alpha.2",
45
45
  "classnames": "^2.3.1",
46
46
  "prop-types": "^15.7.2"
47
47
  },