@instructure/ui-time-select 8.14.1-snapshot.21 → 8.14.1-snapshot.31

package/src/TimeSelect/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { BaseSyntheticEvent, Component } from 'react'
+import React, { Component } from 'react'
 import { Moment } from 'moment-timezone'
 
 import { ApplyLocaleContext, Locale, DateTime } from '@instructure/ui-i18n'
@@ -37,29 +37,27 @@ import { testable } from '@instructure/ui-testable'
 import { Select } from '@instructure/ui-select'
 
 import type { SelectProps } from '@instructure/ui-select'
-import type { TimeSelectProps } from './props'
+import type {
+  TimeSelectProps,
+  TimeSelectState,
+  TimeSelectOptions
+} from './props'
 
 import { allowedProps, propTypes } from './props'
 
-type TimeSelectOptions = {
-  id: string
-  value: string
-  label: string
-}
-
-type TimeSelectState = {
-  inputValue: string
-  options: TimeSelectOptions[]
-  filteredOptions: TimeSelectOptions[]
-  isShowingOptions: boolean
-  highlightedOptionId?: string
-  selectedOptionId?: string
-}
+type GetOption = <F extends keyof TimeSelectOptions>(
+  field: F,
+  value?: TimeSelectOptions[F],
+  options?: TimeSelectOptions[]
+) => TimeSelectOptions | undefined
 
 /**
 ---
 category: components
 ---
+@tsProps
+
+A component used to select a time value.
  **/
 @testable()
 class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
@@ -70,7 +68,6 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
 
   static defaultProps = {
     defaultToFirstOption: false,
-    id: undefined,
     format: 'LT', // see https://momentjs.com/docs/#/displaying/
     step: 30,
     isRequired: false,
@@ -78,27 +75,14 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     visibleOptionsCount: 8,
     placement: 'bottom stretch',
     constrain: 'window',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onChange: (event, data) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onFocus: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onBlur: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onShowOptions: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onHideOptions: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'node' is declared but its value is never read.
-    inputRef: (node) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'node' is declared but its value is never read.
-    listRef: (node) => {},
-    renderEmptyOption: '---',
-    renderBeforeInput: null,
-    renderAfterInput: null
+    renderEmptyOption: '---'
   }
 
   static contextType = ApplyLocaleContext
 
+  ref: Select | null = null
+  private readonly _emptyOptionId = uid('Select-EmptyOption')
+
   constructor(props: TimeSelectProps) {
     super(props)
     this.state = this.getInitialState()
@@ -110,21 +94,17 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     this.setState(this.getInitialState())
   }
 
-  ref: Element | null = null
-  _emptyOptionId = uid('Select-EmptyOption')
-
   focus() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'ref' does not exist on type 'TimeSel... Remove this comment to see the full error message
-    this.ref && this.ref.focus()
+    this.ref?.focus()
   }
 
   get _select() {
     console.warn(
       '_select property is deprecated and will be removed in v9, please use ref instead'
     )
-
     return this.ref
   }
+
   get isControlled() {
     return typeof this.props.value !== 'undefined'
   }
@@ -134,7 +114,6 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
   }
 
   get focused() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'ref' does not exist on type 'TimeSel... Remove this comment to see the full error message
     return this.ref && this.ref.focused
   }
 
@@ -185,7 +164,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     }
   }
 
-  getInitialState() {
+  getInitialState(): TimeSelectState {
     const initialOptions = this.generateOptions()
     const initialSelection = this.getInitialOption(initialOptions)
     return {
@@ -193,16 +172,14 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
       options: initialOptions,
       filteredOptions: initialOptions,
       isShowingOptions: false,
-      highlightedOptionId: initialSelection
-        ? (initialSelection as any).id
-        : undefined,
-      selectedOptionId: initialSelection
-        ? (initialSelection as any).id
-        : undefined
+      highlightedOptionId: initialSelection ? initialSelection.id : undefined,
+      selectedOptionId: initialSelection ? initialSelection.id : undefined
     }
   }
 
-  getInitialOption(options: TimeSelectOptions[]) {
+  getInitialOption(
+    options: TimeSelectOptions[]
+  ): TimeSelectOptions | undefined {
     const { value, defaultValue, defaultToFirstOption, format } = this.props
     const initialValue = value || defaultValue
 
@@ -217,22 +194,21 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
       const date = DateTime.parse(initialValue, this.locale(), this.timezone())
       return { label: format ? date.format(format) : date.toISOString() }
     }
-    // otherwise return first option, if desired
+    // otherwise, return first option, if desired
     if (defaultToFirstOption) {
       return options[0]
     }
     return undefined
   }
 
-  getOption(field: string, value: unknown, options = this.state.options) {
-    return options.find((option: any) => option[field] === value)
+  getOption: GetOption = (field, value, options = this.state.options) => {
+    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.
-    const dateStr = date.toISOString()
-    return dateStr.replace(/\s/g, '')
+    return date.toISOString().replace(/\s/g, '')
   }
 
   getBaseDate() {
@@ -251,10 +227,8 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     const options = []
 
     for (let hour = 0; hour < 24; hour++) {
-      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-      for (let minute = 0; minute < 60 / this.props.step; minute++) {
-        // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-        const minutes = minute * this.props.step
+      for (let minute = 0; minute < 60 / this.props.step!; minute++) {
+        const minutes = minute * this.props.step!
         const newDate = date.set({ hour: hour, minute: minutes })
         // store time options
         options.push({
@@ -317,7 +291,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     return undefined
   }
 
-  handleRef = (node: any) => {
+  handleRef = (node: Select) => {
     this.ref = node
   }
 
@@ -326,16 +300,16 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     this.props.onBlur?.(event)
   }
 
-  handleInputChange = (event: BaseSyntheticEvent) => {
+  handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value
     const newOptions = this.filterOptions(value)
 
-    this.setState((_state: TimeSelectState) => ({
+    this.setState({
       inputValue: value,
       filteredOptions: newOptions,
       highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : undefined,
       isShowingOptions: true
-    }))
+    })
 
     if (!this.state.isShowingOptions) {
       this.props.onShowOptions?.(event)
@@ -368,7 +342,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
         : date.toISOString()
     }
 
-    this.setState((_state: TimeSelectState) => ({
+    this.setState(() => ({
       isShowingOptions: false,
       highlightedOptionId: undefined,
       inputValue: selectedOptionId ? option!.label : prevValue,
@@ -400,7 +374,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
       this.setState({ isShowingOptions: false })
       return
     }
-    const option = this.getOption('id', id)
+    const option = this.getOption('id', id)!
 
     let newInputValue: string
     if (this.isControlled) {
@@ -412,7 +386,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
         filteredOptions: this.filterOptions('')
       })
     } else {
-      newInputValue = option!.label
+      newInputValue = option.label
       this.setState({
         isShowingOptions: false,
         selectedOptionId: id,
@@ -423,7 +397,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
 
     if (id !== this.state.selectedOptionId) {
       this.props.onChange?.(event, {
-        value: option!.value,
+        value: option.value,
         inputText: newInputValue
       })
     }
@@ -438,11 +412,11 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
       return this.renderEmptyOption()
     }
 
-    return filteredOptions.map((option: any) => {
+    return filteredOptions.map((option: TimeSelectOptions) => {
       const { id, label } = option
       return (
         <Select.Option
-          id={id}
+          id={id!}
           key={id}
           isHighlighted={id === highlightedOptionId}
           isSelected={id === selectedOptionId}
@@ -493,7 +467,6 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     } = this.props
 
     const { inputValue, isShowingOptions } = this.state
-
     return (
       <Select
         renderLabel={renderLabel}

package/src/TimeSelect/props.ts

@@ -40,38 +40,6 @@ import type {
   PositionConstraint
 } from '@instructure/ui-position'
 
-type TimeSelectOwnProps = {
-  renderLabel: React.ReactNode | ((...args: any[]) => any)
-  defaultToFirstOption?: boolean
-  value?: any // TODO: controllable(I18nPropTypes.iso8601, 'onChange'),
-  defaultValue?: string
-  id?: string
-  format?: string
-  step?: 5 | 10 | 15 | 20 | 30 | 60
-  interaction?: 'enabled' | 'disabled' | 'readonly'
-  placeholder?: string
-  isRequired?: boolean
-  isInline?: boolean
-  width?: string
-  optionsMaxWidth?: string
-  visibleOptionsCount?: number
-  messages?: FormMessage[]
-  placement?: PlacementPropValues
-  constrain?: PositionConstraint
-  onChange?: (...args: any[]) => any
-  onFocus?: (...args: any[]) => any
-  onBlur?: (...args: any[]) => any
-  onShowOptions?: (...args: any[]) => any
-  onHideOptions?: (...args: any[]) => any
-  inputRef?: (...args: any[]) => any
-  listRef?: (...args: any[]) => any
-  renderEmptyOption?: React.ReactNode | ((...args: any[]) => any)
-  renderBeforeInput?: React.ReactNode | ((...args: any[]) => any)
-  renderAfterInput?: React.ReactNode | ((...args: any[]) => any)
-  locale?: string
-  timezone?: string
-}
-
 type PropKeys = keyof TimeSelectOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
@@ -82,136 +50,133 @@ type TimeSelectProps = TimeSelectOwnProps &
     InputHTMLAttributes<TimeSelectOwnProps>
   >
 
-const propTypes: PropValidators<PropKeys> = {
+type TimeSelectOwnProps = {
   /**
    * The form field label.
    */
-  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  renderLabel: React.ReactNode | (() => React.ReactNode)
   /**
    * Whether to default to the first option when `defaultValue` hasn't been specified.
    */
-  defaultToFirstOption: PropTypes.bool,
+  defaultToFirstOption?: boolean
   /**
    * An ISO 8601 formatted date string representing the current selected value. If defined,
    * the component will act controlled and will not manage its own state.
    */
-  value: controllable(I18nPropTypes.iso8601, 'onChange'),
+  value?: string // TODO: controllable(I18nPropTypes.iso8601, 'onChange'),
   /**
    * An ISO 8601 formatted date string to use if `value` isn't provided.
    */
-  defaultValue: I18nPropTypes.iso8601,
+  defaultValue?: string
   /**
    * The id of the text input. One is generated if not supplied.
    */
-  id: PropTypes.string,
+  id?: string
   /**
    * The format to use when displaying the possible and currently selected options.
    *
    * See [moment](https://momentjs.com/docs/#/displaying/format/) for the list
    * of available formats.
    */
-  format: PropTypes.string,
+  format?: string
   /**
    * The number of minutes to increment by when generating the allowable options.
    */
-  step: PropTypes.oneOf([5, 10, 15, 20, 30, 60]),
+  step?: 5 | 10 | 15 | 20 | 30 | 60
   /**
    * Specifies if interaction with the input is enabled, disabled, or readonly.
    * When "disabled", the input changes visibly to indicate that it cannot
    * receive user interactions. When "readonly" the input still cannot receive
-   * user interactions but it keeps the same styles as if it were enabled.
+   * user interactions, but it keeps the same styles as if it were enabled.
    */
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  interaction?: 'enabled' | 'disabled' | 'readonly'
   /**
    * Html placeholder text to display when the input has no value. This should
    * be hint text, not a label replacement.
    */
-  placeholder: PropTypes.string,
-  /**
-   * Whether or not the text input is required.
-   */
-  isRequired: PropTypes.bool,
+  placeholder?: string
+  isRequired?: boolean
   /**
    * Whether the input is rendered inline with other elements or if it
    * is rendered as a block level element.
    */
-  isInline: PropTypes.bool,
+  isInline?: boolean
   /**
    * The width of the text input.
    */
-  width: PropTypes.string,
+  width?: string
   /**
    * The max width the options list can be before option text wraps. If not
    * set, the list will only display as wide as the text input.
    */
-  optionsMaxWidth: PropTypes.string,
+  optionsMaxWidth?: string
   /**
    * The number of options that should be visible before having to scroll.
    */
-  visibleOptionsCount: PropTypes.number,
+  visibleOptionsCount?: number
   /**
-   * Displays messages and validation for the input. It should be an object
-   * with the following shape:
+   * Displays messages and validation for the input. It should be an array of
+   * objects with the following shape:
    * `{
-   *   text: PropTypes.node,
-   *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+   *     text: ReactNode,
+   *     type: One of: ['error', 'hint', 'success', 'screenreader-only']
    * }`
    */
-  messages: PropTypes.arrayOf(FormPropTypes.message),
+  messages?: FormMessage[]
   /**
    * The placement of the options list.
    */
-  placement: PositionPropTypes.placement,
+  placement?: PlacementPropValues
   /**
    * The parent in which to constrain the placement.
    */
-  constrain: PositionPropTypes.constrain,
+  constrain?: PositionConstraint
   /**
    * Callback fired when a new option is selected.
-   * @param {Object} event - the event object
-   * @param {Object} data - additional data
-   * @param data.value - the value of selected option
+   * @param event - the event object
+   * @param data - additional data
    */
-  onChange: PropTypes.func,
+  onChange?: (
+    event: React.SyntheticEvent,
+    data: { value?: string; inputText: string }
+  ) => void
   /**
    * Callback fired when text input receives focus.
    */
-  onFocus: PropTypes.func,
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void
   /**
    * Callback fired when text input loses focus.
    */
-  onBlur: PropTypes.func,
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
   /**
    * Callback fired when the options list is shown.
    */
-  onShowOptions: PropTypes.func,
+  onShowOptions?: (event: React.SyntheticEvent) => void
   /**
    * Callback fired when the options list is hidden.
    */
-  onHideOptions: PropTypes.func,
+  onHideOptions?: (event: React.SyntheticEvent) => void
   /**
    * A ref to the html `input` element.
    */
-  inputRef: PropTypes.func,
+  inputRef?: (inputElement: HTMLInputElement | null) => void
   /**
    * A ref to the html `ul` element.
    */
-  listRef: PropTypes.func,
+  listRef?: (listElement: HTMLUListElement | null) => void
   /**
    * Content to display in the list when no options are available.
    */
-  renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderEmptyOption?: React.ReactNode | (() => React.ReactNode)
   /**
    * Content to display before the text input. This will commonly be an icon.
    */
-  renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderBeforeInput?: React.ReactNode | (() => React.ReactNode)
   /**
    * Content to display after the text input. This content will replace the
    * default arrow icons.
    */
-  renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /* eslint-disable react/require-default-props */
+  renderAfterInput?: React.ReactNode | (() => React.ReactNode)
   /**
    * A standard language identifier.
    *
@@ -223,7 +188,7 @@ const propTypes: PropValidators<PropKeys> = {
    * The web browser's locale will be used if no value is set via a component property or a context
    * property.
    */
-  locale: PropTypes.string,
+  locale?: string
   /**
    * A timezone identifier in the format: Area/Location
    *
@@ -236,8 +201,39 @@ const propTypes: PropValidators<PropKeys> = {
    * The web browser's timezone will be used if no value is set via a component property or a context
    * property.
    */
+  timezone?: string
+}
+
+const propTypes: PropValidators<PropKeys> = {
+  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  defaultToFirstOption: PropTypes.bool,
+  value: controllable(I18nPropTypes.iso8601, 'onChange'),
+  defaultValue: I18nPropTypes.iso8601,
+  id: PropTypes.string,
+  format: PropTypes.string,
+  step: PropTypes.oneOf([5, 10, 15, 20, 30, 60]),
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  placeholder: PropTypes.string,
+  isRequired: PropTypes.bool,
+  isInline: PropTypes.bool,
+  width: PropTypes.string,
+  optionsMaxWidth: PropTypes.string,
+  visibleOptionsCount: PropTypes.number,
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  placement: PositionPropTypes.placement,
+  constrain: PositionPropTypes.constrain,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onShowOptions: PropTypes.func,
+  onHideOptions: PropTypes.func,
+  inputRef: PropTypes.func,
+  listRef: PropTypes.func,
+  renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  locale: PropTypes.string,
   timezone: PropTypes.string
-  /* eslint-enable react/require-default-props */
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -272,5 +268,20 @@ const allowedProps: AllowedPropKeys = [
   'timezone'
 ]
 
-export type { TimeSelectProps }
+type TimeSelectOptions = {
+  id?: string
+  value?: string
+  label: string
+}
+
+type TimeSelectState = {
+  inputValue: string
+  options: TimeSelectOptions[]
+  filteredOptions: TimeSelectOptions[]
+  isShowingOptions: boolean
+  highlightedOptionId?: string
+  selectedOptionId?: string
+}
+
+export type { TimeSelectProps, TimeSelectState, TimeSelectOptions }
 export { propTypes, allowedProps }