@instructure/ui-date-input 9.6.0 → 9.6.1-pr-snapshot-1726659472372

package/src/DateInput2/index.tsx

@@ -44,35 +44,88 @@ 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 parseLocaleDate(dateString: string = '', locale: string, timeZone: string): Date | null {
+  // 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.: "hu-hu")
+  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())
 
-function defaultDateFormatter(
-  dateString: string,
-  locale: string,
-  timezone: string
-) {
-  return new Date(dateString).toLocaleDateString(locale, {
-    month: 'long',
-    year: 'numeric',
-    day: 'numeric',
-    timeZone: timezone
+  let index = 0
+  let day: number | undefined, month: number | undefined, year: number | undefined
+  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++
+    }
   })
+
+  // sensible year limitations
+  if (!year || !month || !day || year < 1000 || year > 9999) return null
+
+  // create utc date from year, month (zero indexed) and day
+  const date = new Date(Date.UTC(year, month - 1, day))
+
+  // Format date string in the provided timezone
+  const parts = new Intl.DateTimeFormat('en-US', {
+      timeZone,
+      year: 'numeric',
+      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: {
+    [key: string]: number
+  } = 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 newTime = new Date(date.getTime() - timeDiff)
+  // Return the UTC Date corresponding to the time in the specified timezone
+  return newTime
 }
 
 /**
 ---
 category: components
 ---
+
+@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
   screenReaderLabels,
   isRequired = false,
   interaction = 'enabled',
-  size = 'medium',
   isInline = false,
   value,
   messages,
@@ -80,46 +133,82 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
-  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
   placeholder,
-  formatDate = defaultDateFormatter,
+  dateFormat,
+  onRequestValidateDate,
   // margin, TODO enable this prop
   ...rest
 }: DateInput2Props) => {
-  const [selectedDate, setSelectedDate] = useState<string>('')
+  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 [inputMessages, setInputMessages] = useState<FormMessage[]>(
     messages || []
   )
   const [showPopover, setShowPopover] = useState<boolean>(false)
-  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])
 
   useEffect(() => {
     setInputMessages(messages || [])
   }, [messages])
 
   useEffect(() => {
-    setSelectedDate(parseDate(value || ''))
-  }, [])
+    const [, utcIsoDate] = parseDate(value)
+    // clear error messages if date becomes valid
+    if (utcIsoDate || !value) {
+      setInputMessages(messages || [])
+    }
+  }, [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))
+  const parseDate = (dateString: string = ''): [string, string] => {
+    let date: Date | null = 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())
     }
-    onChange?.(e, newValue, parsedDate)
+    return date ? [formatDate(date), date.toISOString()] : ['', '']
+  }
+
+  const formatDate = (date: Date): string => {
+    // use formatter function if provided
+    if (typeof dateFormat !== 'string' && 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 handleInputChange = (e: SyntheticEvent, newValue: string) => {
+    const [, utcIsoDate] = parseDate(newValue)
+    onChange?.(e, newValue, utcIsoDate)
   }
 
   const handleDateSelected = (
@@ -127,67 +216,32 @@ const DateInput2 = ({
     _momentDate: Moment,
     e: SyntheticEvent
   ) => {
-    const formattedDate = formatDate(dateString, getLocale(), getTimezone())
-    const parsedDate = parseDate(dateString)
-    setSelectedDate(parsedDate)
-    handleInputChange(e, formattedDate, parsedDate)
     setShowPopover(false)
-    onRequestValidateDate?.(dateString, true)
+    const newValue = formatDate(new Date(dateString))
+    onChange?.(
+      e,
+      newValue,
+      dateString
+    )
+    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): boolean => {
-    // don't validate empty input
-    if (!value || parseDate(value) || selectedDate) {
-      setInputMessages(messages || [])
-      return true
-    }
-    // only show error if there is no user provided validation callback
-    if (
-      !onlyRemoveError &&
-      typeof invalidDateErrorMessage === 'string' &&
-      !onRequestValidateDate
-    ) {
+  const handleBlur = (e: SyntheticEvent) => {
+    const [localeDate, utcIsoDate] = parseDate(value)
+    if (localeDate) {
+      if (localeDate !== value) {
+        onChange?.(e, localeDate, utcIsoDate)
+      }
+    } else if (value && invalidDateErrorMessage) {
       setInputMessages([
-        {
-          type: 'error',
-          text: invalidDateErrorMessage
-        }
+        {type: 'error', text: invalidDateErrorMessage}
       ])
     }
-
-    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: SyntheticEvent) => {
-    const isInputValid = validateInput(false)
-    if (isInputValid && selectedDate) {
-      const formattedDate = formatDate(selectedDate, getLocale(), getTimezone())
-      handleInputChange(e, formattedDate, selectedDate)
-    }
-    onRequestValidateDate?.(value, isInputValid)
-    onBlur?.(e)
+    onRequestValidateDate?.(e, value || '', utcIsoDate)
+    onBlur?.(e, value || '', utcIsoDate)
   }
 
+  const selectedDate = parseDate(value)[1]
   return (
     <TextInput
       {...passthroughProps(rest)}
@@ -199,7 +253,6 @@ const DateInput2 = ({
       value={value}
       placeholder={placeholder}
       width={width}
-      size={size}
       display={isInline ? 'inline-block' : 'block'}
       messages={inputMessages}
       interaction={interaction}
@@ -211,7 +264,6 @@ const DateInput2 = ({
               withBorder={false}
               screenReaderLabel={screenReaderLabels.calendarIcon}
               shape="circle"
-              size={size}
               interaction={interaction}
             >
               <IconCalendarMonthLine />

package/src/DateInput2/props.ts

@@ -45,13 +45,9 @@ type DateInput2OwnProps = {
     nextMonthButton: string
   }
   /**
-   * Specifies the input value.
+   * Specifies the input value *before* formatting. The `formatDate` will be applied to it before displaying. Should be a valid, parsable date.
    */
-  value?: string // TODO: controllable(PropTypes.string)
-  /**
-   * Specifies the input size.
-   */
-  size?: 'small' | 'medium' | 'large'
+  value?: string
   /**
    * Html placeholder text to display when the input has no value. This should
    * be hint text, not a label replacement.
@@ -62,13 +58,13 @@ type DateInput2OwnProps = {
    */
   onChange?: (
     event: React.SyntheticEvent,
-    inputValue: string,
-    dateString: string
+    value: string,
+    utcDateString: string
   ) => void
   /**
    * Callback executed when the input fires a blur event.
    */
-  onBlur?: (event: React.SyntheticEvent) => void
+  onBlur?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void
   /**
    * Specifies if interaction with the input is enabled, disabled, or readonly.
    * When "disabled", the input changes visibly to indicate that it cannot
@@ -98,24 +94,6 @@ type DateInput2OwnProps = {
    * }`
    */
   messages?: FormMessage[]
-  /**
-   * Callback fired requesting the calendar be shown.
-   */
-  onRequestShowCalendar?: (event: SyntheticEvent) => void
-  /**
-   * Callback fired requesting the calendar be hidden.
-   */
-  onRequestHideCalendar?: (event: SyntheticEvent) => void
-  /**
-   * Callback fired when the input is blurred. Feedback should be provided
-   * to the user when this function is called if the selected date or input
-   * value is invalid. The component has an internal check whether the date can
-   * be parsed to a valid date.
-   */
-  onRequestValidateDate?: (
-    value?: string,
-    internalValidationPassed?: boolean
-  ) => void | FormMessage[]
   /**
    * The message shown to the user when the date is invalid. If this prop is not set, validation is bypassed.
    * If it's set to an empty string, validation happens and the input border changes to red if validation hasn't passed.
@@ -165,18 +143,19 @@ 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
+  * By default the date format is determined by the locale but can be changed via this prop to an alternate locale (passing it in as a string) or a custom parser and formatter (both as functions)
+  */
+  dateFormat?: {
+    parser: (input: string) => Date
+    formatter: (date: Date) => 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"`.
+   * Callback executed when the input fires a blur event or a date is selected from the picker.
    */
-  // margin?: Spacing TODO enable this prop
+  onRequestValidateDate?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void
+  // margin?: Spacing // TODO enable this prop
 }
 
 type PropKeys = keyof DateInput2OwnProps
@@ -191,7 +170,6 @@ const propTypes: PropValidators<PropKeys> = {
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   screenReaderLabels: PropTypes.object.isRequired,
   value: controllable(PropTypes.string),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
@@ -200,9 +178,6 @@ const propTypes: PropValidators<PropKeys> = {
   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
@@ -210,7 +185,11 @@ const propTypes: PropValidators<PropKeys> = {
   locale: PropTypes.string,
   timezone: PropTypes.string,
   withYearPicker: PropTypes.object,
-  formatDate: PropTypes.func
+  dateFormat: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  onRequestValidateDate: PropTypes.func,
 }
 
 export type { DateInput2Props }