@instructure/ui-date-input 9.5.2-snapshot-7 → 9.5.2

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.5.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-7) (2024-07-31)
+## [9.5.2](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2) (2024-08-05)
 
-**Note:** Version bump only for package @instructure/ui-date-input
+
+### Bug Fixes
+
+* **ui-calendar,ui-date-input:** fix year picker for non latin based locales; return iso date string in onRequestValidateDate ([d7df0e8](https://github.com/instructure/instructure-ui/commit/d7df0e8d9fc0656e877bd243d9858dc3e5a47198))
 
 
 

package/es/DateInput2/index.js

@@ -26,7 +26,6 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
 
 /** @jsx jsx */
 import { useState, useEffect, useContext } from 'react';
-import moment from 'moment-timezone';
 import { Calendar } from '@instructure/ui-calendar';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconCalendarMonthLine, IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
@@ -36,11 +35,10 @@ import { passthroughProps } from '@instructure/ui-react-utils';
 import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
 import { jsx } from '@instructure/emotion';
 import { propTypes } from './props';
-function isValidDate(dateString) {
-  return !isNaN(new Date(dateString).getTime());
-}
-function isValidMomentDate(dateString, locale, timezone) {
-  return moment.tz(dateString, [moment.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], locale, true, timezone).isValid();
+function parseDate(dateString) {
+  const date = new Date(dateString);
+  // return empty string if not a valid date
+  return isNaN(date.getTime()) ? '' : date.toISOString();
 }
 
 /**
@@ -82,6 +80,8 @@ const DateInput2 = ({
     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(() => {
@@ -89,6 +89,10 @@ const DateInput2 = ({
   }, [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));
+    }
   };
   const handleDateSelected = (dateString, _momentDate, e) => {
     const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
@@ -98,23 +102,24 @@ const DateInput2 = ({
       timeZone: getTimezone()
     });
     handleInputChange(e, formattedDate);
+    setSelectedDate(dateString);
     setShowPopover(false);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(formattedDate, true);
+    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) => {
-    // 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`)
-    // 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
-    // otherwise DateInput could pass invalid dates to Calendar and break it
-    if (isValidDate(value || '') && isValidMomentDate(value || '', getLocale(), getTimezone()) || value === '') {
-      setSelectedDate(value || '');
+    // don't validate empty input
+    if (!value || parseDate(value) || selectedDate) {
       setInputMessages(messages || []);
       return true;
     }
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
-      setInputMessages(messages => [{
+    // only show error if there is no user provided validation callback
+    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string' && !onRequestValidateDate) {
+      setInputMessages([{
         type: 'error',
         text: invalidDateErrorMessage
-      }, ...messages]);
+      }]);
     }
     return false;
   };
@@ -137,8 +142,8 @@ const DateInput2 = ({
   };
   const handleBlur = e => {
     const isInputValid = validateInput(false);
-    if (isInputValid && value) {
-      const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
+    if (isInputValid && selectedDate) {
+      const formattedDate = new Date(selectedDate).toLocaleDateString(getLocale(), {
         month: 'long',
         year: 'numeric',
         day: 'numeric',

package/lib/DateInput2/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DateInput2 = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
 var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
 var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
@@ -45,11 +44,10 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
  * SOFTWARE.
  */
 /** @jsx jsx */
-function isValidDate(dateString) {
-  return !isNaN(new Date(dateString).getTime());
-}
-function isValidMomentDate(dateString, locale, timezone) {
-  return _momentTimezone.default.tz(dateString, [_momentTimezone.default.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], locale, true, timezone).isValid();
+function parseDate(dateString) {
+  const date = new Date(dateString);
+  // return empty string if not a valid date
+  return isNaN(date.getTime()) ? '' : date.toISOString();
 }
 
 /**
@@ -91,6 +89,8 @@ const DateInput2 = ({
     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)(() => {
@@ -98,6 +98,10 @@ const DateInput2 = ({
   }, [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));
+    }
   };
   const handleDateSelected = (dateString, _momentDate, e) => {
     const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
@@ -107,23 +111,24 @@ const DateInput2 = ({
       timeZone: getTimezone()
     });
     handleInputChange(e, formattedDate);
+    setSelectedDate(dateString);
     setShowPopover(false);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(formattedDate, true);
+    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) => {
-    // 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`)
-    // 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
-    // otherwise DateInput could pass invalid dates to Calendar and break it
-    if (isValidDate(value || '') && isValidMomentDate(value || '', getLocale(), getTimezone()) || value === '') {
-      setSelectedDate(value || '');
+    // don't validate empty input
+    if (!value || parseDate(value) || selectedDate) {
       setInputMessages(messages || []);
       return true;
     }
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
-      setInputMessages(messages => [{
+    // only show error if there is no user provided validation callback
+    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string' && !onRequestValidateDate) {
+      setInputMessages([{
         type: 'error',
         text: invalidDateErrorMessage
-      }, ...messages]);
+      }]);
     }
     return false;
   };
@@ -146,8 +151,8 @@ const DateInput2 = ({
   };
   const handleBlur = e => {
     const isInputValid = validateInput(false);
-    if (isInputValid && value) {
-      const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
+    if (isInputValid && selectedDate) {
+      const formattedDate = new Date(selectedDate).toLocaleDateString(getLocale(), {
         month: 'long',
         year: 'numeric',
         day: 'numeric',

package/package.json

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

package/src/DateInput2/index.tsx

@@ -25,7 +25,6 @@
 /** @jsx jsx */
 import { useState, useEffect, useContext } from 'react'
 import type { SyntheticEvent } from 'react'
-import moment from 'moment-timezone'
 import { Calendar } from '@instructure/ui-calendar'
 import { IconButton } from '@instructure/ui-buttons'
 import {
@@ -43,25 +42,12 @@ import { jsx } from '@instructure/emotion'
 import { propTypes } from './props'
 import type { DateInput2Props } from './props'
 import type { FormMessage } from '@instructure/ui-form-field'
+import type { Moment } from '@instructure/ui-i18n'
 
-function isValidDate(dateString: string): boolean {
-  return !isNaN(new Date(dateString).getTime())
-}
-
-function isValidMomentDate(
-  dateString: string,
-  locale: string,
-  timezone: string
-): boolean {
-  return moment
-    .tz(
-      dateString,
-      [moment.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'],
-      locale,
-      true,
-      timezone
-    )
-    .isValid()
+function parseDate(dateString: string): string {
+  const date = new Date(dateString)
+  // return empty string if not a valid date
+  return isNaN(date.getTime()) ? '' : date.toISOString()
 }
 
 /**
@@ -97,6 +83,8 @@ const DateInput2 = ({
   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])
 
@@ -106,11 +94,15 @@ const DateInput2 = ({
 
   const handleInputChange = (e: SyntheticEvent, value: string) => {
     onChange?.(e, value)
+    // blur event formats the input which should trigger parsing
+    if (e.type !== 'blur') {
+      setSelectedDate(parseDate(value))
+    }
   }
 
   const handleDateSelected = (
     dateString: string,
-    _momentDate: any, // real type is Moment but used `any` to avoid importing the moment lib
+    _momentDate: Moment,
     e: SyntheticEvent
   ) => {
     const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
@@ -120,30 +112,29 @@ const DateInput2 = ({
       timeZone: getTimezone()
     })
     handleInputChange(e, formattedDate)
+    setSelectedDate(dateString)
     setShowPopover(false)
-    onRequestValidateDate?.(formattedDate, true)
+    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): boolean => {
-    // 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`)
-    // 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
-    // otherwise DateInput could pass invalid dates to Calendar and break it
-    if (
-      (isValidDate(value || '') &&
-        isValidMomentDate(value || '', getLocale(), getTimezone())) ||
-      value === ''
-    ) {
-      setSelectedDate(value || '')
+    // don't validate empty input
+    if (!value || parseDate(value) || selectedDate) {
       setInputMessages(messages || [])
       return true
     }
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
-      setInputMessages((messages) => [
+    // only show error if there is no user provided validation callback
+    if (
+      !onlyRemoveError &&
+      typeof invalidDateErrorMessage === 'string' &&
+      !onRequestValidateDate
+    ) {
+      setInputMessages([
         {
           type: 'error',
           text: invalidDateErrorMessage
-        },
-        ...messages
+        }
       ])
     }
 
@@ -171,13 +162,16 @@ const DateInput2 = ({
 
   const handleBlur = (e: SyntheticEvent) => {
     const isInputValid = validateInput(false)
-    if (isInputValid && value) {
-      const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
-        month: 'long',
-        year: 'numeric',
-        day: 'numeric',
-        timeZone: getTimezone()
-      })
+    if (isInputValid && selectedDate) {
+      const formattedDate = new Date(selectedDate).toLocaleDateString(
+        getLocale(),
+        {
+          month: 'long',
+          year: 'numeric',
+          day: 'numeric',
+          timeZone: getTimezone()
+        }
+      )
       handleInputChange(e, formattedDate)
     }
     onRequestValidateDate?.(value, isInputValid)

package/src/DateInput2/props.ts

@@ -23,14 +23,14 @@
  */
 
 import PropTypes from 'prop-types'
-import type { SyntheticEvent } from 'react'
+import type { SyntheticEvent, InputHTMLAttributes } from 'react'
 
 import { controllable } from '@instructure/ui-prop-types'
 import { FormPropTypes } from '@instructure/ui-form-field'
 import type { FormMessage } from '@instructure/ui-form-field'
-import type { Renderable, PropValidators } from '@instructure/shared-types'
+import type { OtherHTMLAttributes, Renderable, PropValidators } from '@instructure/shared-types'
 
-type DateInput2Props = {
+type DateInput2OwnProps = {
   /**
    * Specifies the input label.
    */
@@ -159,7 +159,13 @@ type DateInput2Props = {
   }
 }
 
-type PropKeys = keyof DateInput2Props
+type PropKeys = keyof DateInput2OwnProps
+
+type DateInput2Props = DateInput2OwnProps &
+  OtherHTMLAttributes<
+    DateInput2OwnProps,
+    InputHTMLAttributes<DateInput2OwnProps & Element>
+  >
 
 const propTypes: PropValidators<PropKeys> = {
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,

package/src/index.ts

@@ -25,3 +25,4 @@
 export { DateInput } from './DateInput'
 export { DateInput2 } from './DateInput2'
 export type { DateInputProps } from './DateInput/props'
+export type { DateInput2Props } from './DateInput2/props'