@instructure/ui-date-time-input 10.2.2-snapshot-7 → 10.2.2-snapshot-9

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-7) (2024-09-10)
+## [10.2.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-9) (2024-09-12)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "10.2.2-snapshot-7",
+  "version": "10.2.2-snapshot-9",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.2.2-snapshot-7",
-    "@instructure/ui-test-utils": "10.2.2-snapshot-7",
+    "@instructure/ui-babel-preset": "10.2.2-snapshot-9",
+    "@instructure/ui-test-utils": "10.2.2-snapshot-9",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -32,20 +32,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.2-snapshot-7",
-    "@instructure/shared-types": "10.2.2-snapshot-7",
-    "@instructure/ui-a11y-content": "10.2.2-snapshot-7",
-    "@instructure/ui-buttons": "10.2.2-snapshot-7",
-    "@instructure/ui-calendar": "10.2.2-snapshot-7",
-    "@instructure/ui-date-input": "10.2.2-snapshot-7",
-    "@instructure/ui-form-field": "10.2.2-snapshot-7",
-    "@instructure/ui-i18n": "10.2.2-snapshot-7",
-    "@instructure/ui-icons": "10.2.2-snapshot-7",
-    "@instructure/ui-prop-types": "10.2.2-snapshot-7",
-    "@instructure/ui-react-utils": "10.2.2-snapshot-7",
-    "@instructure/ui-testable": "10.2.2-snapshot-7",
-    "@instructure/ui-time-select": "10.2.2-snapshot-7",
-    "@instructure/ui-utils": "10.2.2-snapshot-7",
+    "@instructure/console": "10.2.2-snapshot-9",
+    "@instructure/shared-types": "10.2.2-snapshot-9",
+    "@instructure/ui-a11y-content": "10.2.2-snapshot-9",
+    "@instructure/ui-buttons": "10.2.2-snapshot-9",
+    "@instructure/ui-calendar": "10.2.2-snapshot-9",
+    "@instructure/ui-date-input": "10.2.2-snapshot-9",
+    "@instructure/ui-form-field": "10.2.2-snapshot-9",
+    "@instructure/ui-i18n": "10.2.2-snapshot-9",
+    "@instructure/ui-icons": "10.2.2-snapshot-9",
+    "@instructure/ui-prop-types": "10.2.2-snapshot-9",
+    "@instructure/ui-react-utils": "10.2.2-snapshot-9",
+    "@instructure/ui-testable": "10.2.2-snapshot-9",
+    "@instructure/ui-time-select": "10.2.2-snapshot-9",
+    "@instructure/ui-utils": "10.2.2-snapshot-9",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/DateTimeInput/README.md

@@ -19,82 +19,163 @@ The component is localized via its `locale` and `timezone` parameters. Both are
 
 #### A DateTimeInput with `columns` layout and a default value:
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  render () {
+- ```js
+  class Example extends React.Component {
+    render() {
+      return (
+        <div style={{ height: '10rem', width: '40em' }}>
+          <DateTimeInput
+            description="Pick a date and time"
+            datePlaceholder="Choose a date"
+            dateRenderLabel="Date"
+            timeRenderLabel="Time"
+            invalidDateTimeMessage="Invalid date!"
+            prevMonthLabel="Previous month"
+            nextMonthLabel="Next month"
+            defaultValue="2018-01-18T13:30"
+            layout="columns"
+          />
+        </div>
+      )
+    }
+  }
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
     return (
-      <div style= { {height: '10rem',width: '40em'}}>
+      <div style={{ height: '10rem', width: '40em' }}>
         <DateTimeInput
           description="Pick a date and time"
           datePlaceholder="Choose a date"
           dateRenderLabel="Date"
           timeRenderLabel="Time"
           invalidDateTimeMessage="Invalid date!"
-          prevMonthLabel='Previous month'
-          nextMonthLabel='Next month'
+          prevMonthLabel="Previous month"
+          nextMonthLabel="Next month"
           defaultValue="2018-01-18T13:30"
           layout="columns"
         />
-    </div>)
+      </div>
+    )
   }
-}
-render(<Example />)
-```
+
+  render(<Example />)
+  ```
 
 #### A required DateInput with `stacked` layout that warns if the value in the past:
 
 This sample code also allows the user to enter an arbitrary time value by setting `allowNonStepInput` to `true`.
 
-```js
----
-type: example
----
-
-class Example extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      value: undefined,
-      messages: []
+- ```js
+  class Example extends React.Component {
+    constructor(props) {
+      super(props)
+      this.state = {
+        value: undefined,
+        messages: []
+      }
     }
-  }
 
-  onChange = (e, isoDate) => {
-    let messages = []
-    if (!isoDate) {
-      // this happens if an invalid date is entered
-      this.setState({ messages:messages, value:undefined })
-      return
+    onChange = (e, isoDate) => {
+      let messages = []
+      if (!isoDate) {
+        // this happens if an invalid date is entered
+        this.setState({ messages: messages, value: undefined })
+        return
+      }
+      const now = new Date()
+      const newValue = new Date(isoDate)
+      if (newValue.valueOf() <= now.valueOf()) {
+        messages = [{ text: 'That date-time is in the past', type: 'hint' }]
+      }
+      this.setState({ value: isoDate, messages })
     }
-    const now = new Date()
-    const newValue = new Date(isoDate)
-    if ( newValue.valueOf() <= now.valueOf()) {
-      messages = [{text: 'That date-time is in the past', type: 'hint'}]
+
+    render() {
+      const text = this.state.value
+        ? new Date(this.state.value).toString()
+        : 'N/A'
+      return (
+        <div style={{ width: '25em' }}>
+          <div style={{ marginBottom: '1em', fontStyle: 'italic' }}>
+            You entered:
+            <br />
+            {text}
+          </div>
+          <div style={{ height: '14rem' }}>
+            <DateTimeInput
+              description={
+                <ScreenReaderContent>Pick a date and time</ScreenReaderContent>
+              }
+              datePlaceholder="Choose"
+              dateRenderLabel="Date"
+              timeRenderLabel="Time"
+              prevMonthLabel="Previous month"
+              nextMonthLabel="Next month"
+              onChange={this.onChange}
+              layout="stacked"
+              value={this.state.value}
+              invalidDateTimeMessage="Invalid date!"
+              messages={this.state.messages}
+              allowNonStepInput={true}
+              isRequired
+            />
+          </div>
+        </div>
+      )
     }
-    this.setState({ value: isoDate, messages })
   }
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [value, setValue] = useState(undefined)
+    const [messages, setMessages] = useState([])
+
+    const onChange = (e, isoDate) => {
+      let newMessages = []
+      if (!isoDate) {
+        // this happens if an invalid date is entered
+        setValue(undefined)
+        setMessages(newMessages)
+        return
+      }
+      const now = new Date()
+      const newValue = new Date(isoDate)
+      if (newValue.valueOf() <= now.valueOf()) {
+        newMessages = [{ text: 'That date-time is in the past', type: 'hint' }]
+      }
+      setValue(isoDate)
+      setMessages(newMessages)
+    }
+
+    const text = value ? new Date(value).toString() : 'N/A'
 
-  render () {
-    const text = this.state.value ? new Date(this.state.value).toString() : 'N/A'
     return (
-      <div style={{width: '25em'}}>
-        <div style={{marginBottom: '1em', fontStyle: 'italic'}}>You entered:<br/>{text}</div>
-        <div style={{height: '14rem'}}>
+      <div style={{ width: '25em' }}>
+        <div style={{ marginBottom: '1em', fontStyle: 'italic' }}>
+          You entered:
+          <br />
+          {text}
+        </div>
+        <div style={{ height: '14rem' }}>
           <DateTimeInput
-            description={<ScreenReaderContent>Pick a date and time</ScreenReaderContent>}
+            description={
+              <ScreenReaderContent>Pick a date and time</ScreenReaderContent>
+            }
             datePlaceholder="Choose"
             dateRenderLabel="Date"
             timeRenderLabel="Time"
-            prevMonthLabel='Previous month'
-            nextMonthLabel='Next month'
-            onChange={this.onChange}
+            prevMonthLabel="Previous month"
+            nextMonthLabel="Next month"
+            onChange={onChange}
             layout="stacked"
-            value={this.state.value}
+            value={value}
             invalidDateTimeMessage="Invalid date!"
-            messages={this.state.messages}
+            messages={messages}
             allowNonStepInput={true}
             isRequired
           />
@@ -102,9 +183,9 @@ class Example extends React.Component {
       </div>
     )
   }
-}
-render(<Example />)
-```
+
+  render(<Example />)
+  ```
 
 #### A disabled DateTimeInput:
 
@@ -128,12 +209,35 @@ type: example
 
 #### A DateTimeInput in a different locale and timezone where these are set from the React `context`:
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  render() {
+- ```js
+  class Example extends React.Component {
+    render() {
+      return (
+        <ApplyLocale locale="fr" timezone="Africa/Nairobi">
+          <div style={{ height: '12rem', width: '40em' }}>
+            <DateTimeInput
+              description="Pick a date and time"
+              datePlaceholder="Choose a date"
+              dateRenderLabel="Date"
+              timeRenderLabel="Time"
+              prevMonthLabel="Previous month"
+              nextMonthLabel="Next month"
+              invalidDateTimeMessage={(dvalue) => {
+                return `'${dvalue} is not valid.`
+              }}
+              layout="columns"
+              defaultValue="2018-01-18T16:00"
+            />
+          </div>
+        </ApplyLocale>
+      )
+    }
+  }
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
     return (
       <ApplyLocale locale="fr" timezone="Africa/Nairobi">
         <div style={{ height: '12rem', width: '40em' }}>
@@ -142,8 +246,8 @@ class Example extends React.Component {
             datePlaceholder="Choose a date"
             dateRenderLabel="Date"
             timeRenderLabel="Time"
-            prevMonthLabel='Previous month'
-            nextMonthLabel='Next month'
+            prevMonthLabel="Previous month"
+            nextMonthLabel="Next month"
             invalidDateTimeMessage={(dvalue) => {
               return `'${dvalue} is not valid.`
             }}
@@ -151,11 +255,12 @@ class Example extends React.Component {
             defaultValue="2018-01-18T16:00"
           />
         </div>
-      </ApplyLocale>)
+      </ApplyLocale>
+    )
   }
-}
-render(<Example />)
-```
+
+  render(<Example />)
+  ```
 
 #### A `DateTimeInput` with some disabled dates that are supplied via a `string` array:
 
@@ -182,43 +287,94 @@ type: example
 
 #### A `DateTimeInput` with some disabled dates that are supplied via a `function`:
 
-```js
----
-type: example
----
-const locale = 'en-us'
-const timezone = 'America/Denver'
-
-class Example extends React.Component {
-  getDisabledDates(isoDateToCheck) {
-    const parsed = moment.tz(isoDateToCheck, [moment.ISO_8601], locale, timezone)
-    const now = moment().locale(locale).tz(timezone)
-    return parsed.isBefore(now)
+- ```js
+  const locale = 'en-us'
+  const timezone = 'America/Denver'
+
+  class Example extends React.Component {
+    getDisabledDates(isoDateToCheck) {
+      const parsed = moment.tz(
+        isoDateToCheck,
+        [moment.ISO_8601],
+        locale,
+        timezone
+      )
+      const now = moment().locale(locale).tz(timezone)
+      return parsed.isBefore(now)
+    }
+    render() {
+      return (
+        <div style={{ height: '12rem', width: '40em' }}>
+          <DateTimeInput
+            description="Pick a date and time"
+            datePlaceholder="Choose a date"
+            dateRenderLabel="Date"
+            timeRenderLabel="Time"
+            invalidDateTimeMessage={(rawDateValue) =>
+              'Invalid date: ' + rawDateValue
+            }
+            disabledDateTimeMessage={(rawDateValue) =>
+              'Disabled date: ' + rawDateValue
+            }
+            prevMonthLabel="Previous month"
+            nextMonthLabel="Next month"
+            defaultValue="2022-04-08T13:30"
+            layout="columns"
+            disabledDates={this.getDisabledDates}
+            locale={locale}
+            timezone={timezone}
+          />
+        </div>
+      )
+    }
   }
-  render() {
+
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const locale = 'en-us'
+    const timezone = 'America/Denver'
+
+    const getDisabledDates = (isoDateToCheck) => {
+      const parsed = moment.tz(
+        isoDateToCheck,
+        [moment.ISO_8601],
+        locale,
+        timezone
+      )
+      const now = moment().locale(locale).tz(timezone)
+      return parsed.isBefore(now)
+    }
+
     return (
-      <div style= { {height: '12rem', width: '40em'}}>
+      <div style={{ height: '12rem', width: '40em' }}>
         <DateTimeInput
           description="Pick a date and time"
           datePlaceholder="Choose a date"
           dateRenderLabel="Date"
           timeRenderLabel="Time"
-          invalidDateTimeMessage={(rawDateValue) => 'Invalid date: ' + rawDateValue}
-          disabledDateTimeMessage={(rawDateValue) => 'Disabled date: ' + rawDateValue}
+          invalidDateTimeMessage={(rawDateValue) =>
+            'Invalid date: ' + rawDateValue
+          }
+          disabledDateTimeMessage={(rawDateValue) =>
+            'Disabled date: ' + rawDateValue
+          }
           prevMonthLabel="Previous month"
           nextMonthLabel="Next month"
           defaultValue="2022-04-08T13:30"
           layout="columns"
-          disabledDates={this.getDisabledDates}
+          disabledDates={getDisabledDates}
           locale={locale}
           timezone={timezone}
         />
-    </div>)
+      </div>
+    )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 #### Programatically reset `DateTimeInput`