@instructure/ui-date-input 9.6.0 → 10.0.1-pr-snapshot-1723800180253

package/src/DateInput2/index.tsx

@@ -25,6 +25,7 @@
 /** @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 {
@@ -42,24 +43,25 @@ 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 parseDate(dateString: string): string {
-  const date = new Date(dateString)
-  return isNaN(date.getTime()) ? '' : date.toISOString()
+function isValidDate(dateString: string): boolean {
+  return !isNaN(new Date(dateString).getTime())
 }
 
-function defaultDateFormatter(
+function isValidMomentDate(
   dateString: string,
   locale: string,
   timezone: string
-) {
-  return new Date(dateString).toLocaleDateString(locale, {
-    month: 'long',
-    year: 'numeric',
-    day: 'numeric',
-    timeZone: timezone
-  })
+): boolean {
+  return moment
+    .tz(
+      dateString,
+      [moment.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'],
+      locale,
+      true,
+      timezone
+    )
+    .isValid()
 }
 
 /**
@@ -85,8 +87,6 @@ const DateInput2 = ({
   locale,
   timezone,
   placeholder,
-  formatDate = defaultDateFormatter,
-  // margin, TODO enable this prop
   ...rest
 }: DateInput2Props) => {
   const [selectedDate, setSelectedDate] = useState<string>('')
@@ -97,8 +97,6 @@ const DateInput2 = ({
   const localeContext = useContext(ApplyLocaleContext)
 
   useEffect(() => {
-    // when `value` is changed, validation removes the error message if passes
-    // but it's NOT adding error message if validation fails for better UX
     validateInput(true)
   }, [value])
 
@@ -106,53 +104,46 @@ const DateInput2 = ({
     setInputMessages(messages || [])
   }, [messages])
 
-  useEffect(() => {
-    setSelectedDate(parseDate(value || ''))
-  }, [])
-
-  const handleInputChange = (
-    e: SyntheticEvent,
-    newValue: string,
-    parsedDate: string = ''
-  ) => {
-    // blur event formats the input which shouldn't trigger parsing
-    if (e.type !== 'blur') {
-      setSelectedDate(parseDate(newValue))
-    }
-    onChange?.(e, newValue, parsedDate)
+  const handleInputChange = (e: SyntheticEvent, value: string) => {
+    onChange?.(e, value)
   }
 
   const handleDateSelected = (
     dateString: string,
-    _momentDate: Moment,
+    _momentDate: any, // real type is Moment but used `any` to avoid importing the moment lib
     e: SyntheticEvent
   ) => {
-    const formattedDate = formatDate(dateString, getLocale(), getTimezone())
-    const parsedDate = parseDate(dateString)
-    setSelectedDate(parsedDate)
-    handleInputChange(e, formattedDate, parsedDate)
+    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
+      month: 'long',
+      year: 'numeric',
+      day: 'numeric',
+      timeZone: getTimezone()
+    })
+    handleInputChange(e, formattedDate)
     setShowPopover(false)
-    onRequestValidateDate?.(dateString, true)
+    onRequestValidateDate?.(formattedDate, 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 => {
-    // don't validate empty input
-    if (!value || parseDate(value) || selectedDate) {
+    // 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 || '')
       setInputMessages(messages || [])
       return true
     }
-    // only show error if there is no user provided validation callback
-    if (
-      !onlyRemoveError &&
-      typeof invalidDateErrorMessage === 'string' &&
-      !onRequestValidateDate
-    ) {
-      setInputMessages([
+    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
+      setInputMessages((messages) => [
         {
           type: 'error',
           text: invalidDateErrorMessage
-        }
+        },
+        ...messages
       ])
     }
 
@@ -180,9 +171,14 @@ const DateInput2 = ({
 
   const handleBlur = (e: SyntheticEvent) => {
     const isInputValid = validateInput(false)
-    if (isInputValid && selectedDate) {
-      const formattedDate = formatDate(selectedDate, getLocale(), getTimezone())
-      handleInputChange(e, formattedDate, selectedDate)
+    if (isInputValid && value) {
+      const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
+        month: 'long',
+        year: 'numeric',
+        day: 'numeric',
+        timeZone: getTimezone()
+      })
+      handleInputChange(e, formattedDate)
     }
     onRequestValidateDate?.(value, isInputValid)
     onBlur?.(e)
@@ -191,7 +187,6 @@ const DateInput2 = ({
   return (
     <TextInput
       {...passthroughProps(rest)}
-      // margin={'large'} TODO add this prop to TextInput
       renderLabel={renderLabel}
       onChange={handleInputChange}
       onBlur={handleBlur}
@@ -230,8 +225,8 @@ const DateInput2 = ({
             onDateSelected={handleDateSelected}
             selectedDate={selectedDate}
             visibleMonth={selectedDate}
-            locale={getLocale()}
-            timezone={getTimezone()}
+            locale={locale}
+            timezone={timezone}
             role="listbox"
             renderNextMonthButton={
               <IconButton

package/src/DateInput2/props.ts

@@ -23,18 +23,14 @@
  */
 
 import PropTypes from 'prop-types'
-import type { SyntheticEvent, InputHTMLAttributes } from 'react'
+import type { SyntheticEvent } 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 {
-  OtherHTMLAttributes,
-  Renderable,
-  PropValidators
-} from '@instructure/shared-types'
+import type { Renderable, PropValidators } from '@instructure/shared-types'
 
-type DateInput2OwnProps = {
+type DateInput2Props = {
   /**
    * Specifies the input label.
    */
@@ -60,11 +56,7 @@ type DateInput2OwnProps = {
   /**
    * Callback fired when the input changes.
    */
-  onChange?: (
-    event: React.SyntheticEvent,
-    inputValue: string,
-    dateString: string
-  ) => void
+  onChange?: (event: React.SyntheticEvent, value: string) => void
   /**
    * Callback executed when the input fires a blur event.
    */
@@ -165,27 +157,9 @@ type DateInput2OwnProps = {
     startYear: number
     endYear: number
   }
-
-  /**
-   * Formatting function for how the date should be displayed inside the input field. It will be applied if the user clicks on a date in the date picker of after blur event from the input field.
-   */
-  formatDate?: (isoDate: string, locale: string, timezone: string) => string
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
-  // margin?: Spacing TODO enable this prop
 }
 
-type PropKeys = keyof DateInput2OwnProps
-
-type DateInput2Props = DateInput2OwnProps &
-  OtherHTMLAttributes<
-    DateInput2OwnProps,
-    InputHTMLAttributes<DateInput2OwnProps & Element>
-  >
+type PropKeys = keyof DateInput2Props
 
 const propTypes: PropValidators<PropKeys> = {
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
@@ -209,8 +183,7 @@ const propTypes: PropValidators<PropKeys> = {
   ]),
   locale: PropTypes.string,
   timezone: PropTypes.string,
-  withYearPicker: PropTypes.object,
-  formatDate: PropTypes.func
+  withYearPicker: PropTypes.object
 }
 
 export type { DateInput2Props }

package/src/index.ts

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