@instructure/ui-date-input 9.2.1-snapshot-14 → 9.2.1-snapshot-16

package/src/DateInput/README.md

@@ -2,38 +2,9 @@
 describes: DateInput
 ---
 
-The `DateInput` component provides a visual interface for inputting date data.
-
-### Default config
-
-For ease of use in most situations, the `DateInput` component provides a default
-configuration. The default configuration can be overridden by providing props
-to the `DateInput` component.
-
-```javascript
----
-type: example
----
-class Example extends React.Component {
-  state = { value: '' }
+> **Important:** You can now use are updated version [`DateInput2`](/#DateInput2) which is easier to configure for developers, has a better UX, better accessibility features and a year picker. We recommend using that instead of `DateInput` which will be deprecated in the future.
 
-  render () {
-    return (
-      <DateInput
-        renderLabel="Choose a date"
-        assistiveText="Type a date or use arrow keys to navigate date picker."
-        width="20rem"
-        isInline
-        value={this.state.value}
-        onChange={(e, value)=> this.setState({value:value.value})}
-        invalidDateErrorMessage="Invalid date"
-      />
-    )
-  }
-}
-
-render(<Example />)
-```
+The `DateInput` component provides a visual interface for inputting date data.
 
 ### Composing a DateInput in your Application
 

package/src/DateInput/index.tsx

@@ -59,8 +59,6 @@ import type { FormMessage } from '@instructure/ui-form-field'
 ---
 category: components
 ---
-The `DateInput` component provides a visual interface for inputting date data.
-See <https://instructure.design/#DateInput/>
 **/
 @withStyle(generateStyle, null)
 @testable()

package/src/DateInput/props.ts

@@ -250,6 +250,24 @@ type DateInputOwnProps = {
    * property or a context property.
    **/
   timezone?: string
+
+  /**
+   * If set, years can be picked from a dropdown.
+   * It accepts an object.
+   * screenReaderLabel: string // e.g.: i18n("pick a year")
+   *
+   * onRequestYearChange?:(e: React.MouseEvent,requestedYear: number): void // if set, on year change, only this will be called and no internal change will take place
+   *
+   * startYear: number // e.g.: 2001, sets the start year of the selectable list
+   *
+   * endYear: number // e.g.: 2030, sets the end year of the selectable list
+   */
+  withYearPicker?: {
+    screenReaderLabel: string
+    onRequestYearChange?: (e: any, requestedYear: number) => void
+    startYear: number
+    endYear: number
+  }
 }
 
 type PropKeys = keyof DateInputOwnProps
@@ -308,7 +326,8 @@ const propTypes: PropValidators<PropKeys> = {
     PropTypes.string
   ]),
   locale: PropTypes.string,
-  timezone: PropTypes.string
+  timezone: PropTypes.string,
+  withYearPicker: PropTypes.object
 }
 
 const allowedProps: AllowedPropKeys = [

package/src/DateInput2/README.md

@@ -0,0 +1,114 @@
+---
+describes: DateInput
+---
+
+This component is an updated version of [`DateInput`](/#DateInput) that's easier to configure for developers, has a better UX, better accessibility features and a year picker. We recommend using this instead of `DateInput` which will be deprecated in the future.
+
+### Minimal config
+
+- ```js
+  class Example extends React.Component {
+    state = { value: '' }
+
+    render() {
+      return (
+        <DateInput2
+          renderLabel="Choose a date"
+          screenReaderLabels={{
+            calendarIcon: 'Calendar',
+            nextMonthButton: 'Next month',
+            prevMonthButton: 'Previous month'
+          }}
+          value={this.state.value}
+          width="20rem"
+          onChange={(e, value) => this.setState({ value })}
+          invalidDateErrorMessage="Invalid date"
+        />
+      )
+    }
+  }
+
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [value, setValue] = useState('')
+    return (
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        value={value}
+        width="20rem"
+        onChange={(e, value) => setValue(value)}
+        invalidDateErrorMessage="Invalid date"
+      />
+    )
+  }
+
+  render(<Example />)
+  ```
+
+### With year picker
+
+- ```js
+  class Example extends React.Component {
+    state = { value: '' }
+
+    render() {
+      return (
+        <DateInput2
+          renderLabel="Choose a date"
+          screenReaderLabels={{
+            calendarIcon: 'Calendar',
+            nextMonthButton: 'Next month',
+            prevMonthButton: 'Previous month'
+          }}
+          width="20rem"
+          value={this.state.value}
+          onChange={(e, value) => this.setState({ value })}
+          invalidDateErrorMessage="Invalid date"
+          withYearPicker={{
+            screenReaderLabel: 'Year picker',
+            startYear: 1999,
+            endYear: 2024
+          }}
+        />
+      )
+    }
+  }
+
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [value, setValue] = useState('')
+
+    return (
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        width="20rem"
+        value={value}
+        onChange={(e, value) => setValue(value)}
+        invalidDateErrorMessage="Invalid date"
+        withYearPicker={{
+          screenReaderLabel: 'Year picker',
+          startYear: 1999,
+          endYear: 2024
+        }}
+      />
+    )
+  }
+
+  render(<Example />)
+  ```

package/src/DateInput2/index.tsx

@@ -0,0 +1,264 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @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 {
+  IconCalendarMonthLine,
+  IconArrowOpenEndSolid,
+  IconArrowOpenStartSolid
+} from '@instructure/ui-icons'
+import { Popover } from '@instructure/ui-popover'
+import { TextInput } from '@instructure/ui-text-input'
+import { passthroughProps } from '@instructure/ui-react-utils'
+
+import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n'
+import { jsx } from '@instructure/emotion'
+
+import { propTypes } from './props'
+import type { DateInput2Props } from './props'
+import type { FormMessage } from '@instructure/ui-form-field'
+
+function isValidDate(dateString: string): boolean {
+  return !isNaN(new Date(dateString).getTime())
+}
+
+function isValidMomentDate(
+  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()
+}
+
+/**
+---
+category: components
+---
+**/
+const DateInput2 = ({
+  renderLabel,
+  screenReaderLabels,
+  isRequired = false,
+  interaction = 'enabled',
+  size = 'medium',
+  isInline = false,
+  value,
+  messages,
+  width,
+  onChange,
+  onBlur,
+  withYearPicker,
+  invalidDateErrorMessage,
+  locale,
+  timezone,
+  placeholder,
+  ...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)
+  }
+
+  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) {
+      setInputMessages([
+        {
+          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) => {
+    onBlur?.(e)
+    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)
+    }
+  }
+
+  return (
+    <TextInput
+      {...passthroughProps(rest)}
+      renderLabel={renderLabel}
+      onChange={handleInputChange}
+      onBlur={handleBlur}
+      isRequired={isRequired}
+      value={value}
+      placeholder={placeholder}
+      width={width}
+      size={size}
+      display={isInline ? 'inline-block' : 'block'}
+      messages={inputMessages}
+      interaction={interaction}
+      renderAfterInput={
+        <Popover
+          renderTrigger={
+            <IconButton
+              withBackground={false}
+              withBorder={false}
+              screenReaderLabel={screenReaderLabels.calendarIcon}
+              shape="circle"
+              size={size}
+              interaction={interaction}
+            >
+              <IconCalendarMonthLine />
+            </IconButton>
+          }
+          isShowingContent={showPopover}
+          onShowContent={() => setShowPopover(true)}
+          onHideContent={() => setShowPopover(false)}
+          on="click"
+          shouldContainFocus
+          shouldReturnFocus
+          shouldCloseOnDocumentClick
+        >
+          <Calendar
+            withYearPicker={withYearPicker}
+            onDateSelected={handleDateSelected}
+            selectedDate={selectedDate}
+            visibleMonth={selectedDate}
+            locale={locale}
+            timezone={timezone}
+            role="listbox"
+            renderNextMonthButton={
+              <IconButton
+                size="small"
+                withBackground={false}
+                withBorder={false}
+                renderIcon={<IconArrowOpenEndSolid color="primary" />}
+                screenReaderLabel={screenReaderLabels.nextMonthButton}
+              />
+            }
+            renderPrevMonthButton={
+              <IconButton
+                size="small"
+                withBackground={false}
+                withBorder={false}
+                renderIcon={<IconArrowOpenStartSolid color="primary" />}
+                screenReaderLabel={screenReaderLabels.prevMonthButton}
+              />
+            }
+          />
+        </Popover>
+      }
+    />
+  )
+}
+
+DateInput2.propTypes = propTypes
+
+export default DateInput2
+export { DateInput2 }

package/src/DateInput2/props.ts

@@ -0,0 +1,178 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+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 { Renderable, PropValidators } from '@instructure/shared-types'
+
+type DateInput2Props = {
+  /**
+   * Specifies the input label.
+   */
+  renderLabel: Renderable
+  screenReaderLabels: {
+    calendarIcon: string
+    prevMonthButton: string
+    nextMonthButton: string
+  }
+  /**
+   * Specifies the input value.
+   */
+  value?: string // TODO: controllable(PropTypes.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?: string
+  /**
+   * Callback fired when the input changes.
+   */
+  onChange?: (event: React.SyntheticEvent, value: string) => void
+  /**
+   * Callback executed when the input fires a blur event.
+   */
+  onBlur?: (event: React.SyntheticEvent) => void
+  /**
+   * 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.
+   */
+  interaction?: 'enabled' | 'disabled' | 'readonly'
+  /**
+   * Specifies if the input is required.
+   */
+  isRequired?: boolean
+  /**
+   * Controls whether the input is rendered inline with other elements or if it
+   * is rendered as a block level element.
+   */
+  isInline?: boolean
+  /**
+   * Specifies the width of the input.
+   */
+  width?: string
+  /**
+   * Displays messages and validation for the input. It should be an object
+   * with the following shape:
+   * `{
+   *   text: PropTypes.node,
+   *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+   * }`
+   */
+  messages?: FormMessage[]
+  /**
+   * Callback fired requesting the calendar be shown.
+   */
+  onRequestShowCalendar?: (event: SyntheticEvent) => void
+  /**
+   * Callback fired requesting the calendar be hidden.
+   */
+  onRequestHideCalendar?: (event: SyntheticEvent) => void
+  /**
+   * The message shown to the user when the date is invalid.
+   **/
+  invalidDateErrorMessage?: string
+  /**
+   * A standard language identifier.
+   *
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#locales) for
+   * more details.
+   *
+   * 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 locale will be used if no value is set via a component
+   * property or a context property.
+   **/
+  locale?: string
+  /**
+   * A timezone identifier in the format: *Area/Location*
+   *
+   * See [List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the list
+   * of possible options.
+   *
+   * 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
+   * property or a context property.
+   **/
+  timezone?: string
+
+  /**
+   * If set, years can be picked from a dropdown.
+   * It accepts an object.
+   * screenReaderLabel: string // e.g.: i18n("pick a year")
+   *
+   * onRequestYearChange?:(e: React.MouseEvent,requestedYear: number): void // if set, on year change, only this will be called and no internal change will take place
+   *
+   * startYear: number // e.g.: 2001, sets the start year of the selectable list
+   *
+   * endYear: number // e.g.: 2030, sets the end year of the selectable list
+   */
+  withYearPicker?: {
+    screenReaderLabel: string
+    onRequestYearChange?: (e: SyntheticEvent, requestedYear: number) => void
+    startYear: number
+    endYear: number
+  }
+}
+
+type PropKeys = keyof DateInput2Props
+
+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,
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  isRequired: PropTypes.bool,
+  isInline: PropTypes.bool,
+  width: PropTypes.string,
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  onRequestShowCalendar: PropTypes.func,
+  onRequestHideCalendar: PropTypes.func,
+  invalidDateErrorMessage: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string
+  ]),
+  locale: PropTypes.string,
+  timezone: PropTypes.string,
+  withYearPicker: PropTypes.object
+}
+
+export type { DateInput2Props }
+export { propTypes }

package/src/index.ts

@@ -23,4 +23,5 @@
  */
 
 export { DateInput } from './DateInput'
+export { DateInput2 } from './DateInput2'
 export type { DateInputProps } from './DateInput/props'

package/tsconfig.build.json

@@ -10,6 +10,9 @@
     {
       "path": "../ui-babel-preset/tsconfig.build.json"
     },
+    {
+      "path": "../ui-buttons/tsconfig.build.json"
+    },
     {
       "path": "../ui-test-utils/tsconfig.build.json"
     },