@instructure/ui-time-select 8.37.1-snapshot-13 → 8.38.0

package/src/TimeSelect/index.tsx

@@ -80,6 +80,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
   static contextType = ApplyLocaleContext
 
   ref: Select | null = null
+
   private readonly _emptyOptionId =
     this.props.deterministicId!('Select-EmptyOption')
 
@@ -144,7 +145,8 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
       this.props.step !== prevProps.step ||
       this.props.format !== prevProps.format ||
       this.props.locale !== prevProps.locale ||
-      this.props.timezone !== prevProps.timezone
+      this.props.timezone !== prevProps.timezone ||
+      this.props.allowNonStepInput !== prevProps.allowNonStepInput
     ) {
       // options change, reset everything
       // when controlled, selection will be preserved
@@ -152,15 +154,35 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
       this.setState(this.getInitialState())
     }
     if (this.props.value !== prevProps.value) {
-      const normalizedValue = this.normalizeISOTime(this.props.value)
+      let newValue: Moment | undefined
+      if (this.props.value) {
+        newValue = DateTime.parse(
+          this.props.value,
+          this.locale(),
+          this.timezone()
+        )
+      }
       // value changed
       const initState = this.getInitialState()
       this.setState(initState)
       // options need to be passed because state is not set immediately
-      let option = this.getOption('value', normalizedValue, initState.options)
-      if (typeof normalizedValue === 'undefined') {
+      let option
+      if (!this.isControlled) {
         // preserve current value when changing from controlled to uncontrolled
-        option = this.getOption('value', this.normalizeISOTime(prevProps.value))
+        if (prevProps.value) {
+          option = this.getOption(
+            'id',
+            this.getFormattedId(
+              DateTime.parse(prevProps.value, this.locale(), this.timezone())
+            )
+          )
+        }
+      } else if (newValue) {
+        option = this.getOption(
+          'id',
+          this.getFormattedId(newValue),
+          initState.options
+        )
       }
       const outsideVal = this.props.value ? this.props.value : ''
       // value does not match an existing option
@@ -178,13 +200,10 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     }
   }
 
-  // value needs to be normalized because e.g. 2022-03-29T19:00Z and
-  // 2022-03-29T19:00:00.000Z refer to the same time in the same timezone.
-  normalizeISOTime(value?: string) {
-    if (!value) {
-      return value
-    }
-    return DateTime.parse(value, this.locale(), this.timezone()).toISOString()
+  getFormattedId(date: Moment) {
+    // ISO8601 strings may contain a space. Remove any spaces before using the
+    // date as the id.
+    return date.toISOString().replace(/\s/g, '')
   }
 
   getInitialState(): TimeSelectState {
@@ -193,33 +212,36 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     return {
       inputValue: initialSelection ? initialSelection.label : '',
       options: initialOptions,
-      filteredOptions: initialOptions,
+      // 288 = 5 min step
+      filteredOptions:
+        initialOptions.length > 288
+          ? initialOptions.filter(
+              (opt) => opt.value.minute() % this.props.step! === 0
+            )
+          : initialOptions,
       isShowingOptions: false,
       highlightedOptionId: initialSelection ? initialSelection.id : undefined,
       selectedOptionId: initialSelection ? initialSelection.id : undefined
     }
   }
 
-  getInitialOption(
-    options: TimeSelectOptions[]
-  ): TimeSelectOptions | undefined {
+  getInitialOption(options: TimeSelectOptions[]) {
     const { value, defaultValue, defaultToFirstOption, format } = this.props
     const initialValue = value || defaultValue
-
     if (typeof initialValue === 'string') {
+      const date = DateTime.parse(initialValue, this.locale(), this.timezone())
       // get option based on value or defaultValue, if provided
-      const option = this.getOption(
-        'value',
-        this.normalizeISOTime(initialValue),
-        options
-      )
+      const option = this.getOption('value', date, options)
       if (option) {
         // value matches an existing option
         return option
       }
       // value does not match an existing option
-      const date = DateTime.parse(initialValue, this.locale(), this.timezone())
-      return { label: format ? date.format(format) : date.toISOString() }
+      return {
+        id: this.getFormattedId(date),
+        label: format ? date.format(format) : date.toISOString(),
+        value: date
+      } as TimeSelectOptions
     }
     // otherwise, return first option, if desired
     if (defaultToFirstOption) {
@@ -232,12 +254,6 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     return options.find((option) => option[field] === value)
   }
 
-  getFormattedId(date: Moment) {
-    // ISO8601 strings may contain a space. Remove any spaces before using the
-    // date as the id.
-    return date.toISOString().replace(/\s/g, '')
-  }
-
   getBaseDate() {
     let baseDate
     const baseValue = this.props.value || this.props.defaultValue
@@ -249,18 +265,20 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     return baseDate.set({ second: 0, millisecond: 0 }).clone()
   }
 
-  generateOptions() {
+  generateOptions(): TimeSelectOptions[] {
     const date = this.getBaseDate()
     const options = []
-
+    const step = this.props.step ? this.props.step : 30
+    const maxMinute = this.props.allowNonStepInput ? 60 : 60 / step
+    const minuteStep = this.props.allowNonStepInput ? 1 : step
     for (let hour = 0; hour < 24; hour++) {
-      for (let minute = 0; minute < 60 / this.props.step!; minute++) {
-        const minutes = minute * this.props.step!
+      for (let minute = 0; minute < maxMinute; minute++) {
+        const minutes = minute * minuteStep
         const newDate = date.set({ hour: hour, minute: minutes })
         // store time options
         options.push({
-          id: this.getFormattedId(newDate), // iso no spaces
-          value: newDate.toISOString(),
+          id: this.getFormattedId(newDate),
+          value: newDate.clone(),
           label: this.props.format
             ? newDate.format(this.props.format)
             : newDate.toISOString()
@@ -271,51 +289,29 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
   }
 
   filterOptions(inputValue: string) {
-    return this.state?.options.filter((option: TimeSelectOptions) =>
-      option.label.toLowerCase().startsWith(inputValue.toLowerCase())
-    )
-  }
-
-  matchValue() {
-    const {
-      inputValue,
-      filteredOptions,
-      highlightedOptionId,
-      selectedOptionId
-    } = this.state
-
-    // an option matching user input exists
-    if (filteredOptions.length === 1) {
-      const onlyOption = filteredOptions[0]
-      // automatically select the matching option
-      if (onlyOption.label.toLowerCase() === inputValue.toLowerCase()) {
-        return {
-          inputValue: onlyOption.label,
-          selectedOptionId: onlyOption.id,
-          filteredOptions: this.filterOptions('')
-        }
-      }
-    }
-    // no match found, return selected option label to input
-    const selectedOption = this.getOption('id', selectedOptionId)
-    if (selectedOption) {
-      return { inputValue: selectedOption.label }
-    }
-    // input value is from highlighted option, not user input
-    if (highlightedOptionId) {
-      if (inputValue === this.getOption('id', highlightedOptionId)!.label) {
-        return {
-          inputValue: '',
-          filteredOptions: this.filterOptions('')
-        }
+    let inputNoSeconds = inputValue
+    // if the input contains seconds disregard them (e.g. if format = LTS)
+    if (inputValue.length > 5) {
+      // e.g. "5:34:"
+      const input = this.parseInputText(inputValue)
+      if (input.isValid()) {
+        input.set({ second: 0 })
+        inputNoSeconds = input.format(this.props.format)
       }
     }
-    // if input was completely cleared, ensure it stays clear
-    // e.g. defaultValue defined, but no selection yet made
-    if (inputValue === '') {
-      return { inputValue: '' }
+
+    if (this.props.allowNonStepInput && inputNoSeconds.length < 3) {
+      // could show too many results, show only step values
+      return this.state?.options.filter((option: TimeSelectOptions) => {
+        return (
+          option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase()) &&
+          option.value.minute() % this.props.step! == 0
+        )
+      })
     }
-    return undefined
+    return this.state?.options.filter((option: TimeSelectOptions) =>
+      option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase())
+    )
   }
 
   handleRef = (node: Select) => {
@@ -323,13 +319,29 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
   }
 
   handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    this.setState({ highlightedOptionId: undefined })
     this.props.onBlur?.(event)
   }
 
   handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value
     const newOptions = this.filterOptions(value)
+    if (newOptions?.length == 1) {
+      // if there is only 1 option, it will be automatically selected except
+      // if in controlled mode (it would commit this change)
+      if (!this.isControlled) {
+        this.setState({ selectedOptionId: newOptions[0].id })
+      }
+      this.setState({ fireChangeOnBlur: newOptions[0] })
+    } else {
+      this.setState({
+        // needs not to lose selectedOptionId in controlled mode otherwise it'd
+        // revert to the default or '' instead of the set value
+        selectedOptionId: this.isControlled
+          ? this.state.selectedOptionId
+          : undefined,
+        fireChangeOnBlur: undefined
+      })
+    }
     this.setState({
       inputValue: value,
       filteredOptions: newOptions,
@@ -347,6 +359,22 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     )
   }
 
+  onKeyDown = (event: React.KeyboardEvent<any>) => {
+    const input = this.parseInputText(this.state.inputValue)
+    if (
+      event.key === 'Enter' &&
+      this.props.allowNonStepInput &&
+      input.isValid()
+    ) {
+      this.setState(() => ({
+        isShowingOptions: false,
+        highlightedOptionId: undefined
+      }))
+      // others are set in handleBlurOrEsc
+    }
+    this.props.onKeyDown?.(event)
+  }
+
   handleShowOptions = (event: React.SyntheticEvent) => {
     this.setState({
       isShowingOptions: true,
@@ -355,8 +383,11 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     this.props.onShowOptions?.(event)
   }
 
-  handleHideOptions: SelectProps['onRequestHideOptions'] = (event) => {
-    const input = this.parseInputText(this.state.inputValue)
+  // Called when the input is blurred (=when clicking outside, tabbing away),
+  // when pressing ESC. NOT called when an item is selected via Enter/click,
+  // (but in this case it will be called later when the input is blurred.)
+  handleBlurOrEsc: SelectProps['onRequestHideOptions'] = (event) => {
+    const { selectedOptionId, inputValue } = this.state
     let defaultValue = ''
     if (this.props.defaultValue) {
       const date = DateTime.parse(
@@ -368,87 +399,81 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
         ? date.format(this.props.format)
         : date.toISOString()
     }
-    if (
-      !this.props.allowNonStepInput ||
-      (this.props.allowNonStepInput &&
-        input.isValid() &&
-        input.minute() % this.props.step! === 0)
-    ) {
-      const { selectedOptionId } = this.state
-      const option = this.getOption('id', selectedOptionId)
-      this.setState(() => ({
-        isShowingOptions: false,
-        highlightedOptionId: undefined,
-        inputValue: selectedOptionId ? option!.label : defaultValue,
-        filteredOptions: this.filterOptions(''),
-        ...this.matchValue()
-      }))
-    } else {
-      this.setState(() => ({
-        isShowingOptions: false,
-        highlightedOptionId: undefined,
-        inputValue: this.state.lastValidInput || defaultValue || '',
-        filteredOptions: this.filterOptions('')
-      }))
+    const selectedOption = this.getOption('id', selectedOptionId)
+    let newInputValue = defaultValue
+    if (selectedOption) {
+      // If there is a selected option use its value in the input field.
+      newInputValue = selectedOption.label
     }
-    this.props.onHideOptions?.(event)
-  }
-
-  handleHighlightOption: SelectProps['onRequestHighlightOption'] = (
-    event: React.SyntheticEvent,
-    { id }
-  ) => {
-    if (id === this._emptyOptionId) return
-    const { type } = event
-    const option = this.getOption('id', id)!.label
-
-    this.setState((state) => ({
-      highlightedOptionId: id,
-      inputValue: type === 'keydown' ? option : state.inputValue
+    // if input was completely cleared, ensure it stays clear
+    // e.g. defaultValue defined, but no selection yet made
+    else if (inputValue === '') {
+      newInputValue = ''
+    }
+    this.setState(() => ({
+      isShowingOptions: false,
+      highlightedOptionId: undefined,
+      inputValue: newInputValue,
+      filteredOptions: this.filterOptions('')
     }))
+    if (this.state.fireChangeOnBlur && (event as any).key !== 'Escape') {
+      this.setState(() => ({ fireChangeOnBlur: undefined }))
+      this.props.onChange?.(event, {
+        value: this.state.fireChangeOnBlur.value.toISOString(),
+        inputText: this.state.fireChangeOnBlur.label
+      })
+    }
+    // TODO only fire this if handleSelectOption was not called before.
+    this.props.onHideOptions?.(event)
   }
 
-  handleSelectOption: SelectProps['onRequestSelectOption'] = (
-    event: React.SyntheticEvent,
-    { id }
-  ) => {
-    if (id === this._emptyOptionId) {
+  // Called when an option is selected via mouse click or Enter.
+  handleSelectOption: SelectProps['onRequestSelectOption'] = (event, data) => {
+    if (data.id === this._emptyOptionId) {
       this.setState({ isShowingOptions: false })
       return
     }
-    const option = this.getOption('id', id)!
-
+    const selectedOption = this.getOption('id', data.id)
     let newInputValue: string
+    const currentSelectedOptionId = this.state.selectedOptionId
     if (this.isControlled) {
+      // in controlled mode we leave to the user to set the value of the
+      // component e.g. in the onChange event handler.
+      // This is accomplished by not setting a selectedOptionId
       const prev = this.getOption('id', this.state.selectedOptionId)
       newInputValue = prev ? prev.label : ''
       this.setState({
-        isShowingOptions: false,
-        inputValue: newInputValue,
-        filteredOptions: this.filterOptions('')
+        isShowingOptions: false
       })
     } else {
-      newInputValue = option.label
+      newInputValue = selectedOption!.label
       this.setState({
         isShowingOptions: false,
-        selectedOptionId: id,
-        inputValue: newInputValue,
-        filteredOptions: this.filterOptions('')
+        selectedOptionId: data.id,
+        inputValue: newInputValue
       })
     }
-
-    if (id !== this.state.selectedOptionId) {
-      this.setState({
-        lastValidInput: newInputValue
-      })
+    if (data.id !== currentSelectedOptionId) {
       this.props.onChange?.(event, {
-        value: option.value,
+        value: selectedOption!.value.toISOString(),
         inputText: newInputValue
       })
     }
     this.props.onHideOptions?.(event)
   }
 
+  handleHighlightOption: SelectProps['onRequestHighlightOption'] = (
+    event,
+    data
+  ) => {
+    if (data.id === this._emptyOptionId) return
+    const option = this.getOption('id', data.id)!.label
+    this.setState((state) => ({
+      highlightedOptionId: data.id,
+      inputValue: event.type === 'keydown' ? option : state.inputValue
+    }))
+  }
+
   renderOptions() {
     const { filteredOptions, highlightedOptionId, selectedOptionId } =
       this.state
@@ -461,7 +486,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
       const { id, label } = option
       return (
         <Select.Option
-          id={id!}
+          id={id}
           key={id}
           isHighlighted={id === highlightedOptionId}
           isSelected={id === selectedOptionId}
@@ -484,31 +509,6 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     )
   }
 
-  onKeyDown = (event: React.KeyboardEvent<any>) => {
-    const input = this.parseInputText(this.state.inputValue)
-    // validate input and if OK close dropdown
-    if (
-      event.key === 'Enter' &&
-      this.props.allowNonStepInput &&
-      input.isValid() &&
-      input.minute() % this.props.step! !== 0 &&
-      this.state.lastValidInput != this.state.inputValue
-    ) {
-      this.setState(() => ({
-        isShowingOptions: false,
-        highlightedOptionId: undefined,
-        filteredOptions: this.filterOptions(''),
-        lastValidInput: this.state.inputValue
-      }))
-      this.props.onChange?.(event, {
-        value: input.toISOString(),
-        inputText: this.state.inputValue
-      })
-      // others are set in OnHideOptions
-    }
-    this.props.onKeyDown?.(event)
-  }
-
   parseInputText = (inputValue: string) => {
     const input = DateTime.parse(
       inputValue,
@@ -580,7 +580,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
         renderAfterInput={renderAfterInput}
         isShowingOptions={isShowingOptions}
         onRequestShowOptions={this.handleShowOptions}
-        onRequestHideOptions={this.handleHideOptions}
+        onRequestHideOptions={this.handleBlurOrEsc}
         onRequestHighlightOption={this.handleHighlightOption}
         onRequestSelectOption={this.handleSelectOption}
         onInputChange={this.handleInputChange}

package/src/TimeSelect/props.ts

@@ -42,6 +42,7 @@ import type {
 } from '@instructure/ui-position'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import { Renderable } from '@instructure/shared-types'
+import type { Moment } from 'moment-timezone'
 
 type PropKeys = keyof TimeSelectOwnProps
 
@@ -78,6 +79,9 @@ type TimeSelectOwnProps = {
   id?: string
   /**
    * The format to use when displaying the possible and currently selected options.
+   * This component currently rounds seconds down to the minute.
+   * Defaults to `LT`, which is localized time without seconds, e.g. "16:45" or
+   * "4:45 PM"
    *
    * See [moment](https://momentjs.com/docs/#/displaying/format/) for the list
    * of available formats.
@@ -141,13 +145,16 @@ type TimeSelectOwnProps = {
    */
   mountNode?: PositionMountNode
   /**
-   * Callback fired when a new option is selected.
+   * Callback fired when a new option is selected. This can happen in the
+   * following ways:
+   * 1. User clicks/presses enter on an option in the dropdown and focuses away
+   * 2. User enters a valid time manually and focuses away
    * @param event - the event object
-   * @param data - additional data
+   * @param data - additional data containing the value and the input string
    */
   onChange?: (
     event: React.SyntheticEvent,
-    data: { value?: string; inputText: string }
+    data: { value: string; inputText: string }
   ) => void
   /**
    * Callback fired when text input receives focus.
@@ -310,8 +317,11 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 type TimeSelectOptions = {
-  id?: string
-  value?: string
+  // the ID of this option, ISO date without spaces
+  id: string
+  // the actual date value
+  value: Moment
+  // the label shown to the user
   label: string
 }
 
@@ -320,18 +330,32 @@ type TimeSelectState = {
    * The current value in the input field, not necessarily a valid time
    */
   inputValue: string
+  /**
+   * All possible options. Filtered down because if `allowNonStepInput` is true
+   * it'd be 24*60 options and filtered by user input.
+   */
   options: TimeSelectOptions[]
+  /**
+   * The options shown in the options list.
+   */
   filteredOptions: TimeSelectOptions[]
   /**
    * Whether to show the options list.
    */
   isShowingOptions: boolean
+  /**
+   * The highlighted option in the dropdown e.g. by hovering,
+   * not necessarily selected
+   */
   highlightedOptionId?: string
+  /**
+   * The ID of the selected option in the options list dropdown
+   */
   selectedOptionId?: string
   /**
-   * Last valid input when nonStepInput is true
+   * fire onChange event when the popup closes?
    */
-  lastValidInput?: string
+  fireChangeOnBlur?: TimeSelectOptions
 }
 
 export type { TimeSelectProps, TimeSelectState, TimeSelectOptions }