@instructure/ui-date-input 10.26.1-snapshot-2 → 10.26.2

package/src/DateInput2/index.tsx

@@ -22,7 +22,13 @@
  * SOFTWARE.
  */
 
-import { useState, useEffect, forwardRef, ForwardedRef } from 'react'
+import {
+  useState,
+  useEffect,
+  forwardRef,
+  ForwardedRef,
+  ValidationMap
+} from 'react'
 import type { SyntheticEvent } from 'react'
 import { Calendar } from '@instructure/ui-calendar'
 import { IconButton } from '@instructure/ui-buttons'
@@ -36,6 +42,7 @@ import { TextInput } from '@instructure/ui-text-input'
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
 import { getLocale, getTimezone } from '@instructure/ui-i18n'
 
+import { propTypes } from './props'
 import type { DateInput2Props } from './props'
 import type { FormMessage } from '@instructure/ui-form-field'
 import type { Moment } from '@instructure/ui-i18n'
@@ -123,6 +130,7 @@ function parseLocaleDate(
 category: components
 ---
 **/
+// eslint-disable-next-line react/display-name
 const DateInput2 = forwardRef(
   (
     {
@@ -333,8 +341,7 @@ const DateInput2 = forwardRef(
   }
 )
 
-// TODO this is probably needed?
-DateInput2.displayName = 'DateInput2'
+DateInput2.propTypes = propTypes as ValidationMap<DateInput2Props>
 
 export default DateInput2
 export { DateInput2 }

package/src/DateInput2/props.ts

@@ -22,9 +22,17 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 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 { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
+import type {
+  OtherHTMLAttributes,
+  Renderable,
+  PropValidators
+} from '@instructure/shared-types'
 import type { Spacing } from '@instructure/emotion'
 
 type DateInput2OwnProps = {
@@ -82,10 +90,12 @@ type DateInput2OwnProps = {
    */
   width?: string
   /**
-   * Displays informational and error messages, used for input validation,
-   * can also display screenreader-only messages.
-   * Also changes the border color of the component on success/error.
-   * This is automatically set to `invalidDateErrorMessage` when the date is invalid
+   * 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[]
   /**
@@ -178,9 +188,40 @@ type DateInput2OwnProps = {
   inputRef?: (inputElement: HTMLInputElement | null) => void
 }
 
+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),
+  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),
+  invalidDateErrorMessage: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string
+  ]),
+  locale: PropTypes.string,
+  timezone: PropTypes.string,
+  withYearPicker: PropTypes.object,
+  dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onRequestValidateDate: PropTypes.func,
+  renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  margin: PropTypes.string,
+  disabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+  inputRef: PropTypes.func
+}
+
 export type { DateInput2Props }
+export { propTypes }

package/tsconfig.build.json

@@ -15,9 +15,11 @@
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-popover/tsconfig.build.json" },
     { "path": "../ui-position/tsconfig.build.json" },
+    { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-selectable/tsconfig.build.json" },
     { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-text-input/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-i18n/tsconfig.build.json" },