@instructure/ui-date-input 10.2.3-snapshot-10 → 10.2.3-snapshot-11

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.
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.2.3-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-10) (2024-10-01)
6
+ ## [10.2.3-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-11) (2024-10-02)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-date-input
8
+
9
+ ### Features
10
+
11
+ * **ui-calendar,ui-date-input:** update DateInput2 api, add placeholder hint ([ee9dfab](https://github.com/instructure/instructure-ui/commit/ee9dfab8cb5cff76d829bd24163d2052a7da46a9))
9
12
 
10
13
 
11
14
 
@@ -26,7 +26,6 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
26
26
 
27
27
  /** @jsx jsx */
28
28
  import { useState, useEffect, useContext } from 'react';
29
- import moment from 'moment-timezone';
30
29
  import { Calendar } from '@instructure/ui-calendar';
31
30
  import { IconButton } from '@instructure/ui-buttons';
32
31
  import { IconCalendarMonthLine, IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
@@ -36,24 +35,89 @@ import { passthroughProps } from '@instructure/ui-react-utils';
36
35
  import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
37
36
  import { jsx } from '@instructure/emotion';
38
37
  import { propTypes } from './props';
39
- function isValidDate(dateString) {
40
- return !isNaN(new Date(dateString).getTime());
41
- }
42
- function isValidMomentDate(dateString, locale, timezone) {
43
- return moment.tz(dateString, [moment.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], locale, true, timezone).isValid();
38
+ function parseLocaleDate(dateString = '', locale, timeZone) {
39
+ // This function may seem complicated but it basically does one thing:
40
+ // Given a dateString, a locale and a timeZone. The dateString is assumed to be formatted according
41
+ // to the locale. So if the locale is `en-us` the dateString is expected to be in the format of M/D/YYYY.
42
+ // The dateString is also assumed to be in the given timeZone, so "1/1/2020" in "America/Los_Angeles" timezone is
43
+ // expected to be "2020-01-01T08:00:00.000Z" in UTC time.
44
+ // This function tries to parse the dateString taking these variables into account and return a javascript Date object
45
+ // that is adjusted to be in UTC.
46
+
47
+ // Split string on '.', whitespace, '/', ',' or '-' using regex: /[.\s/.-]+/.
48
+ // The '+' allows splitting on consecutive delimiters.
49
+ // `.filter(Boolean)` is needed because some locales have a delimeter at the end (e.g.: hungarian dates are formatted as `2024. 09. 19.`)
50
+ const splitDate = dateString.split(/[,.\s/.-]+/).filter(Boolean);
51
+
52
+ // create a locale formatted new date to later extract the order and delimeter information
53
+ const localeDate = new Intl.DateTimeFormat(locale).formatToParts(new Date());
54
+ let index = 0;
55
+ let day, month, year;
56
+ localeDate.forEach(part => {
57
+ if (part.type === 'month') {
58
+ month = parseInt(splitDate[index], 10);
59
+ index++;
60
+ } else if (part.type === 'day') {
61
+ day = parseInt(splitDate[index], 10);
62
+ index++;
63
+ } else if (part.type === 'year') {
64
+ year = parseInt(splitDate[index], 10);
65
+ index++;
66
+ }
67
+ });
68
+
69
+ // sensible limitations
70
+ if (!year || !month || !day || year < 1000 || year > 9999) return null;
71
+
72
+ // create utc date from year, month (zero indexed) and day
73
+ const date = new Date(Date.UTC(year, month - 1, day));
74
+ if (date.getMonth() !== month - 1 || date.getDate() !== day) {
75
+ // Check if the Date object adjusts the values. If it does, the input is invalid.
76
+ return null;
77
+ }
78
+
79
+ // Format date string in the provided timezone. The locale here is irrelevant, we only care about how to time is adjusted for the timezone.
80
+ const parts = new Intl.DateTimeFormat('en-US', {
81
+ timeZone,
82
+ year: 'numeric',
83
+ month: '2-digit',
84
+ day: '2-digit',
85
+ hour: '2-digit',
86
+ minute: '2-digit',
87
+ second: '2-digit',
88
+ hour12: false
89
+ }).formatToParts(date);
90
+
91
+ // Extract the date and time parts from the formatted string
92
+ const dateStringInTimezone = parts.reduce((acc, part) => {
93
+ return part.type === 'literal' ? acc : {
94
+ ...acc,
95
+ [part.type]: part.value
96
+ };
97
+ }, {});
98
+
99
+ // Create a date string in the format 'YYYY-MM-DDTHH:mm:ss'
100
+ const dateInTimezone = `${dateStringInTimezone.year}-${dateStringInTimezone.month}-${dateStringInTimezone.day}T${dateStringInTimezone.hour}:${dateStringInTimezone.minute}:${dateStringInTimezone.second}`;
101
+
102
+ // Calculate time difference for timezone offset
103
+ const timeDiff = new Date(dateInTimezone + 'Z').getTime() - date.getTime();
104
+ const utcTime = new Date(date.getTime() - timeDiff);
105
+ // Return the UTC Date corresponding to the time in the specified timezone
106
+ return utcTime;
44
107
  }
45
108
 
46
109
  /**
47
110
  ---
48
111
  category: components
49
112
  ---
113
+
114
+ @module experimental
50
115
  **/
51
116
  const DateInput2 = ({
52
117
  renderLabel,
53
118
  screenReaderLabels,
54
119
  isRequired = false,
55
120
  interaction = 'enabled',
56
- size = 'medium',
57
121
  isInline = false,
58
122
  value,
59
123
  messages,
@@ -61,69 +125,23 @@ const DateInput2 = ({
61
125
  onChange,
62
126
  onBlur,
63
127
  withYearPicker,
64
- onRequestValidateDate,
65
128
  invalidDateErrorMessage,
66
129
  locale,
67
130
  timezone,
68
131
  placeholder,
132
+ dateFormat,
133
+ onRequestValidateDate,
134
+ // margin, TODO enable this prop
69
135
  ...rest
70
136
  }) => {
71
- const _useState = useState(''),
72
- _useState2 = _slicedToArray(_useState, 2),
73
- selectedDate = _useState2[0],
74
- setSelectedDate = _useState2[1];
75
- const _useState3 = useState(messages || []),
76
- _useState4 = _slicedToArray(_useState3, 2),
77
- inputMessages = _useState4[0],
78
- setInputMessages = _useState4[1];
79
- const _useState5 = useState(false),
80
- _useState6 = _slicedToArray(_useState5, 2),
81
- showPopover = _useState6[0],
82
- setShowPopover = _useState6[1];
83
137
  const localeContext = useContext(ApplyLocaleContext);
84
- useEffect(() => {
85
- validateInput(true);
86
- }, [value]);
87
- useEffect(() => {
88
- setInputMessages(messages || []);
89
- }, [messages]);
90
- const handleInputChange = (e, value) => {
91
- onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
92
- };
93
- const handleDateSelected = (dateString, _momentDate, e) => {
94
- const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
95
- month: 'long',
96
- year: 'numeric',
97
- day: 'numeric',
98
- timeZone: getTimezone()
99
- });
100
- handleInputChange(e, formattedDate);
101
- setShowPopover(false);
102
- onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(formattedDate, true);
103
- };
104
- const validateInput = (onlyRemoveError = false) => {
105
- // TODO `isValidDate` and `isValidMomentDate` basically have the same functionality but the latter is a bit more strict (e.g.: `33` is only valid in `isValidMomentDate`)
106
- // in the future we should get rid of moment but currently Calendar is using it for validation too so we can only remove it simultaneously
107
- // otherwise DateInput could pass invalid dates to Calendar and break it
108
- if (isValidDate(value || '') && isValidMomentDate(value || '', getLocale(), getTimezone()) || value === '') {
109
- setSelectedDate(value || '');
110
- setInputMessages(messages || []);
111
- return true;
112
- }
113
- if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
114
- setInputMessages(messages => [{
115
- type: 'error',
116
- text: invalidDateErrorMessage
117
- }, ...messages]);
118
- }
119
- return false;
120
- };
121
138
  const getLocale = () => {
122
139
  if (locale) {
123
140
  return locale;
124
141
  } else if (localeContext.locale) {
125
142
  return localeContext.locale;
126
143
  }
144
+ // default to the system's locale
127
145
  return Locale.browserLocale();
128
146
  };
129
147
  const getTimezone = () => {
@@ -135,29 +153,111 @@ const DateInput2 = ({
135
153
  // default to the system's timezone
136
154
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
137
155
  };
156
+ const _useState = useState(messages || []),
157
+ _useState2 = _slicedToArray(_useState, 2),
158
+ inputMessages = _useState2[0],
159
+ setInputMessages = _useState2[1];
160
+ const _useState3 = useState(false),
161
+ _useState4 = _slicedToArray(_useState3, 2),
162
+ showPopover = _useState4[0],
163
+ setShowPopover = _useState4[1];
164
+ useEffect(() => {
165
+ // don't set input messages if there is an error set already
166
+ if (!inputMessages) {
167
+ setInputMessages(messages || []);
168
+ }
169
+ }, [messages]);
170
+ useEffect(() => {
171
+ const _parseDate = parseDate(value),
172
+ _parseDate2 = _slicedToArray(_parseDate, 2),
173
+ utcIsoDate = _parseDate2[1];
174
+ // clear error messages if date becomes valid
175
+ if (utcIsoDate || !value) {
176
+ setInputMessages(messages || []);
177
+ }
178
+ }, [value]);
179
+ const parseDate = (dateString = '') => {
180
+ let date = null;
181
+ if (dateFormat) {
182
+ if (typeof dateFormat === 'string') {
183
+ // use dateFormat instead of the user locale
184
+ date = parseLocaleDate(dateString, dateFormat, getTimezone());
185
+ } else if (dateFormat.parser) {
186
+ date = dateFormat.parser(dateString);
187
+ }
188
+ } else {
189
+ // no dateFormat prop passed, use locale for formatting
190
+ date = parseLocaleDate(dateString, getLocale(), getTimezone());
191
+ }
192
+ return date ? [formatDate(date), date.toISOString()] : ['', ''];
193
+ };
194
+ const formatDate = date => {
195
+ // use formatter function if provided
196
+ if (typeof dateFormat !== 'string' && dateFormat !== null && dateFormat !== void 0 && dateFormat.formatter) {
197
+ return dateFormat.formatter(date);
198
+ }
199
+ // if dateFormat set to a locale, use that, otherwise default to the user's locale
200
+ return date.toLocaleDateString(typeof dateFormat === 'string' ? dateFormat : getLocale(), {
201
+ timeZone: getTimezone(),
202
+ calendar: 'gregory',
203
+ numberingSystem: 'latn'
204
+ });
205
+ };
206
+ const getDateFromatHint = () => {
207
+ const exampleDate = new Date('2024-09-01');
208
+ const formattedDate = formatDate(exampleDate);
209
+
210
+ // Create a regular expression to find the exact match of the number
211
+ const regex = n => {
212
+ return new RegExp(`(?<!\\d)0*${n}(?!\\d)`, 'g');
213
+ };
214
+
215
+ // Replace the matched number with the same number of dashes
216
+ const year = `${exampleDate.getFullYear()}`;
217
+ const month = `${exampleDate.getMonth() + 1}`;
218
+ const day = `${exampleDate.getDate()}`;
219
+ return formattedDate.replace(regex(year), match => 'Y'.repeat(match.length)).replace(regex(month), match => 'M'.repeat(match.length)).replace(regex(day), match => 'D'.repeat(match.length));
220
+ };
221
+ const handleInputChange = (e, newValue) => {
222
+ const _parseDate3 = parseDate(newValue),
223
+ _parseDate4 = _slicedToArray(_parseDate3, 2),
224
+ utcIsoDate = _parseDate4[1];
225
+ onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, utcIsoDate);
226
+ };
227
+ const handleDateSelected = (dateString, _momentDate, e) => {
228
+ setShowPopover(false);
229
+ const newValue = formatDate(new Date(dateString));
230
+ onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, dateString);
231
+ onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, newValue, dateString);
232
+ };
138
233
  const handleBlur = e => {
139
- const isInputValid = validateInput(false);
140
- if (isInputValid && value) {
141
- const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
142
- month: 'long',
143
- year: 'numeric',
144
- day: 'numeric',
145
- timeZone: getTimezone()
146
- });
147
- handleInputChange(e, formattedDate);
234
+ const _parseDate5 = parseDate(value),
235
+ _parseDate6 = _slicedToArray(_parseDate5, 2),
236
+ localeDate = _parseDate6[0],
237
+ utcIsoDate = _parseDate6[1];
238
+ if (localeDate) {
239
+ if (localeDate !== value) {
240
+ onChange === null || onChange === void 0 ? void 0 : onChange(e, localeDate, utcIsoDate);
241
+ }
242
+ } else if (value && invalidDateErrorMessage) {
243
+ setInputMessages([{
244
+ type: 'error',
245
+ text: invalidDateErrorMessage
246
+ }]);
148
247
  }
149
- onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, isInputValid);
150
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
248
+ onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, value || '', utcIsoDate);
249
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
151
250
  };
251
+ const selectedDate = parseDate(value)[1];
152
252
  return jsx(TextInput, Object.assign({}, passthroughProps(rest), {
253
+ // margin={'large'} TODO add this prop to TextInput
153
254
  renderLabel: renderLabel,
154
255
  onChange: handleInputChange,
155
256
  onBlur: handleBlur,
156
257
  isRequired: isRequired,
157
258
  value: value,
158
- placeholder: placeholder,
259
+ placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFromatHint(),
159
260
  width: width,
160
- size: size,
161
261
  display: isInline ? 'inline-block' : 'block',
162
262
  messages: inputMessages,
163
263
  interaction: interaction,
@@ -167,7 +267,6 @@ const DateInput2 = ({
167
267
  withBorder: false,
168
268
  screenReaderLabel: screenReaderLabels.calendarIcon,
169
269
  shape: "circle",
170
- size: size,
171
270
  interaction: interaction
172
271
  }, _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, null))),
173
272
  isShowingContent: showPopover,
@@ -182,8 +281,8 @@ const DateInput2 = ({
182
281
  onDateSelected: handleDateSelected,
183
282
  selectedDate: selectedDate,
184
283
  visibleMonth: selectedDate,
185
- locale: locale,
186
- timezone: timezone,
284
+ locale: getLocale(),
285
+ timezone: getTimezone(),
187
286
  role: "listbox",
188
287
  renderNextMonthButton: jsx(IconButton, {
189
288
  size: "small",
@@ -29,7 +29,6 @@ const propTypes = {
29
29
  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
30
30
  screenReaderLabels: PropTypes.object.isRequired,
31
31
  value: controllable(PropTypes.string),
32
- size: PropTypes.oneOf(['small', 'medium', 'large']),
33
32
  placeholder: PropTypes.string,
34
33
  onChange: PropTypes.func,
35
34
  onBlur: PropTypes.func,
@@ -38,12 +37,11 @@ const propTypes = {
38
37
  isInline: PropTypes.bool,
39
38
  width: PropTypes.string,
40
39
  messages: PropTypes.arrayOf(FormPropTypes.message),
41
- onRequestShowCalendar: PropTypes.func,
42
- onRequestHideCalendar: PropTypes.func,
43
- onRequestValidateDate: PropTypes.func,
44
40
  invalidDateErrorMessage: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
45
41
  locale: PropTypes.string,
46
42
  timezone: PropTypes.string,
47
- withYearPicker: PropTypes.object
43
+ withYearPicker: PropTypes.object,
44
+ dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
45
+ onRequestValidateDate: PropTypes.func
48
46
  };
49
47
  export { propTypes };
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.DateInput2 = void 0;
8
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
9
  var _react = require("react");
10
- var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
11
10
  var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
12
11
  var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
13
12
  var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
@@ -45,24 +44,89 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
45
44
  * SOFTWARE.
46
45
  */
47
46
  /** @jsx jsx */
48
- function isValidDate(dateString) {
49
- return !isNaN(new Date(dateString).getTime());
50
- }
51
- function isValidMomentDate(dateString, locale, timezone) {
52
- return _momentTimezone.default.tz(dateString, [_momentTimezone.default.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], locale, true, timezone).isValid();
47
+ function parseLocaleDate(dateString = '', locale, timeZone) {
48
+ // This function may seem complicated but it basically does one thing:
49
+ // Given a dateString, a locale and a timeZone. The dateString is assumed to be formatted according
50
+ // to the locale. So if the locale is `en-us` the dateString is expected to be in the format of M/D/YYYY.
51
+ // The dateString is also assumed to be in the given timeZone, so "1/1/2020" in "America/Los_Angeles" timezone is
52
+ // expected to be "2020-01-01T08:00:00.000Z" in UTC time.
53
+ // This function tries to parse the dateString taking these variables into account and return a javascript Date object
54
+ // that is adjusted to be in UTC.
55
+
56
+ // Split string on '.', whitespace, '/', ',' or '-' using regex: /[.\s/.-]+/.
57
+ // The '+' allows splitting on consecutive delimiters.
58
+ // `.filter(Boolean)` is needed because some locales have a delimeter at the end (e.g.: hungarian dates are formatted as `2024. 09. 19.`)
59
+ const splitDate = dateString.split(/[,.\s/.-]+/).filter(Boolean);
60
+
61
+ // create a locale formatted new date to later extract the order and delimeter information
62
+ const localeDate = new Intl.DateTimeFormat(locale).formatToParts(new Date());
63
+ let index = 0;
64
+ let day, month, year;
65
+ localeDate.forEach(part => {
66
+ if (part.type === 'month') {
67
+ month = parseInt(splitDate[index], 10);
68
+ index++;
69
+ } else if (part.type === 'day') {
70
+ day = parseInt(splitDate[index], 10);
71
+ index++;
72
+ } else if (part.type === 'year') {
73
+ year = parseInt(splitDate[index], 10);
74
+ index++;
75
+ }
76
+ });
77
+
78
+ // sensible limitations
79
+ if (!year || !month || !day || year < 1000 || year > 9999) return null;
80
+
81
+ // create utc date from year, month (zero indexed) and day
82
+ const date = new Date(Date.UTC(year, month - 1, day));
83
+ if (date.getMonth() !== month - 1 || date.getDate() !== day) {
84
+ // Check if the Date object adjusts the values. If it does, the input is invalid.
85
+ return null;
86
+ }
87
+
88
+ // Format date string in the provided timezone. The locale here is irrelevant, we only care about how to time is adjusted for the timezone.
89
+ const parts = new Intl.DateTimeFormat('en-US', {
90
+ timeZone,
91
+ year: 'numeric',
92
+ month: '2-digit',
93
+ day: '2-digit',
94
+ hour: '2-digit',
95
+ minute: '2-digit',
96
+ second: '2-digit',
97
+ hour12: false
98
+ }).formatToParts(date);
99
+
100
+ // Extract the date and time parts from the formatted string
101
+ const dateStringInTimezone = parts.reduce((acc, part) => {
102
+ return part.type === 'literal' ? acc : {
103
+ ...acc,
104
+ [part.type]: part.value
105
+ };
106
+ }, {});
107
+
108
+ // Create a date string in the format 'YYYY-MM-DDTHH:mm:ss'
109
+ const dateInTimezone = `${dateStringInTimezone.year}-${dateStringInTimezone.month}-${dateStringInTimezone.day}T${dateStringInTimezone.hour}:${dateStringInTimezone.minute}:${dateStringInTimezone.second}`;
110
+
111
+ // Calculate time difference for timezone offset
112
+ const timeDiff = new Date(dateInTimezone + 'Z').getTime() - date.getTime();
113
+ const utcTime = new Date(date.getTime() - timeDiff);
114
+ // Return the UTC Date corresponding to the time in the specified timezone
115
+ return utcTime;
53
116
  }
54
117
 
55
118
  /**
56
119
  ---
57
120
  category: components
58
121
  ---
122
+
123
+ @module experimental
59
124
  **/
60
125
  const DateInput2 = ({
61
126
  renderLabel,
62
127
  screenReaderLabels,
63
128
  isRequired = false,
64
129
  interaction = 'enabled',
65
- size = 'medium',
66
130
  isInline = false,
67
131
  value,
68
132
  messages,
@@ -70,69 +134,23 @@ const DateInput2 = ({
70
134
  onChange,
71
135
  onBlur,
72
136
  withYearPicker,
73
- onRequestValidateDate,
74
137
  invalidDateErrorMessage,
75
138
  locale,
76
139
  timezone,
77
140
  placeholder,
141
+ dateFormat,
142
+ onRequestValidateDate,
143
+ // margin, TODO enable this prop
78
144
  ...rest
79
145
  }) => {
80
- const _useState = (0, _react.useState)(''),
81
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
82
- selectedDate = _useState2[0],
83
- setSelectedDate = _useState2[1];
84
- const _useState3 = (0, _react.useState)(messages || []),
85
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
86
- inputMessages = _useState4[0],
87
- setInputMessages = _useState4[1];
88
- const _useState5 = (0, _react.useState)(false),
89
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
90
- showPopover = _useState6[0],
91
- setShowPopover = _useState6[1];
92
146
  const localeContext = (0, _react.useContext)(_ApplyLocaleContext.ApplyLocaleContext);
93
- (0, _react.useEffect)(() => {
94
- validateInput(true);
95
- }, [value]);
96
- (0, _react.useEffect)(() => {
97
- setInputMessages(messages || []);
98
- }, [messages]);
99
- const handleInputChange = (e, value) => {
100
- onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
101
- };
102
- const handleDateSelected = (dateString, _momentDate, e) => {
103
- const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
104
- month: 'long',
105
- year: 'numeric',
106
- day: 'numeric',
107
- timeZone: getTimezone()
108
- });
109
- handleInputChange(e, formattedDate);
110
- setShowPopover(false);
111
- onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(formattedDate, true);
112
- };
113
- const validateInput = (onlyRemoveError = false) => {
114
- // TODO `isValidDate` and `isValidMomentDate` basically have the same functionality but the latter is a bit more strict (e.g.: `33` is only valid in `isValidMomentDate`)
115
- // in the future we should get rid of moment but currently Calendar is using it for validation too so we can only remove it simultaneously
116
- // otherwise DateInput could pass invalid dates to Calendar and break it
117
- if (isValidDate(value || '') && isValidMomentDate(value || '', getLocale(), getTimezone()) || value === '') {
118
- setSelectedDate(value || '');
119
- setInputMessages(messages || []);
120
- return true;
121
- }
122
- if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
123
- setInputMessages(messages => [{
124
- type: 'error',
125
- text: invalidDateErrorMessage
126
- }, ...messages]);
127
- }
128
- return false;
129
- };
130
147
  const getLocale = () => {
131
148
  if (locale) {
132
149
  return locale;
133
150
  } else if (localeContext.locale) {
134
151
  return localeContext.locale;
135
152
  }
153
+ // default to the system's locale
136
154
  return _Locale.Locale.browserLocale();
137
155
  };
138
156
  const getTimezone = () => {
@@ -144,29 +162,111 @@ const DateInput2 = ({
144
162
  // default to the system's timezone
145
163
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
146
164
  };
165
+ const _useState = (0, _react.useState)(messages || []),
166
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
167
+ inputMessages = _useState2[0],
168
+ setInputMessages = _useState2[1];
169
+ const _useState3 = (0, _react.useState)(false),
170
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
171
+ showPopover = _useState4[0],
172
+ setShowPopover = _useState4[1];
173
+ (0, _react.useEffect)(() => {
174
+ // don't set input messages if there is an error set already
175
+ if (!inputMessages) {
176
+ setInputMessages(messages || []);
177
+ }
178
+ }, [messages]);
179
+ (0, _react.useEffect)(() => {
180
+ const _parseDate = parseDate(value),
181
+ _parseDate2 = (0, _slicedToArray2.default)(_parseDate, 2),
182
+ utcIsoDate = _parseDate2[1];
183
+ // clear error messages if date becomes valid
184
+ if (utcIsoDate || !value) {
185
+ setInputMessages(messages || []);
186
+ }
187
+ }, [value]);
188
+ const parseDate = (dateString = '') => {
189
+ let date = null;
190
+ if (dateFormat) {
191
+ if (typeof dateFormat === 'string') {
192
+ // use dateFormat instead of the user locale
193
+ date = parseLocaleDate(dateString, dateFormat, getTimezone());
194
+ } else if (dateFormat.parser) {
195
+ date = dateFormat.parser(dateString);
196
+ }
197
+ } else {
198
+ // no dateFormat prop passed, use locale for formatting
199
+ date = parseLocaleDate(dateString, getLocale(), getTimezone());
200
+ }
201
+ return date ? [formatDate(date), date.toISOString()] : ['', ''];
202
+ };
203
+ const formatDate = date => {
204
+ // use formatter function if provided
205
+ if (typeof dateFormat !== 'string' && dateFormat !== null && dateFormat !== void 0 && dateFormat.formatter) {
206
+ return dateFormat.formatter(date);
207
+ }
208
+ // if dateFormat set to a locale, use that, otherwise default to the user's locale
209
+ return date.toLocaleDateString(typeof dateFormat === 'string' ? dateFormat : getLocale(), {
210
+ timeZone: getTimezone(),
211
+ calendar: 'gregory',
212
+ numberingSystem: 'latn'
213
+ });
214
+ };
215
+ const getDateFromatHint = () => {
216
+ const exampleDate = new Date('2024-09-01');
217
+ const formattedDate = formatDate(exampleDate);
218
+
219
+ // Create a regular expression to find the exact match of the number
220
+ const regex = n => {
221
+ return new RegExp(`(?<!\\d)0*${n}(?!\\d)`, 'g');
222
+ };
223
+
224
+ // Replace the matched number with the same number of dashes
225
+ const year = `${exampleDate.getFullYear()}`;
226
+ const month = `${exampleDate.getMonth() + 1}`;
227
+ const day = `${exampleDate.getDate()}`;
228
+ return formattedDate.replace(regex(year), match => 'Y'.repeat(match.length)).replace(regex(month), match => 'M'.repeat(match.length)).replace(regex(day), match => 'D'.repeat(match.length));
229
+ };
230
+ const handleInputChange = (e, newValue) => {
231
+ const _parseDate3 = parseDate(newValue),
232
+ _parseDate4 = (0, _slicedToArray2.default)(_parseDate3, 2),
233
+ utcIsoDate = _parseDate4[1];
234
+ onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, utcIsoDate);
235
+ };
236
+ const handleDateSelected = (dateString, _momentDate, e) => {
237
+ setShowPopover(false);
238
+ const newValue = formatDate(new Date(dateString));
239
+ onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, dateString);
240
+ onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, newValue, dateString);
241
+ };
147
242
  const handleBlur = e => {
148
- const isInputValid = validateInput(false);
149
- if (isInputValid && value) {
150
- const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
151
- month: 'long',
152
- year: 'numeric',
153
- day: 'numeric',
154
- timeZone: getTimezone()
155
- });
156
- handleInputChange(e, formattedDate);
243
+ const _parseDate5 = parseDate(value),
244
+ _parseDate6 = (0, _slicedToArray2.default)(_parseDate5, 2),
245
+ localeDate = _parseDate6[0],
246
+ utcIsoDate = _parseDate6[1];
247
+ if (localeDate) {
248
+ if (localeDate !== value) {
249
+ onChange === null || onChange === void 0 ? void 0 : onChange(e, localeDate, utcIsoDate);
250
+ }
251
+ } else if (value && invalidDateErrorMessage) {
252
+ setInputMessages([{
253
+ type: 'error',
254
+ text: invalidDateErrorMessage
255
+ }]);
157
256
  }
158
- onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, isInputValid);
159
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
257
+ onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, value || '', utcIsoDate);
258
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
160
259
  };
260
+ const selectedDate = parseDate(value)[1];
161
261
  return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
262
+ // margin={'large'} TODO add this prop to TextInput
162
263
  renderLabel: renderLabel,
163
264
  onChange: handleInputChange,
164
265
  onBlur: handleBlur,
165
266
  isRequired: isRequired,
166
267
  value: value,
167
- placeholder: placeholder,
268
+ placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFromatHint(),
168
269
  width: width,
169
- size: size,
170
270
  display: isInline ? 'inline-block' : 'block',
171
271
  messages: inputMessages,
172
272
  interaction: interaction,
@@ -176,7 +276,6 @@ const DateInput2 = ({
176
276
  withBorder: false,
177
277
  screenReaderLabel: screenReaderLabels.calendarIcon,
178
278
  shape: "circle",
179
- size: size,
180
279
  interaction: interaction
181
280
  }, _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, null))),
182
281
  isShowingContent: showPopover,
@@ -191,8 +290,8 @@ const DateInput2 = ({
191
290
  onDateSelected: handleDateSelected,
192
291
  selectedDate: selectedDate,
193
292
  visibleMonth: selectedDate,
194
- locale: locale,
195
- timezone: timezone,
293
+ locale: getLocale(),
294
+ timezone: getTimezone(),
196
295
  role: "listbox",
197
296
  renderNextMonthButton: (0, _emotion.jsx)(_IconButton.IconButton, {
198
297
  size: "small",