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

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.6.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v9.6.0...v9.6.1-snapshot-2) (2024-09-06)
+
+
+### Features
+
+* **ui-date-input:** improve DateInput2 api, extend docs ([42c83a2](https://github.com/instructure/instructure-ui/commit/42c83a240434dd52233c482292caa556babb5c3a))
+
+
+
+
+
+# [9.6.0](https://github.com/instructure/instructure-ui/compare/v9.5.2...v9.6.0) (2024-08-14)
+
+
+### Features
+
+* **ui-calendar,ui-date-input:** improve DateInput2 onChange callback, add date formatting option, extend docs ([4e2c23c](https://github.com/instructure/instructure-ui/commit/4e2c23c3288885e49030f1f471d61b2fed29b54c))
+
+
+
+
+
 ## [9.5.2](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2) (2024-08-05)
 
 

package/es/DateInput2/index.js

@@ -35,16 +35,53 @@ import { passthroughProps } from '@instructure/ui-react-utils';
 import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
 import { jsx } from '@instructure/emotion';
 import { propTypes } from './props';
-function parseDate(dateString) {
+/*
+ * 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 '';
+  }
+
+  // Create a Date object from the input date string
   const date = new Date(dateString);
-  // return empty string if not a valid date
-  return isNaN(date.getTime()) ? '' : date.toISOString();
+
+  // Check if the date is valid
+  if (isNaN(date.getTime())) {
+    return '';
+  }
+
+  // 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',
+    year: 'numeric',
+    day: 'numeric',
+    timeZone: timezone
+  });
 }
 
 /**
 ---
 category: components
 ---
+
+@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
@@ -64,12 +101,33 @@ const DateInput2 = ({
   locale,
   timezone,
   placeholder,
+  formatDate = defaultDateFormatter,
+  // margin, TODO enable this prop
   ...rest
 }) => {
-  const _useState = useState(''),
+  const localeContext = useContext(ApplyLocaleContext);
+  const getLocale = () => {
+    if (locale) {
+      return locale;
+    } else if (localeContext.locale) {
+      return localeContext.locale;
+    }
+    // default to the system's locale
+    return Locale.browserLocale();
+  };
+  const getTimezone = () => {
+    if (timezone) {
+      return timezone;
+    } else if (localeContext.timezone) {
+      return localeContext.timezone;
+    }
+    // default to the system's timezone
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  };
+  const _useState = useState(value ? formatDate(value, getLocale(), getTimezone()) : ''),
     _useState2 = _slicedToArray(_useState, 2),
-    selectedDate = _useState2[0],
-    setSelectedDate = _useState2[1];
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
   const _useState3 = useState(messages || []),
     _useState4 = _slicedToArray(_useState3, 2),
     inputMessages = _useState4[0],
@@ -78,39 +136,29 @@ const DateInput2 = ({
     _useState6 = _slicedToArray(_useState5, 2),
     showPopover = _useState6[0],
     setShowPopover = _useState6[1];
-  const localeContext = useContext(ApplyLocaleContext);
-  useEffect(() => {
-    // when `value` is changed, validation runs again and removes the error message if validation passes
-    // but it's NOT adding error message if validation fails for better UX
-    validateInput(true);
-  }, [value]);
   useEffect(() => {
     setInputMessages(messages || []);
   }, [messages]);
-  const handleInputChange = (e, value) => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
-    // blur event formats the input which should trigger parsing
-    if (e.type !== 'blur') {
-      setSelectedDate(parseDate(value));
-    }
+  useEffect(() => {
+    validateInput(true);
+  }, [inputValue]);
+  const handleInputChange = (e, newValue) => {
+    setInputValue(newValue);
+    const parsedInput = timezoneDateToUtc(newValue, getTimezone());
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, parsedInput, newValue);
   };
   const handleDateSelected = (dateString, _momentDate, e) => {
-    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      timeZone: getTimezone()
-    });
-    handleInputChange(e, formattedDate);
-    setSelectedDate(dateString);
+    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);
   };
 
   // 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 (!value || parseDate(value) || selectedDate) {
+    if (!inputValue || timezoneDateToUtc(inputValue, getTimezone()) || value) {
       setInputMessages(messages || []);
       return true;
     }
@@ -123,43 +171,25 @@ const DateInput2 = ({
     }
     return false;
   };
-  const getLocale = () => {
-    if (locale) {
-      return locale;
-    } else if (localeContext.locale) {
-      return localeContext.locale;
-    }
-    return Locale.browserLocale();
-  };
-  const getTimezone = () => {
-    if (timezone) {
-      return timezone;
-    } else if (localeContext.timezone) {
-      return localeContext.timezone;
-    }
-    // default to the system's timezone
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  };
   const handleBlur = e => {
-    const isInputValid = validateInput(false);
-    if (isInputValid && selectedDate) {
-      const formattedDate = new Date(selectedDate).toLocaleDateString(getLocale(), {
-        month: 'long',
-        year: 'numeric',
-        day: 'numeric',
-        timeZone: getTimezone()
-      });
-      handleInputChange(e, formattedDate);
+    if (value) {
+      const formattedDate = formatDate(value, getLocale(), getTimezone());
+      if (formattedDate !== inputValue) {
+        setInputValue(formattedDate);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, value, formattedDate);
+      }
     }
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, isInputValid);
+    validateInput(false);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, !!value);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   };
   return jsx(TextInput, Object.assign({}, passthroughProps(rest), {
+    // margin={'large'} TODO add this prop to TextInput
     renderLabel: renderLabel,
     onChange: handleInputChange,
     onBlur: handleBlur,
     isRequired: isRequired,
-    value: value,
+    value: inputValue,
     placeholder: placeholder,
     width: width,
     size: size,
@@ -185,10 +215,10 @@ const DateInput2 = ({
     }, jsx(Calendar, {
       withYearPicker: withYearPicker,
       onDateSelected: handleDateSelected,
-      selectedDate: selectedDate,
-      visibleMonth: selectedDate,
-      locale: locale,
-      timezone: timezone,
+      selectedDate: value,
+      visibleMonth: value,
+      locale: getLocale(),
+      timezone: getTimezone(),
       role: "listbox",
       renderNextMonthButton: jsx(IconButton, {
         size: "small",

package/es/DateInput2/props.js

@@ -38,12 +38,11 @@ const propTypes = {
   isInline: PropTypes.bool,
   width: PropTypes.string,
   messages: PropTypes.arrayOf(FormPropTypes.message),
-  onRequestShowCalendar: PropTypes.func,
-  onRequestHideCalendar: PropTypes.func,
   onRequestValidateDate: PropTypes.func,
   invalidDateErrorMessage: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   locale: PropTypes.string,
   timezone: PropTypes.string,
-  withYearPicker: PropTypes.object
+  withYearPicker: PropTypes.object,
+  formatDate: PropTypes.func
 };
 export { propTypes };

package/lib/DateInput2/index.js

@@ -44,16 +44,53 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
  * SOFTWARE.
  */
 /** @jsx jsx */
-function parseDate(dateString) {
+/*
+ * 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 '';
+  }
+
+  // Create a Date object from the input date string
   const date = new Date(dateString);
-  // return empty string if not a valid date
-  return isNaN(date.getTime()) ? '' : date.toISOString();
+
+  // Check if the date is valid
+  if (isNaN(date.getTime())) {
+    return '';
+  }
+
+  // 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',
+    year: 'numeric',
+    day: 'numeric',
+    timeZone: timezone
+  });
 }
 
 /**
 ---
 category: components
 ---
+
+@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
@@ -73,12 +110,33 @@ const DateInput2 = ({
   locale,
   timezone,
   placeholder,
+  formatDate = defaultDateFormatter,
+  // margin, TODO enable this prop
   ...rest
 }) => {
-  const _useState = (0, _react.useState)(''),
+  const localeContext = (0, _react.useContext)(_ApplyLocaleContext.ApplyLocaleContext);
+  const getLocale = () => {
+    if (locale) {
+      return locale;
+    } else if (localeContext.locale) {
+      return localeContext.locale;
+    }
+    // default to the system's locale
+    return _Locale.Locale.browserLocale();
+  };
+  const getTimezone = () => {
+    if (timezone) {
+      return timezone;
+    } else if (localeContext.timezone) {
+      return localeContext.timezone;
+    }
+    // default to the system's timezone
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  };
+  const _useState = (0, _react.useState)(value ? formatDate(value, getLocale(), getTimezone()) : ''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    selectedDate = _useState2[0],
-    setSelectedDate = _useState2[1];
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
   const _useState3 = (0, _react.useState)(messages || []),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     inputMessages = _useState4[0],
@@ -87,39 +145,29 @@ const DateInput2 = ({
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     showPopover = _useState6[0],
     setShowPopover = _useState6[1];
-  const localeContext = (0, _react.useContext)(_ApplyLocaleContext.ApplyLocaleContext);
-  (0, _react.useEffect)(() => {
-    // when `value` is changed, validation runs again and removes the error message if validation passes
-    // but it's NOT adding error message if validation fails for better UX
-    validateInput(true);
-  }, [value]);
   (0, _react.useEffect)(() => {
     setInputMessages(messages || []);
   }, [messages]);
-  const handleInputChange = (e, value) => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
-    // blur event formats the input which should trigger parsing
-    if (e.type !== 'blur') {
-      setSelectedDate(parseDate(value));
-    }
+  (0, _react.useEffect)(() => {
+    validateInput(true);
+  }, [inputValue]);
+  const handleInputChange = (e, newValue) => {
+    setInputValue(newValue);
+    const parsedInput = timezoneDateToUtc(newValue, getTimezone());
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, parsedInput, newValue);
   };
   const handleDateSelected = (dateString, _momentDate, e) => {
-    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      timeZone: getTimezone()
-    });
-    handleInputChange(e, formattedDate);
-    setSelectedDate(dateString);
+    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);
   };
 
   // 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 (!value || parseDate(value) || selectedDate) {
+    if (!inputValue || timezoneDateToUtc(inputValue, getTimezone()) || value) {
       setInputMessages(messages || []);
       return true;
     }
@@ -132,43 +180,25 @@ const DateInput2 = ({
     }
     return false;
   };
-  const getLocale = () => {
-    if (locale) {
-      return locale;
-    } else if (localeContext.locale) {
-      return localeContext.locale;
-    }
-    return _Locale.Locale.browserLocale();
-  };
-  const getTimezone = () => {
-    if (timezone) {
-      return timezone;
-    } else if (localeContext.timezone) {
-      return localeContext.timezone;
-    }
-    // default to the system's timezone
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  };
   const handleBlur = e => {
-    const isInputValid = validateInput(false);
-    if (isInputValid && selectedDate) {
-      const formattedDate = new Date(selectedDate).toLocaleDateString(getLocale(), {
-        month: 'long',
-        year: 'numeric',
-        day: 'numeric',
-        timeZone: getTimezone()
-      });
-      handleInputChange(e, formattedDate);
+    if (value) {
+      const formattedDate = formatDate(value, getLocale(), getTimezone());
+      if (formattedDate !== inputValue) {
+        setInputValue(formattedDate);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, value, formattedDate);
+      }
     }
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, isInputValid);
+    validateInput(false);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, !!value);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   };
   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: value,
+    value: inputValue,
     placeholder: placeholder,
     width: width,
     size: size,
@@ -194,10 +224,10 @@ const DateInput2 = ({
     }, (0, _emotion.jsx)(_Calendar.Calendar, {
       withYearPicker: withYearPicker,
       onDateSelected: handleDateSelected,
-      selectedDate: selectedDate,
-      visibleMonth: selectedDate,
-      locale: locale,
-      timezone: timezone,
+      selectedDate: value,
+      visibleMonth: value,
+      locale: getLocale(),
+      timezone: getTimezone(),
       role: "listbox",
       renderNextMonthButton: (0, _emotion.jsx)(_IconButton.IconButton, {
         size: "small",

package/lib/DateInput2/props.js

@@ -45,11 +45,10 @@ const propTypes = exports.propTypes = {
   isInline: _propTypes.default.bool,
   width: _propTypes.default.string,
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-  onRequestShowCalendar: _propTypes.default.func,
-  onRequestHideCalendar: _propTypes.default.func,
   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
+  withYearPicker: _propTypes.default.object,
+  formatDate: _propTypes.default.func
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "9.5.2",
+  "version": "9.6.1-snapshot-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.5.2",
-    "@instructure/ui-babel-preset": "9.5.2",
-    "@instructure/ui-buttons": "9.5.2",
-    "@instructure/ui-scripts": "9.5.2",
-    "@instructure/ui-test-utils": "9.5.2",
+    "@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",
     "@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.5.2",
-    "@instructure/shared-types": "9.5.2",
-    "@instructure/ui-calendar": "9.5.2",
-    "@instructure/ui-form-field": "9.5.2",
-    "@instructure/ui-i18n": "9.5.2",
-    "@instructure/ui-icons": "9.5.2",
-    "@instructure/ui-popover": "9.5.2",
-    "@instructure/ui-position": "9.5.2",
-    "@instructure/ui-prop-types": "9.5.2",
-    "@instructure/ui-react-utils": "9.5.2",
-    "@instructure/ui-selectable": "9.5.2",
-    "@instructure/ui-testable": "9.5.2",
-    "@instructure/ui-text-input": "9.5.2",
-    "@instructure/ui-utils": "9.5.2",
+    "@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",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },