@instructure/ui-date-input 9.3.1-snapshot-4 → 9.3.1-snapshot-6

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.3.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v9.3.0...v9.3.1-snapshot-4) (2024-07-25)
+## [9.3.1-snapshot-6](https://github.com/instructure/instructure-ui/compare/v9.3.0...v9.3.1-snapshot-6) (2024-07-25)
 
-**Note:** Version bump only for package @instructure/ui-date-input
+
+### Features
+
+* **ui-date-input,ui-text-input:** add custom validation function and fix small layout issue ([77218be](https://github.com/instructure/instructure-ui/commit/77218be635611c1c674cc6c85d4dceaa76509117))
 
 
 

package/es/DateInput2/index.js

@@ -61,6 +61,7 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
+  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
@@ -98,6 +99,7 @@ const DateInput2 = ({
     });
     handleInputChange(e, formattedDate);
     setShowPopover(false);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(formattedDate, true);
   };
   const validateInput = (onlyRemoveError = false) => {
     // 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`)
@@ -108,11 +110,11 @@ const DateInput2 = ({
       setInputMessages(messages || []);
       return true;
     }
-    if (!onlyRemoveError) {
-      setInputMessages([{
+    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
+      setInputMessages(messages => [{
         type: 'error',
-        text: invalidDateErrorMessage || ''
-      }]);
+        text: invalidDateErrorMessage
+      }, ...messages]);
     }
     return false;
   };
@@ -134,7 +136,6 @@ const DateInput2 = ({
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   };
   const handleBlur = e => {
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     const isInputValid = validateInput(false);
     if (isInputValid && value) {
       const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
@@ -145,6 +146,8 @@ const DateInput2 = ({
       });
       handleInputChange(e, formattedDate);
     }
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, isInputValid);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   };
   return jsx(TextInput, Object.assign({}, passthroughProps(rest), {
     renderLabel: renderLabel,

package/es/DateInput2/props.js

@@ -40,6 +40,7 @@ const propTypes = {
   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,

package/lib/DateInput2/index.js

@@ -70,6 +70,7 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
+  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
@@ -107,6 +108,7 @@ const DateInput2 = ({
     });
     handleInputChange(e, formattedDate);
     setShowPopover(false);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(formattedDate, true);
   };
   const validateInput = (onlyRemoveError = false) => {
     // 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`)
@@ -117,11 +119,11 @@ const DateInput2 = ({
       setInputMessages(messages || []);
       return true;
     }
-    if (!onlyRemoveError) {
-      setInputMessages([{
+    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
+      setInputMessages(messages => [{
         type: 'error',
-        text: invalidDateErrorMessage || ''
-      }]);
+        text: invalidDateErrorMessage
+      }, ...messages]);
     }
     return false;
   };
@@ -143,7 +145,6 @@ const DateInput2 = ({
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   };
   const handleBlur = e => {
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     const isInputValid = validateInput(false);
     if (isInputValid && value) {
       const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
@@ -154,6 +155,8 @@ const DateInput2 = ({
       });
       handleInputChange(e, formattedDate);
     }
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, isInputValid);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   };
   return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
     renderLabel: renderLabel,

package/lib/DateInput2/props.js

@@ -47,6 +47,7 @@ const propTypes = exports.propTypes = {
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
   onRequestShowCalendar: _propTypes.default.func,
   onRequestHideCalendar: _propTypes.default.func,
+  onRequestValidateDate: _propTypes.default.func,
   invalidDateErrorMessage: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   locale: _propTypes.default.string,
   timezone: _propTypes.default.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "9.3.1-snapshot-4",
+  "version": "9.3.1-snapshot-6",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.3.1-snapshot-4",
-    "@instructure/ui-babel-preset": "9.3.1-snapshot-4",
-    "@instructure/ui-buttons": "9.3.1-snapshot-4",
-    "@instructure/ui-scripts": "9.3.1-snapshot-4",
-    "@instructure/ui-test-utils": "9.3.1-snapshot-4",
+    "@instructure/ui-axe-check": "9.3.1-snapshot-6",
+    "@instructure/ui-babel-preset": "9.3.1-snapshot-6",
+    "@instructure/ui-buttons": "9.3.1-snapshot-6",
+    "@instructure/ui-scripts": "9.3.1-snapshot-6",
+    "@instructure/ui-test-utils": "9.3.1-snapshot-6",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -35,20 +35,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.3.1-snapshot-4",
-    "@instructure/shared-types": "9.3.1-snapshot-4",
-    "@instructure/ui-calendar": "9.3.1-snapshot-4",
-    "@instructure/ui-form-field": "9.3.1-snapshot-4",
-    "@instructure/ui-i18n": "9.3.1-snapshot-4",
-    "@instructure/ui-icons": "9.3.1-snapshot-4",
-    "@instructure/ui-popover": "9.3.1-snapshot-4",
-    "@instructure/ui-position": "9.3.1-snapshot-4",
-    "@instructure/ui-prop-types": "9.3.1-snapshot-4",
-    "@instructure/ui-react-utils": "9.3.1-snapshot-4",
-    "@instructure/ui-selectable": "9.3.1-snapshot-4",
-    "@instructure/ui-testable": "9.3.1-snapshot-4",
-    "@instructure/ui-text-input": "9.3.1-snapshot-4",
-    "@instructure/ui-utils": "9.3.1-snapshot-4",
+    "@instructure/emotion": "9.3.1-snapshot-6",
+    "@instructure/shared-types": "9.3.1-snapshot-6",
+    "@instructure/ui-calendar": "9.3.1-snapshot-6",
+    "@instructure/ui-form-field": "9.3.1-snapshot-6",
+    "@instructure/ui-i18n": "9.3.1-snapshot-6",
+    "@instructure/ui-icons": "9.3.1-snapshot-6",
+    "@instructure/ui-popover": "9.3.1-snapshot-6",
+    "@instructure/ui-position": "9.3.1-snapshot-6",
+    "@instructure/ui-prop-types": "9.3.1-snapshot-6",
+    "@instructure/ui-react-utils": "9.3.1-snapshot-6",
+    "@instructure/ui-selectable": "9.3.1-snapshot-6",
+    "@instructure/ui-testable": "9.3.1-snapshot-6",
+    "@instructure/ui-text-input": "9.3.1-snapshot-6",
+    "@instructure/ui-utils": "9.3.1-snapshot-6",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },

package/src/DateInput2/README.md

@@ -1,5 +1,5 @@
 ---
-describes: DateInput
+describes: DateInput2
 ---
 
 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.
@@ -74,7 +74,7 @@ This component is an updated version of [`DateInput`](/#DateInput) that's easier
           invalidDateErrorMessage="Invalid date"
           withYearPicker={{
             screenReaderLabel: 'Year picker',
-            startYear: 1999,
+            startYear: 1900,
             endYear: 2024
           }}
         />
@@ -103,7 +103,7 @@ This component is an updated version of [`DateInput`](/#DateInput) that's easier
         invalidDateErrorMessage="Invalid date"
         withYearPicker={{
           screenReaderLabel: 'Year picker',
-          startYear: 1999,
+          startYear: 1900,
           endYear: 2024
         }}
       />
@@ -112,3 +112,54 @@ This component is an updated version of [`DateInput`](/#DateInput) that's easier
 
   render(<Example />)
   ```
+
+### With custom validation
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [value, setValue] = useState('')
+  const [messages, setMessages] = useState([])
+
+  const handleDateValidation = (dateString, isValidDate) => {
+    if (!isValidDate) {
+      setMessages([{
+        type: 'error',
+        text: 'This is not a valid date'
+      }])
+    } else if (new Date(dateString) < new Date('January 1, 1900')) {
+      setMessages([{
+        type: 'error',
+        text: 'Use date after January 1, 1900'
+      }])
+    } else {
+      setMessages([])
+    }
+  }
+
+  return (
+    <DateInput2
+      renderLabel="Choose a date after January 1, 1900"
+      screenReaderLabels={{
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      }}
+      width="20rem"
+      value={value}
+      messages={messages}
+      onRequestValidateDate={handleDateValidation}
+      onChange={(e, value) => setValue(value)}
+      withYearPicker={{
+        screenReaderLabel: 'Year picker',
+        startYear: 1900,
+        endYear: 2024
+      }}
+    />
+  )
+}
+
+render(<Example />)
+```

package/src/DateInput2/index.tsx

@@ -56,17 +56,7 @@ function isValidMomentDate(
   return moment
     .tz(
       dateString,
-      [
-        moment.ISO_8601,
-        'llll',
-        'LLLL',
-        'lll',
-        'LLL',
-        'll',
-        'LL',
-        'l',
-        'L'
-      ],
+      [moment.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'],
       locale,
       true,
       timezone
@@ -92,6 +82,7 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
+  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
@@ -130,6 +121,7 @@ const DateInput2 = ({
     })
     handleInputChange(e, formattedDate)
     setShowPopover(false)
+    onRequestValidateDate?.(formattedDate, true)
   }
 
   const validateInput = (onlyRemoveError = false): boolean => {
@@ -145,14 +137,16 @@ const DateInput2 = ({
       setInputMessages(messages || [])
       return true
     }
-    if (!onlyRemoveError) {
-      setInputMessages([
+    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
+      setInputMessages((messages) => [
         {
           type: 'error',
-          text: invalidDateErrorMessage || '',
-        }
+          text: invalidDateErrorMessage
+        },
+        ...messages
       ])
     }
+
     return false
   }
 
@@ -176,17 +170,18 @@ const DateInput2 = ({
   }
 
   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)
+      const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
+        month: 'long',
+        year: 'numeric',
+        day: 'numeric',
+        timeZone: getTimezone()
+      })
+      handleInputChange(e, formattedDate)
     }
+    onRequestValidateDate?.(value, isInputValid)
+    onBlur?.(e)
   }
 
   return (

package/src/DateInput2/props.ts

@@ -99,7 +99,18 @@ type DateInput2Props = {
    */
   onRequestHideCalendar?: (event: SyntheticEvent) => void
   /**
-   * The message shown to the user when the date is invalid.
+   * 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.
    **/
   invalidDateErrorMessage?: string
   /**
@@ -165,6 +176,7 @@ const propTypes: PropValidators<PropKeys> = {
   messages: PropTypes.arrayOf(FormPropTypes.message),
   onRequestShowCalendar: PropTypes.func,
   onRequestHideCalendar: PropTypes.func,
+  onRequestValidateDate: PropTypes.func,
   invalidDateErrorMessage: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.string