@instructure/ui-date-input 10.2.3-snapshot-10 → 10.2.3-snapshot-11

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,38 +42,103 @@ 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,
+function parseLocaleDate(
+  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()
+  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.: 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: 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 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))
+
+  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
+  }
+
+  // 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',
+    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 utcTime = new Date(date.getTime() - timeDiff)
+  // Return the UTC Date corresponding to the time in the specified timezone
+  return utcTime
 }
 
 /**
 ---
 category: components
 ---
+
+@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
   screenReaderLabels,
   isRequired = false,
   interaction = 'enabled',
-  size = 'medium',
   isInline = false,
   value,
   messages,
@@ -82,80 +146,24 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
-  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
   placeholder,
+  dateFormat,
+  onRequestValidateDate,
+  // margin, TODO enable this prop
   ...rest
 }: DateInput2Props) => {
-  const [selectedDate, setSelectedDate] = useState<string>('')
-  const [inputMessages, setInputMessages] = useState<FormMessage[]>(
-    messages || []
-  )
-  const [showPopover, setShowPopover] = useState<boolean>(false)
   const localeContext = useContext(ApplyLocaleContext)
 
-  useEffect(() => {
-    validateInput(true)
-  }, [value])
-
-  useEffect(() => {
-    setInputMessages(messages || [])
-  }, [messages])
-
-  const handleInputChange = (e: SyntheticEvent, value: string) => {
-    onChange?.(e, value)
-  }
-
-  const handleDateSelected = (
-    dateString: string,
-    _momentDate: any, // real type is Moment but used `any` to avoid importing the moment lib
-    e: SyntheticEvent
-  ) => {
-    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      timeZone: getTimezone()
-    })
-    handleInputChange(e, formattedDate)
-    setShowPopover(false)
-    onRequestValidateDate?.(formattedDate, true)
-  }
-
-  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 || '')
-      setInputMessages(messages || [])
-      return true
-    }
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
-      setInputMessages((messages) => [
-        {
-          type: 'error',
-          text: invalidDateErrorMessage
-        },
-        ...messages
-      ])
-    }
-
-    return false
-  }
-
   const getLocale = () => {
     if (locale) {
       return locale
     } else if (localeContext.locale) {
       return localeContext.locale
     }
+    // default to the system's locale
     return Locale.browserLocale()
   }
 
@@ -169,32 +177,114 @@ const DateInput2 = ({
     return Intl.DateTimeFormat().resolvedOptions().timeZone
   }
 
+  const [inputMessages, setInputMessages] = useState<FormMessage[]>(
+    messages || []
+  )
+  const [showPopover, setShowPopover] = useState<boolean>(false)
+
+  useEffect(() => {
+    // don't set input messages if there is an error set already
+    if (!inputMessages) {
+      setInputMessages(messages || [])
+    }
+  }, [messages])
+
+  useEffect(() => {
+    const [, utcIsoDate] = parseDate(value)
+    // clear error messages if date becomes valid
+    if (utcIsoDate || !value) {
+      setInputMessages(messages || [])
+    }
+  }, [value])
+
+  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())
+    }
+    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 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: string) => {
+      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: SyntheticEvent, newValue: string) => {
+    const [, utcIsoDate] = parseDate(newValue)
+    onChange?.(e, newValue, utcIsoDate)
+  }
+
+  const handleDateSelected = (
+    dateString: string,
+    _momentDate: Moment,
+    e: SyntheticEvent
+  ) => {
+    setShowPopover(false)
+    const newValue = formatDate(new Date(dateString))
+    onChange?.(e, newValue, dateString)
+    onRequestValidateDate?.(e, newValue, dateString)
+  }
+
   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()
-      })
-      handleInputChange(e, formattedDate)
+    const [localeDate, utcIsoDate] = parseDate(value)
+    if (localeDate) {
+      if (localeDate !== value) {
+        onChange?.(e, localeDate, utcIsoDate)
+      }
+    } else if (value && invalidDateErrorMessage) {
+      setInputMessages([{ type: 'error', text: invalidDateErrorMessage }])
     }
-    onRequestValidateDate?.(value, isInputValid)
-    onBlur?.(e)
+    onRequestValidateDate?.(e, value || '', utcIsoDate)
+    onBlur?.(e, value || '', utcIsoDate)
   }
 
+  const selectedDate = parseDate(value)[1]
   return (
     <TextInput
       {...passthroughProps(rest)}
+      // margin={'large'} TODO add this prop to TextInput
       renderLabel={renderLabel}
       onChange={handleInputChange}
       onBlur={handleBlur}
       isRequired={isRequired}
       value={value}
-      placeholder={placeholder}
+      placeholder={placeholder ?? getDateFromatHint()}
       width={width}
-      size={size}
       display={isInline ? 'inline-block' : 'block'}
       messages={inputMessages}
       interaction={interaction}
@@ -206,7 +296,6 @@ const DateInput2 = ({
               withBorder={false}
               screenReaderLabel={screenReaderLabels.calendarIcon}
               shape="circle"
-              size={size}
               interaction={interaction}
             >
               <IconCalendarMonthLine />
@@ -225,8 +314,8 @@ const DateInput2 = ({
             onDateSelected={handleDateSelected}
             selectedDate={selectedDate}
             visibleMonth={selectedDate}
-            locale={locale}
-            timezone={timezone}
+            locale={getLocale()}
+            timezone={getTimezone()}
             role="listbox"
             renderNextMonthButton={
               <IconButton

package/src/DateInput2/props.ts

@@ -23,14 +23,18 @@
  */
 
 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.
    */
@@ -43,24 +47,27 @@ type DateInput2Props = {
   /**
    * Specifies the input value.
    */
-  value?: string // TODO: controllable(PropTypes.string)
+  value?: string
   /**
-   * Specifies the input size.
-   */
-  size?: 'small' | 'medium' | 'large'
-  /**
-   * Html placeholder text to display when the input has no value. This should
-   * be hint text, not a label replacement.
+   * Placeholder text for the input field. If it's left undefined it will display a hint for the date format (like `DD/MM/YYYY`).
    */
   placeholder?: string
   /**
    * Callback fired when the input changes.
    */
-  onChange?: (event: React.SyntheticEvent, value: string) => void
+  onChange?: (
+    event: React.SyntheticEvent,
+    inputValue: 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
@@ -90,24 +97,6 @@ type DateInput2Props = {
    * }`
    */
   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.
@@ -135,7 +124,7 @@ type DateInput2Props = {
    * This property can also be set via a context property and if both are set
    * then the component property takes precedence over the context property.
    *
-   * The web browser's timezone will be used if no value is set via a component
+   * The system timezone will be used if no value is set via a component
    * property or a context property.
    **/
   timezone?: string
@@ -157,15 +146,39 @@ type DateInput2Props = {
     startYear: number
     endYear: number
   }
+  /**
+   * 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 | null
+        formatter: (date: Date) => string
+      }
+    | string
+
+  /**
+   * Callback executed when the input fires a blur event or a date is selected from the picker.
+   */
+  onRequestValidateDate?: (
+    event: React.SyntheticEvent,
+    value: string,
+    utcDateString: string
+  ) => void
+  // margin?: Spacing // TODO enable this prop
 }
 
-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,
   screenReaderLabels: PropTypes.object.isRequired,
   value: controllable(PropTypes.string),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
@@ -174,16 +187,15 @@ 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
   ]),
   locale: PropTypes.string,
   timezone: PropTypes.string,
-  withYearPicker: PropTypes.object
+  withYearPicker: PropTypes.object,
+  dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onRequestValidateDate: PropTypes.func
 }
 
 export type { DateInput2Props }