@instructure/ui-date-input 9.6.1-snapshot-2 → 9.7.2

package/lib/DateInput2/index.js

@@ -44,45 +44,75 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
  * SOFTWARE.
  */
 /** @jsx jsx */
-/*
- * Tries parsing a date in a given timezone, if it's not possible, returns an empty string
- * If parsing is successful an ISO formatted datetime string is returned in UTC timezone
- */
-function timezoneDateToUtc(dateString, timezone) {
-  // Don't try to parse short dateString, they are incomplete
-  if (dateString.length < 10) {
-    return '';
-  }
+function parseLocaleDate(dateString = '', locale, timeZone) {
+  // This function may seem complicated but it basically does one thing:
+  //   Given a dateString, a locale and a timeZone. The dateString is assumed to be formatted according
+  //   to the locale. So if the locale is `en-us` the dateString is expected to be in the format of M/D/YYYY.
+  //   The dateString is also assumed to be in the given timeZone, so "1/1/2020" in "America/Los_Angeles" timezone is
+  //   expected to be "2020-01-01T08:00:00.000Z" in UTC time.
+  //   This function tries to parse the dateString taking these variables into account and return a javascript Date object
+  //   that is adjusted to be in UTC.
+
+  // Split string on '.', whitespace, '/', ',' or '-' using regex: /[.\s/.-]+/.
+  // The '+' allows splitting on consecutive delimiters.
+  // `.filter(Boolean)` is needed because some locales have a delimeter at the end (e.g.: hungarian dates are formatted as `2024. 09. 19.`)
+  const splitDate = dateString.split(/[,.\s/.-]+/).filter(Boolean);
+
+  // create a locale formatted new date to later extract the order and delimeter information
+  const localeDate = new Intl.DateTimeFormat(locale).formatToParts(new Date());
+  let index = 0;
+  let day, month, year;
+  localeDate.forEach(part => {
+    if (part.type === 'month') {
+      month = parseInt(splitDate[index], 10);
+      index++;
+    } else if (part.type === 'day') {
+      day = parseInt(splitDate[index], 10);
+      index++;
+    } else if (part.type === 'year') {
+      year = parseInt(splitDate[index], 10);
+      index++;
+    }
+  });
 
-  // Create a Date object from the input date string
-  const date = new Date(dateString);
+  // sensible limitations
+  if (!year || !month || !day || year < 1000 || year > 9999) return null;
 
-  // Check if the date is valid
-  if (isNaN(date.getTime())) {
-    return '';
+  // create utc date from year, month (zero indexed) and day
+  const date = new Date(Date.UTC(year, month - 1, day));
+  if (date.getMonth() !== month - 1 || date.getDate() !== day) {
+    // Check if the Date object adjusts the values. If it does, the input is invalid.
+    return null;
   }
 
-  // snippet from https://stackoverflow.com/a/57842203
-  // but it might need to be improved:
-  // "This produces incorrect datetimes for several hours surrounding daylight saving times if the
-  // computer running the code is in a zone that doesn't obey the same daylight saving shifts as the target zone."
-  const utcDate = new Date(date.toLocaleString('en-US', {
-    timeZone: 'UTC'
-  }));
-  const tzDate = new Date(date.toLocaleString('en-US', {
-    timeZone: timezone
-  }));
-  const offset = utcDate.getTime() - tzDate.getTime();
-  const newDate = new Date(date.getTime() + offset);
-  return newDate.toISOString();
-}
-function defaultDateFormatter(dateString, locale, timezone) {
-  return new Date(dateString).toLocaleDateString(locale, {
-    month: 'long',
+  // Format date string in the provided timezone. The locale here is irrelevant, we only care about how to time is adjusted for the timezone.
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone,
     year: 'numeric',
-    day: 'numeric',
-    timeZone: timezone
-  });
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }).formatToParts(date);
+
+  // Extract the date and time parts from the formatted string
+  const dateStringInTimezone = parts.reduce((acc, part) => {
+    return part.type === 'literal' ? acc : {
+      ...acc,
+      [part.type]: part.value
+    };
+  }, {});
+
+  // Create a date string in the format 'YYYY-MM-DDTHH:mm:ss'
+  const dateInTimezone = `${dateStringInTimezone.year}-${dateStringInTimezone.month}-${dateStringInTimezone.day}T${dateStringInTimezone.hour}:${dateStringInTimezone.minute}:${dateStringInTimezone.second}`;
+
+  // Calculate time difference for timezone offset
+  const timeDiff = new Date(dateInTimezone + 'Z').getTime() - date.getTime();
+  const utcTime = new Date(date.getTime() - timeDiff);
+  // Return the UTC Date corresponding to the time in the specified timezone
+  return utcTime;
 }
 
 /**
@@ -97,7 +127,6 @@ const DateInput2 = ({
   screenReaderLabels,
   isRequired = false,
   interaction = 'enabled',
-  size = 'medium',
   isInline = false,
   value,
   messages,
@@ -105,12 +134,12 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
-  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
   placeholder,
-  formatDate = defaultDateFormatter,
+  dateFormat,
+  onRequestValidateDate,
   // margin, TODO enable this prop
   ...rest
 }) => {
@@ -133,75 +162,111 @@ const DateInput2 = ({
     // default to the system's timezone
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   };
-  const _useState = (0, _react.useState)(value ? formatDate(value, getLocale(), getTimezone()) : ''),
+  const _useState = (0, _react.useState)(messages || []),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
-  const _useState3 = (0, _react.useState)(messages || []),
+    inputMessages = _useState2[0],
+    setInputMessages = _useState2[1];
+  const _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    inputMessages = _useState4[0],
-    setInputMessages = _useState4[1];
-  const _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    showPopover = _useState6[0],
-    setShowPopover = _useState6[1];
+    showPopover = _useState4[0],
+    setShowPopover = _useState4[1];
   (0, _react.useEffect)(() => {
-    setInputMessages(messages || []);
+    // don't set input messages if there is an error set already
+    if (!inputMessages) {
+      setInputMessages(messages || []);
+    }
   }, [messages]);
   (0, _react.useEffect)(() => {
-    validateInput(true);
-  }, [inputValue]);
+    const _parseDate = parseDate(value),
+      _parseDate2 = (0, _slicedToArray2.default)(_parseDate, 2),
+      utcIsoDate = _parseDate2[1];
+    // clear error messages if date becomes valid
+    if (utcIsoDate || !value) {
+      setInputMessages(messages || []);
+    }
+  }, [value]);
+  const parseDate = (dateString = '') => {
+    let date = null;
+    if (dateFormat) {
+      if (typeof dateFormat === 'string') {
+        // use dateFormat instead of the user locale
+        date = parseLocaleDate(dateString, dateFormat, getTimezone());
+      } else if (dateFormat.parser) {
+        date = dateFormat.parser(dateString);
+      }
+    } else {
+      // no dateFormat prop passed, use locale for formatting
+      date = parseLocaleDate(dateString, getLocale(), getTimezone());
+    }
+    return date ? [formatDate(date), date.toISOString()] : ['', ''];
+  };
+  const formatDate = date => {
+    // use formatter function if provided
+    if (typeof dateFormat !== 'string' && dateFormat !== null && dateFormat !== void 0 && dateFormat.formatter) {
+      return dateFormat.formatter(date);
+    }
+    // if dateFormat set to a locale, use that, otherwise default to the user's locale
+    return date.toLocaleDateString(typeof dateFormat === 'string' ? dateFormat : getLocale(), {
+      timeZone: getTimezone(),
+      calendar: 'gregory',
+      numberingSystem: 'latn'
+    });
+  };
+  const getDateFromatHint = () => {
+    const exampleDate = new Date('2024-09-01');
+    const formattedDate = formatDate(exampleDate);
+
+    // Create a regular expression to find the exact match of the number
+    const regex = n => {
+      return new RegExp(`(?<!\\d)0*${n}(?!\\d)`, 'g');
+    };
+
+    // Replace the matched number with the same number of dashes
+    const year = `${exampleDate.getFullYear()}`;
+    const month = `${exampleDate.getMonth() + 1}`;
+    const day = `${exampleDate.getDate()}`;
+    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));
+  };
   const handleInputChange = (e, newValue) => {
-    setInputValue(newValue);
-    const parsedInput = timezoneDateToUtc(newValue, getTimezone());
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, parsedInput, newValue);
+    const _parseDate3 = parseDate(newValue),
+      _parseDate4 = (0, _slicedToArray2.default)(_parseDate3, 2),
+      utcIsoDate = _parseDate4[1];
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, utcIsoDate);
   };
   const handleDateSelected = (dateString, _momentDate, e) => {
-    const formattedDate = formatDate(dateString, getLocale(), getTimezone());
-    setInputValue(formattedDate);
     setShowPopover(false);
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, dateString, formattedDate);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(dateString, true);
+    const newValue = formatDate(new Date(dateString));
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, dateString);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, newValue, dateString);
   };
-
-  // onlyRemoveError is used to remove the error msg immediately when the user inputs a valid date (and don't wait for blur event)
-  const validateInput = (onlyRemoveError = false) => {
-    // don't validate empty input
-    if (!inputValue || timezoneDateToUtc(inputValue, getTimezone()) || value) {
-      setInputMessages(messages || []);
-      return true;
-    }
-    // only show error if there is no user provided validation callback
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string' && !onRequestValidateDate) {
+  const handleBlur = e => {
+    const _parseDate5 = parseDate(value),
+      _parseDate6 = (0, _slicedToArray2.default)(_parseDate5, 2),
+      localeDate = _parseDate6[0],
+      utcIsoDate = _parseDate6[1];
+    if (localeDate) {
+      if (localeDate !== value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, localeDate, utcIsoDate);
+      }
+    } else if (value && invalidDateErrorMessage) {
       setInputMessages([{
         type: 'error',
         text: invalidDateErrorMessage
       }]);
     }
-    return false;
-  };
-  const handleBlur = e => {
-    if (value) {
-      const formattedDate = formatDate(value, getLocale(), getTimezone());
-      if (formattedDate !== inputValue) {
-        setInputValue(formattedDate);
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, value, formattedDate);
-      }
-    }
-    validateInput(false);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, !!value);
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, value || '', utcIsoDate);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
   };
+  const selectedDate = parseDate(value)[1];
   return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
     // margin={'large'} TODO add this prop to TextInput
     renderLabel: renderLabel,
     onChange: handleInputChange,
     onBlur: handleBlur,
     isRequired: isRequired,
-    value: inputValue,
-    placeholder: placeholder,
+    value: value,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFromatHint(),
     width: width,
-    size: size,
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
@@ -211,7 +276,6 @@ const DateInput2 = ({
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         shape: "circle",
-        size: size,
         interaction: interaction
       }, _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, null))),
       isShowingContent: showPopover,
@@ -224,8 +288,8 @@ const DateInput2 = ({
     }, (0, _emotion.jsx)(_Calendar.Calendar, {
       withYearPicker: withYearPicker,
       onDateSelected: handleDateSelected,
-      selectedDate: value,
-      visibleMonth: value,
+      selectedDate: selectedDate,
+      visibleMonth: selectedDate,
       locale: getLocale(),
       timezone: getTimezone(),
       role: "listbox",

package/lib/DateInput2/props.js

@@ -36,7 +36,6 @@ const propTypes = exports.propTypes = {
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
   screenReaderLabels: _propTypes.default.object.isRequired,
   value: (0, _controllable.controllable)(_propTypes.default.string),
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   placeholder: _propTypes.default.string,
   onChange: _propTypes.default.func,
   onBlur: _propTypes.default.func,
@@ -45,10 +44,10 @@ const propTypes = exports.propTypes = {
   isInline: _propTypes.default.bool,
   width: _propTypes.default.string,
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-  onRequestValidateDate: _propTypes.default.func,
   invalidDateErrorMessage: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   locale: _propTypes.default.string,
   timezone: _propTypes.default.string,
   withYearPicker: _propTypes.default.object,
-  formatDate: _propTypes.default.func
+  dateFormat: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  onRequestValidateDate: _propTypes.default.func
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "9.6.1-snapshot-2",
+  "version": "9.7.2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.6.1-snapshot-2",
-    "@instructure/ui-babel-preset": "9.6.1-snapshot-2",
-    "@instructure/ui-buttons": "9.6.1-snapshot-2",
-    "@instructure/ui-scripts": "9.6.1-snapshot-2",
-    "@instructure/ui-test-utils": "9.6.1-snapshot-2",
+    "@instructure/ui-axe-check": "9.7.2",
+    "@instructure/ui-babel-preset": "9.7.2",
+    "@instructure/ui-buttons": "9.7.2",
+    "@instructure/ui-scripts": "9.7.2",
+    "@instructure/ui-test-utils": "9.7.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -35,20 +35,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.6.1-snapshot-2",
-    "@instructure/shared-types": "9.6.1-snapshot-2",
-    "@instructure/ui-calendar": "9.6.1-snapshot-2",
-    "@instructure/ui-form-field": "9.6.1-snapshot-2",
-    "@instructure/ui-i18n": "9.6.1-snapshot-2",
-    "@instructure/ui-icons": "9.6.1-snapshot-2",
-    "@instructure/ui-popover": "9.6.1-snapshot-2",
-    "@instructure/ui-position": "9.6.1-snapshot-2",
-    "@instructure/ui-prop-types": "9.6.1-snapshot-2",
-    "@instructure/ui-react-utils": "9.6.1-snapshot-2",
-    "@instructure/ui-selectable": "9.6.1-snapshot-2",
-    "@instructure/ui-testable": "9.6.1-snapshot-2",
-    "@instructure/ui-text-input": "9.6.1-snapshot-2",
-    "@instructure/ui-utils": "9.6.1-snapshot-2",
+    "@instructure/emotion": "9.7.2",
+    "@instructure/shared-types": "9.7.2",
+    "@instructure/ui-calendar": "9.7.2",
+    "@instructure/ui-form-field": "9.7.2",
+    "@instructure/ui-i18n": "9.7.2",
+    "@instructure/ui-icons": "9.7.2",
+    "@instructure/ui-popover": "9.7.2",
+    "@instructure/ui-position": "9.7.2",
+    "@instructure/ui-prop-types": "9.7.2",
+    "@instructure/ui-react-utils": "9.7.2",
+    "@instructure/ui-selectable": "9.7.2",
+    "@instructure/ui-testable": "9.7.2",
+    "@instructure/ui-text-input": "9.7.2",
+    "@instructure/ui-utils": "9.7.2",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },

package/src/DateInput/README.md

@@ -2,7 +2,7 @@
 describes: DateInput
 ---
 
-> **Important:** You can now use are updated version [`DateInput2`](/#DateInput2) which is easier to configure for developers, has a better UX, better accessibility features and a year picker. We recommend using that instead of `DateInput` which will be deprecated in the future.
+> *Note:* you can now try the updated (but still experimental) [`DateInput2`](/#DateInput2) which is easier to configure for developers, has a better UX, better accessibility features and a year picker. We recommend using that instead of `DateInput` which will be deprecated in the future.
 
 The `DateInput` component provides a visual interface for inputting date data.